Recursos que bloquean el primer renderizado de la página.
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.
En PisPos producimos visibilidad, posicionamiento, clientes y ventas con nuestros servicios de mercadeo en Colombia autónomos.
En PisPos producir visibilidad, posicionamiento, clientes y ventas prestando servicios de mercadeo en Colombia autónomos independientes es la misión. Creamos y/o administramos ecosistemas digitales. Diseñamos, desarrollamos, administramos y posicionamos sitios web, tiendas virtuales. Administramos publicidad digital en redes sociales, buscadores, plataformas de video, diarios, revistas y publicidad impresa. Administramos redes sociales. Contrata ya nuestros servicios, paquetes o solicita cotización personalizada. Vamos con todo.
Comparte nuestro sitio web en:
Nuestros PisPos servicios, productos y paquetes de marketing digital en Colombia disponibles:
Entradas relacionadas:
¿Cómo escoger una pasarela de pagos para tu tienda virtual?.
Entradas recientes:
- Desbloquear data crédito en Colombia
- Mercadeo virtual en Manizales
- Mercadeo colaborativo
- Cotización para la creación de una plataforma WEB para un Hotel en Cartagena
- ¿Qué vender que de dinero rápido?.
- Viralidad en Redes Sociales
- Plan de mercadeo para vender alimentos y bebidas en Colombia
- Pirámide de Maslow
- Cotización servicio de diseño web mensual para iniciativa creada para los proyectos de mitigación de gases efecto invernadero (GEI) que cobra por la certificación de cada bono de carbono.
- ¿Cómo donar dinero a fundaciones en la florida estados para programas para victimas de la violencia?
- ¿Cómo vender aguacate en Colombia?
- Reciclaje de Metales en Manizales y Cali, Colombia.
- Mercadeo en Manizales
- Plan de mercadeo para peluquerías
- Plan de mercadeo en redes sociales para instituto que enseña matemáticas y lectura en Manizales y que tiene de presupuesto $600.000 al mes.
- Plan de mercadeo para un Spa en Bogotá que requiere una facturación de 10 millones al mes invirtiendo 500 mil pesos.
- Desactivar la caché en los servidores de Cloudflare.com
- Modelos de negocio centrados en la sostenibilidad
- Automatización de procesos empresariales
- Modelos de negocio que más dinero darán en el futuro
- Como innovar en una empresa
- Como innovar en un negocio
- Como innovar un negocio
- Mercadeo digital
- Desarrollo de productos y servicios innovadores
- Mercadeo y publicidad
- Mercadeo y ventas
- Mercadeo nacional e internacional
- ¿Cómo capitalizarse?
- Página web definición
- Página web que es y para que sirve
- Enlazar servidor de correos hostinger a un dominio en wix
- ¿En wordpress.com toca pagar para enlazar un dominio?
- ¿En wix es necesario pagar para conectar un dominio?
- Conectar un dominio a servicios gratuitos de páginas web
- WooCommerce API Manager
- Plugins de sincronización de WooCommerce
- Sincronización de dos tiendas virtuales WooCommerce en WordPress
- ¿Cómo producir dinero orgánicamente en Colombia?.
- Nutrición de Leads
- Lead Nurturing
- Lead Scoring
- Investigación de palabras clave
- Técnicas de optimización para motores de búsqueda
- Estrategias de optimización para motores de búsqueda
- Mercadeo de contenidos
- Comercializar por redes sociales accesorios para mascotas al detal y al por mayor en Colombia.
- Patrocinantes para Proyectos
- Mercadeo para Inversionistas
- Generación de leads
- Optimización para motores de búsqueda (SEO)
- Optimización para dispositivos móviles
- Diseño de páginas web en que consiste
- Diseño de páginas web para que sirve
- Diseño de páginas web introducción
- Diseño de páginas web función
- Diseño de páginas web concepto
- Diseño de página web desde cero
- Diseño de páginas web desventajas
- Diseño de páginas web Colombia
- Diseño de páginas web definición
- Diseño de páginas web paso a paso
- Diseño de páginas web beneficios
- Formato de contrato de prestación de servicios de servicios de mercadeo autónomos en Colombia.
- ¿Cómo vender 250 toneladas de abono orgánico al mes en Colombia?
- ¿Cómo vender servicios en línea en Manizales?
- ¿Cómo vender productos en línea en Manizales?
- ¿Cómo se hace marketing en Manizales?
- ¿Qué es marketing en Manizales?
- Aumentar seguidores en Instagram en Manizales
- ¿Cómo integrar Nequi con WooCommerce?
- Posicionamiento web Cali
- SEM Cali
- Diseño de páginas en Manizales
- Corredores hipotecarios en Florida
- ¿Cómo vender juguetes y regalos por internet para Navidad?
- Shortcodes de WooCommerce
- 503 Error
- Error 503
- ¿Qué es SCAM?
- Servicios de mercadeo
- ¿Cómo vender pintura a domicilio en Cali?
- Creación de sitios web
- Página web estilo portafolio para vender prendas y productos en línea
- Manejo de redes sociales precios Colombia
- ¿Cómo aumentar la rentabilidad de un modelo de negocio?
- Está suspendido en WhatsApp. Solución.
- Escalabilidad de un modelo de negocio
- Plan de trabajo anual de marketing digital para Redes Sociales
- Inversión en Startups
- ¿Cómo configurar cualquier impresora en Windows?
- Estímulos del marketing
- Servicios que puede ofrecer un contador en Colombia
- Plan de contenido para una persona que hace chistes de humor negro
- Estrategias de marketing para Diciembre 2023
- Estrategias de marketing para Navidad 2023
- ¿Cómo hacer marketing digital?
- ¿Qué es marketing digital y cómo funciona?
- ¿Cuál es el marketing 4.0?
- Marketing digital para principiantes