Tema
- #Carga de recursos
- #Optimización del navegador
- #Carga de páginas
Los navegadores generalmente realizan el renderizado en el siguiente orden.
- Análisis HTML (de arriba a abajo, head -> body):
1. Análisis HTML y creación del DOM
2. Carga y aplicación de archivos CSS (bloqueo del renderizado)
3. Carga y ejecución de scripts (bloqueo del renderizado)
4. Renderizado del contenido de la sección <body> (imágenes, texto, etc.)
Controlar la prioridad de los recursos del navegador permite optimizar la velocidad de carga de la página.
A continuación, se documentan los principales atributos que permiten mejorar el orden de renderizado.
- JavaScript: async, defer, module
- CSS: preload, media
- Imágenes: loading="lazy", srcset, sizes
- Otros: prefetch, preconnect, dns-prefetch
JavaScript
async : Se descarga en paralelo con el análisis HTML y se ejecuta inmediatamente después de la descarga. Si algún recurso de la página está relacionado con este js, es mejor eliminar la etiqueta async.
defer : Se descarga en paralelo con el análisis HTML y se ejecuta después de que el análisis HTML haya finalizado completamente. = El orden está garantizado. Si necesita que se ejecute después de que se haya renderizado todo el HTML, es mejor agregar la etiqueta defer.
El navegador carga el HTML primero de forma predeterminada, pero si hay una fuente de script dentro de la etiqueta head, el renderizado se bloquea. Agregar las dos etiquetas anteriores puede evitar el bloqueo del renderizado HTML.
CSS
styleshee : Es el valor predeterminado. Es un elemento que bloquea el renderizado y se utiliza cuando es necesario que se cargue necesariamente el CSS.
preload : Se descarga previamente sin bloquear el renderizado. Se convierte en stylesheet en el momento en que se produce el evento onload y se aplica el estilo.
media: Se renderiza si se cumplen las condiciones del tamaño de la pantalla.
Imágenes
loading="lazy" : Carga la imagen cuando aparece en la pantalla. (Cuando la posición del desplazamiento está cerca del elemento donde se encuentra la imagen)
srcset : Selecciona la imagen óptima según el tamaño de la pantalla. (Optimización del tamaño de la imagen)
sizes : Proporciona una pista al navegador para que seleccione la imagen adecuada según el tamaño de la ventana gráfica.
En el caso de la última etiqueta img, si hay una imagen con un ancho de 480px y una imagen con un ancho de 1024px, el atributo size hace que se muestre una imagen de 480px si el max-width es 600px, y una imagen de 1024px en caso contrario.
* En el comercio electrónico, hay decenas de imágenes en una sola página, por lo que reducir el tamaño de las imágenes tiene un gran impacto.
Por ejemplo, si hay al menos 20 imágenes en la pantalla de resultados de búsqueda y la búsqueda se realiza 100.000 veces al día...
Otros
rel="prefetch": Descarga previamente los recursos antes de navegar a la página para mejorar la velocidad de carga de la siguiente página.
rel="preconnect": Configura previamente la conexión de red para un enlace específico. (Vídeos de gran tamaño, fuentes, etc.)
rel="dns-prefetch": Consulta el DNS de los recursos externos para cargar los recursos más rápidamente. (Principalmente CDN externos)
* preconnect vs dns-prefetch
preconnect es una conexión TCP (DNS - handshake TCP - handshake TLS), por lo que es una operación pesada que ocupa recursos del navegador. Se utiliza cuando es necesario cargar rápidamente recursos externos. (Cuando un recurso es muy importante y es importante su rápido renderizado)
dns-prefetch solo consulta el DNS, por lo que es una operación más ligera. Es adecuado para recursos no importantes y para la carga posterior.
Comentarios0