Cómo eliminar los recursos que bloquean el renderizado de su sitio web de WordPress

¿Alguna vez terminó de crear un sitio web de WordPress, le encantó todo sobre él y rápidamente comenzó a odiarlo después de darse cuenta de que tarda una eternidad en cargarse? Dominar la eliminación de los recursos que bloquean el renderizado ayudará a diagnosticar este problema. ¿Pero cómo?

Las velocidades de carga lentas no solo son una molestia para usted y sus visitantes, sino que también pueden costarle significativamente cuando se trata de SEO. Desde 2010, los algoritmos de Google han tenido en cuenta la velocidad de carga en las decisiones de clasificación, por lo que las páginas lentas aparecen más abajo en las páginas de resultados.

Es posible que esté familiarizado con los culpables comunes del bajo rendimiento de la página: contenido excesivo, archivos de imagen sin comprimir, alojamiento insuficiente y falta de almacenamiento en caché, por nombrar algunos. Pero hay otro perpetrador en juego que a menudo se pasa por alto: los recursos que bloquean el renderizado.

No me malinterpreten: CSS y JavaScript son geniales. Sin CSS, los sitios web serían muros de texto sin formato. Sin Ja=ooovaScript, no podríamos agregar elementos dinámicos, interactivos y atractivos a nuestros sitios web. Pero, si se ejecuta en el momento equivocado, tanto CSS como JavaScript pueden hacer mella en el rendimiento de su sitio web.

He aquí por qué: cuando un navegador web carga una página web por primera vez, analiza todo el HTML de la página antes de mostrarlo en pantalla a un visitante. Cuando el navegador encuentra un enlace a un archivo CSS, un archivo JavaScript o una secuencia de comandos en línea (es decir, código JavaScript en el propio documento HTML), detiene el análisis de HTML para buscar y ejecutar el código, lo que ralentiza todo.

Si ha optimizado el rendimiento de su página en WordPress y todavía tiene problemas, los recursos que bloquean el renderizado pueden ser los culpables. A veces, es importante ejecutar este código en la primera carga, pero la mayor parte del tiempo se puede eliminar o empujar hasta el final de la cola.

En esta publicación, le mostraremos cómo eliminar este código molesto de su sitio web de WordPress y mejorar su rendimiento.

Si prefiere seguir con un video, consulte este tutorial creado por WP Casts:

1. Identifique los recursos que bloquean el renderizado.

Antes de realizar cualquier cambio, primero debe ubicar los recursos que bloquean el renderizado. La mejor manera de hacerlo es con una prueba de velocidad en línea gratuita como la herramienta PageSpeed ​​Insights de Google. Pegue la URL de su sitio y haga clic en Analizar .

Cuando se completa el escaneo, Google asigna a su sitio web una puntuación de velocidad agregada, de 0 (más lento) a 100 (más rápido). Una puntuación en el rango de 50 a 80 es promedio, por lo que querrá aterrizar en la parte superior de este rango o por encima de él.

Para identificar los archivos que bloquean el procesamiento que están ralentizando su página, desplácese hacia abajo hasta Oportunidades y luego abra el acordeón Eliminar los recursos que bloquean el procesamiento .

Fuente de imagen

Verá una lista de archivos que ralentizan la "primera pintura" de su página; estos archivos afectan el tiempo de carga de todo el contenido que aparece en la ventana del navegador en la carga inicial de la página. Esto también se llama contenido "above-the-fold".

Tome nota de cualquier archivo que termine con las extensiones .css y .js, ya que estos son en los que querrá concentrarse.

2. Elimine los recursos que bloquean el renderizado manualmente o con un complemento.

Ahora que ha identificado el problema, hay dos formas de solucionarlo en WordPress: manualmente o con un complemento. Cubriremos primero la solución del complemento.

Varios complementos de WordPress pueden reducir el efecto de los recursos de bloqueo de procesamiento en los sitios web de WordPress. Cubriré dos soluciones populares, Autoptimize y W3 Total Cache.

Cómo eliminar los recursos que bloquean el renderizado con el complemento Autoptimize

Autoptimize es un complemento gratuito que modifica los archivos de su sitio web para ofrecer páginas más rápidas. Autoptimize funciona agregando archivos, minificando el código (es decir, reduciendo el tamaño del archivo eliminando caracteres redundantes o innecesarios) y retrasando la carga de recursos que bloquean el renderizado.

Dado que está modificando el backend de su sitio, recuerde tener cuidado con este complemento o cualquier complemento similar. Para eliminar los recursos que bloquean el renderizado con Autoptimize:

1. Instale y active el complemento Autoptimize.

2. Desde su tablero de WordPress, seleccione Configuración > Optimizar automáticamente .

3. En Opciones de JavaScript , marque la casilla junto a ¿Optimizar código JavaScript? .

4. Si la casilla junto a Agregado de archivos JS? está marcada, desmárcala.

5. En Opciones de CSS , marque la casilla junto a ¿Optimizar código CSS? .

6. Si la casilla junto a Agregar archivos CSS? está marcada, desmárcala.

7. En la parte inferior de la página, haga clic en Guardar cambios y vaciar caché .

8. Escanee su sitio web con PageSpeed ​​Insights y busque una mejora.

9. Si PageSpeed ​​Insights aún informa archivos JavaScript que bloquean el procesamiento, regrese a Configuración > Optimizar automáticamente y marque las casillas junto a ¿Archivos JS agregados? y agregar archivos CSS? . Luego, haga clic en Guardar cambios y vaciar caché y vuelva a escanear.

Cómo eliminar los recursos que bloquean el renderizado con el complemento W3 Total Cache

W3 Total Cache es un complemento de almacenamiento en caché ampliamente utilizado que ayuda a abordar el código retrasado. Para eliminar JavaScript que bloquea el renderizado con W3 Total Cache:

1. Instale y active el complemento W3 Total Cache.

2. Se agregará una nueva opción de Rendimiento a su menú de panel de WordPress. Seleccione Rendimiento > Configuración general.

3. En la sección Minimizar , marque la casilla junto a Minimizar , luego configure el modo Minificar en Manual .

4. Haga clic en Guardar todas las configuraciones en la parte inferior de la sección Minimizar .

5. En el menú del panel, seleccione Rendimiento > Minimizar .

6. En la sección JS junto a JS minify settings , asegúrese de que la casilla Habilitar esté marcada. Luego, en Operaciones en áreas , abra el primer menú desplegable Tipo de incrustación y elija Sin bloqueo usando "aplazar" .

7. En Administración de archivos JS , elija su tema activo en el menú desplegable Tema .

8. Vuelva a consultar los resultados de PageSpeed ​​Insights de su escaneo anterior. Para cada elemento en Eliminar los recursos que bloquean el renderizado que terminan en .js, haga clic en Agregar un script . Luego, copie la URL completa del recurso JavaScript de PageSpeed ​​Insights y péguela en el campo URI del archivo .

9. Una vez que haya pegado todos los recursos de JavaScript que bloquean el procesamiento informados por PageSpeed ​​Insights, haga clic en Guardar configuración y purgar cachés en la parte inferior de la sección JS .

10. En la sección CSS junto a Configuración de minificación de CSS , marque la casilla junto a Configuración de minificación de CSS y asegúrese de que el método Minificar esté configurado en Combinar y Minificar .

11. En Administración de archivos CSS , elija su tema activo en el menú desplegable Tema .

12. Para cada elemento en Eliminar los recursos que bloquean el renderizado que terminan en .css en los resultados del análisis de PageSpeed ​​Insights, haga clic en Agregar una hoja de estilo . Luego, copie la URL completa del recurso CSS de PageSpeed ​​Insights y péguela en el campo URI del archivo .

13. Una vez que haya pegado todos los recursos de CSS que bloquean el renderizado informados por PageSpeed ​​Insights, haga clic en Guardar configuración y purgar cachés en la parte inferior de la sección de CSS .

14. Escanee su sitio web con PageSpeed ​​Insights y busque una mejora.

Cómo eliminar el JavaScript que bloquea el renderizado manualmente

Los complementos pueden manejar el trabajo de back-end por usted. Por otra parte, los complementos en sí mismos son solo más archivos agregados a su servidor web. Si desea limitar estos archivos adicionales, o si simplemente prefiere manejar la programación usted mismo, puede abordar el JavaScript que bloquea el renderizado manualmente.

Para hacer esto, ubique las etiquetas <script> en los archivos de su sitio web para los recursos identificados en su escaneo de PageSpeed ​​Insights. Se verán algo como esto:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

Las etiquetas <script> le indican al navegador que cargue y ejecute el script identificado por el atributo src (fuente). El problema con este proceso es que esta carga y ejecución retrasa el análisis de la página web por parte del navegador, lo que afecta el tiempo de carga general:

Fuente de imagen

Para resolver esto, puede agregar el atributo asíncrono (asíncrono) o diferido a las etiquetas de secuencia de comandos para los recursos de bloqueo de representación. async y defer se colocan así:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

Si bien tienen efectos similares en los tiempos de carga, estos atributos le indican al navegador que haga cosas diferentes.

El atributo asíncrono le indica al navegador que cargue el recurso de JavaScript mientras analiza el resto de la página y ejecuta este script inmediatamente después de que se haya cargado. La ejecución del script detiene el análisis de HTML:

Fuente de imagen

Las secuencias de comandos con el atributo aplazar también se cargan mientras se analiza la página, pero la carga de estas secuencias de comandos se retrasa hasta después del primer procesamiento o hasta que se hayan cargado las partes más esenciales:

Fuente de imagen

Los atributos defer y async no deben usarse juntos en el mismo recurso, pero uno puede ser más adecuado para un recurso en particular que el otro. Por lo general, si un script no esencial se basa en un script para ejecutarse antes, use defer . El atributo diferido garantiza que el script se ejecutará después del script necesario anterior. De lo contrario, use async .

3. Vuelva a ejecutar un análisis del sitio.

Después de realizar los cambios, realice un escaneo final de su sitio web a través de PageSpeed ​​Insights y vea qué impacto tuvieron sus cambios en su puntaje.

Con suerte, hay una mejora notable, pero no se preocupe si no es así. Muchos factores pueden inhibir el rendimiento de la página, y es posible que deba investigar un poco más para encontrar la fuente del bajo rendimiento.

4. Revise su sitio web en busca de errores.

Además de volver a escanear, revise sus páginas para asegurarse de que su sitio funcione. ¿La página carga correctamente? ¿Están apareciendo todos los elementos? Si algo está roto o no se carga correctamente, deshaga los cambios y solucione el problema.

Si ha llegado a un punto en el que ha intentado repetidamente varias medidas con ganancias de velocidad mínimas, podría ser mejor considerar otras formas de acelerar sus páginas, en lugar de arriesgarse a romper su sitio.

Optimización de su sitio de WordPress para el rendimiento

Muchos factores contribuyen a la experiencia de los usuarios en su sitio web, pero pocos son más importantes que el tiempo de carga. Cada vez que realice grandes cambios en el contenido o la apariencia de su sitio de WordPress, siempre debe considerar cómo dichos cambios afectan el rendimiento.

Ahora que ha eliminado los recursos que bloquean el procesamiento, debe continuar optimizando la velocidad de su sitio web mediante el análisis de otras funciones que se sabe que ralentizan el rendimiento. Trate de incorporar pruebas de velocidad periódicas en el programa de mantenimiento de su sitio; anticiparse a cualquier problema potencial será fundamental para su éxito.