Cómo elimino los recursos que bloquean el procesamiento

Cómo Elimino Los Recursos Que Bloquean El Procesamiento

Eliminar los recursos que bloquean el procesamiento

Cada vez que visita un sitio web, el código HTML, CSS y JS se transforma en una interfaz gráfica de usuario. La forma en que está diseñada una web influye en su velocidad, eficiencia y en los indicadores de calidad que se tienen en cuenta a la hora de posicionar. Por todo esto es necesario, especialmente una buena consultora seo, conocer y saber cómo eliminar los recursos que bloquean el procesamiento.

En este artículo conoceremos y examinaremos:

  • cuál es la ruta crítica de renderizado,
  • sus etapas individuales,
  • la posibilidad de su optimización, para lograr mejores resultados.

Para optimizar conscientemente algo, es necesario conocer los fundamentos teóricos en este campo y la capacidad de medir el objetivo asumido.

Después de eliminar los recursos que bloquean el procesamiento, un sitio web rápido y eficiente consume menos CPU, utiliza menos ancho de banda, menos energía y proporciona una mejor experiencia de usuario.

El código HTML, CSS y JS eficiente hará que el sitio web funcione sin problemas también en dispositivos más débiles y antiguos.

Los WebVitals recientemente introducidos, es decir, indicadores básicos de Internet como FCP, FID, LCP y CLS, permiten medir de manera efectiva el rendimiento real de los sitios web y llamar la atención de los desarrolladores sobre aspectos importantes de la optimización, que contribuyen a una mayor disponibilidad de los sitios web, independientemente de la calidad de los dispositivos utilizados o una plataforma específica.

Uno de los conceptos más importantes a comprender es la ruta de renderización crítica.

Elimine los recursos que bloquean el procesamiento (renderizado): esta es la atención que recibimos en PageSpeed Insights si la ruta de renderizado crítica de nuestro sitio web requiere optimización. Otra nota que también está estrechamente relacionada con la ruta de representación crítica es: Evite encadenar solicitudes críticas.

Ruta de representación crítica: definición

Representación de la ruta crítica: es una secuencia de eventos que son responsables de cargar, analizar y representar el código fuente HTML, CSS, JavaScript y otros recursos que la acompañan.

¿Cómo funciona el renderizado de sitios web?

La ruta de renderización crítica se divide en varias etapas.

Ruta de renderización crítica

Cuando escribimos o pegamos una URL en la barra de direcciones (o hacemos clic en un enlace), el navegador envía una solicitud HTTP al servidor.

Código HTML del sitio web, que tiene este aspecto:

<!doctype html>
<html lang="es">
   <head>
      <meta charset="utf-8">
      <title>Sitio web de muestra</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <h1>¡Hola!</h1>
      <img src="página-web-renderizada.jpg" alt="imagen">
   </body>
</html>

se transforma en lo que vemos en el navegador:

sitio web renderizado

Sitio web renderizado.

Y si bien suena complicado, en realidad es una secuencia de instrucciones simples.

DOM

El navegador construye un modelo de documento orientado a objetos, abreviado: DOM (Document Object Model). La especificación HTML contiene información detallada para los desarrolladores de navegadores sobre cómo procesar los datos recibidos. Cada etiqueta HTML llamada etiqueta, por ejemplo, <html> o <p>, se tokeniza y se transforma en un nodo. Nuestra página de ejemplo se transforma en algo como este árbol:

arbol

El árbol contiene todos los elementos de la página, las relaciones entre ellos (por ejemplo, anidamiento) y su contenido. El árbol DOM es una transformación de todos los contenidos del código HTML.

El DOM se construye gradualmente, por ejemplo, cargar la mitad superior del HTML le permite generar la mitad superior del árbol DOM. Este hecho lo utilizan los navegadores (cargan la página en partes) y se puede utilizar para optimizar el rendimiento del sitio web eliminando los recursos que bloquean el procesamiento.

Esto es especialmente visible en páginas muy extensas. Incluso sin implementar técnicas de carga diferida, puede ver la apariencia de la página a saltos y las fotos siempre se cargan con un ligero retraso.

Optimización DOM para eliminar los recursos que bloquean el procesamiento

Dijimos que la generación de DOM en el navegador es gradual. Desde una perspectiva de optimización, podemos:

  • simplificar y acortar el código HTML,
  • minificar HTML,
  • minimizar el tiempo de respuesta del servidor,
  • caché HTML con, por ejemplo, los encabezados Last-Modified, Cache-Control y ETag.

El DOM se generará más rápido si el código HTML que lo describe se optimiza adecuadamente.

CSSOM

El modelo de objetos de hojas de estilo en cascada o CSSOM (Modelo de objetos de hojas de estilo en cascada) funciona de manera similar, pero hay una diferencia fundamental.

Código CSS que se ve así:

body {
   font-size: 16px;
}
p {
   font-weight: bold;
}
span {
   color:red;
}

se convierte a CSSOM. Vale la pena saber que la palabra «cascada» proviene del hecho de que las reglas CSS asignadas al elemento padre afectan el estilo de los elementos secundarios y cada regla subsiguiente sobrescribe la anterior, siempre que el selector sea igual de específico.

En el ejemplo anterior, la propiedad de tamaño de fuente en el elemento del cuerpo también afectará el tamaño del texto en el párrafo.

Si bien esto les da a los desarrolladores mucha libertad, hacer esto con CSS desafortunadamente evita que la mitad superior del CSS se cargue para generar la mitad superior de la página. En las siguientes líneas de CSS, puede agregar reglas adicionales que se apliquen, por ejemplo, a todo el elemento del cuerpo.

Esta es la razón por la que optimizar el rendimiento de CSS es tan problemático y por qué decimos que el archivo de código CSS bloquea la representación de la página porque tiene que estar completamente cargado para que incluso la parte más pequeña de la página se muestre en el navegador.

Optimización de pasos CSSOM para eliminar los recursos que bloquean el procesamiento

Para eliminar los recursos que bloquean el procesamiento, existen técnicas efectivas para optimizar la etapa CSSOM y la ruta de renderización crítica. Uno de ellos es aislar el código CSS crítico que podemos agregar usando una referencia estándar y de bloqueo:

<link rel="stylesheet" href="styles.css">

O agregue este código en las etiquetas <style> en el encabezado de la página:

<style>
   body{
      background:#f8f8f8;
   }
</style>

Al agregar código CSS crítico directamente al código HTML, evita crear cadenas de solicitudes críticas. No tenemos que esperar a que se descargue el archivo. Lo siguiente también contribuye a la creación y el alargamiento de cadenas de solicitudes críticas:

  • importar declaraciones en código CSS,
  • cargando fuentes personalizadas (recursos señalados por font src).

Para que toda la optimización tenga algún sentido, el código CSS crítico debe ser conciso (de unos pocos a varios kilobytes), cubrir las partes más importantes de la página (es decir, el menú principal y los encabezados con mayor frecuencia) y estar libre de instrucciones redundantes. De lo contrario, se vuelve redundante y, en el caso de páginas con muchas subpáginas vistas por visita, es contraproducente.

Para el código no crítico que contiene estilos para los elementos a continuación, puede retrasar la carga, por ejemplo, utilizando esta técnica:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

El efecto que queremos lograr es la aparición más rápida de la parte superior de la página y después de su carga, una generación ligeramente retrasada del resto de la página, por ejemplo, un pie de página, que se necesita un poco más tarde y elementos menos importantes (por ejemplo, película de fondo o animación):

Otra técnica que reduce el bloqueo de renderizado es el uso de consultas de medios:

<link rel = "stylesheet" href = "styles-desktop.css" media = "(min-width: 1200px)">

El valor en el atributo media hace que el archivo se cargue solo cuando se usa un dispositivo con un campo CSS de 1200px, lo que en la práctica significa que no bloqueará la carga en navegadores en dispositivos de escritorio.

Tenga en cuenta que, al igual que con HTML, podemos eliminar declaraciones CSS no utilizadas (tanto en código crítico como complementario), comprimir, minificar y almacenar en caché archivos CSS.

Árbol de renderizado

El árbol de renderizado es una combinación de los árboles DOM y CSSOM. Sin embargo, solo contiene los elementos que desea que se muestren en la pantalla. En caso de que a nuestro párrafo etiquetado «lorem ipsum…» se le asigne la regla p {display: none;} no se tendrá en cuenta en el árbol de renderizado. Dicho elemento no participa en las etapas posteriores, es decir, en la colocación y la pintura.

De esto se sigue un simple consejo de optimización: si desea ocultar un elemento en la página (por ejemplo, una ventana emergente) desde la perspectiva del rendimiento, es mejor ocultarlo con CSS que con JavaScript.

Optimización del árbol de renderizado para eliminar recursos que bloquean el procesamiento

Para la forma final del DOM, CSSSOM y los árboles de renderizado también tienen scripts JavaScript. Se puede usar una regla asíncrona para evitar que JavaScript bloquee el árbol de renderizado. El atributo async hace que el código JS se ejecute independientemente de la etapa de carga de la página y no afecta la ruta de representación. Este atributo se puede aplicar con éxito a los scripts para:

  • analista de la red,
  • widgets de página adicionales,
<srcipt src = "analytics.js" async> </script>

En el archivo analytics.js, colocamos el código que se iba a pegar en el encabezado o antes de la etiqueta </body> de cierre. Es un mito que solo hay una forma correcta de poner un guión en una página. Tenga en cuenta que el manual de instalación no es una recomendación ni un requisito oficial.

En caso de que JavaScript manipule el árbol DOM, se puede usar differ. Gracias a esto, los guiones de los titulares serán tratados con la misma prioridad que si estuvieran al final de la página. Si desea conciliar la carga asincrónica y la manipulación del árbol DOM, puede usar la biblioteca require.js.

Los pequeños archivos JavaScript que manipulan el árbol de la casa se pueden pegar en HTML usando etiquetas <script>. Dicho código retrasará el procesamiento (porque al código en línea no se le puede asignar el atributo async) pero evita la creación de cadenas de solicitudes críticas.

En el caso de los archivos JS, se deben utilizar técnicas universales para optimizar los recursos de texto, como en el caso de HTML y CSS, así: podemos eliminar instrucciones innecesarias, comprimir, minificar y guardar archivos JS en la caché.

Diseño

El diseño es la etapa en la que el navegador determina las posiciones y dimensiones de los elementos individuales del árbol de renderizado. En esta etapa, el número de píxeles se calcula sobre la base de unidades de porcentaje relativo o rem, que se utilizan para páginas de diseño web proporcionales o receptivas.

La «organización» de la página tiene lugar no solo durante la primera carga de la subpágina, sino también cuando se gira la pantalla y cuando se cambia el área de trabajo del navegador. El paso de rediseño también se puede realizar para efectos visuales. La optimización del código CSS y JS puede basarse en

  • Evite repetir este proceso, por ejemplo, deslizando o cambiando el tamaño de los elementos en la página,
  • utilizar valores codificados de ancho y alto para gráficos, Vea Dimensiones de imágen
  • en lugar de animaciones SVG, use películas mp4 o renuncie a tales efectos.

Pintura

Pintar es el proceso de colorear píxeles específicos en una vista de navegador. Esta es la etapa final de renderizado y es una formalidad ya que depende totalmente de las etapas anteriores. La pintura debe repetirse cada vez que se cambia el árbol DOM o CSSOM o se repite el diseño, por ejemplo, debido a la rotación de la pantalla o al cambio del área de trabajo del navegador.

Resumen: La importancia de eliminar recursos que bloquean el procesamiento

En el proceso de eliminar los recursos que bloquean el procesamiento, gracias a la optimización de la ruta de renderización crítica, todos los navegadores pueden mostrar rápida y eficientemente el contenido final como se muestra en el código fuente y los recursos adjuntos.

Una mayor facilidad de uso para los dispositivos móviles, una mejor puntuación de rendimiento y una mejor experiencia del usuario también tendrán un impacto positivo en las posiciones de los motores de búsqueda y no limitarán el desarrollo y la escala del sitio web.

Un sitio web sin el lastre de código redundante (eliminado recursos que bloquean el procesamiento) y prácticas de desarrollo que han sido suficientes en la última década logrará mejor sus objetivos comerciales y será más probable lograr el éxito general. Afortunadamente o desafortunadamente, una ventaja de incluso un punto porcentual puede decidir la victoria; después de todo, de eso se tratan las clasificaciones.

Fuentes:

https://developers.google.com/web/fundamentals/performance/critical-rendering-path

 

Contenido Relacionado:

 

Como Mejorar First Contentful Paint
First Input Delay. Retardo De La Primera Entrada
Presupuesto De Rastreo. Cómo Optimizarlo
Seo Técnico Porqué Es Importante
Largest Contentful Paint 
Cómo Usar Google Search Console
Cómo Analizar El Perfil De Enlaces
Enlaces Confiables Para Construir Autoridad
Por Que El 96% De Los Usuarios Hacen Clic En El Logotipo
SEO Spam o Spamdexing, Malware seo
Cumulative Layout Shift (CLS)
Escritor De Contenido
Arreglar Enlaces Rotos Y Usarlos En Link Building
Estrategia De Link Building Poderosa 
Cómo Mejorar las Core Web Vitals
Consultora seo

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuar!

promedio de puntuación

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

¡Siento que este contenido no te haya sido útil!

¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

Sigueme
Últimas entradas de Estela Silva H. (ver todo)

Soporte a su negocio en el campo del posicionamiento web, optimización web y auditorías profesionales. Gracias a mis acciones, los sitios web obtienen un tráfico segmentado que se traduce directamente en ventas y conversiones en el sitio web con  efectos seguros durante muchos años.

Servicios de Comercio electrónico Servicios de e-Marketing y Estrategías
Montar una tienda Posicionamiento en Goole
Posicionamiento de tiendas Marketing de contenidos
Notificaciones push Auditorías de Contenido
Auditorías SEO
Páginas Web Gratis
Gestión de Google Ads
Asesoramiento y Consulta
Reparación de Sanciones de Google
Entrenamiento SEO
Reparación de Sitio Hackeado
Acelerar WordPress