Que bloquea el renderizado en WordPress y ralentiza su sitio
"Recursos de bloqueo de procesamiento": si ha visto este mensaje emergente mientras probaba la velocidad de su sitio web , o si ha oído hablar de él como una causa común de velocidad de carga lenta, probablemente esté desconcertado. Está buscando formas de acelerar su sitio web y deshacerse de cualquier código extraño que lo ralentice, pero ¿por dónde empezar a solucionarlo?
Por suerte para ti, eliminar los recursos que bloquean el procesamiento no es tan difícil una vez que sabes con qué estás lidiando. Un simple plugin puede hacer el truco, o incluso puede encargarse de él manualmente si prefiere hacerlo.
¿Totalmente perdido? Explicaremos en términos simples qué son los recursos de bloqueo de procesamiento, cómo saber si su sitio los tiene y qué puede hacer al respecto.
¿Qué son los recursos de bloqueo de procesamiento?
Cuando alguien visita una página de su sitio web, necesita descargar (o "renderizar") todo su contenido. Esto incluye código, a saber, HTML, CSS y Javascript . Y a menos que haga todo lo posible por cambiarlo, será necesario cargar hasta el último script antes de que el usuario pueda ver algo.
Eso es lo que significa el bloqueo de procesamiento: evita que la página se muestre hasta que el usuario haya terminado de cargarla. Todo lo que obtendrán es una pantalla en blanco.
Renderizar recursos de bloqueo en información de velocidad de página
¿Pero por qué? Con HTML, tiene sentido que bloquee el procesamiento. HTML es el núcleo de su sitio web, donde reside todo el contenido. Sin él, no tendría un sitio web para cargar. Y HTML suele ser muy pequeño, por lo que descargarlo no lleva mucho tiempo. Donde pueden surgir problemas es con CSS y Javascript.
CSS afecta el estilo de su página?
Coloca elementos, determina el diseño y hace que su sitio web sea receptivo. Sin CSS, su sitio se vería como un gran bloque de texto con algunos enlaces e imágenes. Y Javascript hace que su sitio web sea dinámico, cambiando su apariencia sobre la marcha. Los plugins de WordPress también pueden utilizarlo para agregar funcionalidad a su sitio web.
Pero aquí está la cuestión: no todos los scripts son visibles de inmediato. Todo lo que necesita para mostrar todo correctamente son los estilos CSS y los elementos Javascript que aparecen en la mitad superior de la página. El resto puede retroceder de forma segura, de modo que la página se pueda mostrar antes de que termine de cargarse por completo.
Si tiene recursos JavaScript y CSS innecesarios que obligan a los usuarios a esperar más de lo necesario, verá el error de recursos que bloquean la representación cuando pruebe su sitio.
¿Por qué deshacerse de los recursos que bloquean el procesamiento?
Entonces, la gente tiene que esperar unos segundos más (¡o incluso milisegundos!) Para cargar, ¿a quién le importa? Pero puede tener un impacto mayor en sus visitantes de lo que cree.
Cuando se trata de tiempos de carga, cada segundo cuenta.
Cada vez más propietarios de sitios web aprenden a comprimir sus imágenes y código , y la gente ha llegado a confiar en esas velocidades de carga más rápidas. Si no está al día, lo más probable es que simplemente hagan clic y encuentren un sitio diferente.
También hay que tener en cuenta las personas que utilizan dispositivos móviles menos potentes o una Internet más lenta.
Es posible que pueda cargar su propio sitio con relativa rapidez en una computadora de escritorio, pero las personas que utilizan teléfonos o tabletas pueden tener dificultades y esperar varios segundos solo para pasar la pantalla blanca.
Desea hacer todo lo que esté a su alcance para deshacerse de cualquier cosa que pueda atascar su sitio. Incluso pequeñas optimizaciones, como eliminar los recursos que bloquean el procesamiento, pueden marcar una gran diferencia para algunas personas.
¿Su sitio web tiene bloqueo de renderizado?
Es posible que esté aquí porque le han dicho que su sitio tiene recursos de bloqueo de procesamiento y no está seguro de cómo solucionarlo. Pero si aún no lo ha probado, ahora es el momento de hacerlo.
Hay varios servicios gratuitos que pueden señalar los cuellos de botella comunes que afectan su velocidad de carga, y pueden indicarle si tiene scripts en su sitio que se cargan de manera ineficiente.
PageSpeed Insights es la más popular de estas herramientas. Puede poner cualquier URL que desee para ver cuál es su puntuación. Continúe e ingrese la dirección de su sitio.
Después de unos segundos, aparecerán los resultados. Desplácese hacia abajo y encontrará oportunidades que puede aprovechar para mejorar los tiempos de carga, junto con las auditorías que su sitio web pasó. Si tiene recursos de bloqueo de procesamiento, debería verlos..
Quizás se esté preguntando: ¿Es importante obtener una puntuación de PageSpeed perfecta? La respuesta es que depende. Recuerde que esta es una herramienta automatizada y solo pretende ser una guía para llevarlo por el camino correcto. Si está sacrificando la funcionalidad o la experiencia del usuario para obtener una puntuación perfecta, no está ganando nada en absoluto.
Pero los recursos de bloqueo de procesamiento son definitivamente algo de lo que querrás deshacerte, así que veamos algunos métodos para eliminarlos.
Eliminación manual de CSS y JavaScript que bloquean el renderizado
Ciertamente no es necesario tratar este problema manualmente, ya que existen muchos plugins que son mucho más fáciles de usar y los cubrimos a continuación. Pero si se siente cómodo navegando por el código y prefiere usar la menor cantidad de plugins posible, siempre puede hacer todo esto usted mismo.
Para optimizar Javascript, puede seleccionar scripts individuales que se muestran más abajo en la página y agregarles async un defer atributo . Más información
https://www.w3schools.com/tags/att_script_async.asp
y
Con la carga de bloqueo de renderización predeterminada, cada vez que el navegador encuentra un archivo Javascript, dejará de cargar el HTML para descargarlo y ejecutarlo. El async atributo le permite continuar descargando HTML junto con Javascript, pero dejará de descargarse brevemente para ejecutar el script. El defer atributo hace lo mismo, pero ejecuta el script solo una vez que el HTML termina de analizar.
¿Cuándo debería utilizar cualquiera de los atributos? asynca veces puede romper scripts dependiendo del orden de carga, como jQuery , así que en caso de duda, use defer; siempre ejecuta los scripts en el orden correcto. Puede utilizar asyncscripts independientes que no dependen de nada más para cargar.
Arreglar CSS que bloquea el renderizado puede requerir un poco más de trabajo. Puede insertar CSS que se representa en la mitad superior de la página colocándolos en la <head>sección de su documento HTML. Sin embargo, haga esto solo con archivos pequeños, y solo con estilos que el espectador verá instantáneamente.
En cuanto al resto de su CSS, puede agregar los atributos async o diferir al igual que con Javascript. También puede agregar consultas de medios a ciertos estilos para que solo se carguen en situaciones específicas.
Recuerde: la pestaña de cobertura en las herramientas de desarrollo del navegador puede ayudarlo a identificar rápidamente los elementos que sus visitantes necesitan cargar primero y ayudarlo a identificar el código no utilizado que puede ser eliminado.
Plugins para eliminar los recursos que bloquean el procesamiento
Si bien es posible optimizar su Javascript y CSS sin tocar un plugin de WordPress, no es necesario que haga todo ese trabajo. Tal vez no se sienta seguro al trabajar con código sensible o simplemente desee una herramienta que agilice mejor el proceso. Si ese es el caso, uno de estos plugins funcionará bien.
Autoptimizar y Async Javascript
Hechos por el mismo desarrollador, estos dos plugins tienen como objetivo ayudarlo a detener esos scripts que llenan la página y mover el código crítico al encabezado donde se carga primero.
Autoptimize es un plugin de optimización todo en uno. Además de minimizar imágenes, HTML y otros scripts, también puede incorporar CSS y diferir scripts no críticos. Todo esto está disponible con el clic de un botón. Los desarrolladores pueden personalizar el plugin para sus necesidades con opciones avanzadas y una API.
Pero la mayoría de los usuarios solo necesitarán marcar dos casillas para solucionar el problema de bloqueo de procesamiento. Simplemente diríjase a Configuración> Optimización automática en su back-end y habilite Optimizar código Javascript y Optimizar código CSS .
Eso generalmente lo hará, pero si tiene problemas, puede experimentar con las opciones y habilitar o deshabilitar Archivos JS agregados / Archivos CSS agregados .
Es una buena idea comenzar con Autoptimize, y si aún es penalizado por los recursos que bloquean el renderizado, pruebe AsyncJS para limpiar los cabos sueltos.
Usarlo es igual de fácil. Visite Configuración> Async Javascript y marque para habilitarlo. Aquí puede elegir entre asynco defer. Pruébelo y, si asynchace que su página se rompa, enciéndalo defer. También debe aplazar o excluir jQuery, ya que habilitarlo asynccasi definitivamente romperá su sitio.
WP Rocket es un plugin premium diseñado específicamente para facilitar su uso sin importar su nivel de habilidad. Almacena en caché, comprime, minimiza y, por supuesto, difiere esos recursos que bloquean el procesamiento.
WP Rocket viene con dos configuraciones para eliminar los scripts de bloqueo de renderizado: Optimizar la entrega de CSS y Cargar JavaScript diferido .
Para activarlos, vaya a Configuración> WP Rocket> Optimización de archivos . Habilite las dos configuraciones mencionadas anteriormente y estará listo. Mientras esté aquí, también puede minimizar su Javascript y CSS para una carga aún más rápida.
Este último plugin es un poco más complicado. Requerirá que identifique y bloquee manualmente los archivos que están causando el error de bloqueo de procesamiento. Si prefieres marcar una casilla y listo, entonces deberías probar WP Rocket o Autoptimize, pero W3 Total Cache te permite tener un control más preciso sobre qué archivos aplazar
Otro beneficio de W3 Total Cache sobre otros plugins es que probablemente ya lo tenga instalado. Es uno de los plugins de almacenamiento en caché más populares (y cada instalación de WordPress debe tener uno), por lo que no necesitará inflar su sitio con plugins adicionales.
Después de instalar el plugin, lo primero que querrá hacer es volver a la página de resultados de PageSpeed Insights. En Eliminar recursos que bloquean el procesamiento , debería ver una lista de archivos JavaScript y CSS que están causando el problema. Mantenga la página abierta para copiarlos más tarde.
De vuelta en su panel de WordPress, vaya a Rendimiento> Configuración general y asegúrese de que Minify esté habilitado y configurado en modo Manual .
Ahora dirígete a Rendimiento> Minificar . En Configuración de JS minify , en el cuadro Operaciones en áreas , establezca el Tipo de incrustación Antes </head> en Sin bloqueo usando "aplazar" .
Luego, en Administración de archivos JS , haga clic en Agregar un script y pegue los archivos Javascript de PageSpeed que están causando problemas uno por uno.
A continuación, desplácese hacia abajo hasta la gestión de archivos CSS y haga clic en Agregar una hoja de estilo . Pegue las URL de la hoja de estilo por las que fue penalizado.
Con todo eso hecho, haga clic en Guardar configuración y purgar cachés . Si está configurado correctamente, su sitio ahora debería cargarse más rápido y obtener una mejor puntuación en PageSpeed.
Deshacerse de los recursos que bloquean el renderizado en WordPress para siempre
Cuando se enfrenta por primera vez a la tarea de deshacerse de los recursos que bloquean el procesamiento (¡y todo lo demás en sus resultados de PageSpeed!),
Puede ser abrumador tratar de abordar todo esto. Pero gracias a los plugins de WordPress, bloquear scripts problemáticos es muy fácil. Nunca necesitará editar directamente ningún código y arriesgarse a romper su sitio.
Los recursos que bloquean el renderizado, si se dejan para que se ejecuten en cada carga, pueden causar estragos en sus tiempos de carga. Es importante diferir JavaScript y CSS sin importancia que se pueden dejar para cargar hasta más tarde.
Utilice una herramienta como PageSpeed Insights para determinar si su sitio web tiene un código no optimizado, luego solucione el problema manualmente o descargando un plugin.
Autoptimize y su plugin hermano AsyncJS son buenas opciones gratuitas para comenzar. Si tiene problemas para configurarlos o no nota ningún cambio, WP Rocket es premium pero ofrece soporte y una configuración más rápida.
W3 Total Cache es el más difícil de usar, pero definitivamente la mejor opción si desea un control individual sobre cada archivo que desea bloquear.
Comentarios
Publicar un comentario