- 1. Optimizar imágenes
- 2. Minificar CSS y JS
- 3. Especificar caché de navegador
- 4. Habilita la compresión
- 5. Reducir el tiempo de respuesta del servidor
- 6. Eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página
- 7. 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
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.
Google PageSpeed Insights
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.
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:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Open Sans', 'Titillium Web']
}
});
</script>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.
<?php
function load_google_fonts() {
wp_enqueue_style( 'opensans-font', esc_url_raw( 'https://fonts.googleapis.com/css?family=Open+Sans:400,600' ) );
wp_enqueue_style( 'titillium-font', esc_url_raw( 'https://fonts.googleapis.com/css?family=Titillium+Web:600' ) );
}
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );Lo que se cargará en el <head> de nuestro sitio será lo siguiente:
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='stylesheet' id='opensans-font-css' href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C600&ver=4.7.1' type='text/css' media='all' />
<link rel='stylesheet' id='titillium-font-css' href='https://fonts.googleapis.com/css?family=Titillium+Web%3A600&ver=4.7.1' type='text/css' media='all' />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:
<?php
function load_google_fonts() {
wp_enqueue_style( 'google-fonts', esc_url_raw( 'https://fonts.googleapis.com/css?family=Open+Sans:400,600|Titillium+Web:600' ) );
}
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );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í:
<html>
<head>
<link rel="stylesheet" href="small.css">
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>Y el recurso small.css es así:
.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }Puedes insertar el código CSS más importante de la siguiente manera:
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<link rel="stylesheet" href="small.css">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:
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:
Puede que también te interese
