Auditar con Chrome

Ya tengo los conocimientos necesarios para mejorar la performance de mi sitio

Primer check

1. Correr un auditor para tener los puntos a mejorar (Lighthouse, WebpageTest).

2. Tomar un punto de la auditoria y corregirlo (Siempre de a uno).

3. Correr nuevamente la auditoria para ver si nuestro cambio se realizó bien.

Segundo check

Verificar el coverage de los recursos que estoy utilizando si realmente se están utilizando bien.

La forma más fácil de verificarlo es utilizando la herramienta que viene en chrome devtools

• Abrir devtools

• CMD + SHIFT + P (Escribir COVERAGE)

• Ejecutar el coverage

¿Cómo se interpreta?

El coverage me muestra los bytes que están de más en él los files, en rojo se muestra lo que no se utiliza y en verde lo que realmente se esta utilizando.

Por ejemplo acá podemos ver que el 83% del css no se esta utilizando en esta view.

CSS que se podría eliminar o cargar en otro momento...

Tercer check

Verificar las librerías que se están cargando por default, todos los scripts del sitio, si podemos eliminar alguna que no se esta utilizando en este momento.

Lo bueno de esto es por ejemplo queremos probar si estamos en duda si una librería se esta utilizando podemos bloquear esa lib para verificar que realmente no se esta utilizando.

Siguiendo con chrome devtools

• Abrir devtools

• CMD + SHIFT + P (Escribir BLOCK)

• Ejecutar el block poniendo un pattern