Soluci贸n a “Elimina los recursos que bloqueen el renderizado” que muestra Page Speed en WordPress.

Si quieres mejorar tu p谩gina web, es una buena idea analizar la misma con Google Page Speed. Cuando lo haces, muestra varios errores, como “Publica im谩genes con formatos de pr贸xima generaci贸n” que os indicamos c贸mo solucionar aqu铆. O el error que os vamos a explicar c贸mo solucionar hoy: “Elimina los recursos que bloqueen el renderizado“.

驴Cu谩les son los recursos que bloquean el renderizado?

Esta es la primera pregunta que nos surge. Para poder explicarlo necesitamos entender qu茅 es “renderizar” una p谩gina web y c贸mo se hace. El renderizado se refiere a: la cadena de acciones que realiza un navegador para presentar una p谩gina web. Es decir, analizar, procesar y visualizar una web.

El navegador web lee el c贸digo de una web de arriba a abajo durante el “renderizado“. Si encuentra un recurso CSS o Javascript, tiene que detener la lectura hasta que se cargue el recurso. Pero muchas veces dichos recursos no son necesarios para mostrar la primera presentaci贸n que necesita ver la persona que accede a la p谩gina. As铆 que son recursos que est谩n bloqueando que se cargue la p谩gina. Y esto hace que tu p谩gina se cargue m谩s lenta.

Es importante destacar que no todos los recursos bloquean la carga de la web. S贸lo los que no son necesarios para esa carga inicial. Lo importante es cargar el HTML y los que se llama el CSS cr铆tico (el obligatorio).

Lo m谩s normal es tomar una de dos soluciones para diferir ( cargar m谩s tarde) los recursos). Puedes ver m谩s informaci贸n aqu铆.

  • Async. la carga del recurso se realiza mientras se sigue leyendo el HTML. No detiene la lectura del HTML. Pero si que habr谩 un par贸n cuando haya que ejecutar el recurso.
  • Defer: El recurso se descarga mientras se lee la web, y no se ejecutar谩 hasta el final de la carga del HTML.

Solucionar el error “Elimina los recursos que bloqueen el renderizado” en Wodpress.

Existen varias maneras para solucionar este problema. Obviamente se podr铆a cambiar a mano la carga de los recursos para que lo hagan despu茅s (esto se hac铆a antes).
Afortunadamente ya existen varios plugins que nos ayudan en este proceso. Y hoy os vamos a dejar un par con los que pod茅is arreglar este problema de manera muy sencilla (lo hemos probado en varias webs de clientes).

El proceso consiste en instalar y configurar dos plugins del mismo desarrollador: Async JavaScript y Autoptimize (del que ya os hemos hablado). Esto es lo que ten茅is que hacer.

  • Instalar Async JavaScript y activarlo
  • Instalar Autoptimize y activarlo.
  • Ir a la configuraci贸n de Async Javascript y marcar la casilla en la parte superior de la configuraci贸n para activar JavaScript Async.
  • Escoger si quieres Apply Async o Apply Defer dependiendo del m茅todo que quieras (que hemos explicado encima de estas l铆neas.
  • Ir a la configuraci贸n de Autoptimize.
  • Marcar la casilla para optimizar聽el c贸digo JavaScript.
  • Marcar la casilla para optimizar el聽c贸digo CSS.

Con esto navega un poco por tu sitio, y vuelve a hacer la prueba de Page Speed. Si no se ha quitado el aviso prueba a hacerla varias veces, o espera hasta el d铆a siguiente, porque Page Speed cachea sus resultados.

En nuestras pruebas, al cabo de hacer varias pruebas y esperar un poco, vimos que el error hab铆a desaparecido (y con ello mejorado nuestra puntuaci贸n en Page Speed).

Deja un comentario

Resumen de nuestra Pol铆tica de Privacidad

  • Responsable:聽SmythSys IT Consulting SLNE.
  • Finalidad:聽Gestionar y moderar los comentarios.
  • Legitimaci贸n:聽Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios:聽Tus datos se alojan en los servidores de OVH.
  • Derechos:聽Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la direcci贸n del responsable (en nuestra pol铆tica de privacidad).

Time limit is exhausted. Please reload CAPTCHA.