Optimizar Insights

optimizar

La precarga es una solicitud de búsqueda declarativa que le dice al navegador que solicite un recurso lo antes posible. Carge previamente los recursos críticos agregando una <link> etiqueta rel="preload" al encabezado de su documento HTML:


<link rel="preload" as="style" href="css/style.css">


El navegador establece un nivel de prioridad más apropiado para el recurso al fin de intentar descargarlo antes sin retrasar el window.onload evento.


Precarga de archivos CSS


Si está utilizando el critical CSS approach, divide su CSS en dos partes. EL CSS crítico requerido para representar el contenido de la mitad superior de la página está incluido en el <head> del documento y el CSS no crítico suele cargarse de forma diferida con JavaScript. Esperar a que JavaScript se ejecute antes de cargar CSS no crítico puede causar retrasos en la representación cuando los usuarios se desplazan, por lo que es buena idea utilizar <link rel="preload"> para iniciar la descarga antes.


Precarga de archivos JavaScript


Debido a que los navegadores no ejecutan archivos precargados, la precarga es útil para separar la obtención de la execution que puede mejorar métricas como Time to Interactive. La precarga funciona mejor si divide sus paquetes de JavaScript y solo precarga los fragmentos críticos.


How to implement rel=preload

La forma más sencilla de implementar preload es agregar un <link> etiqueta al <head> del documento:

<head>
  <link rel="preload" as="script" href="critical.js">
</head>

Proporcionar el as atributo ayuda al navegador a establecer la prioridad del recurso precargado de acuerdo con su tipo, establecer los encabezados correctos y determinar si el recurso ya existe en el caché. Los valores aceptados para este atributo son: script, style, font, image, and others.


Herramienta ANALIZAR VELOCIDAD WEB


Inicio Siguiente Volver