¿Qué son los recursos de bloqueo de procesamiento y cómo solucionar los problemas de bloqueo de procesamiento?

Los recursos que bloquean el renderizado son una de las razones más comunes por las que los sitios web se cargan lentamente. Y si su sitio web no es lo suficientemente rápido, no solo está perjudicando la experiencia de usuario de sus visitantes, sino también su clasificación en los motores de búsqueda. La mala noticia es que si su sitio web es lento, está perdiendo clientes e ingresos.

Sin embargo, también hay buenas noticias: puede mejorar la velocidad de su sitio web eliminando los recursos que bloquean el procesamiento. En este artículo, explicaremos cómo los recursos de bloqueo de procesamiento afectan sus tiempos de carga y le mostraremos cómo solucionarlos.

¿Qué son los recursos de bloqueo de procesamiento?

Los recursos de bloqueo de procesamiento más comunes son los archivos JavaScript y CSS que se encuentran en el encabezado de su página web. Se cargan encima del área de pliegue (o el área que normalmente ve en un sitio web antes de desplazarse hacia abajo para ver el resto del contenido) y son parte de la ruta de representación crítica utilizada por un navegador web.

En términos simples, eso significa que ciertos eventos deben ocurrir para que su navegador muestre (procese) correctamente la vista inicial de cualquier página web. Este es un ejemplo de cómo funciona una ruta de representación básica:

• El navegador descarga una página web que consta de un archivo HTML que contiene la estructura de la página web.
• Luego, el navegador lee el HTML y observa 3 archivos adicionales: un archivo css, un archivo javascript y una imagen.
• El navegador primero descargará la imagen.
• Luego, el navegador se da cuenta de que no puede continuar mostrando la página sin tomar el CSS y JavaScript.
• El navegador descarga el archivo CSS y lo lee para asegurarse de que no se llame a nada más.
• El navegador descarga el archivo JavaScript y lo lee para asegurarse de que no se llame a nada más.
• El navegador finalmente puede mostrar la página web.

Mientras el navegador está ocupado cargando y leyendo cada uno de los archivos CSS y JavaScript, sus visitantes miran una pantalla en blanco, esperando que se cargue su sitio. Si está utilizando un CMS como WordPress, su navegador puede estar ocupado durante bastante tiempo porque tendrá que cargar no solo los archivos de estilo y script de su tema, sino también los archivos de script y estilo que vienen con WordPress, así como los que vienen con todos los complementos y widgets que estás usando.

Cuando se trata de optimizar la velocidad de su sitio web, la primera tarea en su lista debe ser reducir el tiempo que les toma a sus usuarios ver e interactuar con su contenido. La forma más fácil de hacerlo es optimizar su ruta de renderizado crítica.

Cómo solucionar problemas de bloqueo de procesamiento

Ahora que sabe qué causa los problemas de bloqueo de procesamiento y cómo afectan la velocidad de su sitio, hablemos sobre cómo solucionar esos problemas.

CSS de bloqueo de procesamiento

Hay tres formas de solucionar los problemas de CSS que bloquean el renderizado:

• Llame correctamente a sus archivos CSS : su archivo CSS debe estar vinculado en su archivo HTML de la siguiente manera: <link rel="style.css" href=“style.css"> en lugar de depender del método @import . El método @import generalmente estará cerca de la parte superior de su hoja de estilo regular y hará que el navegador regrese y encuentre el archivo importado antes de que pueda leer el resto del archivo CSS y resulte en un retraso aún mayor cuando se trata de mostrar su página web
• Reduzca la cantidad de archivos CSS en la ruta crítica : si es posible, combine todos los diferentes archivos CSS en uno y elimine la llamada a esos archivos de su HTML

JavaScript de bloqueo de procesamiento

Para eliminar el JavaScript que bloquea la representación, debe saber cuántos archivos JavaScript están cargados y dónde se les llama en su HTML. Una buena forma de averiguarlo es utilizar la herramienta Google PageSpeed ​​Insights. Cuando la empresa de limpieza con sede en Australia, This Is Neat Cleaning, estaba creando su sitio web, utilizaron PageSpeed ​​Insights de Google como punto de referencia, probando varios escenarios para descubrir exactamente lo que necesitaban tanto para dispositivos móviles como para computadoras de escritorio.

A partir de las pruebas, fue evidente que insertar la mayoría de los scripts en la parte inferior de los archivos HTML produjo los mejores resultados. La razón principal es que mover los scripts a la parte inferior de la página eliminó el bloqueo de renderizado de javascript para que no detuviera la experiencia del usuario. Con el CSS crítico aún cargándose en la parte superior de la página, el usuario aún podía usar el sitio fundamentalmente, mientras que las interacciones y la funcionalidad aún se cargaban en segundo plano.

Usar un complemento

Por supuesto, como con cualquier cosa relacionada con WordPress, puede usar un complemento para solucionar los problemas de bloqueo de procesamiento. Con más de un millón de instalaciones activas en total, era obvio que This is Neat Cleaning usaría W3 Total Cache para el almacenamiento en caché, la minimización y la optimización del rendimiento.

Así es como puede usar W3 Total Cache para solucionar problemas de bloqueo de procesamiento.

En su panel de control de WordPress, vaya a Rendimiento > Configuración y desplácese hacia abajo hasta la sección Minificar . Marque la casilla que dice Habilitar y luego elija Manual en el menú desplegable junto al modo minificar. Guardar configuraciones . Luego deberá agregar todos los scripts y estilos que desea minimizar.

Para averiguar dónde se encuentran las secuencias de comandos y las hojas de estilo que bloquean el procesamiento, vaya a la herramienta de información de velocidad de página de Google y analice su sitio web. Luego, mire la pestaña de sugerencias y busque la sección que dice: Eliminar el JavaScript que bloquea la visualización y el CSS en el contenido de la mitad superior de la página . Haga clic en Mostrar cómo corregir y seleccione y copie la URL del archivo.

Vuelve a tu panel de WordPress y navega hasta W3 Total Cache > Performance > Minify . Desplácese hacia abajo hasta la sección de JavaScript y, en Operaciones en áreas , asegúrese de que el tipo de incrustación esté configurado en Sin bloqueo usando diferir para la sección <head> . Luego, haga clic en el botón Agregar secuencia de comandos y pegue la URL que copió de la herramienta Google PageSpeed.

Una vez que haya agregado todos los archivos de script, desplácese hacia abajo hasta la sección CSS , haga clic en Agregar una hoja de estilo y agregue las URL de los archivos de la hoja de estilo copiados de Google PageSpeed ​​Insights.

Cuando haya terminado, haga clic en el botón Guardar configuración y purgar caché .

Pensamientos finales

Los recursos que bloquean el procesamiento pueden causar estragos en lo que respecta a la velocidad del sitio web. Afortunadamente, hay algunas maneras de solucionar esos problemas, así que use los consejos que se proporcionan aquí para mejorar la velocidad de su sitio web y asegurarse de que sus visitantes tengan la mejor experiencia de usuario posible.