9 Reglas para Aumentar la Velocidad de tu Sitio Web

Aquí hay un desglose de las Reglas de PageSpeed Insight de Google y recomendaciones de mejores prácticas sobre la optimización de páginas web para un mayor rendimiento de velocidad. Porque la necesidad de velocidad nunca se detiene.

Si pusiste tu URL en PageSpeed Insights de Google en el último mes, habrás notado que se ve un poco diferente. Donde solías recibir un puntaje de optimización simple, tus puntajes ahora están divididos por plataforma y se dividen en dos puntajes, “Velocidad de página” y “Optimización”.

Los cambios se realizaron como resultado de la nueva actualización de velocidad lanzada el 9 de julio de 2018. Ahora, en lugar de confiar en los datos de laboratorio, Google usa datos de campo para medir la velocidad del sitio. Al extraer información de la base de datos del Informe de experiencia del usuario de Chrome (CrUX), Google puede discernir qué tan rápido el usuario medio encuentra tu sitio.

Eso significa que incluso si tu sitio web es extremadamente rápido, los visitantes con teléfonos inteligentes más antiguos pueden experimentar retrasos, lo que podría afectar tu puntaje de velocidad y, posiblemente, el ranking de tu sitio web. Si aún no lo has hecho, es hora de duplicar la optimización de la velocidad.

Voy a desglosar las nueve reglas de PageSpeed Insight de Google, enumerar sus recomendaciones de mejores prácticas y luego profundizar en algunos pasos avanzados que puede realizar para optimizar aún más la velocidad de su sitio.

1. Evita los redireccionamientos de página de destino

Por qué es importante, redirigir alenta el procesamiento de la página y ralentiza la experiencia de tu sitio móvil. Cada redireccionamiento agrega un protocolo de transferencia de hipertexto (HTTP) y a veces agrega numerosos recorridos adicionales para realizar también la búsqueda del sistema de nombres de dominio (DNS), el protocolo de control de transmisión (TCP) y la seguridad de la capa de transporte (TLS).

Lo que Google recomienda. Crea un sitio web receptivo con no más de un redireccionamiento desde una URL determinada a la página de destino final.

Recomendaciones avanzadas. Intenta evitar las redirecciones por completo. Sin embargo, si necesitas usar redireccionamientos, elige el tipo de redireccionamiento según tu necesidad:

Redirección 301 contra 302. Usa redireccionamientos permanentes (301) cuando elimines contenido antiguo y lo redirecciones a contenido nuevo, o cuando no tengas una página alternativa para redireccionar a los usuarios. Utiliza redireccionamientos temporales (302) cuando realices cambios a corto plazo, como ofertas de tiempo limitado o cuando redirijas a los usuarios a URL específicas del dispositivo. No te preocupes ¡no perderás el valor del enlace de ninguna manera!
Redirección JavaScript vs. HTTP. La principal diferencia entre los redireccionamientos de JavaScript y HTTP es que los redireccionamientos HTTP causan cierta latencia en el lado del servidor, mientras que los redireccionamientos basados en JavaScript ralentizan el lado del cliente (necesitan descargar la página, luego analizar y ejecutar el JavaScript antes de activar la redirección ) Googlebot admite ambos tipos de redireccionamientos.

2. Habilitar la compresión

Por qué es importante. La reducción del tamaño de tu contenido acorta el tiempo que lleva descargar el recurso, reduce el uso de datos para el cliente y mejora el tiempo de procesamiento de las páginas.

Lo que Google recomienda. Aplica Gzip a todo el contenido comprimible. Puedes encontrar archivos de configuración de muestra para la mayoría de los servidores a través del proyecto HTML5 Boilerplate.

Recomendaciones avanzadas

Priorizar la eliminación de datos innecesarios. La compresión es excelente, pero el recurso mejor optimizado es un recurso no enviado. Revisa los recursos de tu sitio periódicamente y elimina datos innecesarios antes de la compresión para garantizar los mejores resultados.
Considera alternativas a la codificación Gzip. Si deseas utilizar una herramienta que no sea Gzip, Brotli es un algoritmo de compresión sin pérdida que combina una variante moderna del algoritmo LZ77, codificación Huffman y modelado de contexto de segundo orden. Es compatible con todos los navegadores modernos y tiene una relación de compresión comparable a los mejores métodos de compresión de uso general actualmente disponibles. Brotli se comprime muy lentamente y se descomprime rápidamente, por lo que debe precomprimir los activos estáticos con Brotli + Gzip al más alto nivel y comprimir HTML dinámico con Brotli en el nivel 1-4.
Usa diferentes técnicas de compresión para diferentes recursos. La compresión se puede aplicar al código HTML, así como a diversos recursos digitales que tu página requiere, pero deberás aplicar diferentes técnicas y algoritmos a tus fuentes web, imágenes, CSS, etc. para lograr el mejor resultado. Por ejemplo, si estás utilizando HTTP / 2, el uso de compresión HPACK para los encabezados de respuesta HTTP reducirá la sobrecarga innecesaria.

3. Mejora el tiempo de respuesta del servidor

Por qué es importante. Los tiempos de respuesta rápidos del servidor son una necesidad; El 53 por ciento de los visitantes móviles abandonará una página que no se carga en tres segundos.

El desarrollo de sitios web de alta calidad es esencial si deseas evitar la inanición de la unidad de procesamiento central (CPU), la lenta lógica de la aplicación, las consultas lentas de la base de datos, el enrutamiento lento, los marcos lentos y las bibliotecas lentas.

Lo que Google recomienda. El tiempo de respuesta del servidor siempre debe ser inferior a 200 ms.

Recomendaciones avanzadas

Mide el tiempo de respuesta del servidor y las mediciones reales del usuario (RUM). Usa una herramienta como WebPageTest.org, Pingdom, GTmetrix o Chrome Dev Tools para identificar los problemas de rendimiento existentes y descubrir qué está ralentizando tu proceso de entrega de contenido. Recuerda, incluso si tus pruebas muestran una velocidad de sitio <200 ms, un usuario de una generación anterior de Android con 3G lento podría experimentar 400 ms de RTT y una velocidad de transferencia de 400 kbps. Esto tendrá un impacto negativo en tu puntaje de velocidad del sitio. Para mejorar la experiencia de este usuario, debes apuntar a:
Una primera pintura significativa <1s.
Un valor de SpeedIndex <1250.
Intervalo de tiempo de transmisión (TTI) <5s y <2s para visitas repetidas.

Optimizar para la experiencia del usuario. Mientras configuras tu servidor:

Usa HTTP / 2 (y recuerda que tus CDN también son compatibles con HTTP / 2) para aumentar el rendimiento.
Habilita el engrapado de protocolo de estado de certificado en línea (OCSP) en tu servidor para acelerar los apretones de manos TLS.
Admite tanto IPv6 como IPv4. El descubrimiento de vecinos (NDP) de IPv6 y la optimización de rutas pueden hacer que los sitios web sean 10-15 por ciento más rápidos.
Agregua sugerencias de recursos para calentar la conexión y acelerar la entrega con una búsqueda DNS más rápida, preconexión, recuperación previa y precarga.

4. Aprovecha el almacenamiento en caché del navegador

Por qué es importante. Cuando se buscan recursos en la red, se necesitan más viajes de ida y vuelta entre el cliente y el servidor, lo que significa más demoras y mayores costos de datos para los visitantes. Puedes mitigar este lento y costoso proceso mediante la implementación de una política de almacenamiento en caché que ayuda al cliente a determinar si puede reutilizar las respuestas que ha devuelto en el pasado y cuándo.

Lo que Google recomienda Políticas explícitas de caché que responden:

Si un recurso se puede almacenar en caché.
Quién puede almacenarlo en caché
Cuanto tiempo será almacenado en caché
Cómo se puede revalidar de manera eficiente (si corresponde) cuando caduca la política de caché.

Google recomienda un tiempo de caché mínimo de una semana y hasta un año para los activos estáticos.

Recomendaciones avanzadas

Usa Cache-Control para eliminar la latencia de la red y evitar cargos de datos. Las directivas de control de caché te permiten controlar automáticamente cómo (por ejemplo, “sin caché” y “sin almacenamiento”) y durante cuánto tiempo (por ejemplo, “max-age”, “max-stale” y “mini-fresh”) el navegador puede almacenar en caché una respuesta sin necesidad de comunicarse con el servidor.
Usa ETags para habilitar la revalidación eficiente. Los encabezados HTTP de etiqueta de entidad (ETag) comunican un token de validación que impide que los datos se transfieran si un recurso no ha cambiado desde la última vez que se solicitó. Esto mejora la eficiencia de las comprobaciones de actualización de recursos.
Consulta las recomendaciones de Google para una política de control de caché óptima. Google ha creado una lista de verificación y un diagrama de flujo que te ayudará a almacenar tantas respuestas como sea posible durante el período más largo posible y a proporcionar tokens de validación para cada respuesta:

La regla empírica es que los recursos mutables (es decir, que probablemente cambien) deben almacenarse en caché durante un tiempo muy corto, mientras que los recursos inmutables (es decir, estáticos) deben almacenarse en caché indefinidamente para evitar la revalidación.

5. Minificar HTML, CSS y JavaScript

Por qué es importante. La reducción elimina los datos redundantes de los recursos entregados a tus visitantes, y pueden tener un impacto drástico en la velocidad y el rendimiento general del sitio.

Lo que Google recomienda. Que no haya datos redundantes dentro de tus activos web (por ejemplo, comentarios o símbolos espaciales en código HTML, estilos repetidos en CSS o metadatos innecesarios de imágenes).

Recomendaciones avanzadas

Usa la minificación en conjunto con la compresión. A primera vista, la minificación suena a compresión, pero es mucho más granular. Los algoritmos de compresión son excelentes para reducir el tamaño de una página, pero la mayoría no sabe cómo quitar código innecesario de los comentarios CSS (/ * … * /), HTML () y JavaScript (// …), contrae las hojas de estilo en cascada (CSS) reglas o realizar docenas de otras optimizaciones específicas de contenido.
Aplicaa la minificación a otros tipos de recursos también. Puedes minimizar algo más que los recursos basados en texto como el lenguaje de marcado de hipertexto (HTML), CSS y JavaScript. Las imágenes, videos y otros tipos de contenido también se pueden minimizar dependiendo de su necesidad. Por ejemplo, las imágenes contienen sus propias formas de metadatos y varias cargas útiles, que es posible que desee conservar si las publica en un sitio para compartir fotografías.
Automatiza la minificación. Usa herramientas para aliviar la carga de minimizar miles (si no millones) de diferentes recursos en su sitio web. El módulo de velocidad de página de Google hace esto automáticamente y puede integrarse con servidores web Apache o Nginx. Alternativamente, puedes usar herramientas de terceros como HTMLMinifier (para HTML), CSSNano o CSSO (para CSS) y UglifyJS (para JavaScript).

6. Optimizar imágenes

Por qué es importante. Las imágenes representan un promedio del 60 por ciento del tamaño de tu página web, y las imágenes grandes pueden ralentizar tu sitio a paso de tortuga. La optimización de imágenes ayuda al reducir el tamaño del archivo sin afectar significativamente la calidad visual.

Lo que Google recomienda. Asegúrate de que tu sitio web y tus imágenes respondan. Utiliza tamaños relativos para las imágenes, utiliza el elemento de la imagen cuando desees especificar diferentes imágenes según las características del dispositivo, y utiliza un atributo srcset y el descriptor x en el elemento img para informar a los navegadores cuándo utilizar imágenes específicas.

Recomendaciones avanzadas

Sigue esta lista de verificación de las técnicas de optimización más comunes:

Elimina los recursos de imagen innecesarios.
Aprovecha CSS3 para reemplazar imágenes.
Usa fuentes web en lugar de codificar texto en imágenes.
Usa formatos de vectores donde sea posible.
Minimiza y comprime activos de gráficos vectoriales escalables (SVG) para reducir su tamaño.
Elige los mejores formatos de trama (comienza seleccionando el formato universal correcto: GIF, PNG o JPEG, pero también considera agregar activos de formato WebP y rango extendido JPEG (XR) en formato de imagen para clientes modernos.
Experimenta con una configuración de calidad óptima. Recuerda que no existe un único mejor formato o “configuración de calidad” para todas las imágenes: cada combinación de compresor particular y contenido de imagen produce una salida única.
Cambia el tamaño en el servidor y publique imágenes a escala según su tamaño de visualización.
Elimina metadatos
Mejora las etiquetas img con un parámetro srcset para dispositivos de puntos altos por pulgada (DPI).
Utilice el elemento de imagen para especificar diferentes imágenes según las características del dispositivo, como el tamaño del dispositivo, la resolución del dispositivo, la orientación y más.
Usa las técnicas de spriting de imágenes cuidadosamente. Con HTTP / 2, puede ser mejor cargar imágenes individuales.
Considere la carga diferida para imágenes no críticas.
Guarde en caché tus activos de imagen.
Automatiza tu proceso de optimización de imagen.

Cuando se trata de optimización de imágenes, no hay una sola “mejor” forma de hacerlo. Muchas técnicas pueden reducir el tamaño de una imagen, pero encontrar la configuración óptima para tus imágenes requerirá una cuidadosa consideración de las capacidades de formato, el contenido de datos codificados, la calidad, las dimensiones de píxeles y más. Para obtener más consejos, visite la guía de Google para Optimizar imágenes.

7. Optimizar la entrega de CSS

Por qué es importante. Los navegadores suelen seguir estos cinco pasos al representar una página:

Procesa el marcado HTML y crea el árbol del modelo de objetos del documento (DOM).
Procesa el marcado de CSS y crea el árbol del modelo de objetos CSS (CSSOM).
Combina el DOM y CSSOM en un árbol de renderizado.
Ejecuta el diseño en el árbol de renderizado para calcular la geometría de cada nodo.
Pinta los nodos individuales en la pantalla.

En otras palabras, una página necesita procesar CSS antes de que pueda ser procesada. Cuando tu CSS está repleto de hojas de estilo externas que bloquean el procesamiento, este proceso a menudo requiere múltiples recorridos de ida y vuelta, lo que retrasará el tiempo para la primera renderización.

Lo que Google recomienda. Incrustar CSS pequeño directamente en el documento HTML para eliminar pequeños recursos de CSS externos.

Recomendaciones avanzadas

Evita incluir grandes archivos CSS. Si bien la inclusión de pequeños CSS puede acelerar el tiempo que le lleva a un navegador procesar la página, al incluir grandes archivos CSS, aumentará el tamaño de tu CSS y en realidad reducirá la velocidad del tiempo de renderizado.
Evita incluir atributos de CSS. Del mismo modo, la incorporación de atributos CSS en elementos HTML a menudo da como resultado una duplicación innecesaria del código, y está bloqueada por defecto con una Política de seguridad de contenido.

8. Prioriza el contenido visible

Por qué es importante. Si tu contenido de la mitad superior de la página excede la ventana de congestión inicial (típicamente 14.6kB comprimidos), entonces cargar tu contenido requerirá múltiples viajes de ida y vuelta para cargar y representar tu contenido. Esto puede causar altas latencias y retrasos significativos en la carga de la página, especialmente para los usuarios de dispositivos móviles.

Lo que Google recomienda. Reducir el tamaño del contenido por encima de la mitad a no más de 14kB (comprimido).

Recomendaciones avanzadas

Limita el tamaño de los datos necesarios para mostrar el contenido de la mitad superior de la página. Si has seguido el ejemplo, ya deberías utilizar la minificación de recursos, la optimización de imágenes, la compresión y todos los demás consejos y trucos para reducir el tamaño del contenido de la mitad superior de la página.
Organiza tu marcado HTML para procesar el contenido de la mitad superior de la página inmediatamente. Cambiar la estructura de marcado de HTML puede agilizar en gran medida la velocidad a la que se carga y representa tu contenido de la mitad superior de la página, pero lo que cambie variará de una página a otra. Por ejemplo, puede ser necesario dividir tu CSS en partes diferentes: una parte en línea responsable de diseñar la parte del contenido que está arriba del doblez y una hoja de estilo que difiere la parte restante. O puedes necesitar cambiar primero el orden de lo que se carga en su página (p. Ej., Contenido principal antes de los widgets).

9. Elimina el JavaScript que bloquea la visualización

Por qué es importante. Puedes recordar de la sugerencia n. ° 7 que una página necesita construir su DOM analizando el HTML antes de que un navegador pueda mostrar tu página. Bueno, cada vez que un analizador encuentra JavaScript, tiene que detenerse y ejecutar este nuevo script antes de que pueda continuar construyendo el árbol DOM. Este retraso es aún más pronunciado en el caso de un script externo, y puede agregar decenas de miles de milisegundos al proceso de renderizado.

Lo que Google recomienda. Elimina todo el JavaScript de bloqueo, especialmente los scripts externos, en el contenido de la mitad superior de la página.

Recomendaciones avanzadas

Haz que JavaScript no represente el bloqueo. Marcar la etiqueta del script como una sincronización le indicará al navegador que no bloquee la construcción del DOM mientras espera que el script se cargue y ejecute. Sin embargo, solo debes hacer esto si sabes que no necesitas cambiar nada dentro del árbol DOM mientras se está analizando / construyendo
Scripts críticos en línea y diferir los scripts no críticos. Los scripts que son necesarios para representar el contenido de la página deben estar insertados para evitar solicitudes de red adicionales. Estos deben ser lo más pequeños posible para ejecutarlos rápidamente y ofrecer un buen rendimiento. Los scripts no críticos deben hacerse asincrónicos y diferidos hasta después de la primera renderización. Solo recuerde que no se garantiza que las secuencias de comandos asincrónicas se ejecuten en un orden específico.
Aplazar las bibliotecas de JavaScript de terceros hasta después. Las bibliotecas de JavaScript que mejoran la interactividad o añaden animaciones u otros efectos (p. Ej., JQuery) por lo general no necesitan presentarse en la mitad superior de la página. Siempre que sea posible, haz que estos elementos de JavaScript sean asíncronos y difiértelos en la página.