¿Qué es el WPO? ¿Cómo optimizar WPO para WordPress?

Elección del tema

Una de las decisiones más importantes a la hora de crear tu web WordPress es la elección de tema, y aquí, de cara al WPO, deberías tener en cuenta algunos aspectos, además de la apariencia visual de tus contenidos:

• El tema debe añadir solo el código necesario, y estándar de WordPress, cuanto menos mejor. Por debajo de 100 Kb por página sería un rango razonable.
• El tema no debe incluir funcionalidades que puedan aplicarse mediante plugins, pues sobrecargará tus páginas innecesariamente, aunque uses plugins.
• Preferiblemente, el tema no debe cargar fuentes web, y si lo hace ofrecer la posibilidad de precargarlas y almacenarlas en caché.

Dicho esto, algunos de los temas más recomendables de cara al WPO, sin perder prestaciones ni posibilidades de tener una preciosa web, serían:

• Astra
• Neve
• GeneratePress
• Proteo

Elección de plugins

Otros elementos que añadirán código a las páginas de nuestra web, y consumirán recursos del servidor (RAM y CPU) son los plugins.

Tienes que ver los plugins como lo que son: aplicaciones que se ejecutan 24 horas al día, 365 días al año, para ofrecer de manera permanente funcionalidades en tu web, y siempre están consumiendo recursos y aumentando el peso de tus páginas.

De hecho, los plugins son los elementos de tu web que más contribuyen negativamente al WPO de tu web, esto es así, siempre.

¿Significa esto que no debes usar plugins? Para nada, pero sí debes ser consciente de su utilidad, funcionamiento y consumo de recursos.

Para añadir plugins de manera eficiente debes tener en cuenta algunos principios básicos:

• Antes de nada analiza las necesidades de funcionalidades que DEBE tener tu web, y qué plugins necesitas para ofrecerlas.
• Revisa los principales plugins que sirvan para cubir esas necesidades, eligiendo el que tenga un desarrollo más activo, actualizaciones frecuentes, soporte rápido y aplique mejoras de rendimiento a sus funcionalidades.
• Instala y activa solo los plugins que realmente necesites.
• Utiliza solo las funcionalidades que necesites de cada plugin, desactivando todo lo supérfluo.
• Comprueba siempre los cambios en rendimiento de tu web tras instalar un plugin.

Sí, efectivamente, hay características que no tiene WordPress por defecto, y deberás implementar mediante plugins, pero siempre procura utilizar el más eficaz, ligero y optimizado, no el más «bonito».

Puedes analizar el consumo de recursos de los plugins con un plugin llamado Query Monitor. Una vez activo empieza a activar los distintos plugins para cada funcionalidad, uno cada vez, y comprueba en las tablas e indicadores de Query Monitor cuál de ellos es el que realiza menos consultas y consumo de recursos, en las páginas de administración, en el editor y en la web.

Verás que, para una misma funcionalidad, hay plugins que consumen muchos más recursos y generan múchas más consultas que otros, y así te será más fácil elegir el plugin que te ofrezca la funcionalidad que buscas, con el menor consumo de recursos posible.

Caché(s)

¿Te acuerdas cuando hace un rato – ahí arriba – hablábamos de que el problema de WordPress es que genera contenido dinámico? ¿y recuerdas que te decía que el objetivo era hacer estático todo lo posible? Pues eso es lo que hacen los sistemas de caché.

Lo que conocemos como caché es, básicamente, copias estáticas de consultas dinámicas. Te lo explico…

Para mostrar una página cualquiera de tu web WordPress a un visitante en su navegador el servidor recoge la petición del navegador, a continuación hace una petición a WordPress para que genere su contenido, que a su vez lee el PHP con el que está programado, este consulta en la base de datos qué contenido va en esa página, qué recursos internos y externos necesitas para mostrarla, con qué aspecto mostrarla y, finalmente, lo convierte a HTML, que es lo que lee el navegador.

Pues bien, cuando activas la caché, WordPress hace una copia de ese HTML final para cada página visitada, y al siguiente visitante a esa misma página ya no hace toda esa serie de pasos, sino que directamente entrega el HTML estático resultante y almacenado.

Todos estos archivos HTML estáticos suelen estar almacenados en una carpeta, llamada cache, de la instalación de tu WordPress, físicamente.

Además, hay otros tipos de caché, como la caché dinámica, que almacena las consultas en la memoria del servidor, que es más rápido que el sistema de caché de archivos.

Y también tu servidor puede disponer de caché de objetos persistente, un tipo de caché especial que reutiliza las consultas más habituales a la base de datos. En SiteGround esta caché es la conocida como Memcached. En otros servidores encontrarás quizás otras como Redis o Lightspeed. 

Puedes activar estos tres tipos de caché fácilmente con el plugin SG Optimizer de manera gratuita, no solo en las webs alojadas en SiteGround, aunque solo tendrás disponible la caché dinámica y Memcached si estás alojado en SiteGround.

Otros plugins de optimización, como WP Rocket y similares suelen ofrecer la caché de archivos, pero no el resto de sistemas, pues dependen del servidor de alojamiento.

Minimización de HTML, CSS y JavaScript

El minimizado del código HTML, CSS y JavaScript es una optimización básica que funciona siempre sin problemas.

Lo que hace es analizar todo el código generado en tus páginas y eliminar espacios en blanco, comentarios innecesarios en el código, tabulaciones, y todo aquello que no sea exclusivamente el código necesario para mostrar el contenido de la página.

Al hacer esto el código sigue funcionando pero el HTML generado pesa menos en cada página de tu web, y en consecuencia tardan menos en cargarse tus páginas. El impacto no es enorme pero siempre aporta algo a que tus páginas carguen más rápidamente.

Optimización de imágenes

Otra cosa es cuando hablamos de imágenes, aquí sí importa, no el tamaño, que también, sino el peso.

De todos los recursos de cualquier página web que sirvas en tu sitio WordPress las imágenes siempre van a ser el elemento con más peso en KB, espero que no MB.

Mientras que todo el código HTML, CSS y JS de una página puede pesar como máximo 200 Kb,  una sola imagen por sí sola ya puede pesar eso, o mucho más, no digamos si en una misma página el navegador tiene que mostrar varias imágenes.

Es por esto que la primera optimización que debes hacer en las páginas, entradas, productos, etc de tu web es la de imágenes.

Debes acostumbrarte a no subir las imágenes directamente sin antes reducir su peso al mínimo posible que permita visualizarlas correctamente.

WordPress hace copias automáticamente más pequeñas de tus imágenes, en tamaño y peso, pero debes acostumbrarte a optimizarlas antes de subirlas, bien desde aplicaciones como Photoshop, o con herramientas online como Squoosh, que permiten tanto reducir su tamaño como optimizar su peso. 

Para ir más allá, con plugins como SG Optimizer puedes optimizar automáticamente todas las imágenes a medida que las subes, e incluso las subidas anteriormente, pero no olvides el paso previo de optimizarlas antes, para evitar el consumo innecesario de recursos del servidor, que hará SG Optimizer si no subes optimizadas las imágenes.

Formatos de imagen de nueva generación (WebP, AVIF)

Un modo «elegante» de usar imágenes optimizadas es usar nuevos formatos, distintos de PNG o JPEG, como son WebP o AVIF.

WordPress admite la subida directamente de imágenes en formato WebP, y pronto lo hará en formato AVIF, aunque este formato aún no es tan compatible como WebP, que todos los navegadores modernos lo pueden mostrar.

La ventaja de estos nuevos formatos es que, a igual tamaño, el peso de las imágenes es mucho menor que en los viejos formatos de archivo de imagen.

Si no tienes una aplicación para guardar como WebP puedes usar el servicio Squoosh comentado antes, o con el plugin SG Optimizer se generarán automáticamente copias en WebP de las imágenes que subas, y serán estas las que se mostrarán en tus contenidos. 

Carga diferida de imágenes y vídeos (Lazy Load)

Ahora que estamos hablando de imágenes imagina la siguiente situación…

Tienes una página con distintas secciones, todas ellas con imágenes. El visitante, cuando llega a esta página tiene que ver las imágenes de la parte inicialmente visible de la página, pero aún hay muchas más imágenes, que deberán estar disponibles a medida que el usuario se mueva hacia abajo de la página ¿verdad?

Pues bien, hay 2 maneras de entregar estas imágenes:

1. El modo no WPO, que es cargar todas las imágenes en cuando el visitante llega a la página, con lo que la página seguirá cargando elementos mientras el usuario ya está viendo la página, y se estarán consumiendo recursos, que igual no son necesarios al final, si el visitante decide no seguir moviéndose hacia abajo por la página.
2. El modo WPO, de carga diferida, o lazyload en inglés, por el que inicialmente solo se mostrarán las imágenes necesarias para la parte visible inicialmente en la pantalla del navegador del visitante, y solo empezarán a cargarse las siguientes imágenes, cuando WordPress detecte que el usuario empieza a navegar para ver más elementos de la página.

Lo mejor de esta optimización es que es muy fácil de aplicar, pues la hace WordPress por defecto para imágenes y vídeos, y si quieres algo más de control, y aplicar esta carga diferida a más elementos, puedes activarlo en el plugin SG Optimizer.

Precarga de recursos externos

A veces no queda más remedio que cargar en nuestra web recursos externos, como scripts de publicidad, códigos de newsletter, píxeles de redes sociales o vete a saber.

Un modo de optimizar la carga de estos recursos es precargarlos, o sea, que si ya sabemos que vamos a necesitar descargar un script y ejecutarlo en nuestras páginas, indicárselo al navegador y que lo haga nada más llegar el visitante a nuestro sitio, para que cuando sea necesario el script, esté ya disponible, descargado, listo para su ejecución.

Esto, que parece tan técnico y elaborado, en realidad es simplemente aplicar un parámetro de precarga (preload, prefetch, etc.) a estos recursos, y lo mejor es que no tenemos que hacerlo manualmente, aunque podríamos, sino que con plugins como SG Optimizer podemos hacerlo de manera automática, mediante la opción de precarga de DNS de recursos desde dominios externos, donde solo tenemos que añadir los dominios desde los que se deberán cargar estos recursos.

Optimización de fuentes web

Lo mismo pasa en este sentido con las fuentes web, pues se cargan desde servidores externos, y deberemos añadir los dominios desde donde se descarguen, normalmente el servidor de Google Fonts, a la sección de SG Optimizer indicada anteriormente.

Además, este plugin de SiteGround también incluye una herramienta para optimizar la carga de las fuentes servidas desde nuestro tema y plugins activos, solo con un clic. 

Aplazar la carga de recursos que bloqueen la visualización

Antes, cuando hablábamos de la carga diferida de imágenes, nos centrábamos en esa primera parte de nuestras páginas, el primer pantallazo de cada página, que es lo primero que verá un visitante.

Bien, a esta parte se le suele llamar la parte de «antes del doblado» above the fold en inglés, en homenaje a la parte visible de los periódicos de papel en los quioscos.

Esta parte de la página, antes de que el usuario siga navegando hacia abajo, o haga scroll, es muy importante, pues de cara al visitante es la que le va a mostrar la primera impresión acerca de nuestro contenido, pero también de cuán rápida carga nuestra web, que inicialmente solo podrá valorar por esta parte inicialmente visible.

Así que es muy importante que esta parte de las páginas de antes del doblado se cargue de manera muy rápida, sin carga diferida de imágenes, pero sobre todo sin que haya ningún recurso, script, código o lo que sea cargándose que retrase la visualización de los elementos del contenido de la página.

Esto suele ser habitual cuando plugins o servicios añaden sus códigos y scripts en la cabecera de todas las páginas, y fuerzan a que, antes de mostrarse el contenido de tus páginas, se carguen todos esos recursos, muchas veces ralentizando innecesariamente la visualización de tu contenido, pues la mayoría de las veces ni siquiera serán necesarios para esa parte de la página.

Lo que tenemos que hacer es ser muy exhaustivos en aplazar la carga de esos recursos innecesarios, para que primero se cargue nuestro contenido, y luego ya los scripts y demás.

Para aplicar esta optimización tenemos de nuevo una casilla, a un clic, en el plugin SG Optimizer, que lo hace automáticamente, en la sección llamada «Portada» de los ajustes del plugin.

Debes tener en cuenta que esta optimización puede aplazar recursos que igual sí son necesarios, así que nada más activarla comprueba si tus páginas se muestran correctamente y con todos sus elementos, y si alguno «no se deja» aplazar, o sea, que no funciona aplazado, añádelo como excepción en los ajustes del plugin.

CSS crítico

Volviendo sobre esa parte vital de tus páginas, la de antes del doblado que veíamos antes, hay otra optimización relevante, especialmente para esta parte.

Es habitual que plugins y el tema añadan referencias al CSS necesario para mostrar correctamente con los estilos adecuados los contenidos en la cabecera de tus páginas, pero no el necesario para mostrar cada página en concreto, sino todo el CSS necesario para toda la web.

Pues bien, una optimización avanzada es generar lo que se conoce como CSS crítico, y es un proceso por el que el plugin de optimización analiza primero qué CSS hace falta para la visualización correcta de cada página concreta e individual, extrae del archivo CSS global el código necesario para cada página y lo añade directamente al HTML de cada página, cargando el resto del CSS de modo aplazado, solo cuando sea necesario.

Puedes encontrar esta optimización en el plugin WP Rocket, de pago.

Carga condicional de recursos

Como ya te habrás dado cuenta en varias ocasiones estamos hablando de cargar recursos solo dónde y cuándo son necesarios, pues bien, esta es una optimización avanzada que debemos abordar cuando alguno de estos recursos que se cargan indiscriminadamente sea un problema para la velocidad de carga o usabilidad de nuestras páginas.

Así, por ejemplo, si instalas un plugin de formularios de contacto para añadir un formulario en una sola página, el plugin no «sabe» dónde vas a añadirlo, así que cargará sus estilos y códigos JavaScript necesarios en todas las páginas, por si fuese necesario, resultando que para mostrar un formulario en una sola página estás cargando CSS y JS innecesario en todas las páginas de tu web.

Para cada funcionalidad de este tipo debes revisar en la documentación del plugin o preguntar a su desarrollador si hay algún modo de aplicar la carga condicional, para que solo cargue y consuma recursos donde sea necesario.

Reducir cabeceras HTTP

Curiosamente casi no hay plugins de optimización que reduzcan cabeceras HTTP innecesarias, a veces te ayudan más los plugins de seguridad, como SG Security, quitando cabeceras, por seguridad.

Esta optimización se refiere a eliminar cabeceras HTTP innecesarias, que generen llamadas no necesarias, del código de tus páginas.

Por ejemplo, WordPress siempre añade cabeceras del generador del contenido (curiosamente WordPress), de los feeds RSS, aunque no los uses, y más elementos que no son necesarios para que tus páginas se visualicen correctamente.

Optimización de la base de datos

Hasta ahora hemos visto muchas optimizaciones relacionadas con la parte de los plugins, el tema, WordPress, pero ¿qué pasa con la base de datos?

Pues resulta que todos ellos, WordPress, el tema, los plugins, usan la base de datos de tu instalación para almacenar sus ajustes y contenidos, y es importante que la base de datos esté optimizada y que cargue solo lo imprescindible.

Huelga decir que deberías borrar cualquier tabla de la base de datos de plugins o temas que ya no uses, así que una buena costumbre es vigilar la base de datos de tu WordPress, comprobar cada vez que instales algo si se crea alguna tabla nueva, para borrarla si borras el plugin, pues no siempre lo hacen automáticamente.

La otra optimización, es vaciar los residuos que se generan en las tablas del funcionamiento normal de la base de datos, y esto puedes hacerlo fácilmente y de manera automática con la opción que tienes disponible en el plugin SG Optimizer.

Además, hay otros plugins específicos que te ayudarán a borrar datos transitorios, borradores y otros elementos temporales de la base de datos.

Luego está lo que te comentaba al principio de esta guía, sobre el tamaño de la base de datos, y es que siempre será más óptimo y rápido ejecutar acciones de una base de datos de 400 Mb que de una que pese 2 GB. 

Reducir actividad de la API Heartbeat

Una optimización muy específica para WordPress es reducir la actividad de la API conocida como Heartbeat. 

Este servicio interno de WordPress realiza ciertas comprobaciones de manera frecuente sobre tu instalación, haciendo montones de consultas al archivo admin-ajax.php, lo que puede llegar a ralentizar enormemente webs grandes, con muchos recursos o mucho tráfico.

Todos los plugins de optimización, y también SG Optimizer, te permitirán desactivar completa o parcialmente la API Heartbeat. 

Reducir actividad del cron

Otro servicio que «vigila» la actividad de tu sitio WordPress es el WP Cron, o cron de WordPress, activo por defecto, y que ejecuta acciones programadas, por ti o automáticas, como comprobación de actualizaciones, publicación de entradas programadas, renovación de pedidos, etc.

El problema con el cron de WordPress es que se ejecuta demasiado a menudo, y esto hace que tu instalación consuma muchos recursos, lo que en webs muy grandes puede llegar a agotar los recursos del servidor, y haciendo que tu web no cargue correctamente.

La solución suele pasar por desactivar el cron de WordPress y activar un cron real, un proceso sencillo pero delicado, que mejor te remito a este tutorial de la base de conocimiento de SiteGround para que aprendas cómo hacerlo.

Desactivar recursos innecesarios

Para finalizar, recuerda aplicar el sentido común, y no te pongas a optimizar recursos que igual realmente no necesitas, así que plantéate cada cierto tiempo si es necesario que tengas al final de cada entrada tantos botones de compartir en redes, las estrellitas de voto, el formulario de suscripción, el de contacto y cualquier otro elemento que, en vez de tratar de optimizar, igual, digo yo, llámame loco, igual no lo usa ningún visitante y podrías simplemente quitarlo.

Gracias por leerme, espero que hayas aprendido sobre WPO y optimizar WordPress, para cualquier duda hazla en los comentarios.