Acelera tu WordPress y obtén un 100% en Google PageSpeed Insights

Es muy importante que tu página se abra rápidamente en los navegadores de sus visitantes.

Por dos motivos fundamentales:

  • Porque los usuarios o lectores cada vez tienen menos paciencia esperando a que una página se cargue completamente en sus navegadores
  • Porque Google penaliza mucho en sus resultados de búsqueda a las páginas que carguen más lento frente a otras de la misma temática que carguen más rápido.

WPO “Web Performance Optimization”

El WPO, como su nombre indica, es el estudio y puesta en marcha de técnicas y herramientas para la optimización de una página web, con respecto a la rapidez de carga.

En Internet existen miles de blogs que describen alternativas para hacer WPO y muchos de ellos sobre el CMS WordPress.

Yo he probado varias alternativas, pero me quedo con la que describo en este post, que se basan en la recomendación de Alvaro Fontela, co-Fundador de Raiola Networks, por su sencillez y efectividad.

Dicha recomendación se apoya en la utilización de los plugins W3 Total Cache como suite de cache, y también da la recomendación de utilizar Autoptimize para minificar CSS, JS y HTML.

Además de estos plugins, recomienda la contratación de un VPS optimizado cuya relación calidad/precio es verdaderamente inmejorable. Este servidor ya viene con todo el software base instalado y configurado (VestaCP, Nginx, memcached, etc) lo cual no es sencillo de hacer.

Lo que hice para configurar este servidor sobre el que se aloja esta página https://soluciones4hosting.com, fue seguir las recomendaciones del blog Raiola y ahora tengo la siguiente configuración en un VPS de Time4VPS que considero óptima y muy similar al servidor VPS optimizado de Raiola:

VPS de Time4VPS 512 MB de Ram y 20GB de HDD (actualmente con dos webs más compartidas)

Panel de control VestaCP (más ligero y rápido que cPanel ya que tiene sólo lo básico y ocupa menos recursos)

  • nginx + php-fpm (servidor web más ligero y rápido que Apache)
  • php7 (última versión de php que permite la carga más rápida que en versiones anteriores)
  • http2 (permite la carga de varios ficheros a la vez)
  • Memcached (caché sobre memoria RAM del servidor, más rápido que en disco)
  • Zend OP Cache (caché de páginas php)

Con esta configuración y la instalación de los plugins de caché sobre WordPress, me aseguro que la velocidad de la página es óptima, como se puede observar en el siguiente enlace.

Plugins W3 Total Cache y Autoptimize

He escogido W3 Total Cache por varias razones:

Una suite de caché completa (quería ver la posibilidad de utilizar la menor cantidad posible de plugins)

Es compatible con Memcached, una de las cachés más rápidas recomendadas también por Raiola.

La elección de Autoptimize es que para la parte de la minificación de contenidos HTML, Javascript y CSS es mucho más fácil de configurar aquí que en W3 Total Cache.

Los 10 puntos de Google PageSpeed Insights

Google PageSpeed Insights es seguramente la más famosa de las herramientas de medición de rendimiento de una página web para móviles y ordenadores.

En dicha página, Google analiza una serie de puntos (actualmente 10) que tiene que superar la página para considerarse rápida.

En esta entrada voy a describir dichos puntos de forma sencilla y explicaré cómo los he conseguido superar en mi página web WordPress con la ayuda de los plugins W3 Total Cache y Autoptimize.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

Lo que primero se carga para el usuario es la parte superior de la página, por lo que Google le da mucha importancia a este contenido.

Para Google es muy importante que lo que primero que se cargue el navegador del cliente no sea código JS ni CSS.

De esto se encarga Autoptimize con una opción especial, que inserta el código JS y CSS dentro del propio código HTML que se genera.

Pero hay que tener cuidado en no posponer completamente el código JS ya que puede que la web no se ejecute correctamente. Pero colocar al principio dicha ejecución ralentiza mucho la carga de la página en general.

Especificar caché de navegador

El caché de navegador es la memoria que utiliza cada dispositivo de cliente para guardar imágenes, ficheros JS, y cualquier otro fichero que conforme la página.

El objetivo es no tener que volverlos a cargar en una posterior visita a la misma página.

Si se configura correctamente, la velocidad de carga en ese navegador será mucho mayor y alivia las transferencias desde el servidor.

W3 Total Cache se encarga de esta configuración de una forma fácil y muy completa.

Evita los redireccionamientos a páginas de destino

Como bien describe Google en su enlace, se trata de no redireccionar en el código de la página a diferentes versiones de la misma página, como puede ser una redirección a una versión móvil de la misma web.

Esto se evita muy fácilmente con un código completamente responsive de la web.

Por ejemplo, utilizando una plantilla responsive y algún plugin como AMP que permite acelerar la carga de las páginas en versión móvil.

Habilitar compresión

La compresión de los ficheros que se le envían al usuario permite que la transferencia de datos sea menor y se pueda cargar más rápidamente la página.

Esta opción se puede configurar desde la configuración del servidor (NGINX o Apache) pero también desde W3 Total Cache.

Minificar (es decir, reducir) código CSS, HTML y JavaScript

El código generado en CSS, HTML y JavaScript puede ser reducido para su más rápido procesamiento.

Se puede minificar quitando espacios en blanco, saltos de página, incluso cambiando el nombre de las variables para que el archivo resultante sea más pequeño y por ende su carga en el cliente.

De esto se encarga muy fácilmente Autoptimize.

Optimizar imágenes

Optimizar las imágenes significa hacerlas más pequeñas para que su carga sea más rápida, pero sin perder mucha calidad.

WP Smush es un plugin de los muchos que hay que permite la optimización automática de las imágenes.

Prioriza el contenido visible

Se trata de hacer la carga de la página empezando por el contenido principal y no por sidebars que apunten a otras páginas o incluso publicidad.

Esto ya es muy difícil de controlar con un plugin de WordPress, pero realmente depende sobre todo del tema utilizado (número de sidebars).

Mi consejo es probar con un tema, y si no está optimizado, probar con otro.

Reducir el tiempo de respuesta del servidor

Este punto depende de muchos factores. Por ejemplo:

Si el servidor es compartido (shared hosting) el tiempo de respuesta tenderá a ser más alto que en un servidor virtual privado (VPS hosting).

El sistema operativo, el panel de control, y todo el resto del software instalado son otros puntos a considerar.

Algunas notas finales

Decir que no hace falta la utilización de CDN para alcanzar el 100/100 del PageSpeed.

En mi caso, he probado CloudFlare, pero tiene el problema que en su versión gratuita, el https:// no es compatible con Chrome y IE que funcionen sobre Windows XP o Vista.

Para más detalles de la configuración de W3 Total Cache se puede ir al post de Raiola que está perfectamente descrito.

Con este conocimiento ya puedes contratar un VPS de Raiola no optimizado y convertirlo en un optimizado, y ahorrarte la diferencia mensual 😉

Si tienes dudas, contáctame, que estaré encantado de ayudarte.

Esta entrada fue publicada en Sin categoría el por .

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.