Optimización del rendimiento de la página web

Escucha este artículo

Los sitios web generalmente se dividen en dos partes: front-end y back-end. Podemos entender que el fondo se utiliza para implementar las funciones del sitio web, tales como: realizar el registro de usuario, cambiar contraseñas, comentar artículos, etc. Pero, ¿qué pasa con la interfaz? De hecho, debería ser una función de rendimiento. La mayoría de los factores que afectan la accesibilidad del usuario están relacionados con la optimización de las páginas externas del sitio. Optimización de página – este artículo dará una visión general de este proceso.

El contenido del artículo:

• 1. Optimizar el tiempo de carga de la página
• 2. Comprimir todos los recursos comprimibles
• 3. Optimización de caché del sitio
• 4. Ruta de renderizado crítica

1. Optimizar el tiempo de carga de la página

Mejor optimización de página - esto es cuando los recursos no se cargan en absoluto. Por lo tanto, intente minimizar la cantidad de recursos innecesarios descargados.

1. Evalúe si se necesitan algunas de las dependencias de su sitio y evalúe los pros y los contras.
2. ¿La ruta de carga dependiente es confiable y bloqueará toda la página cuando no esté disponible?

2. Comprimir todos los recursos comprimibles

1. El código debe estar todo comprimido.
2. Elimine las imágenes no deseadas.
3. Use css3 en lugar de imágenes.
4. Utilice imágenes con una relación de compresión más alta. Especialmente los GIF, algunos formatos de video (H.264 o WebM) son mucho más pequeños que los GIF.
5. Utilice fuentes de WordArt, no imágenes.
6. Proporcione formatos de imagen más modernos para usuarios con navegadores más nuevos (por ejemplo: WebP).
7. Mapas de bits con múltiples resoluciones para diferentes tamaños de página.
8. Especifique un ancho y una altura para la imagen; de lo contrario, se pueden producir recortes.
9. Utilice HTTP/2. Por ejemplo, un sprite es una imagen grande formada por muchas imágenes pequeñas, lo que puede reducir la cantidad de solicitudes HTTP. Sin embargo, es difícil almacenar en caché y cambiar la imagen pequeña invalidará el caché de todas las imágenes pequeñas. HTTP/2, se pueden iniciar múltiples solicitudes desde un enlace, eliminando la necesidad de sprites.

3. Optimización del caché del sitio web

Mecanismo de almacenamiento en caché del navegador:

1. Visite la página, solicite varios recursos y el navegador verifica si hay un caché local.
2. Si es así, compruebe si el recurso ha caducado. No caducado, use el caché directamente. Cuando caduca, se realiza una solicitud al servidor.
3. Los campos de encabezado etag y de última modificación se incluirán en la solicitud enviada.
4. El servidor utilizará el Etag y la última modificación para determinar si el recurso almacenado en caché por el navegador no está disponible.
5. Si el recurso aún es válido, devuelva un código de respuesta 304 para indicarle al navegador que use el caché. De lo contrario, devuelve el recurso actualizado.

De acuerdo con este conjunto de lógica, puede planificar el caché de su sitio web.

¿Cómo puedo notificar al navegador para que actualice un recurso si el recurso caduca antes de tiempo?

Por lo general, esto no es posible porque el navegador ve que el recurso no ha caducado y no realiza la solicitud en absoluto. Pero esto se puede lograr cambiando la URL del recurso. Por lo tanto, debe agregar un número de versión o una etiqueta aleatoria al nombre de archivo del recurso. Por ejemplo, estilo.12.css. Es decir, no permita que el navegador almacene en caché el archivo html, de lo contrario, el navegador no consultará al servidor hasta que caduque.

4. Ruta de renderizado crítica

El navegador muestra la página web con los siguientes pasos:

1. Procese el marcado HTML y cree el árbol DOM.
2. Procese el marcado CSS y cree el árbol CSSOM.
3. Combina DOM y CSSOM en un árbol de renderizado.
4. Diseño de acuerdo con el árbol de representación para calcular la información de geometría de cada nodo.
5. Dibuja cada nodo en la pantalla.

Optimizar la ruta de representación crítica significa optimizar el proceso de representación para que la página web se pueda representar lo más rápido posible.

CSS

Los archivos CSS bloquean la representación. Después de que el navegador construya el árbol DOM, debe esperar a que se complete el árbol CSSOM. Una etiqueta en la parte superior del documento para evitar CSS no estándar y permitir que el navegador solicite el archivo CSS lo antes posible.

Evite usar @import en archivos css porque el navegador solo encontrará y cargará el css importado después de que se haya cargado y compilado el archivo que contiene la importación. Considere usar CSS en línea que no requiera solicitudes adicionales y no bloquee la representación del contenido principal.

js

El script Java no comenzará a ejecutarse hasta que se construya el CSSOM. js también evita que se construya el árbol DOM. Si async no está marcado en la etiqueta.

Ahora comprenderá qué es la optimización de páginas y cómo se construye. Comprender estos procesos lo ayudará a optimizar rápidamente las páginas de su sitio, reducir las solicitudes y acelerar la carga.

Leyendo este artículo:

• Optimización CSS: 21 formas de acelerar su sitio web
• Optimización del código del sitio JS y CSS en línea: una guía detallada

Gracias por leer: AYUDANTE DE SEO | NICOLA.TOP