Como obtener un 100% en rendimiento en Google Lighthouse – 2

Como obtener un 100% en rendimiento en Google Lighthouse – 2

Continuando con la serie de post para obtener un 100% en todos las métricas de Google Lighthouse, algo que intentamos conseguir en todos nuestros proyectos, seguimos con los checks que se tienen en cuenta para evaluar la categoría performance (rendimiento). 

En este post explicamos los 11 siguientes, del 12 al 22, son estos:

 

12. Initial server response time was short

Mantén el tiempo de respuesta para el documento principal bajo porque todas las demás peticiones dependen de él.

Cómo pasarlo

En esta métrica influyen varios factores:

  • Servidor: Nosotros utilizamos en la mayoría de proyectos el hosting app de dinahosting (enlace referido), que incluye discos NVMe y HTTP/2 lo que mejora el tiempo de respuesta. 
  • Tema y plugins: En función de cuán bien optimizados estén, el tiempo en servir el primer byte (TTFB) será mayor o menor.

 

13. Avoid multiple page redirects (Evitar múltiples redireccionamientos de página)

Las redirecciones de página ralentizan la velocidad de carga. Cuando un navegador solicita un recurso que ha sido redirigido debe entonces hacer otra petición para solicitar el recurso al que ha sido redirigido.

Cómo pasarlo

Basta con evitar hacer redirecciones a no ser que sea estrictamente necesario. En caso de que se muestre este check marcado, te mostrará cuál es la redirección que se está realizando.

 

14. Preload key requests (Precargar solicitudes clave)

Considerar el uso de preload para priorizar la solicitud de recursos importantes durante la carga inicial de la página.

Cómo pasarlo

Aunque nosotros no hemos implementado esta solución porque no se marca como erróneo el check, se trata de añadir en aquellos recursos que formen parte del critical rendering path el atributo rel=”preload”, como se muestra abajo:

<head>
...
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="ui.js" as="script">
...
</head>

 

15. Use HTTP/2 (Usar HTTP/2)

El protocolo de transferencia de datos HTTP/2 ofrece múltiples mejoras sobre HTTP/1.1. Puedes ver la diferencia entre cargar la web en una y otra versión en esta demo.

Cómo pasarlo

Esto depende nuevamente del servidor en el que esté alojada la web y que tenga habilitado el uso de HTTP/2.

 

16. Use video formats for animated content (Usar formato video para contenido animado)

Los GIFs pesados son ineficientes para la entrega de contenido animado. Considera utilizar videos MPEG4/WebM para animaciones y PNG/WebP para imágenes estáticas en lugar de GIF para ahorrar bytes de transferencia.

Cómo pasarlo

En nuestro caso no utilizamos este tipo de contenido por lo que lo pasamos por defecto. En caso de que lo utilices el fix pasará por hacer caso a la recomendación y utilizar el formato más eficiente.

 

17. Remove duplicate modules in JavaScript bundles (Eliminar modulos duplicados en Javascript)

Eliminar modulos grandes y/o duplicados del bundle para reducir los bytes consumidos por la red.

Cómo pasarlo

De nuevo, este check nos aparece pasado por defecto, en caso de que se muestre bastará con eliminar aquel código que esté siendo duplicado.

 

18. Avoid serving legacy JavaScript to modern browsers (Evitar el uso de código legacy javascript en navegadores modernos)

Polyfills y transformadores posibilitan que navegadores antiguos puedan usar funcionalidades nuevas de Javascript, pero no son necesarios para navegadores modernos.

Cómo pasarlo

Dependerá de la cantidad de código de este tipo que tengas en la web, en nuestro caso es mínimo y la ganancia que podríamos obtener es de 0.1Kib, por lo que pasamos el check sin problema. En el supuesto de que necesites pasar este check habrá que generar una versión de JS para navegadores antiguos y otra para los modernos. Aquí explican el proceso.

 

19. Preload Largest Contentful Paint image

Precargar la imagen utilizada como elemento mostrado más grande para mejorar la métrica LCP.

Cómo pasarlo

Este check no nos aparece deshabilitado, en caso de que se muestre como error, habría que añadir el atributo rel=”preload” en la imagen más grande que sirva como LCP en la página testeada. Aquí explican cómo.

 

20. Avoids enormous network payloads (Evita transferencia de datos elevada)

Una transferencia de datos elevada cuesta a los usuarios dinero real y está altamente relacionada con tiempos de carga elevados.

Cómo pasarlo

En general, además de servir los ficheros comprimidos correctamente (como hemos visto en un check anterior), se trata de no mostrar más información de la necesaria en cada página. También depende del tema que utilices y qué cantidad de html genera para mostrar la información (cuidado con algunos page builders).

Este check saltará cuando la cantidad de datos transferidos exceda de 5Mb. En nuestro caso, el tamaño de la página principal es de 254 Kb.

 

21. Uses efficient cache policy on static assets (Utilizar una política de cache eficiente en los recursos) 

Este check comprueba la política de caché de los recursos que se solicitan en la página y devuelve aquellos que no tienen definido un tiempo de cacheo o es muy corto.

Cómo pasarlo

Dependiendo del servidor habrá que configurar la política de caché de los recursos. Para apache en nuestro caso, tenemos configurado el fichero .htaccess de la siguiente manera:

#Caché de navegador
<IfModule mod_mime.c>
   AddType text/css .css
   AddType text/x-component .htc
   AddType application/x-javascript .js
   AddType application/javascript .js2
   AddType text/javascript .js3
   AddType text/x-js .js4
   AddType text/html .html .htm
   AddType text/richtext .rtf .rtx
   AddType image/svg+xml .svg
   AddType text/plain .txt
   AddType text/xsd .xsd
   AddType text/xsl .xsl
   AddType text/xml .xml
   AddType video/asf .asf .asx .wax .wmv .wmx
   AddType video/avi .avi
   AddType image/bmp .bmp
   AddType application/java .class
   AddType video/divx .divx
   AddType application/msword .doc .docx
   AddType application/vnd.ms-fontobject .eot
   AddType application/x-msdownload .exe
   AddType image/gif .gif
   AddType application/x-gzip .gz .gzip
   AddType image/x-icon .ico
   AddType image/jpeg .jpg .jpeg .jpe
   AddType image/webp .webp
   AddType application/json .json
   AddType application/vnd.ms-access .mdb
   AddType audio/midi .mid .midi
   AddType video/quicktime .mov .qt
   AddType audio/mpeg .mp3 .m4a
   AddType video/mp4 .mp4 .m4v
   AddType video/mpeg .mpeg .mpg .mpe
   AddType application/vnd.ms-project .mpp
   AddType application/x-font-otf .otf
   AddType application/vnd.ms-opentype ._otf
   AddType application/vnd.oasis.opendocument.database .odb
   AddType application/vnd.oasis.opendocument.chart .odc
   AddType application/vnd.oasis.opendocument.formula .odf
   AddType application/vnd.oasis.opendocument.graphics .odg
   AddType application/vnd.oasis.opendocument.presentation .odp
   AddType application/vnd.oasis.opendocument.spreadsheet .ods
   AddType application/vnd.oasis.opendocument.text .odt
   AddType audio/ogg .ogg
   AddType application/pdf .pdf
   AddType image/png .png
   AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
   AddType audio/x-realaudio .ra .ram
   AddType image/svg+xml .svg .svgz
   AddType application/x-shockwave-flash .swf
   AddType application/x-tar .tar
   AddType image/tiff .tif .tiff
   AddType application/x-font-ttf .ttf .ttc
   AddType application/vnd.ms-opentype ._ttf
   AddType audio/wav .wav
   AddType audio/wma .wma
   AddType application/vnd.ms-write .wri
   AddType application/font-woff .woff
   AddType application/font-woff2 .woff2
   AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
   AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresByType text/css A31536000
   ExpiresByType text/x-component A31536000
   ExpiresByType application/x-javascript A31536000
   ExpiresByType application/javascript A31536000
   ExpiresByType text/javascript A31536000
   ExpiresByType text/x-js A31536000
   ExpiresByType text/html A3600
   ExpiresByType text/richtext A3600
   ExpiresByType image/svg+xml A3600
   ExpiresByType text/plain A3600
   ExpiresByType text/xsd A3600
   ExpiresByType text/xsl A3600
   ExpiresByType text/xml A3600
   ExpiresByType video/asf A31536000
   ExpiresByType video/avi A31536000
   ExpiresByType image/bmp A31536000
   ExpiresByType application/java A31536000
   ExpiresByType video/divx A31536000
   ExpiresByType application/msword A31536000
   ExpiresByType application/vnd.ms-fontobject A31536000
   ExpiresByType application/x-msdownload A31536000
   ExpiresByType image/gif A31536000
   ExpiresByType application/x-gzip A31536000
   ExpiresByType image/x-icon A31536000
   ExpiresByType image/jpeg A31536000
   ExpiresByType image/webp A31536000
   ExpiresByType application/json A31536000
   ExpiresByType application/vnd.ms-access A31536000
   ExpiresByType audio/midi A31536000
   ExpiresByType video/quicktime A31536000
   ExpiresByType audio/mpeg A31536000
   ExpiresByType video/mp4 A31536000
   ExpiresByType video/mpeg A31536000
   ExpiresByType application/vnd.ms-project A31536000
   ExpiresByType application/x-font-otf A31536000
   ExpiresByType application/vnd.ms-opentype A31536000
   ExpiresByType application/vnd.oasis.opendocument.database A31536000
   ExpiresByType application/vnd.oasis.opendocument.chart A31536000
   ExpiresByType application/vnd.oasis.opendocument.formula A31536000
   ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
   ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
   ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
   ExpiresByType application/vnd.oasis.opendocument.text A31536000
   ExpiresByType audio/ogg A31536000
   ExpiresByType application/pdf A31536000
   ExpiresByType image/png A31536000
   ExpiresByType application/vnd.ms-powerpoint A31536000
   ExpiresByType audio/x-realaudio A31536000
   ExpiresByType image/svg+xml A31536000
   ExpiresByType application/x-shockwave-flash A31536000
   ExpiresByType application/x-tar A31536000
   ExpiresByType image/tiff A31536000
   ExpiresByType application/x-font-ttf A31536000
   ExpiresByType application/vnd.ms-opentype A31536000
   ExpiresByType audio/wav A31536000
   ExpiresByType audio/wma A31536000
   ExpiresByType application/vnd.ms-write A31536000
   ExpiresByType application/font-woff A31536000
   ExpiresByType application/font-woff2 A31536000
   ExpiresByType application/vnd.ms-excel A31536000
   ExpiresByType application/zip A31536000
</IfModule>

Hay que tener en cuenta que al cachear los recursos en el navegador es posible que los usuarios vean contenido antiguo, para evitarlo, hay que añadir un hash en los recursos entregados. En el caso de Autoptimize, cada vez que se generan los ficheros js y css lo hacen con un hash diferente.

 

22. Avoids an excessive DOM size (Evitar tamaño excesivo en el DOM)

Un DOM grande incrementa el uso de memoria, el cálculo de estilos y produce repintados costosos. 

Lighthouse muestra un warning cuando el elemento body tiene más de 800 nodos y un error cuando supera los 1400.

Cómo pasarlo

En general, se trata de maquetar la web de una forma sencilla. De nuevo depende del tema y la cantidad de información que se visualice en la página. Hay que tener cuidado con los page builders que añaden cantidad de código html para representar la información. En nuestro caso, se muestran 375 nodos en la página principal.

 

Hasta aquí el 2º post sobre cómo sacar un 100% en Google Lighthouse. En el siguiente post analizaremos los últimos 12 checks sobre la categoría de rendimiento.

Configuración de privacidad

Desde este panel puedes modificar la configuración de privacidad para habilitar o deshabilitar las cookies no exceptuadas de las que hace uso este sitio web:

Cookies técnicas (Exceptuadas)

Se utilizan para gestionar la configuración de privacidad establecida por el usuario en su dispositivo.

Cookies de preferencias (Exceptuadas)

Se utilizan para identificar a los usuarios logados en el sitio web, personalizar la visualización de la interfaz de administración y la interfaz principal de la web.

Cookies de análisis

Se utilizan para distinguir los usuarios únicos y las sesiones de un usuario para aportar información sobre cómo los usuarios interactúan con el contenido del sitio web.

Cookies de publicidad

Se utilizan para hacer un seguimiento de las ventas y de otras conversiones cuando el usuario hace clic en un anuncio o una ficha.