Cómo mejorar el rendimiento de tu web WordPress

Hoy en día, si tu web no aparece en la primera página de los resultados de búsqueda de Google, significa que eres prácticamente invisible para tus posibles usuarios. Y si quieres que Google te quiera más y te muestre lo más arriba posible, una de las cosas más importantes que debes hacer es mejorar la velocidad de tu web en WordPress. Además, tus usuarios estarán más contentos si no tienen que ir a tomar un café antes mientras se carga tu sitio 😉

Echemos un vistazo a lo que puedes hacer para optimizar el rendimiento de tu sitio web.

1) Optimización de imágenes

Si tu web contiene imágenes, casi seguro que es la parte más pesada del sitio. Por lo general, las imágenes representan más del 90% del tamaño de tu sitio web. Entonces tiene sentido optimizarlas tanto como sea posible, ¿verdad? Existen muchas técnicas para esto, y ShortPixel ha desarrollado 2 plugins para WordPress que te ayudarán a mejorar el rendimiento de tu web WP. Además, ¡no te creerás lo fácil que son de usarlos!

ShortPixel Image Optimizer (SPIO)

Este fue su primer plugin y el origen de su éxito.

ShortPixel Image Optimizer es un plugin ligero y fácil de usar que te permite comprimir todas tus imágenes y documentos PDF con un solo clic.

Cojamos una imagen aleatoria de Unsplash como ejemplo. La imagen a la que he enlazado pesa 4’45 MB y tiene una resolución de 5184×3456. Parece una foto que uno sacaría con una cámara normal. Así es como se ve cuando se procesa con ShortPixel Image Optimizer:

Después de escoger una compresión con pérdida y un tamaño máximo de 1920 px, ¡se ha reducido el tamaño en un 87’52%! Ahora pesa solo 398 KB. Impresionante. Y la calidad de la imagen es casi la misma.

Si quieres comprobar cómo funciona el servicio de optimización de imágenes de ShortPixel con tus imágenes, puedes probarlo con su herramienta web. ¡Te sorprenderá lo mucho que pueden reducir el tamaño de las fotos!

ShortPixel Adaptive Images (SPAI)

El plugin ShortPixel Adaptive Images optimiza tus imágenes como SPIO, pero proporciona 2 servicios adicionales: una CDN y un servicio para redimensionar o cambiar de tamaño la imagen. ShortPixel AI procesa las imágenes originales teniendo en cuenta la ventana de visualización del visitante (el tamaño de la ventana del navegador) y el marcador de posición de la imagen (la «caja» donde la imagen se encuentra), y genera nuevas URL para las imágenes de acuerdo con la configuración del usuario, que se mostrarán en lugar de las URL de las imágenes originales. Estas imágenes luego se optimizan y sirven desde la CDN de ShortPixel con el tamaño adecuado.

Por ejemplo, cojamos el siguiente sitio web. Este es un informe de GTmetrix (una herramienta en línea que te permite verificar el rendimiento de la web de WordPress) antes de instalar ShortPixel Adaptive Images:

Y esto es después de instalar y configurar ShortPixel Adaptive Images:

¡Y la instalación y configuración de SPAI es aún más fácil que SPIO! Este es literalmente un plugin de optimización de imágenes de los de instalar y olviderse. ¡Descárgalo ya para tu web WordPress!

Si quieres leer más sobre ambos plugins, echa un vistazo a estos documentos:

– ¿Cómo se compara ShortPixel Adaptive Images con ShortPixel Image Optimizer?
– ¿Cómo funciona ShortPixel Adaptive Images?
– ¿Cómo funciona ShortPixel Image Optimizer?

2) Contrata un buen hosting

Es muy molesto visitar un sitio web y ver esto durante más de 0.5 segundos:

Esto es lo que pasa cuando tu web está en un servicio de alojamiento de una empresa que ofrece planes por 1€ al mes. Estarás en un servidor antiguo compartido con muchas otras personas, las cuales usarán la misma CPU, disco duro y RAM que tú.

¡Así que tal vez sea hora de cambiar de proveedor de alojamiento web! Pero, ¿dónde deberías empezar a buscar? Hay varias categorías de hosting, para todos los presupuestos y necesidades. Aquí los describo y te daré mis recomendaciones honestas.

Alojamiento compartido

En inglés, «shared hosting», esta es la opción más económica, adecuada para sitios web con poco tráfico (alrededor de 20.000 visitantes al mes o menos) y sin plugins que necesiten muchos recursos (como WooCommerce o WPML).

Es también la opción más económica para el que lo vende. Ellos compran un servidor gigante y meten dentro a cientos de usuarios con sus webs. Cuantos más mejor. Y es por eso mismo que el rendimiento no es muy bueno, ya que estás compartiendo los recursos del servidor con muchas otras personas.

Los mejores proveedores de alojamiento compartido:

• Webempresa: Quizás la única empresa española que recomendaría. Los planes no son muy baratos, pero el rendimiento es suficientemente bueno para sitios pequeños.
• Cloudey: Muy activo en foros online. No encontrarás muchas reviews y precisamente por eso son una buena opción; hoy en día la gran mayoría de las reviews son pagadas
• Krystal: Empresa con sede en el Reino Unido, con clientes satisfechos y muy buenas críticas en varios grupos de Facebook y foros online.
• WebHostFace: Empresa americana con planes muy baratos y aunque sus servidores no están en el #1, son lo suficientemente buenos para sitios pequeños

Por experiencia, evita todos los proveedores de alojamiento que pertenecen a Newfold Digital, como BlueHost o HostGator. Evita también espcialmente GoDaddy, OVH, NameCheap, 1and1 y otras empresas low-cost. Todos estos tienen recursos limitados y una arquitectura lenta con tecnología obsoleta. Entonces, ¿por qué son tan populares? Fácil, precios extremadamente bajos y marketing de afiliados.

Evita también SiteGround. En otra entrada hablaré más sobre el tema, pero en pocas palabras, hoy en día viven del marketing de afiliados, porque ni son baratos ni ofrecen un rendimiento fuera de lo normal.

Si quieres más recomendaciones sobre hosting compartido, te recomiendo que investigues por tu cuenta, ya que cada persona tiene necesidades diferentes y cada proveedor de alojamiento ofrece algo diferente, pero para empezar, estos son los requisitos mínimos que debes tener en cuenta al buscar un nuevo proveedor de alojamiento compartido:

• Evita las ofertas ilimitadas: En el mundo del hosting nada es ilimitado (espacio en disco, dominios, ancho de banda…), y si el proveedor te ofrece eso, es que te está limitando por otro lado.
• Suficiente espacio en disco: calcula cuánto espacio de disco necesita tu web (la mayor parte se lo llevan las imágenes) y duplícalo para tener suficiente espacio para al menos una copia de seguridad local.
• Buen soporte técnico: asegúrate de que si necesitas soporte técnico lo tendrás las 24 horas del día, los 7 días de la semana y que podrás comunicarte por correo electrónico o aún mejor, chat y/o teléfono. No querrás que tu web se caiga un domingo y no tengas a nadie que te ayude. Incluso puedes intentar enviar un breve correo electrónico o mensaje al proveedor que estés considerando y ver cómo responden y si son útiles.
• Certificados SSL gratuitos: tu proveedor de alojamiento debe ser compatible con Let’s Encrypt, el cual ofrece certificados SSL gratuitos, y además deberías poder instalarlo en un clic, o incluso mejor, que los instalen por ti. Esto es muy importante no solo para la seguridad de tus usuarios, sino también para una mejor optimización de motores de búsqueda, ya que a Google no le gustan los sitios web que no son https.
• Copias de seguridad: un buen hosting debería al menos proporcionar copias de seguridad gratuitas. Si eliges un plan económico, muchas veces vas a tener que pagar para restaurar una copia de seguridad, pero al menos la tendrás.
• LiteSpeed: intenta elegir un proveedor de alojamiento que ofrezca LiteSpeed o NGINX como servidor web. Apache ya es demasiado antiguo y no ofrece las mismas ventajas de velocidad.
• Buena reputación: Olvídate de los primeros resultados en Google. Están (casi) todos pagados. Investiga en Reddit, el grupo de Facebook WP Speed Matters, foros como Web Hosting Talk o similares. Allí encontrarás las mejores recomendaciones. Sí, desafortunadamente toda la información buena está en inglés.

Hosting WordPress administrado

En inglés lo encontrarás bajo el nombre de «managed WordPress hosting«. Son caros pero ofrecen más rendimiento que el alojamiento compartido, y no limitan los recursos de hardware (al menos, en teoría), sino el tráfico para garantizar un alto rendimiento. Además, tal y como se intuye por el nombre, este tipo de alojamiento está indicado para empresas o individuales que no tienen ni tiempo ni ganas de ocuparse de la parte técnica y/o webs con alto tráfico de usuarios para las que el alojamiento compartido se queda corto. Además, te ofrecerán su propio panel de control fácil de usar con solo las opciones necesarias para que puedas gestionar lo necesario de tu web.

Por último, mencionar que si buscas buen soporte, lo encontrarás aquí. Aunque es de esperar por lo que pagas…

El inconveniente es que suelen haber muchas restricciones sobre lo que se puede instalar en tu web. Por ejemplo, notarás que la mayoría de opciones no permiten plugins de caché como WP Rocket o WP Super Cache. A veces, tampoco te permitirán instalar según qué plugins, como optimizadores de imágenes, creadores de copias de seguridad, u otros que pueden utilizar muchos recursos del servidor. Tampoco sabrás nunca cuántos recursos (CPU, RAM…) te dan para tu sitio, aunque se podría decir que de eso se trata: no tienes que preocuparte de eso y confías en ellos para que se encarguen de todo.

Los mejores proveedores de hosting de WordPress administrado:

• Kinsta: Es uno de los proveedores más populares debido a su facilidad de uso y buen rendimiento. No solo eso, su soporte es de 10.
• Cloudways: La fórmula de Cloudways es interesante; te dejan escoger exactamente el VPS que quieras (mira abajo para ver qué es un VPS), así que sabes de cuánta RAM o CPU dispones, y luego ponen su panel de control encima, y gestionas todo desde allí. Al final obtienes el rendimiento de un VPS y la facilidad de uso del hosting administrado. Comparado con Kinsta, es un pelín menos fácil de usar pero da unos resultados un poco mejores en cuanto a rendimiento.
• Rocket.net: No confundir con WP Rocket, el plugin de caché; el secreto de Rocket.net está en Cloudflare y en su panel de control. Muy pocas opciones, solo las necesarias, y toda tu web está todo el rato detrás de Cloudflare. Además, es imposible de desactivarlo, por lo que la mayoría del tiempo tu web se estará sirviendo desde Cloudflare y sus cientos de servidores en el mundo. Sí, esto significa que podrías estar usando cualquier otro proveedor más barato, configurar Cloudflare tú mismo, y obtener los mismos resultados. Pero Rocket.net te lo pone mucho más fácil de empezar a usar.

VPS

Con un VPS (servidor virtual privado, del inglés «Virtual Private Server»), te dan una «parte» de un servidor. La empresa de alojamiento te da un servidor virtual privado y asigna recursos (CPU, memoria, disco…) a tu cuenta que nadie comparte contigo, a diferencia del alojamiento compartido o administrado. Por lo tanto, normalmente tendrás un mejor rendimiento que con ellos, y es ideal para cuando tu negocio comienza a crecer y no te importa tener que ocuparte de algunos temas técnicos.

Hay que tener en cuenta que un VPS es más barato pero más complicado de configurar. Necesitarás algunos conocimientos técnicos y de administrador de sistemas para configurar todo, desde gestionar las actualizaciones de tu servidor hasta configurar el servidor de correo electrónico. En otras palabras, tú alquilas un servidor y el proveedor te da acceso a él y te dice «haz lo quieras». Si necesitas más facilidad de uso, pero no quieres perder todo el control como en los planes de hosting WordPress administrado, te conviene combinar un VPS con un «cloud panel». Sigue leyendo.

Los mejores proveedores de VPS:

• DigitalOcean: ofrece alojamiento VPS sin administrar. Si eres un manitas tecnológico y puedes administrar tu servidor por ti mismo, debes escogerlos.
• Linode: una excelente alternativa a DigitalOcean, que también ofrece alojamiento VPS sin administrar.
• Hetzner: precios casi imbatibles para VPS sin administrar, solo recomendado si tu negocio está en Europa o Estados Unidos, ya que solo dispone de servidores en estas áreas y se sabe que el mejor rendimiento se obtiene allí. Una excelente combinación que siempre recomiendo es Hetzner+RunCloud (ver más abajo).

Cloud panels

Como he comentado antes, ¿qué hacemos si queremos el rendimiento de un VPS pero la facilidad de uso del hosting administrado? La respuesta es un VPS con un «cloud panel» o un panel en la nube.

En este caso, contratas por una parte el servidor y por otra parte el «cloud panel» (sí, tendrás dos facturas) y los conectas. Para ello, cada proveedor de paneles tiene sus propias instrucciones, pero normalmente implicarán acceder al servidor y ejecutar una serie de comandos. Una vez conectados, el «cloud panel» se encargará de gestionar el servidor: copias de seguridad, instalación de WordPress, cuentas FTP, etc. Todo a golpe de clic.

Importante: No esperes que el equipo de soporte de uno de estos paneles te guíe en cómo hacer según que cosas básicas. Si el problema está en WordPress, es tu problema, no de ellos.

Los mejores proveedores de «cloud panel» o paneles de administración de servidores online:

• RunCloud: la mejor opción para administrar VPS que ofrece un rendimiento de primer nivel. Buen soporte y compatible con NGINX y OpenLiteSpeed.
• SpinupWP: de los creadores de ACF y WP Offload Media, aquí tenéis otro producto suyo maravilloso, un «cloud panel» para administrar tu VPS. Es uno de los competidores de RunCloud y ofrece precios similares con un rendimiento excelente también.

Servidor dedicado

Si te encuentras en una situación en la que el hosting para WordPress administrado o un VPS de nuestras recomendaciones no es suficiente, entonces deberías ir con un servidor dedicado (o varios). Estoy hablando básicamente de un servidor completo para tu sitio web, que podría no darte el mejor rendimiento a menos que lo alquiles de un buen proveedor, pero si lo es, tendrás velocidades de primer nivel.

Los servidores dedicados deben ser administrados por alguien, y el rendimiento que se puede obtener de ellos depende de cómo de bien se haga y cómo de bueno es el hardware del servidor. Por esta razón, te recomiendo que alguien te asesore profesionalmente. Definitivamente lo necesitarás si tu negocio tiene tanto éxito 😉

3) Usa la menor cantidad de plugins posible

Esta situación es similar a la de un teléfono o un portátil recién comprados. Viene con mucho software que no vas a usar, y eso hace que el dispositivo vaya más lento. Con WordPress sucede lo mismo cuando instalas muchos plugins.

Trata de mantener la lista de plugins lo más pequeña posible y usa solo los necesarios; de lo contrario afectarás el rendimiento de tu WordPress. Esto es lo que puedes hacer para limpiar tu instalación de WordPress:

• En general, mira cada plugin y pregúntate si lo necesitas. Si no lo necesitas, quítalo. No lo guardes “por si acaso”. Por ejemplo, ¿tienes un plugin que le da un efecto muy chulo a los títulos del área de administración? Innecesario.
• ¿Tienes dos plugins que hacen el mismo trabajo? Deshazte de uno. Un ejemplo que veo a menudo: dos plugins de caché, lo que no tiene sentido, porque almacenar en caché tus páginas dos veces no aporta nada.
• ¿Estás utilizando un plugin muy grande solo para una sola función incluida en ese plugin? Intenta encontrar un plugin más pequeño cuya función sea exactamente la que buscas, o incluso puedes buscar en Google el fragmento de código que necesitas para sustituirlo.

Recuerda, el objetivo es reducir la cantidad de plugins para que WordPress no tenga que cargar demasiadas cosas.

4) Usa buenos plugins de WordPress

Un solo plugin mal desarrollado puede arruinar toda tu web y hacerla más lenta. Para elegir el mejor plugin para cada función, ten a mano esta lista de verificación. Con el tiempo, podrás identificar fácilmente qué plugins son los mejores en cada categoría:

• Última actualización: si un plugin no ha recibido una actualización en los últimos 6 meses, generalmente significa que ya nadie se ocupa de él y probablemente tiene problemas de funcionalidad o compatibilidad, o incluso problemas de seguridad. Te recomiendo que evites los plugins obsoletos a menos que sepas que puedes usarlos de manera segura.
• Compatible con la última versión de WordPress: si el plugin indica que es compatible con la última versión de WordPress, normalmente significa que el desarrollador se ha tomado la molestia de probar el plugin con la última versión de WordPress.
• Capturas de pantalla: esta es una de las cosas que muestran si el desarrollador se preocupa por los usuarios o no, ya que algunas buenas capturas de pantalla les ayudarán a ver si el plugin satisface sus necesidades o no.
• Buena descripción: es importante tener una buena descripción para saber qué hace el plugin y cómo funciona. Si primero tiene que instalar el plugin para ver cómo funciona, no es una buena señal.
• Preguntas frecuentes: Igual que las capturas de pantalla. Esto muestra que el desarrollador quiere que entiendas cómo funciona el plugin.
• Calificación promedio: Obvio, pero asegúrate de comparar las reseñas con la cantidad de ellas, porque un plugin con una sola review de 5 estrellas no significa que sea mejor que otro con 37 reviews de 4 estrellas. La única review de 5 estrellas es probablemente del autor…
• Tamaño: Imagina que quieres un plugin solo para añadir un bloque de Gutenberg de Google Maps en tu web. ¿Cogerías un plugin que pesa 300 KB, o uno que pesa 3 MB? Normalmente, un plugin que pesa 300 KB va a estar mejor programado y optimizado, y será más eficiente que uno que pesa 3 MB.
• Soporte: querrás tener un buen soporte en caso de que algo salga mal. Verifica si el plugin tiene un área pública donde puedas ver preguntas y respuestas. WordPress, por ejemplo, tiene foros públicos de soporte. También te recomiendo que contactes directamente con los autores del plugin y les hagas una pregunta simple. No se trata de la respuesta en sí, sino de cómo el soporte técnico responde a tu pregunta.
• Perfil del desarrollador: Vale la pena ver quién es el desarrollador, qué hace, si es activo en WordPress… Además, yo normalmente suelo preferir los plugins de un solo desarrollador en vez de los que van bajo el nombre de una empresa. Hoy en día, si el plugin va a nombre de una empresa, muchas veces el plugin es básicamente un anuncio para la versión «pro» por X€ al mes.
• Pruébalo: Crea un sitio web de prueba en tastewp.com o similar e instala el plugin en cuestión allí. Un buen plugin simplificará las cosas y seguirá las pautas de la interfaz de usuario de WordPress. Si necesitas demasiado tiempo para comprender cómo funciona el plugin o si tiene una interfaz de usuario altamente personalizada, probablemente deberías considerar otra opción (aunque siempre hay excepciones, por supuesto).
• Comprueba la base de datos: si tienes la oportunidad de tener un sitio de prueba con acceso a phpMyAdmin o un visor de base de datos, instala el plugin allí, actívalo y luego desinstálalo. Luego comprueba los restos del plugin en las tablas de la base de datos. Si es un buen plugin, al desinstalarse debería limpiarse por si mismo y dejar poco o ningún resto detrás suyo.
• Evita los plugins multifunción: si quieres añadir una pequeña función a tu sitio que no está disponible de forma nativa en WordPress, deberías buscar un plugin que haga exactamente eso. Por ejemplo, supongamos que quieres añadir un icono a tu página creada con el editor de bloques nativo de WordPress, Gutenberg. ¿Por qué instalar un plugin que incluye muchísimos bloques adicionales y que por casualidad incluye un bloque de iconos, cuando puedes simplemente instalar The Icon Block?

5) No uses un maquetador de páginas

El interés en los maquetadores de páginas (en inglés «page builders») aumentó significativamente en la segunda mitad de 2010. WordPress era el sistema más popular para crear sitios web y todo el mundo quería una. Pero WordPress no tenía una forma amigable y fácil de usar para crear páginas. Todo dependía del tema en sí. Y ahí fue cuando los maquetadores de páginas entraron en juego.

Los maquetadores facilitaron mucho la creación de webs. Todo lo que necesitabas hacer era instalar uno o dos plugins y, ¡listo!, podías crear páginas simplemente arrastrando y soltando elementos. Y el gran boom llegó con Elementor. Una pequeña empresa de Israel creó el maquetador de páginas más popular en la actualidad. Basta con echar un vistazo a Google Trends:

Pero ya estamos en 2023 y ahora la gente exige velocidad. Los maquetadores de páginas han hecho que todo sea mucho más fácil, pero debido a que hay que adaptarlos para que funcionen bien en millones de webs diferentes con necesidades diferentes, añaden muchos scripts, CSS y funcionalidades que deben cargarse en cada página. Esto hace que la página sea lenta.

Afortunadamente, WordPress notó cómo los maquetadores de páginas arruinan la experiencia de usuario y decidió desarrollar Gutenberg: una forma de construir tus páginas con bloques. Es similar a un maquetador, pero diferente. Añades solo los bloques que necesitas (imagen, encabezado, vídeo…) y listo. Y debido a que está estrechamente integrado con WordPress (es WordPress), es muy ligero.

Elementor (o cualquier otro maquetador de páginas) vs. Gutenberg

Solo mira esta comparación. He creado esta página de muestra en un nuevo sitio de prueba primero con Elementor y luego con bloques de Gutenberg. Sólo unos pocos colores, imágenes y texto.

Cuando abrimos las herramientas de desarrollo del navegador («DevTools») y examinamos la página, estos son los resultados con Elementor:

Y estos son los resultados con Gutenberg:

Con Elementor, el usuario tiene que cargar más del doble de recursos y el navegador tarda más del doble de tiempo en analizar la página. ¡Y esto es solo para una página super-simple!

Lo de arriba son los resultados reales de un navegador real, pero si probamos la web en un test de velocidad, las cosas son igual de interesantes. Este es el resultado de la prueba creada con Elementor:

Y esta es la misma página creada solo con bloques de Gutenberg:

Si estás pensando “Bueno… la diferencia no es tan grande…”, recuerda que esta es una página de ejemplo extremadamente simple. En una página web normal con pases de diapositivas, muchas fotos, animaciones, contenido… la diferencia es mucho más drástica.

En pocas palabras: No utilices un maquetador de páginas para una nueva web. No uses Elementor, Beaver Builder, Divi, WPBakery u otros. Y si tu sitio web ya existe, rediseñalo con Gutenberg. Notarás la diferencia.

6) Elige un buen tema

Algo similar sucede con un tema. Digamos que no usas un maquetador de páginas y construyes todas sus páginas con bloques de Gutenberg. ¿Sabes que podrías arruinar tu web eligiendo un mal tema?

Un tema es lo que le da un aspecto al sitio web. Podemos dividir el mercado temático en tres categorías:

• Temas simples con un solo diseño y poca o ninguna personalización. Por lo general, son gratuitos y están disponibles en wordpress.org. Una buena opción.
• Temas con algunos ajustes básicos que permiten cambiar botones, colores, fuentes o algunos diseños prefabricados. Por lo general, requieren de una suscripción mensual para obtener acceso a todas las funciones, pero también ofrecen una versión limitada gratuita en wordpress.org. También son una buena opción.
• Temas pesados con infinidad de opciones que intentan emular un maquetador de páginas sin serlo. Esto es lo que encontrarás en la mayoría de las webs dedicadas a ofrecer temas fuera del repositorio principal de WordPress, como por ejemplo Themeforest. Entonces tiene sentido que si estás tratando de dirigirte a la misma audiencia que un maquetador de páginas, te verás obligado a incluir tantas configuraciones y funciones en tu tema que ralentizará cualquier sitio web. Claros ejemplos son Avada, The7, Betheme, Enfold, Flatsome, Salient, etc.

Por lo tanto, queremos que nuestro tema esté en las categorías n.° 1 y n.° 2, mientras tratamos de evitar la n.° 3. Aquí os muestro otra comparación entre un buen tema y un mal tema.

Este es el tamaño y la cantidad de solicitudes de uno de los sitios de demostración del tema Enfold, un éxito de ventas en Themeforest:

La captura de pantalla no lo muestra (es demasiado grande), pero vemos que Enfold necesita 104 archivos JS, CSS y fuentes, con un tamaño transferido de 265 KB.

Ahora comparémoslo con Blocksy, uno de los mejores temas que puedes comprar:

Aquí sí te puedo mostrar la captura de pantalla completa. Solo 6 solicitudes y 30 KB transferidos en comparación. Los números hablan por sí mismos. Por supuesto, esta no es la única manera de valorar un tema, y no debería serlo, pero nos ayuda a ver si vale la pena elegir un tema en particular o no.

A continuación te dejo una pequeña y honesta lista de temas recomendados que no te arrepentirá de elegir. Los temas más rápidos para WordPress son:

• Blocksy
• Neve
• GeneratePress
• Suki
• Kadence
• Genesis
• Cualquier tema estándar de WordPress (Twenty Twenty-Two, Twenty Twenty, etc.)
• Astra
• Storefront

Si estos no satisfacen tus necesidades, ¡hay muchos otros que son geniales! Intenta seguir estas pautas. Por experiencia, esta lista casi siempre garantiza que elegirás un buen tema:

• No compres un tema que te obligue a instalar un maquetador de páginas. Eso incluye a Divi.
• No compres temas de las principales tiendas de temas, como Themeforest.
• Evita temas que claramente se promocionen como «temas multifuncionales» o «multipurpose themes».
• Si buscas, por ejemplo, “mejores temas para WordPress”, ignora las recomendaciones de los primeros resultados de Google. Estas casi nunca son recomendaciones honestas de expertos en WordPress. Las mejores recomendaciones estarán en las comunidades como los grupos de Facebook.
• Explora el repositorio de temas de WordPress, y si ves un tema que te gusta, cómpralo solo si no contradice las pautas anteriores.

7) Usa una CDN

CDN son las sigles de «Content Delivery Network» en inglés, o «red de distribución de contenidos«. Con una CDN, los recursos de tu web se duplican en una red mundial de servidores. Esto significa que los recursos de tu web se cargarán tan rápido en el país donde esté tu servidor como lo harán para alguien en el otro lado del mundo. Esta es una configuración de rendimiento imprescindible de WordPress si tus visitantes están repartidos por todo el mundo.

Aquí tienes una pequeña lista de las CDN más populares para WordPress (y para otras webs también):

• Amazon CloudFront: Esta es la CDN que ofrece Amazon Web Services. Si por casualidad utilizas Internet, probablemente la uses, ya que compañías como Spotify, Slack o Hulu usan Amazon CloudFront.
• Cloudflare: Opera uno de los servicios CDN más eficientes del mundo, y entre muchas características de velocidad y seguridad también ofrece servidores DNS desde no hace mucho tiempo: 1.1.1.1. Por lo general, se asocian con proveedores de alojamiento como Cloudways o Kinsta, por lo que vas a tener una integración muy buena.
• KeyCDN: Tienen precios muy bajos, y aunque no vas a poder disponer de la red más grande, suelen trabajar con empresas de hosting, por lo que la configuración es también muy sencilla.
• bunny.net: Usado por ShortPixel y SPAI, mi plugin favorito de optimización de imágenes. La CDN que utiliza SPAI se basa en bunny.net, por lo que si quieres comprobar dónde tiene puntos de presencia, esta CDN echa un vistazo a esta página.
• QUIC.cloud: Esta CDN la crearon los desarrolladores de LiteSpeed (el servidor web) y LiteSpeed Cache (el plugin de WordPress). Ofrece servicios gratuitos de optimización de imágenes, optimización de páginas y CDN, con HTTP/3 y también planes de pago muy baratos para aquellos que necesitan más. Por supuesto, está estrechamente integrado con LiteSpeed Cache, por lo que si tienes un servidor LiteSpeed, no lo dudes.

8) Cachea tu web

¿Sabías que podrías tener disponibles varios servicios de almacenamiento en caché de páginas entre el usuario y el servidor y tú ni siquiera lo sabías?

Plugins de caché de archivo

Dependiendo de la tecnología que utilice tu sitio web, es posible que tengas algunos plugins o extensiones para el almacenamiento en caché de páginas. Estos crean archivos HTML en el disco y los sirven en cada solicitud, en lugar de ejecutar código PHP y consultas de base de datos MySQL por cada solicitud de página. Con WordPress, por ejemplo, los mejores son estos (no son todos, ¡recuerda que WordPress tiene muchísimos plugins!):

• WP Super Cache
• LiteSpeed Cache
• WP Rocket

Vale la pena señalar que LiteSpeed Cache se puede instalar en cualquier web hecha con WordPress, pero su funcionalidad de caché solo está disponible en servidores LiteSpeed. Entonces, si no tienes un servidor LiteSpeed, debes escoger WP Super Cache o WP Rocket.

Aquí tienes una comparativa entre todos los plugins de caché.

Caché del servidor

Algunos proveedores de hosting te ofrecen funciones de caché del servidor con diferentes nombres comerciales. SiteGround tiene «Supercacher», RunCloud tiene RunCache, Cloudways tiene Varnish (en este caso no le cambiaron el nombre). Todas estas son soluciones de almacenamiento en caché a nivel de servidor, técnicamente llamadas «proxies inversos».

Un proxy inverso es un servicio que se ejecuta de forma independiente y se encuentra entre el cliente y la web, por lo que no forma parte de WordPress y acepta solicitudes al servidor de WordPress. Al igual que un plugin de caché, sirve una copia guardada de una página de WordPress cuando se pide (aunque esta no es la única función de un proxy inverso). La diferencia es que los plugins de caché necesitan que WordPress se ejecute, lo que puede volverse lento a medida que aumenta la carga. Herramientas como Varnish se especializan en atender solicitudes de caché directamente desde el servidor y pueden ser mucho más eficientes que WordPress.

Ten en cuenta que el almacenamiento en caché en el mismo servidor no reemplaza necesariamente los plugins de caché de archivo. Por ejemplo, puedes usar tu plugin de caché favorito junto con Varnish. De esta manera, si algo no está en el caché del servidor, la solicitud se devolverá desde WordPress más rápido porque el plugin de caché probablemente sí tenga en caché ese algo.

Te animo a que vayas a revisar el panel de control de tu hosting y revises todas las funciones de caché.

Caché del navegador

Por un lado, tenemos los niveles de caché que controlamos del lado del servidor (ver arriba), pero ¿sabías que tus clientes también pueden almacenar en caché tu web para que no tengan que solicitar todo nuevamente cuando vuelvan a visitar tu web?

Cuando visitas un sitio web, tu navegador almacena todos los recursos (JS, CSS, fuentes…) en tu disco duro para que se carguen más rápido en visitas posteriores; el navegador simplemente carga los recursos desde tu disco duro en lugar de solicitarlos nuevamente desde un servidor que está lejos. Esto se llama almacenamiento en caché del navegador y es algo que puedes controlar (más o menos). Esto también está relacionado con el famoso mensaje «Publica recursos estáticos con una política de caché eficaz» o «Leverage browser caching» que ves en los test de velocidad.

Todo lo que necesitas hacer es configurar tu web para decirles a los navegadores cuánto tiempo pueden guardar todos los recursos antes de que deban volver a solicitarlos. 6 meses o 1 año es un buen número porque, al fin y al cabo, estos recursos no cambian tan a menudo. El problema de esto es que la configuración no es tan sencilla como parece, ya que cualquier nivel de tu web puede anular la configuración de otro.

Echa un vistazo a mi guía sobre la forma correcta de publicar recursos estáticos con una política de caché eficaz en WordPress.

9) Actualiza tu versión de PHP

Si usas PHP, y lo haces si tu web es WordPress, asegúrate de usar la última versión. Definitivamente notará un aumento en la velocidad de carga, especialmente si actualizas de PHP 5.6 a PHP 8.X. Kinsta ha realizado algunas pruebas comparativas y los resultados son claros. La última versión de PHP es la clara ganadora.

Sin embargo, actualizar la versión de PHP en lugar de aumentar el rendimiento de WordPress podría causar problemas en tu web, ya que es una parte sensible. Asegúrate de probar exhaustivamente todas las partes de la web después de actualizar la versión de PHP y ten una manera fácil de revertir la versión a mano. Para ayudarte con esto, puedes crear una web de pruebas donde probar plugins y/o temas sin temor a romper nada. Probablemente no tendrá la última versión de PHP, pero al menos será casi la última. Te dejo aquí una web donde poder crear sitios de prueba rápido y gratuitamente: Quick WordPress Testing & Staging Sites – TasteWP

10) Optimiza el código

Hay varias formas de optimizar el código de tu web, tales como…

Reducir las solicitudes HTTP

Cada vez que se carga una página web, hay una serie de solicitudes y respuestas HTTP entre el cliente (el navegador) y el servidor. Cuantas más solicitudes se realicen, más tiempo tardará en cargarse la página. Para reducir este número de solicitudes, puedes hacer varias cosas:

• Usa menos código siguiendo esta guía 😉
• Utiliza sprites CSS.
• Integra el código Javascript (¡pero solo si es muy pequeño!)
• Combina tus archivos CSS y Javascript (¡solo si no usas HTTP/2!).
• Usa menos plugins que suponen una carga adicional para la página (ver punto 3).

Dependiendo del CMS que estés usando (si estás usando uno), hay algunos plugins o extensiones disponibles para ayudarte a lograr los resultados deseados. En WordPress, por ejemplo, puedes usar el plugin Autoptimize para integrar y combinar los archivos CSS y JavaScript.

Minimizar el código

¿Qué significa minimizar? Básicamente, eliminar todos los caracteres innecesarios de tus archivos HTML, CSS o Javascript. ¿Qué son caracteres innecesarios?

• Caracteres de nueva línea
• Caracteres de espacio en blanco
• Comentarios

Un código minimizado generalmente se verá así:

Como puedes ver, no hay nuevas líneas, comentarios o espacios innecesarios.

Para WordPress, Autoptimize vuelve a ser un buen plugin para este propósito, que también puede mejorar el rendimiento de tu sistema WordPress. Pero es aún mejor si la minificación la realiza tu CDN (Cloudflare, por ejemplo), para que tu servidor no tenga que preocuparse de eso. ¡Pruébalo!

11) Diferir la ejecución de JavaScript

La gran mayoría de las webs son básicamente una combinación de:

• HTML
• CSS
• JavaScript

Mientras que el HTML y CSS añaden contenido a tu sitio web, lo estructuran y lo diseñan, JavaScript es responsable de (pero no se limita a) hacerlo interactivo. JavaScript controla el comportamiento de los diversos elementos de tu sitio web. Entre las funciones de JavaScript puedes encontrar:

• Búsquedas en tiempo real
• Analítica
• Animaciones de elementos, como imágenes o controles deslizantes
• Ventanas emergentes
• Gestión de datos dinámicos
• Cajas de chat
• etc.

Como puedes ver en la lista, lo que da JavaScript casi nunca tiene prioridad cuando se carga la página. Nuestro objetivo debe ser presentar al usuario una bonita página lo más rápido posible y cargar las funciones adicionales lo más tarde posible para aumentar el tiempo de carga «percibido».

Hay dos formas principales de diferir la ejecución de JavaScript:

1. Añadir el atributo async a los archivos JS
2. Añadir el atributo defer a los archivos JS

Esta explicación visual de Growing with the Web es una excelente manera de comprender las diferencias.

En resumen, ten en cuenta estas cosas:

• No difieras (defer) nada que afecte al contenido de antes de hacer scroll.
• Diferir (defer) puede darte una mejor percepción del tiempo de carga, pero puede romper más cosas.
• async es más seguro
• Si no sabes lo que está haciendo, no hagas async ni defer al archivo jquery.js.
• ¡Asegúrate que todo funciona bien después de diferir JavaScript!

¿Cómo diferir los scripts JS?

Async JavaScript

Una opción gratuita y probablemente la mejor es el plugin Async JavaScript, creado por la misma persona que desarrolló Autoptimize. Simplemente instálalo, ve a Ajustes > Async JavaScript, y en la parte superior podrás activar o desactivar async o defer.

Si vas un poco hacia abajo, verás más campos si quieres un poco más de control, en caso de que quieras incluir o excluir algunos scripts, plugins o temas (lo necesitarás).

Plugins de caché/optimización

Otra opción es usar tu plugin de caché favorito, como WP Rocket, LiteSpeed Cache o, de nuevo, Autoptimize. Estos suelen incluir una opción para hacerlo.

Por ejemplo, WP Rocket puede ayudarte a diferir la ejecución de JavaScript en la sección de «Optimizar archivos». Busca la opción «Cargar archivos JavaScript de manera diferida«.

Añade un fragmento de código en functions.php

Siempre hay una manera de hacer las cosas a través del archivo functions.php, ¿verdad? Aquí también. Añade el siguiente fragmento de código a tu archivo functions.php:

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Básicamente, esto le dice a WordPress que añada el atributo defer a todos tus archivos JavaScript excepto jquery.js. Óbviamente esto no es tan flexible como Async JavaScript u otros plugins, pero es más eficiente en términos de velocidad. Pruébalo y si no notas ningún problema, ¡hecho!

12) Optimiza tu base de datos

La optimización de la base de datos también es importante. Es posible que no lo notes si es un sitio pequeño, pero si ha estado activo durante un tiempo y/o es un sitio grande, probablemente verás y notarás la diferencia cuando limpies la base de datos.

Cada entorno y configuración es diferente, por lo que no existe un botón mágico que lo haga por ti. Sin embargo, puedo darte algunos consejos para el sistema de base de datos más popular, MySQL. Es el de WordPress.

• Elimina los metadatos huérfanos y duplicados de la base de datos. WordPress tiene una variedad de entradas que contienen información adicional. Por ejemplo, tus usuarios tienen una dirección de correo electrónico, un sitio web, una biografía; tus entradas tienen un contenido, un título, un extracto; los comentarios tienen un autor, un campo de correo electrónico, etc. Esta información a veces puede estar duplicada o huérfana (no pertenecer a nada). En tales casos, estos datos simplemente no tienen valor y ocupan espacio innecesario en la base de datos. Para limpiar todos estos datos, puedes usar un plugin como WP-Sweep.
• Optimiza las tablas de la base de datos. La palabra «optimizar» tiene un significado diferente aquí: esta sección se llama «Optimiza tu base de datos» en el sentido de limpiarla, pero las tablas de la base de datos en realidad se pueden optimizar de manera muy similar a como se desfragmenta un ordenador. Para esto, nuevamente, puedes usar un plugin como WP-Sweep. O, si te atreves, puedes hacerlo manualmente a través de una herramienta de administración de base de datos como phpMyAdmin. Echa un vistazo a este artículo para leer información más detallada sobre cómo hacerlo.
• El script MySQL Tuner es un script escrito en Perl que te ayuda a configurar tu base de datos MySQL y te da recomendaciones para un mejor rendimiento y estabilidad. Ten en cuenta que debes tener muy buenos conocimientos técnicos y acceso como root a tu servidor para usarlo.
• Limpia los datos cargados automáticamente («autoloads») de la tabla wp_options. La tabla wp_options en la base datos contiene todo tipo de información importante de tu web de WordPress, como la URL del sitio, los ajustes de los plugins, la configuración del tema, etc. Esta tabla tiene varias filas, como toda base de datos, y cada fila tiene un campo autoload, que si está configurado en yes indicará a WordPress que tal fila, con toda su información, tiene que cargarse por cada visita que tu web tenga. El problema con los sitios web de WordPress a veces es que hay una gran cantidad de datos con autoload en la tabla wp_options, ya que muchos desarrolladores ponen autoload en yes de forma predeterminada para sus plugins/temas, pero no todos deberían cargar su datos en cada página. Es más, a menudo al eliminar un plugin o tema, estos no limpian lo que han dejado, entonces la base de datos se llena de basura (datos que se cargan automáticamente pero nadie usa). Resultado: un tiempo de carga más lento.
  
  Entonces, ¿cómo puedes eliminar los datos fantasma que se cargan automáticamente? Tendrás que ensuciarte las manos e iniciar sesión en el software de administración de tu base de datos (phpMyAdmin por ejemplo). Así es como puedes eliminar los datos «autoloaded».

¿Quieres optimizar aún más tu base de datos?

He escrito un artículo muy completo sobre lo que puedes hacer para que tu base de datos funcione más rápido. Aquí lo tienes: Cómo limpiar la base de datos de WordPress

13) Comprime tu código

¡Sí! Al igual que puedes comprimir algunos archivos en tu ordenador, ¡las páginas web también se pueden comprimir! ¿Por qué deberías hacer eso? Simplemente para ahorrar ancho de banda y hacer que tu web cargue más rápido. Como muestra Pingdom (expertos en rendimiento web), puedes reducir fácilmente el tamaño de tu sitio web en más del 75%.

Para WordPress existen varios plugins que te ayudarán a comprimir el código y aumentar el rendimiento de WordPress, generalmente en un solo clic, como WP Super Cache o WP Rocket. Estos dos en particular también son plugins de caché de página (ver arriba), por lo que matas dos pájaros de un tiro.

Si no tienes WordPress o si tienes otro CMS que no permite instalar plugins que hagan esto por ti, probablemente necesitarás configurar tu servidor web. Si tienes Apache, por ejemplo, es tan simple como añadir el siguiente código a tu archivo .htaccess:

# comprime texto, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# O comprime ciertos tipos de archivo por extensión:
<files *.html>
SetOutputFilter DEFLATE
</files>

Debes tener en cuenta que algunos navegadores (muy) antiguos pueden tener problemas con la compresión Gzip.

Brotli ha aparecido recientemente como una mejor alternativa a Gzip. Es menos compatible con los proveedores de hosting, pero si lo tienes disponible, debes usarlo. ¡Cloudflare también es compatible con él!

14) Usa HTTP/2

HTTP significa «protocolo de transferencia de hipertexto«. Como protocolo, define cómo el cliente (por ejemplo, tu navegador) y el servidor deben comunicarse entre sí.

HTTP/2 es la última versión estable de este famoso protocolo. HTTP/2 trajo muchas mejoras que son muy importantes para el rendimiento de los sitios web. Probablemente el más importante es el multiplexado. Con HTTP/1.1 (la versión anterior), los recursos se cargaban uno tras otro. Entonces, si un recurso no se cargaba, podía bloquear todos los demás recursos detrás de él. Por el contrario, HTTP/2 puede usar una sola conexión TCP para enviar múltiples recursos a la vez, de modo que ningún recurso bloquee a otro. Esto es muy importante en el mundo actual, donde cada vez se cargan más recursos cuando se carga una página (archivos JavaScript, archivos CSS, fuentes, etc.).

HTTP/2 debe estar activado tanto en el cliente como en el servidor. Afortunadamente, no tienes que preocuparte por el cliente, ya que todos los navegadores ya admiten HTTP/2. Así que deberías centrarte en el servidor, tu servidor.

Cómo activar HTTP/2

Primero, revisa tu web con esta herramienta. Si estás utilizando HTTP/2, estás listo para comenzar.

Si aún no usas HTTP/2 y tu servidor está administrado por otra persona (alojamiento compartido, VPS administrado…), simplemente pregúntale a tu proveedor de alojamiento si puede activarlo por ti. Si no, es hora de cambiar de hosting 😉

Si tú mismo eres responsable de administrar tu servidor, los pasos cambiarán según el servidor web que uses.

• Si usas NGINX, KeyCDN tiene una buena guía.
• Si usas Apache, consulta esta guía.

¿Qué pasa con HTTP/3?

HTTP/3 es la próxima versión, que debería traer muchas más mejoras, especialmente porque usa un protocolo de comunicación diferente (UDP) y por lo tanto mejora la conexión y el tiempo de transmisión.

Sin embargo, todavía no es compatible con muchos navegadores o proveedores de alojamiento, por lo que deberás esperar un poco antes de pensar en ello.

15) Optimiza los recursos externos

Casi todos los sitios web necesitan conectarse a otros sitios externos para completar la carga de la página: Google Fonts, Google Analytics, ventanas emergentes de chat, servicios de comentarios, videos y más. Lo creas o no, estos también se pueden optimizar, aunque hay limitaciones, claro, ya que son servicios de terceros.

He escrito un artículo que habla sobre estos servicios y lo que puedes hacer para optimizar tus recursos externos. Se actualiza constantemente, así que échale un vistazo aquí: Cómo optimizar tus recursos externos en WordPress.

16) Otras pequeñas mejoras

Estas son otras mejoras que puedes realizar que no tendrán un gran impacto, pero se sumarán a los resultados totales.

• Controle la API del heartbeat.
• Limpia el <head> de tus páginas
• Elimina el filtro de «Capital P Dangit»
• Desactiva los self-pingbacks
• Haz «preconnect» a sitios externos
• Desactiva el WP-Cron
• Aplica DNS-Prefetch