]Antes de nada una puntualización que veo a la gente muy obsesionada con el tema:

Las puntuaciones de PageSpeed sólo son orientativas y no tienen efecto ni en el SEO ni en el Posicionamiento. Vale?

Esto siempre es un quebradero de cabeza para todos aquellos que estamos obsesionados con mejorar muestra web  y tenemos una web soportada en WordPress. A ver, todos sabemos que una mejor velocidad de nuestra aplicación mejorará al experiencia de usuario y con esto, las personas que nos visiten no se irán desesperados por que no cargaba o tardaba una eternidad el articulo que querian leer o el producto que querian comprar.

Bueno como siempre digo, si estáis leyendo esto es que sabéis de que va el tema, lo que no sabéis es como solucionarlo, así que vamos al tajo. Lo primero que debemos hacer es realizar el test y ver en qué estamos fallando, para ello entramos en PageSpeed Insights, introducimos la url de nuestra ver, cruzamos los dedos y hacemos clic en Analizar.

Yo no voy a ser como esas webs que hacen el ejemplo con un theme super ligero y con 2 plugins instalados. Este es el resultado en «bichos linterna» donde actualmente tengo 18 plugins instalados (si todos me hacen falta, pasa algo?) y que me ha servido de conejillo de indias hasta hacer esta pequeña guía. PD: Adjunto reloj y fecha 😉

Optimizando Imágenes para nuestra web

Aquí tenemos que afinar bastante, ya que varios estudios, que no creo que hagan mucha falta para saberlo, pero confirmaron que sobre el 70% del peso de una web es ocupado por las imágenes, así que el 70% del trabajo para mejorar la puntuación en Pagespeed es optimizarlas. El rollo estaría en conseguir un equilibrio entre calidad y tamaño .

Existen muchos plugins para adaptar las imágenes a tu sitio web, yo recomiendo Smush, fácil de configurar y optimiza las imágenes por lotes , pero también tengo que decir que adaptar las imágenes con CSS no es lo más recomendable, ya que seguirán ocupando el espacio en el hosting, así que mi recomendación es usar Photoshop o en su defecto GIMP. Si no sabes utilizar estas herramientas podemos tirar de TiniPNG, una web que comprime las imágenes (png y jpg) al máximo sin apenas perdida, lo único que no hace es adaptar su tamaño al contenedor donde van a ir, para eso podemos utilizar cualquier herramienta de reducir el tamaño de las imágenes, para esto os recomiendo Web Resizer muy fácil de usar y bastante eficaz.

Así el proceso seria el siguiente:

• Adaptar la imagen al tamaño del contenedor donde va a ir, teniendo siempre en cuenta si por ejemplo va a ser una imagen de productor y le vas a aplicar zoom, si va a aparecer como miniatura en tu pagina de inicio pero en la pagina de producto va a aparecer en un tamaño mayor,… Elige siempre el tamaño del mayor contenedor donde vaya a estar insertada. Esta labor la haremos con GIMP, PS o Web Resizer.
• Una vez redimensionada la imagen toca comprimirla lo máximo posible sin que pierda calidad, para ello usaremos TiniPNG.

Reducir el tiempo de respuesta del Servidor

Para ello llamamos al servidor nos cagamos en sus mulas y solucionado… Pues no señores, esto no es así. Lo que nos esta pidiendo Google es que cacheemos nuestra web. Para ello recomendaré W3 Total Cache o WP Super Cache. Aquí tenéis una guía paso por paso para cada plugin e incluso para woocommerce:

• Guia W3 Total Cache & Woocommerce
• Guia WP Super Cache

Especificar Cache del Navegador

Antes hemos cacheado nuestra web en el Servidor, con lo que nuestro servidor cuando un usuario haga una consulta pidiendo nuestra web le enviará una web en html de muy poco peso en vez de todo el código tocho que genera WordPress aumentando con ello la velocidad de descarga de nuestra web a su pc, ahora lo que vamos ha hacer cacheando su navegador, es que éste guarde en su ordenador todas las imágenes, archivos CSS, javascript… para que la siguiente vez que este usuario consulte nuestra web, esta esté ya casi «pre-cargada» mejorando con ello la velocidad de descarga de la misma.

Todo esto lo hará el navegador del usuario por defecto lo unico que nos pide Google es que especifiquemos durante cuanto tiempo queremos que el navegador guarde esos archivos. Esto lo haremos modificando .htaccess, este archivo suele estar en la raiz de WP y muchas veces oculto así que te aconsejo que accedas a tu hosting con un programa gestor de FTP como FileZilla y actives la opción mostrar archivos ocultos.

Una vez descargado lo unico que tendremos que hacer es copiar este código al inicio del mismo. Como esta debidamente documentado si algo sale mal solo tendremos que borrar lo que hemos escrito y aquí no ha pasado nada. Muchas veces se olvidan unas comillas, un punto y coma o algo así que la puede liar. Revisa y vuelve a subirlo corregido.

# ESPECIFICAR TIEMPO DE CACHEADO
# Configuración del tiempo que los navegadores han de guardar
# en caché los archivos planos.

ExpiresActive On
ExpiresDefault "access plus 10 days"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/plain "access plus 1 week"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/x-icon "access plus 3 months"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-icon "access plus 3 months"

# FIN: ESPECIFICAR TIEMPO DE CACHEADO

Minificar Html, CSS y JavaScript

Esto ya lo hemos hecho en el apartado donde hablamos del Cacheado del Servidor ya que los plugin que hemos recomendado, ya se encargan de esa tarea así que nos cercioramos de que hemos activado estas acciones y seguimos para delante. Con el Minificado de Html y CSS no suele haber ningún tipo de fallos pero con el de JavaScript nos podemos encontrar con que se nos fastidien algunas cosas así que antes de activar esta opción yo lo que hago es que activo las otras dos y hago una copia de respaldo y luego activo la de JavaScript para saber siempre qué produce el fallo.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la pagina

Os cuento un poco de que va la historia y de porqué Google quiere que hagamos esto.Vamos a hablar del flujo de carga de una web. cuando nosotros desde nuestro navegador llamamos a una pagina cualquiera, hacemos una petición http al servidor y este envía a nuestro navegador un documento HTML el cual empieza a leer secuencialmente linea por linea, pero que ocurre cuando en ese proceso encuentra una llamada a un archivo CSS o JavaScript pues que para el proceso renderizado de la web (fase de bloqueo), envía esa petición al servidor, este de la devuelve, lo analiza, lo ejecuta y sigue cargando la web.

Por norma, los archivos CSS y JavaScript se colocan al principio del código para que no haya errores de renderizado durante el proceso de carga y se provoque con ello una mala experiencia de usuario. Imagínate que el archivo CSS o javescript es muy grande y mientras se descarga, analiza y ejecuta la web se queda sin estilos o sin esa funcionalidad eso no da para nada buena impresión al usuario.

¿Que es lo que quiere Google entonces? Google quiere que lo coloquemos en el footer para que la web se cargue más rápido, esto lo podremos hacer siempre y cuando no se j… nuestra web. Y es que en parte tiene razón ya que al menos wordpress realiza unbastantes consultas a archivos Js externos, para verlos, si quieres, entra en el inspector de tu navegador y haz clic en Red > Javascript también podemos ver lo que tarda esa petición externa en ms.

Una vez que tenemos claro que es necesario meterle mano a esto. Hacemos copia de seguridad de nuestra web y nos ponemos manos a la obra.Vamos a intentar mover si no todos los archivos Js y CSS, al menos los que podemos sin que nuestra web pierda ninguna funcionalidad.

Vamos a proponer dos métodos,  uno sin plugin y otro con el plugin W3 Total Cache que ya lo tenemos instalado:

Mover Js sin Plugin de WordPress al footer

Para hacerlo sin plugin tendremos que editar el archivo functions.php de nuestro theme o childtheme (este mejor) activo. Una vez editado, hacemos scroll abajo del todo y dejamos un espacio en blanco para separarlo de la ultima función (cuidado si te encuentras un cierre de php como este ?> si es así éste deje quedar siempre abajo del todo así que justo antes creáis una linea en blanco (tb puedes borrar el cierre que es casi mejor y te quitas de problemas, pero esto hacerlo si sabéis lo que estáis haciendo),  y copiamos este código allí:

//* Mover javascripts al footer
function scripts_footer() {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
 
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'scripts_footer' );

Limpiamos la Cache del navegador y comprobamos que todo funciona correctamente.

Aquí os dejo un vídeo de como Webempresa nos dice que lo hagamos.

Mover CSS sin Plugin de WordPress al footer

En el caso del CSS no interesa mover el archivo style.css del tema ya que es el que tiene todos los estilos de tu página y hasta que la web cargue completamente te hará cosas raras que hacen que el usuario desconfíe o simplemente se vaya creyendo que no rula bien la cosa (mala experiencia de usuario que se llama). Lo que sí podríamos hacer es mover algunos CSS que carga tu plantilla o algún plugin tipo Google Font o Font Awesome. Para ello a continuación de la funciona de mover el Js colocamos esta otra:

//* Mover CSS al footer
function dcms_styles_footer() {

	wp_enqueue_style('google_fonts', "https://fonts.googleapis.com/css?family= bla bla bla bla );
	wp_enqueue_style('fontawesome', "https://use.fontawesome.com/releases/v bla bla bla bla);

};

add_action( 'get_footer', 'dcms_styles_footer' );

Los link donde se hacen referencia a esas librerías externas los capturaremos con la función «inspeccionar código» (Ctrl+May+I) de nuestro navegador. Vamos probando como funciona y moveremos aquellos que no impliquen un fallo en la tipografía de nuestra web,

Mover Js y CSS con Plugin W3 Total Cache al footer

Con esto hay que tener cuidadito ya que no tenemos pleno control como lo tenemos cuando lo hacemos con código así que vamos a hacer una copia de seguridad que nunca viene mal. Para hacer esto mismo con un plugin vamos a tirar de W3 Total Cache y del editor de wordpress. Empezamos, vamos al editor de WP que está en la pestaña Apariencia y buscamos el archivo footer.php que estará en nuestro tema activo y copiamos este código en él antes del cierre de la etiqueta.

<!-- W3TC-include-css -->
<!-- W3TC-include-js-head -->

El único problema de este método es que cuando actualices el Theme tendrás que volver a poner el código de nuevo en el archivo footer.php.

Si nuestra web no está hecha en WordPress, usando los atributos async y defer conseguiremos esto de una manera sencillísima ya que los actuales navegadores desde 2008 los reconocen.

Eliminar Font Awesome

También puede que tu Theme que has comprado con tanto mimo traiga instalado Font Awesome que son los iconos que se cargan externamente y tú no la utilices. FontAwesome consume bastantes recursos y PageSpeed se emperra en decirtelo, pero bueno lo dicho si no lo utilizo para que lo quiero asi que vamos a eliminarlo añadiendo esta función a function.php

//* remove Font Awesome from WordPress theme
add_action( 'wp_print_styles', 'tn_dequeue_font_awesome_style' );
function tn_dequeue_font_awesome_style() {
wp_dequeue_style( 'fontawesome' );
wp_deregister_style( 'fontawesome' );
}

Ea un problema menos no?