PageSpeed: Cómo resolver Render-blocking JavaScript y CSS en WordPress
¡Buenos días! En este vídeo vamos a ver cómo solucionar uno de los puntos muy comunes que nos muestra PageSpeed Insights.
Se trata de “Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página“. ¡Vamos allá!
[cta-pagespeed]
La solución a este problema puede ser simple o complicada dependiendo de theme que se utilice. En algunos casos la optimización de JavaScript provoca conflictos y hace que algunos archivos de JavaScript (sobre todo cuando de trata de jQuery) no se carguen correctamente.
Así que siguiendo los pasos del vídeo, instalamos el plugin Autoptimize y activamos la optimización de HTML (opcional), JavaScript y CSS. Veamos por separado qué pasa con JavaScript y con CSS.
Eliminar el JavaScript que bloquea la visualización
El código JavaScript es un poco sensible a la optimización. En principio, si sólo activamos la optimización del JavaScript en Autoptimize (sin tocar ninguna configuración más) se nos solucionará la mayor parte del problema. Pero en algunos casos es probable que el problema persista con los archivos js que por defecto están excluidos de la optimización.
Existe la opción de quitar estos archivos de la lista de excluidos para que Autoptimize los optimice también. Este acto puede provocar que la página no se cargue correctamente. Si esto ocurre, la solución ya dependerá de cada caso y no me es posible dar una solución genérica a este problema. Pero si vuestro theme es ligero (como los de Genesis Framework, y por eso los utilizo), no tendréis ningún problema.
Optimizar la entrega de CSS
En el caso de CSS la cosa es muy simple. Basta con activar su optimización y marcar la casilla de combinar todos los CSS. El resto de opciones podemos dejarlas por defecto.
[cta-pagespeed]
