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

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

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, finalizamos los checks que se tienen en cuenta para evaluar la categoría performance (rendimiento): 

 

 

23. User Timing marks and measures (Medidas y marcas de tiempo del usuario)

Considera usar la API User Timing para medir el rendimiento de la página en el mundo real. 

Cómo pasarlo

Este check no se marca como pasado o fallado sino que se utiliza para poder encontrar posibles mejoras en la ejecución del código javascript a través de marcas de tiempo y tiempo pasado entre ellas. Puedes  encontrar más información aquí.

 

24.JavaScript execution time (Tiempo de ejecución de Javascript)

Considera reducir el tiempo de parsing, compilación y ejecución de Javascript. Entregar pequeños ficheros javascript mejora esta medida. 

Cómo pasarlo

Este check se muestra como fallado cuando la ejecución de javascript tarda más de 2 segundos. En nuestro caso muestra 0.1 s. Hay que controlar los plugins instalados y su posible rendimiento.

 

 

25. Minimizes main-thread work (Minimiza el hilo principal de trabajo)

Al igual que en el check anterior, trata de reducir el tiempo de parseo, compilación y ejecución de Javascript. Por defecto, el hilo principal de renderizado maneja las siguientes acciones: Parsea el html y construye el DOM, parsea el CSS y aplica los estilos especificados y parsea, evalúa y ejecuta javascript.

Cómo pasarlo

Este check se muestra como fallado cuando el hilo principal de trabajo permanece ocupado por más de 4 segundos durante la carga inicial. De nuevo, dependerá de los plugins instalados y lo bien optimizados que estén. En nuestro caso, el tiempo acumulado es de 0.4 s.

 

 

26. All text remains visible during webfont loads (Mostrar visibles todos los textos durante la carga de webfonts)

Utilizar las características de CSS font-display para asegurar que el texto es visible para el usuario mientras las webfonts son cargadas.

Cómo pasarlo

Para evitar el efecto conocido como FOIT (destello de texto invisible), que se produce cuando se descarga un fichero de fuente, y mientras se descarga no se visualizan los textos que utilizan esta fuente, hay que añadir en el css que llama a las fuentes la propiedad font-display: swap:

     @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      src: url(<?php bloginfo('stylesheet_directory');?>/fonts/roboto-text-400.woff2) format('woff2');
      font-display: swap;
     }

 

 

27. Minimize third-party usage (Minimizar el uso de código de terceros)

El código de terceros puede impactar el rendimiento de la web. Hay que tratar de limitar su uso y/o retrasarlo después de la carga inicial de la página.

Cómo pasarlo

Hay que identificar qué código de terceros está siendo utilizado y retrasar su uso si es posible. En nuestro caso, utilizamos google analytics y google ads, por lo que se llama al script de gtag, el cuál retrasamos X segundos para evitar que bloquee la carga inicial de la página. Con plugins como perfmatters puedes realizar este tipo de mejoras.

 

 

28. Lazy load third-party resources with facades (Retrasar la carga de recursos de terceros con fachadas)

Algunos embebidos de terceros pueden retrasar su carga. Se trata de utilizar el patrón fachada para visualizar un mock que utilice menos recursos mientras no se necesita utilizar el recurso original.

Cómo pasarlo

En nuestro caso no hemos tenido que implementar esta solución, pero en este enlace describen el proceso necesario para emplearlo.

 

 

29. Largest Contentful Paint image was not lazily loaded (La carga de la imagen con el contenido más grande no fue retrasada)

Las imágenes que no se visualizan pueden retrasar su carga a través de lazyload, lo que puede retrasar la métrica LCP “largest contentful paint”.

Cómo pasarlo

Este check aparece marcado si la carga de la pieza de contenido más grande es retrasada. En nuestro caso, es una imagen que aparece de fondo al inicio por lo que su carga no es atrasada.

 

 

30. Uses passive listeners to improve scrolling performance (Usar eventos de escucha pasivo para mejorar el rendimiento de scroll)

Considera marcar los eventos de escucha de tocar y scroll como pasivos para mejorar el rendimiento de scroll de la página.

Cómo pasarlo

Nosotros no hacemos uso de este tipo de eventos, pero para pasarlo, basta con añadir la siguiente línea en el registro del evento:

document.addEventListener('touchstart', onTouchStart, {passive: true});

 

31. Avoids document.write() (Evitar document.write)

Para usuarios con conexiones lentas, inyectar script dinámicamente vía “document.write” puede retrasar la carga de la página.

Cómo pasarlo

Basta con no utilizar esta técnica para añadir scripts de terceros.

 


32. Avoid non-composited animations (Evitar animaciones no compuestas)

Las animaciones no compuestas pueden perjudicar la métrica CLS en dispositivos de gama baja.

Cómo pasarlo

No utilizamos animaciones de este tipo por lo que no hemos tenido que hacer nada al respecto. En este hilo explican la problemática en más detalle.

 

33. Image elements have explicit width and height (Imágenes tienen ancho y alto explícitos)

Hay que indicar el ancho y el alto de las imágenes para reducir los saltos de layout y mejorar la métrica CLS.

Cómo pasarlo

Basta con añadir los atributos height and width en las imágenes utilizadas en la web.

 

34. Has a <meta name="viewport"> tag with width or initial-scale (Existe la tag viewport con width o initial-scale)

La tag viewport no solo mejora tu web para tamaños móviles sino también previene un retraso de 300 milisegundos en la entrada de datos del usuario.

Cómo pasarlo

Basta con añadir la etiqueta dentro del head de la página:

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Y hasta aquí los checks para la categoría rendimiento sobre cómo sacar un 100% en Google Lighthouse. En el siguiente post nos centraremos en la categoría de Accesibilidad.

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.