Optimizar la puntuación de PageSpeed en WordPress

Optimizar la puntuación de PageSpeed en WordPress es posible. PageSpeed es una herramienta métrica desarrollada por Google para mejorar el rendimiento de las webs.

Para optimizar la puntuación de PageSpeed en WordPress hay que tener en cuenta una serie de medidas que describiremos a continuación con un ejemplo lo más descriptivo posible.

Debemos destacar que optimizar la puntuación de PageSpeed en WorPress se puede conseguir pero, cuando se trata de acelerar WordPress puede resultar bastante complicado y se tiene que ir con mucho cuidado.

Optimizar la puntuación de PageSpeed en WordPress. Ejemplo práctico

Vamos a empezar con un ejemplo de optimizar la puntuación de PageSpeed en WordPress.

La URL concreta para este ejemplo no la vamos a descifrar por temas de protección de datos y privacidad. Usamos un escenario inicial bastante bajo para esta hacer esta prueba.

Usaremos la web de Search Engine Land para explicar algunos detalles importantes.

Las puntuaciones iniciales son:

• Móvil: 57/100
• Escritorio: 0/100

Una puntuación de 0 para escritorio es un total desastre. Hay que obtener como mínimo entre 70 u 80 para que una página se califique de “Buena”.

Vamos a revisar algunos conceptos:

1)  Cambiar la web a HTTPS

Al revisar hemos detectado que el sitio tiene un certificado de seguridad, lo que es bueno, pero el HTTP no se convierte en HTTPS y la versión que tiene Google en caché es HTTP. Lo primero que hay que hacer es cambiar toda la web a HTTPS.

Observamos que la configuración general del sitio no tiene realizado el cambio, tal y como observamos en la siguiente imagen.

Al cambiar la dirección HTTP a HTTPS  la puntuación ha subido de la siguiente forma:

• Móvil: 61/100
• Escritorio: 0/100

Para que la web cambie automáticamente, podemos utilizar Forzar HTTPS o agregar los siguientes archivos htaccess:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www\.)?domain\.com
RewriteRule ^(.*)$ https://www.domain.com/$1 [R,L]

2) Optimizar las imágenes

Para optimizar la puntuación de PageSpeed en WordPress, Google PageSpeed nos dice que debemos optimizar nuestras imágenes.

Al continuar la prueba, nos indicaba que había más de 15 MB innecesarios. Por lo que la solución está en optimizar estas imágenes.

Tendremos en cuenta que las estadísticas de PageSpeed muestran dos recomendaciones diferentes que optimizan las imágenes:

1. Optimizar imágenes: «Comprimir … podría ahorrar 4.7 KB (reducción del 30%)».
2. Optimizar imágenes: «Comprimir y redimensionar … podría ahorrar 5.8 KB (51% de reducción)».

La primera recomendación se centra en comprimir la imagen, mientras que la segunda recomendación se centra comprimir y cambiar de tamaño la imagen.

Una vez optimizadas las imágenes en nuestra prueba, sin perder la calidad de las mismas en la página, nos dio el siguiente resultado:

• Móvil: 61/100
• Escritorio: 67/100

Además, mejoramos notablemente la velocidad de la página llegando a 5,5 segundos.

3) Limitar el tiempo de almacenamiento en el Caché del navegador

Para optimizar el almacenamiento en el Caché del navegador podemos hacer varias cosas:

1. Hacer que en el caché se almacenen las imágenes. Por ejemplo durante dos semanas.

Esto se consigue al enviar un mensaje al navegador y limitar el tiempo deseado. Con esto conseguimos que si el visitante que ya había visto la página, si la vuelve a cargar, la carga sea mucho más rápida, ya que en su dispositivo ya están los datos.

 2. También se puede agregar un código .htaccess al configurar el almacenamiento en el caché del navegador.

Es importante que asegurarse que es un archivo .htaccess, sino deberemos tomar en cuenta algunas consideraciones. En primer lugar, acceder al sitio mediante FTP y, si no puedes, está la opción de instalar el complemento WP File Manager y así obtener el acceso a los archivos:

Se anexarán los siguientes a su archivo .htaccess:

## Start browser caching ##

ExpiresActive en
ExpiresByType image / jpg «access 1 month»
ExpiresByType image / jpeg «access 1 month»
ExpiresByType image / gif «access 1 month»
ExpiresByType image / png «access 1 month»
ExpiresByType text / css «access 1 month»
ExpiresByType text / html «access 1 month»
ExpiresByType application / pdf «access 1 month»
ExpiresByType text / x-javascript «access 1 month»
ExpiresByType application / x-shockwave-flash «access 1 month»
ExpiresByType image / x-icon «access 1 year»
ExpiresDefault «access 1 month»

## Fin del almacenamiento en caché del navegador ##

Si las imágenes cambian muy rápido pero mantienen el mismo nombre de archivo, se pueden mejorar los tiempos:

Lo podemos hacer agregando el código, tal y como mostramos a continuación;

 

Mejoras que conseguimos con estos cambios:

• Móvil: 62/100
• Escritorio: 72/100

Estos cambios y mejoras en el almacenamiento del caché dieron una velocidad real de 5,1 segundos.

Existen algunos plugins de almacenamiento en caché, uno de los que recomendamos es WP Rocket, concretamente es el que yo mismo uso en mi web, y también está W3 total caché, vale la pena ver qué resultados obtenemos al utilizarlo.

Entonces, una vez que se instale el complemento, lo que debe hacer es, ir a la configuración general, marcar una casilla y hacer click en “guardar configuración”.

Tal como mostramos a continuación;

Observamos que la velocidad de la página no se modificó y dio los mismos resultados de PageSpeed.

4) Reducir el tiempo de respuesta del servidor

El problema de que el servidor sea lento en muchas ocasiones viene como consecuencia de los intercambios desordenados entre los archivos PHP y la base de datos. Tenemos la opción de utilizar WP Rocket o W3 Total Cache, los cuales ofrecen como solución el almacenamiento en caché de páginas.

El almacenamiento en caché de páginas, hace que el servidor no necesite generar una página en cada visita, ya que creó una copia estática de la página.

Para activar el almacenamiento en caché de la página, realizamos lo que a continuación se muestra en la siguiente imagen:

Y gracias a esto, las puntuaciones mejoraron a:

• Móvil: 70/100
• Escritorio: 74/100

Debemos tener en cuenta que se están creando páginas en caché, entonces si hace un cambio hay que revisar que efectivamente se ha realizado y, en caso de no visualizar la actualización, clicamos en los botones “depurar caché” o “vaciar caché” en el plugin que estemos usando y se llevarán a cabo los cambios.

5) Minificación de los archivos de las páginas Web

Otra sugerencia para optimizar la puntuación de PageSpeed en WordPress la encontramos en la minificación de archivos. Los espacios vacíos y las muchas líneas que componen los archivos y códigos que componen una página web, añaden MB de más que debemos reducir al máximo. A la eliminación de estos bytes de sobras que se generan le llamamos  minificación.

En los sitios de WordPress hay tres tipos básicos de minificación, los cuales son:

a) El referente al código de las páginas reales.

b) El referente al código dentro de sus hojas de estilos.

c) Y el referente al código dentro de varios scripts.

No debemos olvidar después de minimizar los archivos, sobre todo los scripts, de a continuación ir a las páginas que dependen de ellos y comprobar que siguen funcionando correctamente y sin problemas.

Podemos descargar los archivos minificados desde Google PageSpeed, tal como se muestra en la siguiente captura de pantalla.

 

 

Podemos utilizar también W3 Total Cache, que incluye la función en la configuración general (aunque también tenemos que modificar alguna cosa en la configuración avanzada).  Un ejemplo lo vemos en esta imagen:

Lo más recomendable es minificarlos uno por uno  e ir probando. Si observamos que no salen bien, vamos a la configuración de minify y tendremos que excluir los scripts y los CSS específicos.

 

Si detectamos que una página específica, como la página de contacto por ejemplo, nos causan problemas, podemos intentar excluir estas páginas para mejorarlo. Si esta forma no funciona, también tenemos la opción de usar el plugin Autoptimize para conseguirlo.

Una vez realizado todo lo comentado hasta ahora, las puntuaciones en PageSpeed han sido:

• Móvil: 70/100
• Escritorio: 75/100

Este es uno de los escenarios donde vimos una mejora en PageSpeed ​​sin mejoría en la velocidad real del sitio.

6) Eliminar cadenas de consulta – Paso opcional

Este paso es opcional, sin embargo se recomienda en muchas ocasiones eliminar las cadenas de consulta de los recursos estáticos.

Podemos instalar un plugin gratuito, como puede ser Quitar cadenas de consulta de recursos estáticos.

Por qué al tener en cuenta las sugerencias de PageSpeed no llegamos al 100 por cien de rendimiento?

Hay algunos problemas que encontramos al optimizar la puntuación de PageSpeed en WordPress, que no se pueden solucionar al 100%, como por ejemplo:

• Optimizar las imágenes. Pueden ser muy pequeñas o más pequeñas de lo que Google proporciona y, a pesar de utilizar la herramientas anteriormente descritas, no se optimizan en un 100%.
• Se ha eliminado JavaScript y CSS de marcado y se observa lentitud en el contenido de la mitad superior de la página. Como el atraso no fue significativo ni se observó que la velocidad se atascara no se intentó mejorarlo más, se dejó tal cual.
• Aprovechar el almacenamiento en caché del navegador.  Hemos aprovechado el almacenamiento en caché de los navegadores pero, desafortunadamente, solo podemos controlar nuestros scripts, los que tenemos en nuestra web. No podemos optimizar el almacenamiento en el caché del navegador para los scripts de recursos externos.

Al finalizar la prueba, la velocidad final real llegó 3.0 segundos, que ya se considera bastante aceptable.

Después de haber finalizado este ejercicio de prueba y ver los resultados, podemos concluir que, definitivamente, optimizar la puntuación de PageSpeed en WordPress es posible si se trabajan los puntos necesarios.