La velocidad de una página es un importante factor de clasificación del motor de búsqueda que se busque abordar, y la herramienta de Google PageSpeed Insights es una gran manera de determinar cómo optimizar aún más tu sitio y evitar los errores de velocidad de tu sitio web.
PageSpeed Insights analiza la página de la URL que especifique y proporciona una puntuación (de máximo 100) junto con una lista de las “soluciones” para los temas que están disminuyendo la velocidad de página.
Pero si no es un desarrollador o conocedor de la tecnología, estas sugerencias pueden parecer un poco abrumadoras. Es por esto que estoy simplificando cada una de las correcciones de velocidad PageSpeed Insights.
Priorizar contenido visible
- El contenido visible, es la parte de la página que se puede ver sin necesidad de desplazarse o dar scroll.
- Insights no sólo mide la cantidad de tiempo necesario para que toda la página se cargue, sino que también mide la cantidad de tiempo que toma para que se cargue el contenido “above-the-fold”.
- Cuanto más tiempo le tome a un usuario ver el contenido, lo más probable que abandonen la página.
- Una forma de abordar esta cuestión es con la reestructuración del HTML para que el principal contenido de se cargue en primer lugar.
- Por lo general, tus contenidos / recursos se cargarán en el orden en que se muestran en el código HTML. Por lo tanto, asegúrate de que tu contenido principal aparezca antes de los widgets, sidebars, etc.
Eliminar el Render-JavaScript y el CSS above-the-Fold
- Este “error” te está diciendo que los recursos en JavaScript y en tu página están obligados a cargar antes que el resto del contenido se cargue.
- PageSpeed Insights proporciona una lista de todos los archivos CSS y JavaScript en tu página que están bloqueando cargar el contenido.
- Google recomienda aplazar, cargar de forma asíncrona o hacer inlining en los archivos. Puedes encontrar ejemplos de cada una de estos siguientes métodos:
Hacer JavaScript asíncrono / aplazar
JavaScript en línea
CSS en línea - Mover los scripts al footer es una gran opción, de acuerdo con el primer paso en este artículo:
Delivera el Caché
- Cuando un navegador carga una página web tiene que descargar todos los archivos con el fin de mostrar la página.
- El almacenamiento de caché de navegador ayuda mediante el almacenamiento de algunos de estos archivos en el navegador del usuario.
- La primera visita del usuario a tu sitio tardará un poco más en cargar, pero cuando vuelva a visitar el sitio o se dirijan a una página diferente, cargará más rápido debido a que los recursos “caché” se guardan y no tendrá que cargar de nuevo, lo que resulta en una disminución del tiempo de carga.
- Para habilitar la caché del navegador, debes agregar algo de código a tu archivo .htaccess en tu servidor que especifica qué almacenar y por cuánto tiempo.
- Google recomienda un tiempo mínimo de caché de una semana y, de preferencia, hasta un año para los activos estáticos.
Optimiza las imágenes
- Esto significa que el tamaño de archivo de algunas o todas las imágenes en tu página se pueden reducir aún más para mejorar la velocidad de la página.
- PageSpeed Insights proporciona los archivos optimizados tanto para imágenes comprimidas con y sin perdidas.
Compresión sin pérdidas significa que tu imagen se puede reconstruir exactamente desde el archivo comprimido. En otras palabras, la imagen aparecerá sin cambios.
Con la compresión con pérdida, aparecerá reducida la calidad de la imagen.
Habilita la compresión
- En este caso, PageSpeed Insights te dice que habilites la compresión gzip en tu servidor web, lo que le permite al servidor web proporcionar archivos más pequeños que se cargan más rápido.
- Habilitar la compresión gzip difiere entre servidores pero por lo general consiste en añadir algo de código al archivo .htaccess.
- Encuentra el código o los pasos para habilitar la compresión en tu servidor aqui.
- Puede utilizar esta herramienta de prueba de compresión gzip para asegurarte de que todo se ha implementado correctamente.
Minimiza los Recursos: JavaScript, CSS y HTML
- Minimizar implica reducir el tamaño de tu JavaScript, CSS o HTML mediante la eliminación de partes del archivo que no son necesarios para que la página cargue tales como los comentarios de código, espacios en blanco y el formato.
- Estas estan algunas de las herramientas que pueden ayudarte a minimizar los recursos:
HTML Minifier
Refresh-SF
CSS Compressor
Evitar las redirecciones en las páginas de destino
- Redirigir causa que los visitantes de una página entren automáticamente a otra versión de la página u otra página por completo.
- En pocas palabras, re direccionar hace que tus páginas se carguen más lento asi como un vuelo directo es más rápido que uno con escalas.
- Las redirecciones se han convertido en un gran problema para los sitios móviles, ya que muchos sitios deben redirigir a la versión móvil de las páginas de destino (Ejemplo abc.com> m.abc.com).
La mejor solución a este problema es crear una página de destino diseño responsivo que se ajuste automáticamente a todos los dispositivos en lugar de una página móvil independiente que requerirá una dirección URL diferente. - Otras causas comunes de redirecciones son la actualización de usar “www” o no usarlo y la reestructuración sitio (Ejemplo abc.com/resources/blog > com/blog).
En estos casos, asegúrate de actualizar todos los enlaces internos de la página a la nueva URL final.
Reduce el tiempo de respuesta del servidor
- El tiempo de respuesta del servidor es la cantidad de tiempo que toma para que el servidor responda a la solicitud de un navegador para que una página se cargue.
- Google recomienda reducir el tiempo de respuesta de servidor a menos de 200 ms.
- El tráfico alto, el uso de recursos y muchos otros factores pueden contribuir a una respuesta lenta del servidor.
- Mediante la implementación de todas las prácticas anteriormente mencionadas, pondrás menos presión en tu servidor, lo que mejora el tiempo de respuesta del servidor.
- Actualizar a hosting que pueda soportar mejor tu volumen de tráfico, también puede proporcionar una mejora significativa.
Puedes encontrar el mejor alojamiento web para sí aprendes de los diferentes tipos que existen.
Esperamos que tengan ahora una mejor idea de lo que se necesita para mejorar la velocidad de una página. En la segunda parte de la serie “PageSpeed Insight”, voy a repasar cómo interpretar las correcciones de la experiencia del usuario móvil.
