Optimización de velocidad en WordPress

Vamos a ver cómo hacer un análisis completo de la velocidad de carga de un WordPress, qué herramientas usar y en qué fijarse.

Este quizás es uno de lo puntos que más influyen en la velocidad de carga (y en otras cosas) así que empezamos con ello. Pero antes de empezar, dos consideraciones:

• No voy a comparar hostings ya que existen 35718439 posts en internet que lo hacen, simplemente comentaré en qué hay que fijarse para asegurar una buena velocidad
• Aquí me centraré en la velocidad, aunque por norma general si el hosting cubre bien esa parte,  tampoco suele fallar en el resto de asuntos como seguridad, soporte, etc.

Dicho esto, veamos en vídeo cómo comprobar las prestaciones de tu hosting, algunos recursos para encontrar un buen hosting y en qué datos hay que fijarse.

Si estás contento con tu hosting puedes irte directamente al apartado de configurar.

En este apartado veremos cómo detectar plugins pesados, comprobar y comparar su rendimiento de varias formas

Existen varios plugins que nos pueden ayudar con muchos de los puntos que vemos en esta guía. Elegir uno u otro va a depender de cada caso así que vamos a ver cómo elegir el plugin más adecuado a nuestra instalación de WordPress.

Veamos los básicos de la optimización de CSS y JS, que son la minificación y la concatenación.

Aquí va a haber chicha, así que prepara las palomitas 🍿. Vamos a ver por qué ocurre y cómo resolver uno de los problemas más recurrentes en la optimización de la velocidad de una web – render blocking.

Vamos a ver cómo con el inspector del navegador (en mi caso Chrome) podemos detectar y eliminar (o cargar condicionalmente) aquel código CSS que no se está utilizando en páginas concretas de nuestro WordPress.

Hablamos largo y tendido sobre este tema en la guía de tratamiento de imágenes en WordPress 🙂

Todos usamos fuentes en la web, y en la mayoría de los casos son fuentes de Google. Hace un tiempo toqué este tema en el blog así que puedes echarle un vistazo para ver las bases de la optimización: Cómo optimizar Google Fonts en WordPress.

Te hago un resumen. Hay dos cosas a tener en cuenta para que las fuentes no ralenticen demasiado:

1. Cuántas fuentes cargamos: hablamos de tipografías en sí, como Roboto, Montserrat, Open Sans…
2. Cuántas variaciones cargamos de cada fuente: se trata de los grosores de  las fuents, es decir 300, 400(normal) , 700(bold)…

Cuantas menos fuentes y menos variaciones de fuentes carguemos, mejor.

En otro vídeo ya vimos cómo insertar correctamente las fuentes de Google así que en esta parte de la sesión veremos:

• Cómo quitar las fuentes de Google de toda la web
• Cómo dejar de cargar fuentes concretas: si hemos instalado algún plugin o theme que carga sus fuentes y no las queremos
• Cómo cargar fuentes condicionalmente: si hay alguna fuente que sólo usamos en una parte concreta de la web.
• Cómo cargar sólo caracteres concretos de una fuente.

Vamos allá 🙂

El tema de caché es bastante complejo. Sobre todo porque existen varios tipos y a la mínima que profundicemos algo, el tema se vuelve demasiado técnico.

Por otro lado el caché es hiper-importante para asegurar una navegación fluida por nuestra web, así que no te pierdas este apartado.

Aquí te quiero comentar los tipos de caché por los que te tienes que preocupar, cómo activarlos y algunos consejos sobre otros tipos de caché que existe. Go!

Este truco permite acelerar notablemente la velocidad de carga (hasta 90%) de aquellas páginas que visitemos después de aterrizar en la web. Veamos cómo funciona:

Esta técnica permite acelerar la precarga de algunos recursos sobre todo en dispositivos lentos. Para poder acceder a ella debemos tener instalado un certificado SSL. Si ya lo tienes, vamos allá 🙂

Esta parte ya la vimos en su momento en el blog, pero os lo dejo aquí para tenerlo todo en un mismo lugar.

Se trata de quitar recursos concretos que vienen por defecto con WordPress, pero es posible que no estemos utilizando en la web.

Antes de quitar cosas, mírate este vídeo para ver cómo puedes comprobar si realmente estás utilizando o no esos recursos en la web: