Cómo eliminar los recursos que bloquean el renderizado | Mejoras de WP

Si escucha quejas sobre la velocidad de carga de su sitio web o desea cargar sus páginas web más rápido y mejorar su experiencia de usuario, es posible que desee considerar cómo eliminar los recursos que bloquean el procesamiento.

Independientemente del motivo, la rapidez con la que un sitio web aparece frente a la cara del visitante puede afectar la experiencia del usuario y hacer que su empresa pierda conexiones con los clientes. La experiencia del usuario en el sitio web depende principalmente de la ruta de representación crítica y de la gestión de los scripts que carga su sitio web durante el proceso de representación.

¿Qué es la representación?

Todos los sitios web siguen un camino para que el usuario vea e interactúe con su contenido. La ruta de carga del sitio web se denomina ruta de representación crítica. Esta ruta describe los pasos de cada sitio para recopilar y generar datos para el visitante y su navegador.

Qué hacen los navegadores antes de renderizar

Ingresar la URL de un sitio web desencadena el siguiente proceso:

1. La navegación se completa cuando un usuario solicita una URL específica.
   1. Se produce una búsqueda de DNS, en la que un servidor proporciona una dirección IP
   2. El navegador y el servidor del sitio web realizan un protocolo de enlace TCP para establecer una conexión
   3. Las solicitudes de conexión segura obtienen una negociación TLS o un segundo intercambio de protocolo de enlace
2. El navegador recibe una respuesta y obtiene el código del sitio web.
   1. El primer paquete de datos se recibe en un TCP Slow Start para regular el tráfico de red
   2. El usuario envía reconocimientos (ACK) al servidor para establecer las limitaciones de conexión y las tasas de envío.
3. El navegador analiza la información y convierte los datos en un modelo de objetos CSS (CSSOM) y un modelo de objetos de documento (DOM).
   1. Se construye el árbol DOM (estructura del sitio y de la página)
   2. Un escáner de precarga recopila recursos externos, como secuencias de comandos e imágenes.
   3. El CSSOM se construye (árbol de estilo)
   4. JavaScript se compila mientras se construye el CSSOM
   5. El modelo de objetos de accesibilidad (AOM) está diseñado para que los dispositivos de asistencia interpreten el contenido.
4. El renderizado se produce utilizando los árboles CSSOM y DOM creados previamente.

¿Qué sucede cuando renderizas una página?

Los sitios web se representan a través del diseño de código para completar el diseño, el estilo, la pintura y, a veces, la composición en un sitio web. El modelo de objetos CSS (CSSOM) y el modelo de objetos de documento (DOM)

Estilo

El DOM y el CSSOM se combinan en un árbol de representación y comienza la construcción. El árbol de representación organiza los nodos visibles, el contenido y los estilos calculados para el sitio y cada nodo único.

Disposición

El diseño es el paso donde la arquitectura se encuentra con la construcción, y se crea una estructura para que la página muestre el ancho, el alto y la ubicación de todos los nodos en el árbol de representación. A cada objeto se le determina el tamaño y la posición.

Los sitios web se presentan en una estructura de caja. Estos cuadros se pueden ajustar a un número ilimitado de diferentes tamaños de ventana gráfica. Cuando la estructura de la caja cambia según el tamaño, esto se denomina reflujo .

Pintura: primera pintura y primera pintura con contenido (FCP)

El momento en que el navegador de un sitio web realiza una representación de una página se denomina "Primera pintura". First Paint podría ser un color de fondo sólido solo según el código de la página.

First Contentful Paint (FCP) se refiere al momento medible en el que un visitante del sitio web puede ver el contenido de su página (texto, imágenes, videos, etc.). El FCP mide desde el comienzo de la carga de su página hasta el punto en que se procesa cualquier contenido.

First Paint y FCP no son lo mismo que una página de carga rápida o un rendimiento rápido, pero la experiencia del usuario se vuelve mucho más positiva cuando los visitantes del sitio perciben una página de carga rápida. El ajuste fino de sus primeras pinturas, el tiempo de carga y el rendimiento del sitio mejoran la percepción del usuario sobre el tiempo de carga.

composición

Las páginas web usan capas donde los objetos se superponen para organizar la estructura. La composición es donde la página calcula el orden de las cosas para representarlas correctamente.

Los reflujos desencadenan una nueva composición, ya que el posicionamiento de los objetos a menudo cambia en un reflujo.

¿Qué son los recursos de bloqueo de procesamiento?

Las secuencias de comandos, las hojas de estilo y las importaciones de HTML que ralentizan, retrasan o impiden que el navegador reproduzca contenido en un sitio web son recursos que bloquean la visualización. Cuando las personas se refieren a los recursos de bloqueo de procesamiento, generalmente se refieren a:

• CSS
• JavaScript en la sección <head>
• Fuentes cargadas desde un servidor o red de entrega de contenido
• Importaciones de HTML (páginas heredadas)

Hay un montón de CSS y JavaScript que no bloquean el renderizado y es fundamental para cargar cerca de la parte superior. Priorice las hojas de estilo para asegurarse de que cualquier visitante del sitio vea el contenido deseado en lugar de contenido sin estilo o nada.

¿Qué es JavaScript y CSS que bloquean el renderizado?

Durante el proceso de representación, su navegador carga la información del sitio web al ejecutar primero la información en el <head>, incluidos todos los scripts. Todos los scripts deben ejecutarse en orden y procesarse por completo antes de que la página sea visible en su navegador.

Las secuencias de comandos se crean en una cola, por lo que el orden de las secuencias de comandos en <head> es esencial durante el desarrollo. Dependiendo del código, puede ralentizar o evitar que su sitio web se cargue por completo, y esto es a lo que nos referimos como CSS y JavaScript que bloquean el procesamiento.

Los scripts en su sitio web de WordPress pueden provenir de temas, trabajos personalizados o complementos agregados para varias funcionalidades.

¿Las imágenes son recursos de bloque de procesamiento?

Si se pregunta si las imágenes son recursos que bloquean el renderizado, no lo son. El tamaño de una imagen aún puede causar problemas de carga en su página, pero no debería bloquear la representación.

¿Por qué eliminar los recursos que bloquean el renderizado?

Los scripts que bloquean el renderizado pueden ralentizar los tiempos de carga de la página y arruinar la experiencia de un sitio web para sus visitantes. La percepción de un sitio web lento puede provocar una pérdida de visitantes si la experiencia de su sitio web es deficiente. La baja retención de visitantes puede afectar los resultados de su motor de búsqueda y reducir su lista de resultados.

Las clasificaciones más bajas de optimización de motores de búsqueda (SEO) significan una reducción en los visitantes y la pérdida de negocios potenciales. Perder clasificaciones reduce el número de visitantes, y un sitio pobre reduce la retención de visitantes; Los recursos que bloquean el renderizado pueden ser un gran problema.

Si su sitio web tiene como objetivo un puntaje alto de PageSpeed ​​de Google, comprender sus recursos de bloqueo de procesamiento es clave para lograr ese objetivo.

Cómo eliminar los recursos que bloquean el renderizado

Tomarse en serio las clasificaciones de SEO de su sitio y la experiencia del usuario significa que su sitio necesita que se traten o eliminen los recursos que bloquean el renderizado. Si no está creando su sitio desde cero, comience a probar su sitio web en busca de recursos que bloqueen el renderizado.

Una vez que haya identificado esos recursos que bloquean el renderizado, elegirá su método para abordar el problema y mejorar la funcionalidad de su sitio.

Pruebe si su sitio web tiene recursos que bloquean el renderizado

Nunca está de más realizar una evaluación en su sitio web para descubrir cualquier recurso que bloquee el renderizado (pruebe Google PageSpeed ​​Insights). Si ha optimizado lo mejor que ha podido, está siguiendo las mejores prácticas y aún tiene problemas, o no sabe por dónde empezar, los evaluadores de páginas pueden ser guías útiles.

Métodos para eliminar JavaScript y CSS que bloquean el renderizado

WordPress le permite administrar cualquier recurso que se interponga en el camino de la representación de su sitio de diferentes maneras. WordPress le permitirá organizar sus secuencias de comandos y enlaces de bloqueo de procesamiento con código, etiquetas, organización y optimización de archivos y complementos.

Los desarrolladores profesionales también pueden crear complementos o temas personalizados que integran estos procesos en el código.

Eliminar Javascript que bloquea el renderizado con código

Tres métodos para abordar los recursos que bloquean el renderizado a través del código son:

1. Mueva las etiquetas para <script> y <link> a la parte inferior de su código HTML
2. Agregue atributos asíncronos o diferidos a la etiqueta para scripts no críticos.
3. Elimina el código JavaScript no utilizado.

WordPress carga un archivo jQuery Migrate para proporcionar compatibilidad con versiones anteriores de jQuery utilizadas por complementos y temas. Puede usar un fragmento de código o un complemento para evitar que WordPress cargue este archivo jQuery Migrate si nada en su sitio lo necesita para funcionar.

Elimine las hojas de estilo que bloquean el renderizado

La naturaleza de las hojas de estilo hace que bloqueen recursos por naturaleza. Puede abordar esto en su sitio de las siguientes maneras:

1. Dividir CSS por tipo de medio (móvil, tableta, escritorio, etc.)
2. Optimice la ruta de representación crítica
3. Combinar archivos CSS

Al usar WordPress y un constructor visual, es posible que no controle cómo se construye una página directamente, pero hay formas de solucionar cualquier problema.

Abordar el bloqueo de procesamiento usando un complemento o extensión de WordPress

Los complementos y extensiones de WordPress se utilizan para organizar los scripts en una página. Los complementos pasarán por las etiquetas <script> y <link> de su página y aplicarán los atributos diferidos o asíncronos según pautas específicas.

Hemos revisado y probado una variedad de complementos para WordPress y continuamos compartiendo cosas útiles como nuestros complementos favoritos para la optimización de la velocidad en el blog.

Haga que un profesional de WordPress elimine los recursos que bloquean el renderizado por usted

Algunos complementos requieren personalización y, aunque parecen sencillos, pueden terminar sin funcionar si se configuran incorrectamente. No hay vergüenza en pedir ayuda a un profesional de WordPress y WP Buffs tiene varios especialistas que pueden optimizar su sitio.

Prácticas recomendadas para optimizar el renderizado

1. Agrupe sus recursos de bloqueo de procesamiento para disminuir su impacto en la carga de la página.
2. Reduzca el tamaño del recurso, por lo que se reduce la cantidad de bytes para cargar.
3. Aplazar la descarga de recursos de bloqueo que no sean de procesamiento.
4. No agregue CSS con la regla @import ya que es una carga externa.
5. Use un complemento de WordPress diseñado para almacenar en caché sus scripts y optimizar su JavaScript y CSS.
6. Cargue fuentes personalizadas localmente.
7. Identificar CSS y JavaScript críticos y no críticos.
8. Marque el código de bloqueo de procesamiento no crítico con atributos asíncronos o diferidos.
9. El código no utilizado debe eliminarse.

Elimina el dolor de cabeza y deja que un profesional de WordPress te ayude

Los WP Buffs son expertos en optimizar sitios de WordPress y mejorar el rendimiento de la página. Entendemos por qué el rendimiento es importante para su negocio y en qué áreas enfocarse para lograr el impacto más significativo.

Mejorar el rendimiento de su sitio web y la experiencia de los visitantes puede ser más que solo recursos de bloqueo de procesamiento. WP Buffs puede echar un vistazo a su sitio y dirección:

• Tamaños de imagen
• Calidad de imagen y formato de entrega
• Longitud de la página y porcentaje de contenido dinámico
• Temas mal construidos
• Scripts innecesarios que causan retrasos
• Complementos que están mal construidos
• Scripts externos no utilizados
• Software obsoleto
• Plan de alojamiento web limitado que no puede satisfacer suficientemente las necesidades del sitio

WordPress puede ser una plataforma razonablemente fácil para construir un sitio web, pero maximizar la experiencia del usuario puede requerir un profesional capacitado o, a menudo, un gran proveedor de servicios.

Preguntas frecuentes