google pagespeed insights

Mejora la puntuación de Google PageSpeed Insights: Eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página

Séptima y última entrada sobre cómo mejorar la puntuación en PageSpeed Insights. En esta ocasión hablaremos sobre cómo eliminar el CSS que bloquea la visualización del contenido de la mitad superior de la página.

En nuestro ejemplo tenemos 5 recursos CSS bloqueando la visualización del contenido de la mitad superior de la página

css bloqueando

No se ha podido visualizar el contenido de la mitad superior de la página sin tener que esperar a que se cargara alguno de los recursos. Intenta aplazar o cargar de forma asíncrona los recursos que bloquean la visualización, o bien inserta porciones críticas de dichos recursos directamente en el HTML.

Estos 5 recursos son 2 fuentes de Google Fonts y 3 hojas de estilo CSS. Estan causando un retraso en el procesamiento de la página. He estado investigando cómo resolver este punto en WordPress y las soluciones pasan por procesos que no me convencen mucho, pero que expongo a continuación:

 

Google Fonts

Cuando seleccionas una fuente en Google Fonts, te aparecen una serie de instrucciones para cargar la fuente en tu web. Te indican que copies ese código en el <head> de tu documento HTML. Curiosamente es el propio Google el que te dice en PageSpeed Insights que de esta forma estás bloqueando la carga del contenido de la mitad superior de la página.

google fonts

La solución pasa por utilizar el Google Web Font Loader. Lo malo, y ahora entenderéis porqué decía que no me convence mucho la solución, es que aparece el FOUT (Flash Of Unstyled Text). Es decir, se carga la página con las fuentes predeterminadas y se observa una especie de flashazo de apenas milisegundos cuando hace el cambio a las fuentes que has seleccionado en Google Fonts.

Personalmente me parece algo horrendo, pero si no te importa mucho esto bastaría con que añadieras esto al footer de tu WordPress:

Pon en lugar de Open Sans y Titillium Web el nombre de las familias de fuentes que hayas seleccionado, separadas por coma y superarás este filtro en PageSpeed.

 

dns-prefetch

Dns-prefetch es una técnica para minimizar el impacto del tiempo de resolución de DNS. Cuando desde un navegador se hace una petición http (en este caso para cargar las fonts de google), lo que hace es convertir el nombre del dominio en su correspondiente dirección IP. Es lo que se conoce como resolución DNS.

A partir de la versión 4.6, si incluimos las Google Fonts a lo WordPress, es decir, utilizando wp_enqueue_style(), mejoraremos el tiempo de carga porque nos incluirá automáticamente el dns-prefetch de la URL de la fuente, aunque seguiremos sin pasar el filtro de PageSpeed.

Lo que se cargará en el <head> de nuestro sitio será lo siguiente:

Esto mejorará levemente el tiempo de carga de las fuentes de google ya que no tiene que resolver las DNS de esas peticiones. Hilando aún más fino, si son varias las fuentes de Google que utilizas en tu sitio, como en el ejemplo que estoy usando en esta serie de entradas, puedes concatenarlas con un pipe | para realizar una única petición http:

 

CSS

Seguimos teniendo 3 recursos de CSS que bloquean el contenido de la mitad superior de la página. La solución que plantea Google es que cargues en línea dentro del <head> los estilos imprescindibles y al final del documento los CSS con el resto de estilos.

Esta solución no termina de convencerme porque es más dificil de mantener un site. Si el documento HTML es así:

Y el recurso small.css es así:

Puedes insertar el código CSS más importante de la siguiente manera:

Imaginaos lo dificil que sería mantener un sitio así. No obstante, siguiendo las reglas que hemos visto en esta serie de 7 entradas sobre cómo mejorar la puntuación en Google PageSpeed Insights por fin obtendríamos algo como esto:

pagespeed 100%

 

Conclusiones

Creo que Google PageSpeed Insights es una herramienta muy útil que nos puede ayudar a conseguir un mejor rendimiento de nuestro sitio. Nos da pistas de elementos que pueden estar haciendo que nuestra página cargue más lenta.

El WPO es importantísimo en cualquier desarrollo web. Influye directamente en la experiencia de usuario y en el posicionamiento SEO, por lo tanto es un factor determinante y que debemos tener muy en cuenta.

Tener muy en cuenta sí, pero sin obsesionarse en conseguir el 100. No diré que es imposible, pero obtener una puntuación de 100 es MUY difícil. Lo normal es que cargues algún recurso externo, que no te guste el FOUT, que no te salga rentable seccionar los CSS para pasar una regla, etc…

Por lo tanto, mi recomendación es:

  • Analiza
  • Mejora todo lo que esté en tu mano
  • No te obsesiones

 

Recomendaciones

No obsesionarse sí, pero aunque suene contradictorio hay que ser conscientes de hacer todo lo que esté en nuestra mano. Llevar a cabo una tarea de WPO en un website no es instalar 4 plugins, hacer 4 tareas concretas/puntuales y listo.

El WPO no es algo puntual. Siguiendo los consejos que has podido ver a lo largo de estos 7 post conseguirás mejorar y optimizar la velocidad de carga de tu página web. Pero a veces ser rápido no basta, y puede que tu negocio o tu proyecto necesite jugar en otra liga. El WPO es una tarea a largo plazo y requiere una auditoría y una consultoría para establecer una estrategia de actuación.

Hay que invertir tiempo y recursos para ir un paso más allá. Por lo tanto te recomendaría que contrates los servicios de un profesional o empresa que pueda encargarse de esta labor.

 

Enlaces de interés

No sólo de Google vive el hombre. Tenemos a nuestra disposición una gran variedad de herramientas on-line que nos pueden ayudar a medir y detectar en qué estamos flojeando. Algunas de estas son:

 

Además, adjunto referencias a profesionales/empresas que pueden llevar el WPO de tu página a otro nivel:

Puede que también te interese

Cómo cambiar el título del meta box de la imagen destacada en WordPress
En algunas ocasiones puede resultar de utilidad cambiar o renombrar el texto o título que aparece en el meta box de Imagen destacada. Por ejemplo…
Seguridad WordPress: proteger el acceso a wp-admin
Uno de los objetivos más importantes para cualquier atacante es el acceso al panel de administración o back-end de nuestro WordPress. Debemos aumentar la seguridad…
Cómo cargar correctamente los archivos JS y CSS si estás desarrollando un tema o plugin a medida
En éste artículo vamos a tratar sobre cómo cargar correctamente los archivos JavaScript y hojas de estilo css si estás desarrollando un tema o plugin…
Cómo crear imágenes destacadas con tamaños personalizados en WordPress
Con ésta cuestión nos podemos encontrar muy a menudo sobre todo si estamos desarrollando temas a medida. En nuestro diseño vendrán definidas unas imágenes con…




  • Lo que mucha gente no se da cuenta es que se pueden hacer estos experimentos para dejar a 100 el Pagespeed en sitios de prueba pero que en un sitio en producción, que sirva para algo, llegar al 100, a no ser que sea un blog sin nada, o sea nada, es casi seguro que destrozas el sitio y no funcionarán la mitad de las cosas. No digamos si es un ecommerce.

    Muy buenas guías Pablo 🙂

    • Efectivamente, obsesionarse con el 100% puede ser contraproducente. Debemos hacer todo lo que esté en nuestra mano para mejorar el rendimiento y encontrar un equilibrio entre las funcionalidades y recursos que queremos SI o SI y la optimización de la página.

      ¡Gracias Fernando!

  • León Guerra

    Lo que Google pide que se haga con el CSS esta complicado. Encima que no mejora la velocidad de carga (según los test hechos con GTmetrix). Quizas mas adelante los desarrolladores de Themes implementen un small.css.

  • León Guerra

    Existe una solución mejor, aunque requiere organizar debidamente. La solución sí aumenta la velocidad de carga y soluciona esta petición de Google: Combine JS and CSS. Estuve googleando a ver cuál método funciona mejor, encontré un plugin llamado Minit, pero al activarlo, el sitio se desconfigura. Por qué? Porque el plugin mete todo el JS y el CSS en un único archivo. De todos modos debe existir una mejor manera de ir Combinando JS y CSS según directorios. LINK https://github.com/kasparsd/minit/