9 técnicas para mejorar la velocidad de carga de un sitio web WordPress

Aunque a veces se pase por alto, la velocidad de carga de un sitio web es un parámetro fundamental por dos razones. Por un lado, un sitio web lento supone una experiencia de usuario negativa. A nadie le gusta navegar por la red a trompicones. La lentitud de un sitio web supone un aumento de la tasa de rebote, una reducción de la duración de las sesiones, una disminución del número de páginas vistas y, por tanto, un deterioro general de los indicadores de rendimiento (KPI) del sitio web.

Por otro lado, la velocidad de carga de un sitio web tiene un impacto directo en tu posicionamiento SEO. A Google en particular no le gustan las webs demasiado lentas y no duda en penalizarlas en los resultados de las búsquedas. Es importante trabajar en la velocidad de carga de tu sitio web.

A continuación, compartimos 9 consejos o trucos para mejorar la velocidad de carga de tu sitio web. El artículo está centrado en sitios web creados con WordPress, pero algunos aspectos se pueden aplicar también a otros programas de creación de sitios web web.

#1 Medir el rendimiento actual de tu sitio web WordPress

Antes de empezar a hablar de técnicas para mejorar la velocidad de carga de un sitio web WordPress, tenemos que saber cuál es el punto de partida. Hay muchas herramientas en línea para medir la velocidad de carga de tu sitio web: YSlow, GTmetrix, Pingdom Tools, Web Page Analyzer, Load Impact, Octa Gate SiteTimer, WebPage Test, Yotaa. Es recomendable utilizar varias herramientas de medición para tus pruebas y no limitarse a una sola. Esto permite realizar cruzar datos y obtener resultados más fiables.

El servicio de comprobación de rendimiento de Google, PageSpeed Insights, es una de las herramientas de referencia. Este servicio te permite obtener una evaluación «objetiva» de la velocidad de carga de tu sitio web tanto en móvil como en ordenador. De hecho, el rendimiento de un sitio web a menudo es variable según los terminales utilizados, la ubicación de los servidores, etc. Otra ventaja de PageSpeed Insights son los consejos personalizados que te da, clasificados según el orden de prioridad, para subsanar los fallos identificados durante la prueba (sobre el peso de tus imágenes, la gestión de archivos JS y CSS, el almacenamiento en caché, etc.).

Muchos sitios web tienen aspectos que mejorar, también Webolto:

#2 Eliminar extensiones o plugins innecesarios

Pasamos a las técnicas para optimizar la velocidad de carga de tu sitio web. Empezamos por las extensiones. Sabemos que WordPress ofrece cientos —e incluso miles— de extensiones. Esto es lo que en gran parte proporciona la riqueza y el interés de este CMS tan usado. Por ello, tendemos instintivamente a querer instalar tantos plugins como sea posible para aumentar las funcionalidades de nuestro sitio web WordPress. Es un error importante. Lo que importa es la calidad de las extensiones utilizadas, no la cantidad.

Esto es válido para todos los CMS, pero en particular para WordPress, ya que cuenta con una comunidad de desarrolladores gigantesca pero no siempre muy experta (o mejor dicho: que no siempre cuida el peso de sus extensiones). Lo ideal uses la menor cantidad de extensiones posible y evites aquellas de cuya calidad no estés seguro/a. Sobre todo, elimina todas las extensiones que estén duplicadas. No es raro querer probar varias extensiones casi idénticas para poder elegir. Eso está bien, pero cuando hayas elegido la adecuado para ti, debes eliminar todas las demás. Además, para plugins con funcionalidades equivalentes o muy similares, es importante comprobar cuál requiere menos recursos.

Nota: si lo prefieres, puedes inhabilitar las extensiones no utilizadas. Pero lo mejor es eliminarlas. Si no usas algunas extensiones para nada, ¿para qué conservarlas? También puedes desactivar las extensiones que usas de manera ocasional. Siempre es mejor que dejarlas activas y te ahorrará tener que volver a configurarlas la próxima vez que las uses.

Puedes elaborar un inventario de todos los plugins que has descargado (tanto si están activados como desactivados) y hacer limpieza de vez en cuando. Esto evitará que se acumulen extensiones con el tiempo. Elimina extensiones que no resulten muy útiles, o que aporten menos de lo que perjudican la velocidad de tu sitio web. Un último consejo: prueba a utilizar extensiones multifuncionales, como Yoast, que permite la gestión del posicionamiento SEO de tu sitio web, pero también la creación de sitemaps.

¿Cómo determinar el impacto de tus plugins en la velocidad de carga de tu sitio web WordPress? ¡Buena pregunta! La respuesta es simple: instala la extensión Pluging Performance Profiler (P3), desarrollada por Go Daddy. En este caso, esta extensión vale la pena y no es un truco. Para ser coherente con lo que acabamos de decir, ¡recuerda eliminar la extensión P3 después de tu diagnóstico!

Nota: Las extensiones utilizadas para crear barras para compartir en las redes sociales destacan por ralentizar significativamente la velocidad de carga, debido a los lenguajes informáticos que utilizan. Si es posible, intenta prescindir de ellas y reemplaza las barras con botones simples.

#3 Elegir una fórmula de hosting que se ajuste a tus necesidades

La calidad del hosting afecta la velocidad de carga de tu sitio web. Una web puede muy bien estar perfectamente configurada, pero ser lenta por la sencilla razón de que el servidor que utiliza no es eficiente. A grandes rasgos, existen tres tipos de alojamiento web:

• Alojamiento compartido: Compartes los recursos de un mismo servidor con otros clientes del servidor. Este tipo de alojamiento, el más económico, solo es viable para sitios web con poco tráfico y bajo consumo de recursos (blogs o páginas web sencillas para pequeñas empresas). Si alguno de los sitios web alojados en el servidor compartido consumen muchos recursos, se ralentizará la velocidad de carga de tu propio sitio web (el servidor puede tardar en reencuadrar los sitios web que son demasiado codiciosos). Es como compartir piso en el mundo virtual…
• Alojamiento dedicado: Alquilas un servidor solo para ti (por eso decimos que está «dedicado» a ti). El alojamiento dedicado es más adecuado para sitios de comercio electrónico o blogs con un alto tráfico. Este tipo de hosting permite gestionar la administración del servidor, a diferencia del hosting compartido: un servidor compartido es gestionado y configurado por el host. Para saber más
• Alojamiento virtual (VPS): A medio camino entre el alojamiento compartido y el alojamiento dedicado. El principio es alquilar o comprar parte de un servidor dedicado para configurar un servidor virtual administrado por ti.

Tienes que elegir el tipo de hosting que mejor se adapte a tus necesidades. Si tienes un sitio web de comercio electrónico y se encuentra en un servidor compartido, es muy probable que se ralentice la velocidad de carga de tu sitio web. En cambio, sería completamente inútil alquilar un servidor dedicado si tienes un blog modesto. En este último caso, el alojamiento compartido es más que suficiente.

Nota: Como estamos hablando de sitios web creados con WordPress, es importante recordar que existen sitios web de alojamiento dedicado optimizados para sitios web WordPress, como WP Engine. Es con diferencia la fórmula más cara, pero el alojamiento en un servidor WP especializado es una buena garantía. En el caso específico de WP Engine, tu servidor te informará periódicamente sobre el rendimiento de tu sitio web y las extensiones que pueden contribuir a ralentizarlo.

La mayoría de las herramientas para medir la velocidad de carga de un sitio web te indicarán el tiempo de respuesta de tu servidor. Esta es una buena manera de determinar si tu alojamiento web es adecuado o no, y hay que cambiarlo o no. Otro consejo: elige alojamiento SSD. Son, en igualdad de condiciones, más rápidos que los demás, y no son más caros. No dudes en consultar comparaciones para elegir el hosting adecuado, como la nuestra sobre el precio del hosting.

#4 Reducir el peso de las imágenes

Las imágenes consumen muchos recursos del servidor. A menudo, se trata de los elementos de tus páginas web que ocupan más espacio. Por eso, una buena gestión de imágenes es crucial para mejorar la velocidad de carga de tu sitio web. Lo ideal es encontrar el equilibrio adecuado entre calidad y peso de la imagen. Para reducir el peso de una imagen, existen tres soluciones:

• Comprimir la imagen: Por ejemplo, puedes usar TinyPNG para comprimir tus imágenes PNG y tus imágenes JPEG. Se trata de una solución en línea gratuita hasta cierto punto (de pago a partir de un cierto volumen de imágenes para comprimir).
• Cambiar el formato: Algunos formatos de imagen son más pesados que otros. Prioriza JPG frente a PNG, por ejemplo (excepto para imágenes pequeñas, iconos, logotipos, etc.). Usa el formato GIF solo para animaciones (el resto de imágenes GIF puedes convertirlas a JPG o PNG).
• Reducir las dimensiones: Cuanto más pequeñas sean las dimensiones, más ligera será la imagen.

Programas para reducir el peso de las imágenes

Hay muchos programas para reducir el peso de las imágenes antes de importarlas a la biblioteca de WordPress, como GIMP (software gratuito de código abierto) o sencillamente Paint. Si en este momento ya tienes una gran biblioteca de imágenes en WordPress y no tienes la motivación ni el tiempo para reprocesarlas una a una, hay otra solución. Existen extensiones que pueden optimizar automáticamente tus imágenes de WordPress, tanto las que ya están cargadas en la biblioteca como las que vas añadiendo. Realiza una copia de seguridad antes de instalar este tipo de plugins, como medida de precaución. Estos son dos de los mejores plugins del mercado:

WP Smush.it: Este plugin comprime todas las imágenes de tu biblioteca y procesa automáticamente cualquier imagen nueva que importes a WordPress. La desventaja de WP Smush.it es que no puede procesar imágenes de más de 1MB ni las alojadas en un servidor CDN. Esta también es una razón por la que siempre es preferible, idealmente, procesar tus imágenes tú mismo/a usando un software antes de importarlas en WordPress…

Imsanity: Con esta extensión, puedes definir una dimensión máxima para todas tus imágenes. Ejemplo: limita el ancho máximo de sus imágenes a 1024px. Imsanity no actúa sobre el peso de la imagen, sino sólo sobre sus dimensiones (aunque ambos estén vinculados, por supuesto). Imsanity ofrece algunas funciones adicionales: permite, por ejemplo, convertir formatos de imagen (BMP a JPEG, por ejemplo).

#5 Comprimir archivos JavaSript y CSS

Dos definiciones rápidas para empezar:

• Los archivos CSS son hojas de estilo. Contienen toda la información relativa al diseño de tu sitio web: los colores, la fuente, la estructuración de los diferentes elementos de la página (menús, columnas, etc.). Desempeñan el mismo papel que las etiquetas HTML.
• El lenguaje JavaScript es un lenguaje informático que te permite agregar elementos dinámicos e interactivos a tu sitio web, como presentaciones de diapositivas, ventanas emergentes, menús dinámicos, relojes de agujas, juegos, compartir botones, etc. La lista es potencialmente interminable.

Por supuesto, Los archivos JavaScript y CSS son esenciales para el funcionamiento de un sitio web. Por desgracia, estos archivos ocupan mucho espacio y pueden tardar mucho en cargarse. Sobre todo, porque en los sitios web WordPress, cada función tiene sus propios scripts CSS y JS.

Los plugins de compresión JavaScript y CSS

Por eso se recomienda comprimir estos archivos. Por ejemplo, puedes usar el software CleanCSS para comprimir tus archivos CSS (ajustando el nivel de compresión según tus preferencias). Para archivos JavaScript, puedes utilizar, por ejemplo, JSCompress.com. Cuidado: la compresión de estos archivos puede afectar a la visualización de tu sitio web. ¡Necesitas experimentar para descubrir el punto óptimo de compresión si quieres evitar un desastre!

También hay un plugin de WordPress que puede comprimir y combinar archivos JS y CSS. Se trata de WP Minify. Otro consejo: los archivos JavaScript ralentizan mucho la velocidad de carga de un sitio web cuando se colocan en la parte superior del código fuente de tus páginas. Gracias a ciertos plugins, como Footer JavaScript, es posible desplazar tus scripts de JavaScript al final de las páginas (pie de página). Con esta técnica, los archivos JS se cargan en último lugar: los elementos que consumen pocos recursos se cargarán primero. Naturalmente, es imposible hacer lo mismo con los archivos CSS, ya que desempeñan una función de estructuración del contenido.

Una vez más, se requiere precaución: es posible que algunos scripts dejen de cargarse si se colocan en la parte inferior de la página.

Si necesitas de optimizar tus archivos CSS y JavaScript, te recomendamos contratar a un/a desarrollador/a web con conocimientos. Las acciones de optimización de este tipo de archivos tienen consecuencias en el código fuente de las páginas web, incluso cuando te limitas a usar plugins. Además, siempre es más seguro trabajar directamente sobre el código que usar plugins que no sabes cómo están modificando el código exactamente.

#6 Usar un plugin de almacenamiento en caché

El propósito del almacenamiento en caché es reducir la cantidad de recursos utilizados por los servidores gracias a una disminución del número de solicitudes. No vamos a explicar aquí en detalle en qué consiste la memoria caché. Simplemente, el principio consiste en reducir el número de solicitudes enviadas durante la carga de una página guardando las solicitudes ya enviadas en una memoria caché.

Desde el punto de vista del visitante, la idea es asegurarse de que su navegador no tenga que volver a cargar todos los elementos de las páginas web cada vez que las visita. Solo se cargarán los elementos nuevos, los demás se habrán guardado en la memoria caché durante visitas anteriores y se transformarán en archivos estáticos.

Cuanto más regrese un visitante a tu sitio web, más eficaz será el almacenamiento en caché y su navegación será cada vez más fluida. Por su parte, el almacenamiento en caché reduce la cantidad de recursos de tu servidor «explotados» por tus visitantes cuando cargan las páginas de tu sitio web.

El almacenamiento en caché a menudo se promociona como una de las técnicas más eficaces para mejorar la velocidad de carga de un sitio web. Para usar un sistema de caché en tu sitio web, la forma más sencilla es descargar un plugin de WordPress. Los dos mejores son W3 Total Cache y WPRocket. Este último también ofrece otras posibilidades además del almacenamiento en caché; en particular, la compresión de archivos JavaScript y CSS.

Te recomendamos instalar WP Rocket, porque tiene la ventaja de ser relativamente fácil de usar. Por otro lado, el único inconveniente es que WP Rocket es de pago, a diferencia de W3 Total Cache.

#7 Configurar una CDN

El uso de una red de distribución de contenidos o CDN permite a tus visitantes cargar el contenido estático de las páginas de tu sitio web (imágenes, archivos JavaScript y CSS ocultos) desde un servidor ubicado lo más cerca posible de tu lugar de conexión. En otras palabras, la CDN permite que el contenido de tu sitio web se pueda entregar desde el mayor número posible de servidores por todo el planeta.

Cuanto más lejos esté el servidor que envía las páginas de un sitio web al lugar de conexión del usuario, más se ralentiza el tiempo de carga. Un internauta italiano que cargue una página de un sitio web alojado en un servidor australiano tendrá un tiempo de carga mayor que si se conectara desde Sídney. Las CDN resuelven este problema puramente geográfico.

Desde un punto de vista más técnico, la CDN que utilices enviará las cachés de tus páginas (tu contenido estático) a toda una red de servidores distribuidos por el planeta. Por tanto, se almacenarán en una gran cantidad de servidores al mismo tiempo. El visitante sólo tendrá que cargar los contenidos dinámicos no ocultos desde tu propio servidor.

MaxCDN y CloudFlare

Por nuestra parte, recomendamos usar MaxCDN o CloudFlare. Esta última CDN es gratuita, se integra fácilmente en WordPress y cuenta con una red de servidores muy grande (actualmente, 24 centros de datos repartidos por todos los continentes, excepto África). Otro aspecto interesante: CloudFlare no oculta el código HTML, por lo que tus visitantes siempre tendrán acceso a las últimas versiones de tus textos, sin desajustes. De hecho, el almacenamiento caché no siempre es adecuado para contenido que cambia con rapidez (noticias que se actualizan, feeds de contenido, etc.).

#8 Limitar el número de revisiones de tus páginas

La posibilidad que ofrece WordPress de serie para deshacer a los diversos cambios realizados en tus páginas o artículos es, sin duda, muy útil. Permite deshacer ciertas modificaciones, volver atrás, comparar las diferentes versiones, etc.

Sin embargo, esta posibilidad tiene las sus ventajas y sus desventajas: se conservan todas las versiones de tus páginas en el servidor. Por ejemplo, cada vez que actualizas uno de tus artículos se genera automáticamente una nueva versión (aunque solo corrijas dos o tres errores tipográficos…). No es de extrañar que una misma página pueda tener más de 10 versiones, cada una con su archivo almacenado.

Es posible limitar el número de versiones o incluso eliminar esta función por completo. Para ello, debes insertar fragmentos de código en el archivo wp-config.php de tu sitio web WordPress. Si deseas que WordPress deje de realizar copias de seguridad de las versiones previas de tus páginas, debes desactivar la función Post Revisions insertando el siguiente código:

define( ‘WP_POST_REVISIONS’, false ) ;

Si prefieres limitar el número de versiones guardadas (a 5 por página, por ejemplo), tendrás que usar este código:

define( ‘WP_POST_REVISIONS’, 5 );

Para gestionar las revisiones de tus páginas, también puede usar el plugin WP-Optimize, que ofrece muchas funcionalidades para limpiar tu base de datos de WordPress (no solo revisiones).

#9 Elegir un tema de WordPress ligero

Podríamos haber abordado este aspecto antes. Pero si estás leyendo este artículo, probablemente ya tengas un sitio web creado con WordPress. La hora de elegir el tema ya pasó para ti. Para mejorar la velocidad de carga, es mejor centrarte en optimizar tu sitio web utilizando las técnicas anteriores antes de considerar la posibilidad de cambiar el tema (operación a veces costosa). Este último punto es para aquellos que aún no han creado su sitio web, o aquellos que, después de sopesarlo cuidadosamente, han decidido cambiar el tema de su sitio web.

La elección de un tema de WordPress se basa, por supuesto, en aspectos estéticos y ergonómicos. Sin embargo, los temas ergonómicos, repletos de funcionalidades y muy vistosos no siempre son los más ligeros. De hecho, suele ser lo contrario. El peso de un tema, aunque no es el único factor que condiciona la elección, debe tenerse en cuenta. Cuanto más pesado sea un tema, más tenderá a ralentizar la velocidad de carga de tu sitio web, a veces en proporciones considerables. Estos son algunos consejos para elegir el tema adecuado:

• Elige un tema que solo ofrezca las características/funcionalidades que necesites. Muchas funciones son en realidad trucos que solo sirven para sobrecargar tu sitio web. Debes asegurarte de utilizar al menos dos tercios de las funcionalidades que ofrece el tema.
• Elige un tema con diseño responsive, que permita que tu sitio web se muestre de manera óptima en todos los dispositivos y, en particular, en los móviles. Hay muchos sitios web que son rápidos en computadoras de escritorio, pero muy lentos en dispositivos móviles. Esto se está volviendo cada vez menos aceptable, por diversas razones.
• No priorices necesariamente los temas de pago frente a los temas gratuitos. En general, los temas de pago incluso tienden a ser más pesado, por su mayor número de funcionalidades, aunque hay que verlo caso a caso, por supuesto. Simplemente, quédate con la idea de que los temas de pago no están necesariamente mejor optimizados en términos de peso.
• Evita los temas demasiado antiguos. Generalmente no están optimizados, o lo estaban en su día y ya no lo están, por lo que contribuyen a ralentizar el tiempo de carga.
• Elige un tema compatible con las versiones más recientes de los navegadores web. La mayoría de los temas recientes lo son. Este consejo, por tanto, refuerza el anterior.
• No elijas un tema con demasiadas imágenes HD ni animaciones por todas partes. Opta por un tema sencillo y minimalista.
• En definitiva, es mil veces mejor elegir un tema sencillo y aportarte complejidad a posteriori para adaptarlo a tus necesidades específicas. «Adelgazar» un tema que es pesado de serie será bastante más difícil.

Evaluar el peso de un tema de WordPress antes de usarlo

Puede surgirte una pregunta bastante lógica: ¿cómo evaluar el peso o el rendimiento de un tema antes de haberlo elegido o comprado? Hay un método muy simple: activa la demostración del tema y realiza una prueba de Pingdom Tools. Desde esta herramienta podrás acceder a toda la información necesaria: número de solicitudes, peso global, cumplimiento de buenas prácticas (Grados), etc.

¿No estás seguro/a de qué tema elegir? Personalmente, te podemos recomendar los temas de Genesis. Nosotros hemos elegido Genesis para Webolto principalmente por una cuestión de rendimiento.

Conclusión: mejorar la velocidad de carga de un sitio web es una carrera de fondo

Aquí tienes algunas técnicas y consejos para mejorar la velocidad de carga de un sitio web WordPress, aunque la mayoría de estas recomendaciones son válidas para otros CMS. Algunas de las técnicas presentadas en este artículo requieren un mínimo de conocimientos informáticos.

Si no tienes estas competencia en tu equipo, no es un drama, pero evita jugar demasiado. Tendrás que decidir qué optimizaciones priorizas y recurrir a un/a experto/a en SEO para algunas de ellas si te lo puedes permitir. Un/a profesional podrá diagnosticar con más claridad los problemas encontrados en tu sitio web y definir las mejores acciones que puedes tomar para mejorar la velocidad de carga de tu sitio web WordPress.