The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

El sitio no usa recursos que demoran la primera pintura

Por qué es importante la auditoría

Las cargas rápidas de las páginas proporcionan una mayor captación de usuarios, aumentan el número de vistas de la página y mejoran la conversión.

Puedes mejorar la velocidad de carga de la página si integras enlaces y secuencias de comandos que son necesarios para la primera pintura y difieres los innecesarios.

Cómo aprobar la auditoría

En tu informe, Lighthouse enumera todos los enlaces o secuencias de comandos detectados que bloquean la representación representación. El objetivo es reducir esta cantidad.

Tal como se menciona en Cómo se implementa la auditoría, Lighthouse indica tres tipos de enlaces que bloquean la representación: secuencias de comandos, hojas de estilo e importaciones HTML. La forma en que optimizas depende del tipo de recurso con el que trabajas.

  • Respecto de las secuencias de comandos críticas, considera integrarlas en tu HTML. Respecto de las secuencias de comandos no críticas, considera marcarlas con los atributos async o defer . Para obtener más información, consulta Cómo agregar interactividad con JavaScript.
  • Respecto de las hojas de estilo, considera dividir tus estilos en archivos diferentes, organizados por consulta de medios y luego agrega un atributo media a cada enlace de hoja de estilo. Cuando carga una página, el navegador solo bloquea la primera pintura para recuperar las hojas de estilo que coinciden con el dispositivo del usuario. Para más información, consulta Bloqueo de representación de CSS.
  • Respecto de las importaciones HTML no críticas, márcalas con el atributo async. Como regla general, async debe usarse con importaciones HTML la mayor cantidad de veces posible.

Cómo se implementa la auditoría

En esta sección, se explica cómo se implementa esta auditoría para que puedas comprender cómo se calcula el puntaje de la auditoría.

Lighthouse identifica tres tipos de recursos de bloqueo.

Una etiqueta <script> que:

  • está en el <head> del documento.
  • No posee un atributo defer.
  • No posee un atributo async.

Una etiqueta <link rel="stylesheet"> que:

  • no posee un atributo disabled. Cuando este atributo está presente, el navegador no descarga la hoja de estilo.
  • No posee un atributo media que coincide con el dispositivo del usuario.

Una etiqueta <link rel="import"> que:

  • No posee un atributo async.