Velocidad de Carga
Lección 62 de 100. Módulo de Diseño SEO/Seo Técnico
El SEO no lo es todo, si no una pieza del puzzle llamado Marketing.
By Natan Valencia.
ÍNDICE
Contenido
¿Cuántas veces os ha ocurrido que estáis buscando una pagina y parece que tarda una eternidad en cargar? Hoy en día la paciencia es muy corta para casi todo, queremos las cosas para antes de ayer.
Cualquier web que tarde más de 3 segundos en cargar el usuario medio la cierra en un 90% de los casos por lo que es necesario tener una web ágil no solo por el SEO sino por la experiencia del usuario.
En la página para desarrolladores de web de Google cita exactamente que la velocidad de carga es un factor de posicionamiento; dice así:
La velocidad ahora se usa como un factor de clasificación para las búsquedas. Los usuarios quieren encontrar respuestas a sus preguntas rápidamente y los datos muestran que las personas realmente se preocupan por la rapidez con la que se cargan sus páginas.
DEFINICIONES
Nos referimos a velocidad de carga a los segundos que tarda la web a posicionar medida por alguna de las plataformas que google nos recomienda. Es uno de los factores más importantes para el posicionamiento web y para la experiencia del usuario.
PLANTILLAS PARA DISEÑAR TU WEB
Descárgate las plantillas necesarias para elaborar tu página Web y comienza a trabajar en tu proyecto con garantía de éxito. https://www.mercaderesdigitales.com/producto/herramientas-y-plantillas-para-seo/
MONTAJE
En la web de desarroladores de Google nos pide que hagamos lo siguientes pasos: medir , optimizar , monitorear y repetir .
MEDIR:
Para ello utilizaremos alguna de estas herramientas que veremos después:
PageSpeed Insights , una herramienta en línea que muestra datos de campo de velocidad para su sitio, junto con sugerencias de optimizaciones comunes para mejorarlo.
Lighthouse , una herramienta de laboratorio que brinda asesoramiento personalizado sobre cómo mejorar su sitio web en términos de rendimiento, accesibilidad, PWA, SEO y otras prácticas recomendadas.
Gtmetrix. Es quizas la más completa porque nos da una serie de parametros en los que fallamos que después podemos optimizar porque nos da las posible soluciones.
OPTIMIZAR
Aunque cada proyecto es diferente y puede que haya alguna web que necesitemos que tenga un diseño muy bueno con mucha calidad de imagenes, etc y por tanto que cargue más lento, este caso no es la norma.
Usualmente tenemos que tener en cuenta los siguientes factores de optimización que en el apartado de herramientas vamos a desarrollar con los plugins y mejoras que nos van a ayudar.
Los factores de posicionamiento son:
1. Activar la compresión
Utilice Gzip, una aplicación para la compresión de archivos, para reducir el tamaño de sus archivos CSS, HTML y JavaScript que sean mayores de 150 bytes.
No utilice gzip en los archivos de imagen. En su lugar, comprímalos en un programa como Photoshop, donde podrá mantener el control sobre la calidad de la imagen.
2. Reducir CSS, JavaScript y HTML
Al optimizar tu código (incluyendo la eliminación de espacios, comas y otros caracteres innecesarios), puede aumentar drásticamente la velocidad de su página. Elimine también los comentarios del código, el formato y el código no utilizado.
3. Aprovechar la caché del navegador
Los navegadores almacenan en caché mucha información (hojas de estilo, imágenes, archivos JavaScript, etc.) para que cuando un visitante vuelva a su sitio, el navegador no tenga que recargar toda la página. Utiliza una herramienta como YSlow para ver si ya tienes una fecha de caducidad establecida para tu caché. A continuación, establezca en su cabecera “caduca” el tiempo que desea que esa información se almacene en la caché. En muchos casos, a menos que el diseño de su sitio cambie con frecuencia, un año es un período de tiempo razonable. Google tiene más información sobre cómo aprovechar la memoria caché aquí.
4. Mejorar el tiempo de respuesta del servidor
El tiempo de respuesta de tu servidor se ve afectado por la cantidad de tráfico que recibe, los recursos que utiliza cada página, el software que utiliza su servidor y la solución de alojamiento que utiliza. Para mejorar el tiempo de respuesta de su servidor, busque cuellos de botella en el rendimiento, como consultas lentas a la base de datos, enrutamiento lento o falta de memoria adecuada, y arréglelos. El tiempo de respuesta óptimo del servidor es inferior a 200 ms. Más información sobre cómo optimizar el tiempo hasta el primer byte.
Para ello te recomendamos que utilices uno de estos servidores que tienen una calidad muy fiable por su buena velocidad de carga;
5. Utiliza una red de distribución de contenidos
Las redes de distribución de contenidos (CDN), también llamadas redes de entrega de contenidos, son redes de servidores que se utilizan para distribuir la carga de entrega de contenidos. Básicamente, las copias de su sitio se almacenan en múltiples centros de datos geográficamente diversos para que los usuarios tengan un acceso más rápido y fiable a su sitio.
6. Optimiza las imágenes
Asegúrese de que sus imágenes no sean más grandes de lo necesario, que estén en el formato de archivo adecuado (los PNG suelen ser mejores para los gráficos con menos de 16 colores, mientras que los JPEG suelen ser mejores para las fotografías) y que estén comprimidas para la web.
7. Otras configuraciones :
Utiliza los sprites CSS para crear una plantilla para las imágenes que utilizas con frecuencia en tu sitio, como botones e iconos. Los sprites CSS combinan tus imágenes en una sola imagen grande que se carga de una sola vez (lo que significa menos peticiones HTTP) y luego muestran sólo las secciones que quieres mostrar. Esto significa que estás ahorrando tiempo de carga al no hacer que los usuarios esperen a que se carguen varias imágenes.
Identifica cuántos Javascript carga tu página y trata de unificarlos en el menor número posible de ellos. Puedes usar alguna herramientas como JS y CSS Optmizer.
Unificas las hojas de estilo CSS en un menor número de ellas, y trata de minificarlos (ahorrar código). Reduciras ampliamente el número de peticiones a servidor que hace tu página
Número de peticiones HTTP
Cuanto mayor sea el número de peticiones HTTP de un navegador a un servidor/servidor a otro, mayor será el consumo de ancho de banda. Por lo tanto, mantenga el número de peticiones HTTP al mínimo posible.
HERRAMIENTAS
Para medir la velocidad de carga podemos utilizar varias webs que nos analizan los datos y nos dan la solución. La más utilizada es gtmetrix y en este video nos explican como interpretar los resutados
Herramientas de Caché
Una de las mejores herramientas para optimizar tu sitio web es Wp rocket que es de pago pero te soluciona la mayoria de las optimizaciones. No obstante hay alternativas gratuitas
En este video te enseñan David Ibiza la configuración del sitio
Una de las mejores alternativas es el plugin total caché, alvaro fontela nos lo cuenta en este video. Aparte de la optimización de la caché tambien nos ayuda a comprmir el gzip.
Optimizar javascrypt y css
Uno de los mejores plugins para minificar css y Js es Autoptimice que es gratuito.
En esta video nos lo explica Alvaro Fontela
Compresión de Imagenes.
Las imágenes y videos son la parte que más ralentiza una web habitualmente por ello tenemos que previamente a publicar la web optimizar el peso utizando por ejemplo el photoshop y una vez abramos la imagen darle a guardar para paginas web y en ese momento el formato se reducirá mucho.
Para videos es mejor utilizar un video insertado desde youtube con lo que publicando en la entrada la url de youtube nuestro visitante lo verá sin que moleste a la carga de la página.
Existe un plugin llamado smush que en su versión gratuita nos permite optimizar todas las imágenes que tenemos subidas a la web e incluso cada vez que subimos una nueva nos la comprime.
En este video podéis ver el funcionamiento
CAJA DE HERRAMIENTAS DE IKREA.DIGITAL
Accede a Recursos y Herramientas muy útiles para elaborar tu negocio. Te puedes descargar plantillas, planes de negocio, hojas de excell, informes y mucho más elaborado por los profesores del curso de Ikrea.Digital
¿Quieres que te acompañemos en el montaje de tu negocio? Cuéntanos un poco y te ayudamos con Mentorías personalizadas.
MÁS INFORMACIÓN:
Web de Google
https://developers.google.com/web/updates/2018/07/search-ads-speed
El Blog de alvaro fontela que es experto en optimización de wordpress
https://alvarofontela.com/blog/
Mejorar la carga de la pagina de un ecommerce por Woodemia
https://woodemia.com/mejorar-el-tiempo-de-carga-de-woocommerce-para-aumentar-ventas/
Blog de Carlos de Blas
Anterior Instrucción
Siguiente Instrucción
¿Quieres ver todas las instrucciones para montar tu Negocio Digital?
¿Quieres compartir experiencias, dudas e información útil?
Entra en Nuestro grupo de Telegram para estar al día con las últimas Novedades y conocer Mercaderes digitales como tu con tus mismos intereses y sueños.
Me gustaría seguirte en mis Redes Sociales, son estas:
Mercaderes Digitales – Reservados todos los derechos