Web Performance Optimization
  • Web Performance Optimization
  • Render Blocking CSS
  • Render Blocking JS
  • Resources Priority
  • Performance Budget
  • Images
  • HTTP/2 Server Push
  • Caching
  • Compression
  • Web Workers
  • React
  • Auditar con Chrome
Powered by GitBook
On this page
  • Primer check
  • Segundo check
  • Tercer check

Was this helpful?

Auditar con Chrome

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

PreviousReact

Last updated 5 years ago

Was this helpful?

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.

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

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