Recursos que bloquean el primer renderizado de la página.

Tabla de contenido

Hay recursos que bloquean el primer renderizado de la página y estos deben eliminarse para que la carga de la página se haga rápido.

¿QUÉ SE MARCA COMO RECURSOS QUE BLOQUEAN EL RENDERIZADO?.

Se marca dos tipos de URL que bloquean la visualización: Secuencias de comandos y hojas de estilo.

Una etiqueta <script> que:

  • Está en el <head>del documento.
  • No tiene el atributo defer .
  • No tiene el atributo async .

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

  • No tiene el atributo disabled. Cuando este atributo está presente, el navegador no descarga la hoja de estilo.
  • No tiene un atributo media que coincida específicamente con el dispositivo del usuario. media=”all” se considera bloqueo de renderizado.

El primer paso para reducir el impacto de los recursos que bloquean el renderizado es identificar qué es crítico y qué no.

Puede reducir el tamaño de sus páginas enviando sólo el código y los estilos que necesita.

Una vez que haya identificado el código crítico, mueva ese código de la URL de bloqueo de procesamiento a una en línea script en su página HTML. Cuando se cargue la página, tendrá lo que necesita para manejar la funcionalidad principal de la página.

¿CÓMO SE HACE ESTO EN WORDPRESS?.

Hay una serie de complementos de WordPress que pueden ayudarlo a incorporar activos críticos o diferir recursos menos importantes. Ten en cuenta que las optimizaciones que ofrecen estos complementos pueden interferir con funciones de tu tema o complementos, por lo que seguramente tengas que hacer cambios en el código.

Con un plugin de cache y uno de minificación de archivos o uno que lo integre todo puede solucionarlo. No te vamos a explicar exactamente cual plugin usar en WordPress porque este no es el sentido de esta entrada de blog, lo que si podemos explicarte es que al usar cualquier plugin de minificación deberían eliminarse algunos problemas de recursos que bloquean el primer renderizado de la página.

El objetivo es reducir el impacto de estas URL que bloquean el renderizado incorporando recursos críticos, aplazando recursos no críticos y eliminando cualquier cosa que no se use.

¿Cómo identificar recursos críticos?.

El primer paso para reducir el impacto de los recursos que bloquean el renderizado es identificar qué es crítico y qué no. Identifique CSS y JS no críticos. Cuando carga o ejecuta una página. Use herramientas cómo PageSpeed de Google: https://pagespeed.web.dev/ para identificar esos archivos.

Puede reducir el tamaño de sus páginas enviando solo el código y los estilos que necesita. Deja el código que es fundamental para la funcionalidad principal de la página. Elimina estilos que se aplican al contenido que no es inmediatamente visible; el código no se usa en la funcionalidad principal de la página.

¿Cómo eliminar los scripts que bloquean el renderizado?.

Una vez que haya identificado el código crítico, mueva ese código de la URL de bloqueo de procesamiento a una etiqueta script en línea en su página HTML. Cuando se cargue la página, tendrá lo que necesita para manejar la funcionalidad principal de la página.

Si hay código en una URL que bloquea la representación que no es crítica, puede mantenerlo en la URL y luego marcar la URL con los atributos async o defer

El código que no se usa en absoluto debe eliminarse.

¿Cómo eliminar las hojas de estilo que bloquean el renderizado?.

Similar al código en línea en una etiqueta <script>, se requieren estilos críticos en línea dentro de un bloque <style> al final head de la página HTML. A continuación, cargue el resto de los estilos de forma asincrónica mediante el enlace preload .

Considere la posibilidad de automatizar el proceso de extracción e inserción de CSS.

Otro enfoque para eliminar los estilos que bloquean el renderizado es dividir esos estilos en diferentes archivos, organizados por consulta de medios. Luego agregue un atributo de medios a cada enlace de la hoja de estilo. Al cargar una página, el navegador solo bloquea la primera pintura para recuperar las hojas de estilo que coinciden con el dispositivo del usuario.

Finalmente, querrá minimizar su CSS para eliminar cualquier espacio en blanco o caracteres adicionales. Esto asegura que está enviando el paquete más pequeño posible a sus usuarios.

Producimos visibilidad, posicionamiento, clientes y ventas en la web.

Contrata hoy nuestros marketing digital avanzados en Colombia.

Prestamos servicios de marketing digital en Colombia: Creación y/o administración de ecosistemas digitales, servicio de diseño y desarrollo de sitios web en WordPress, servicios de administración de redes sociales, servicios de administración de pauta digital en Google Ads, Facebook Ads y LinkedIn Ads.

Solicita tu cotización personaliza o añade al carrito y contrata nuestros de servicios de marketing digital hoy aquí en nuestro sitio web.

Selecciona y contrata nuestros paquetes de servicios de marketing digital en Colombia:

Para solicitar cotización personalizada de nuestros servicios de marketing digital por favor completa el siguiente formulario:

Anuncios:

Dejar comentarios:

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *