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.

En muchas ocasiones utilizamos plugins en nuestro WordPress que sólo hacen su función en ciertas partes de la web, pero su código (CSS, JS…) se carga toda la web por completo.

Un ejemplo típico es un formulario de contacto, que en muchos casos sólo se muestra en página de contacto, pero el plugin carga el código en toda la web.

En este punto te voy a enseñar algo maravilloso que es cómo hacer que la carga de plugins y sus archivos sea condicional a diferentes reglas que le pongamos nosotros, como tipos de posts, páginas concretas, páginas que empiezan con una misma URL…

¡Vamos allá!

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 🙂

En esta sección veremos cómo funciona y cómo aplicar la técnica de lazyload. También vemos cómo funciona el lazyload nativo y por qué aún no es una opción demasiado práctica.

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!

Veamos en detalle cada una de estas reglas que nos permiten establecer las prioridades a la hora de cargar diferentes recursos de nuestra web y como consecuencia arreglar varios problemas de velocidad y percepción de carga.

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 nos permite poner algunos archivos de JavaScript «en espera» y cargarlos solo cuando el usuario interactúe con la web, moviendo el ratón por ejemplo.

De esta forma podemos ahorrar muchísimos kB de peso en esa primera carga y la velocidad de carga percibida aumentará notablemente.

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:

En esta sección veremos diferentes técnicas que podemos aplicar para reducir la carga que suponen los Cron-Jobs para nuestro WordPress.

Veremos diferentes técnicas para optimizar la velocidad de carga de nuestra base de datos.

Veremos cómo reducir el consumo de recursos de CPU por parte de admin-ajax.php reduciendo la cantidad de peticiones en el backend y detectando los plugins culpables de ello en el frontend

Veremos cómo identificar y corregir los problemas relacionados con 3 vitals destacadas de Google.