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.