This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
() translation by (you can also view the original English article)
Con independencia de que actualmente estés trabajando en tu primer sitio WordPress o en tu número cincuenta, sin duda habrás descubierto que su mayor fortaleza puede a veces convertirse en su mayor debilidad. Su increíble capacidad para ser ampliado significa que puede hacer mucho más que cualquier otro CMS, pero esto viene con la desventaja de que puede llegar a ser demasiado extenso y caer en velocidades de carga atrozmente lentas.
Un tiempo de carga rápido es algo que se está volviendo más importante año tras año a medida que vemos que es algo que Google sigue teniendo en cuenta durante sus procesos de calificación o "rankeado", y aprenderemos más sobre el coste para los sitios lentos en términos de pérdida de visitantes e ingresos. Es fundamental que los sitios creados con WordPress no deriven en tiempos de carga lentos: pueden y deben ser optimizados para convertirse en ejecutores eficaces.
En este artículo vamos a profundizar exactamente en:
- Qué velocidades de carga debes alcanzar
- Las razones por las que los sitios WordPress se vuelven lentos
- Cómo diagnosticar exhaustivamente por qué tu sitio WordPress es lento
- Cómo solucionar los problemas que descubras a través de sencillos y accesibles métodos
He estado trabajando con WordPress profesionalmente durante 12 años, y en ese tiempo he visto muchos factores relacionados con lo que puede hacer que la carga de un sitio sea increíblemente rápida o aplastantemente lenta. En este artículo compartiré todo lo que sé.
Comencemos con cómo establecer los objetivos correctos para acelerar tu sitio WordPress.
Acelerar WordPress, pero ¿hasta qué punto?
¿Exactamente en qué medida se considera un sitio WordPress "lento"? ¿Y qué podemos considerar como "rápido"? ¿Cómo explicamos la variación en las velocidades de conectividad? Un tiempo de carga de 3 segundos en Internet de alta velocidad podría ser de 30 segundos en una conexión móvil lenta.
Comencemos averiguando exactamente cuán "rápido" necesitamos lograr que sean nuestros sitios WordPress.
Resumen de Hobo Web
Hobo Web escribió un excelente artículo recopilando varios recursos y conjuntos de información sobre la velocidad de carga a la que debemos aspirar. No voy a repetir toda la pieza, pero sí quiero destacar algunos puntos clave:
Cada segundo adicional aumenta las tasas de rebote
"La probabilidad de rebote aumenta un 32% a medida que el tiempo de carga de la página pasa de 1 segundo a 3 segundos"
Aproximadamente la mitad de los visitantes se van tras transcurrir 3 segundos
"Los sitios de carga lenta frustran a los usuarios y afectan negativamente a los editores. En nuestro nuevo estudio, "The Need for Mobile Speed", encontramos que el 53% de las visitas a la versión móvil del sitio lo abandonan si las páginas tardan más de 3 segundos en cargar".
Cargar en menos de 5 segundos duplica los ingresos publicitarios
"Aunque hay varios factores que afectan los ingresos, nuestro modelo concluye que los editores cuyos sitios móviles se cargan en 5 segundos ganan hasta el doble de ingresos por anuncios móviles que aquellos cuyos sitios se cargan en 19 segundos".
Google dice: Debe estar preparado para la interacción en < 5 segundos en una conexión 3G lenta
Según Google, el contenido de tu sitio debe cargarse y estar listo para la interacción en menos de 5 segundos en una conexión 3G lenta:
Es importante señalar que esto no significa que todos los recursos de una página deban cargarse en 5 segundos. Ese es un objetivo muy difícil de alcanzar en una conexión 3G lenta, incluso en sitios con recursos ligeros.
Lo que sí significa es que un visitante necesita que en ese intervalo de tiempo se hayan cargado suficientes recursos como para poder empezar a interactuar con el sitio, incluso aunque el resto de ellos todavía se esté cargando en segundo plano.
Objetivo: 3 - 5 segundos en el móvil
Podemos resumir lo anterior diciendo que como regla general tu sitio debe cargarse dentro de un margen de 3 - 5 segundos en una conexión móvil, y cuanto más rápido mejor. Si puedes lograr que tu tiempo de carga sea de 2 segundos o 1 segundo, o incluso 500 ms, obtendrás ventajas por cada momento ahorrado.
Ten en cuenta que siempre debes centrarte en optimizar las velocidades de carga en el móvil porque:
- Satisfacer a los visitantes móviles es esencial
- Un sitio que se carga rápidamente en dispositivos móviles, en consecuencia, también cargará rápidamente en la versión de escritorio
Por lo tanto, ahora que sabemos que nuestro objetivo de velocidad de carga es de menos de 3 - 5 segundos en una conexión móvil, vamos a hablar sobre cómo acelerar un sitio WordPress para alcanzar ese objetivo de tiempo.
¿Por qué WordPress es tan lento? 7 Problemas
Es muy posible que sin la optimización adecuada tu sitio WordPress esté cargando más lento que la meta de 3 a 5 segundos. Para remediarlo necesitas entender los problemas más frecuentes que hacen que un sitio WordPress se cargue con lentitud.
Principalmente se dan siete problemas; vamos a definir brevemente cada uno de ellos antes de pasar a ver cómo podemos lidiar con ellos.
1. Carga excesivamente temprana de archivos
Cuando un visitante está leyendo la parte superior de un artículo no es necesario cargar las imágenes que no va a ver hasta que llegue al final del artículo.
2. Carga de demasiados archivos independientes
Cargar el número mínimo posible de archivos independientes. Es mejor tener un solo archivo que pese 100kb que 10 archivos de 10kb cada uno.
3. Carga de datos innecesarios
Es muy común tener plugins instalados en WordPress, o incluso el propio núcleo de WordPress, que carguen archivos que no se están utilizando, o sólo lo estén siendo parcialmente. Cada bit de datos innecesarios se suma al tiempo de carga.
4. Tamaños de archivo demasiado grandes
Cuando los archivos del sitio como CSS, JS e imágenes son demasiado grandes, pueden aumentar drásticamente los tiempos de carga.
5. Servicio de alojamiento demasiado lento
Si un servicio de alojamiento no tiene suficiente hardware en uso, como CPU de baja potencia / RAM insuficiente, o no emplea procesos de optimización adecuados, puede hacer que tu sitio WordPress se ralentice.
6. No usar almacenamiento en caché
Si WordPress tiene que procesar demasiado en el servidor, esto puede causar una ralentización significativa antes de que el contenido esté listo para ser cargado. El almacenamiento en caché puede aliviar este problema.
7. No usar un CDN
Si tu visitante y tu sitio WordPress se encuentran en lados opuestos del planeta esto puede causar un retraso sustancial en el tiempo de carga. Una red de entrega de contenido, o CDN, puede resolver este problema.
Pero, ¿por qué mi sitio WordPress es tan lento? Diagnóstico de problemas paso a paso
Ahora ya sabes cuáles son los problemas que pueden causar que un sitio cargue lento, pero todavía necesitas saber cuál de estos problemas concretos está experimentando tu propio sitio para aplicar soluciones correctamente.
Veremos cómo comprobar los problemas del 1 al 4, tal y como se describe en la sección anterior. Nos estamos centrando en estos cuatro problemas primero porque pueden o no ser un problema en un sitio dado.
Los problemas 5 a 7 deben abordarse en cada sitio mediante el uso de un alojamiento rápido, almacenamiento en caché y CDN, algo que discutiremos más adelante.
A medida que avancemos a través de estos pasos voy a predicar con el ejemplo y te mostraré los resultados de la prueba realizada sobre mi propio sitio web personal. (No es un sitio WordPress, pero los métodos de optimización son los mismos).
Para comparar, te mostraré los resultados de la página de demostración de un tema de WordPress muy popular. (El tema permanecerá en incógnito ya que el objetivo no es señalar a nadie, sino más bien mostrarte hasta qué punto puede aumentar la velocidad de carga en sitios WordPress que no hayan sido optimizados adecuadamente).
Herramientas de prueba basadas en el navegador
Existen varios sitios web que puedes utilizar para comprobar la velocidad de tus sitios, pero a día de hoy ya no son realmente necesarios ya que las herramientas que vienen integradas en los navegadores son excelentes. Te guiaré a través del uso de algunas herramientas incluidas en navegadores basados en Chromium y Firefox.
Nota: Prácticamente todos los navegadores están basados en Chromium a excepción de Firefox, por ejemplo, Ungoogled Chromium, Vivaldi, la última versión de Edge, Opera, etc. Por tanto, debería bastarte el empleo de un navegador de tu elección para acceder a estas herramientas.
Un breve punto a tener en cuenta durante las pruebas:
- Utiliza una "Ventana privada" o el "Modo incógnito" para asegurarte de que las extensiones estén deshabilitadas, ya que podrían afectar a la velocidad de carga.
Paso 1: Probar la velocidad de carga "3G lento"
Vamos a hacer un par de pruebas de velocidad para ver lo cerca que estamos de tener un sitio preparado para la interacción en un tiempo inferior a 5 segundos con una conexión 3G lenta.
En un navegador basado en Chrome abre una ventana en "Modo incógnito", dirígete al menú que se muestra en la imagen inferior, y a continuación, carga tu sitio web.
Ahora abre las Herramientas para desarrolladores desde este menú situado en la parte superior derecha del navegador:
Una vez abiertas las herramientas dirígete a la pestaña Network (Red), marca la casilla Disable cache (Deshabilitar caché) y cambia el estado la lista desplegable en el extremo derecho de la barra de herramientas a Slow 3G. Esto emula una primera visita realizada por alguien con una conexión móvil bastante pobre. La configuración debería tener este aspecto:
Actualiza la página y observa como el panel realiza un seguimiento de la carga de todos los recursos de tu sitio.
Una vez completada la carga de la página, vamos a buscar los números de la parte inferior del panel, en particular el número azul y el número rojo. Sin entrar en tecnicismos, el número azul indica cuando se han cargado los recursos básicos como el texto, y el número rojo señala cuando se han cargado más recursos visuales como los estilos y las imágenes. El punto en el que normalmente se puede interactuar con un sitio estará en algún lugar entre el número azul y el número rojo.
Estos son los números de mi sitio personal:
Como puedes ver acaba obteniendo un tiempo de carga inferior a 5 segundos en el número rojo, aunque en realidad el punto en el que se puede empezar a interactuar con mi sitio estaría más cerca de la cifra azul.
Y estos son los números del popular sitio de demostración del tema de WordPress:
26 segundos en el número azul y más de un minuto en el número rojo. ¡Ay! Ni siquiera se acerca al tiempo de carga de 5 segundos que pretendemos alcanzar. De hecho, es alrededor de entre 5 y 14 veces más lento que nuestro objetivo.
Está bastante claro que a este sitio yerra el tiro en la velocidad de carga, así que la siguiente pregunta es ¿por qué? Para responder a esta pregunta empezaremos comprobando cuáles de los problemas que describimos anteriormente podrían estar causando este impacto.
Paso 2: Comprobar el análisis de rendimiento en Firefox
Abre tu sitio web en una ventana privada en Firefox:
Abre las "Network Tools" (Herramientas de red) desde el menú superior derecho de Firefox, selecciona Web Developer (Desarrollador Web), y después Network (Red):
Una vez aparezcan las herramientas de red, haz clic sobre el pequeño botón situado en la esquina inferior derecha que parece un cronómetro:
Esto iniciará un análisis de rendimiento que evaluará lo que sucede durante una primera visita (sin recursos almacenados en caché) o una visita posterior (con algunos recursos ya almacenados en caché).
Estos son los resultados de mi sitio personal:
El gráfico circular inferior y la tabla representan una primera carga y la tabla y el gráfico superior representan una carga posterior, cuando un visitante ya tiene algunos recursos almacenados en la caché de su navegador.
Aquí hay un par de cosas a tener en cuenta que serán relevantes en breve:
- Verás que sólo tengo 1 archivo JS y 0 archivos CSS - mi CSS está incluido en el propio HTML
- También puedes ver que solo se cargan dos imágenes, esta página en realidad tiene 6 imágenes, pero sólo las cargo cuando es necesario
- En total tengo tan sólo 4 solicitudes de página
- El tamaño total transferido es de 183.04 KB
Y aquí tenemos los resultados del sitio de demostración del tema:
Estos resultados son un poco diferentes:
- 11 archivos JS y 5 archivos CSS
- 41 imágenes
- Un total de 59 solicitudes de página
- El tamaño total transferido es de 5.237,26 KB
Estos resultados están empezando a formar una imagen de dónde están los problemas, y está claro que se alinean con los problemas 1 a 4 que describimos antes:
1. Carga de archivos demasiado temprana
Las imágenes se cargan antes de que sean necesarias; Conté 14 imágenes que eran visibles en el tamaño de la ventana gráfica de visualización que estaba usando, lo que significa que las 27 restantes podían cargarse más tarde.
2. Cargar demasiados archivos independientes
Hay demasiados archivos JS y CSS; 11 JS y 5 CSS, cuando normalmente solo deberías necesitar un archivo de cada tipo.
Esto, unido a la carga anticipada de imágenes, da como resultado 41 solicitudes de página innecesarias.
3. Cargar datos innecesarios
No podemos afirmarlo todavía con certeza, pero con 59 solicitudes de página y más de 5 MB de transferencia es muy probable que se estén cargando algunos datos que realmente no se necesitan.
4. Tamaños de archivo demasiado grandes
La cantidad total de datos transferidos es 28 veces mayor que en mi sitio. Este es sin duda un sitio más complejo que el mío, pero de ninguna manera es, ni de cerca, 28 veces más complejo, lo que significa que hay una gran cantidad de datos innecesarios transferidos.
En los resultados del análisis de rendimiento podemos ver que 2.783.51 KB son imágenes, lo que constituye algo más de la mitad de los datos totales. Con 40 imágenes que nos dan un promedio de aproximadamente 68 KB por imagen, algo que en principio es válido, así que esperaremos descubrir más información en el siguiente paso antes de decidir si los archivos son demasiado grandes.
Lo siguiente que podemos observar es que hay 2.282.71 KB que corresponden a archivos JS, 207 KB por archivo. Como contraste, cada uno de esos archivos es 29 veces más grande que todo el JS existente en todo mi sitio. El peso total de JS es 326 veces superior que el existente en todo mi sitio. Como mencioné, el sitio de demostración de tema es sin duda más complejo que el mío, pero de ninguna manera es 326 veces más complejo. Existe un amplio margen para disminuir el tamaño de los archivos JS.
El análisis también nos muestra que el sitio de demostración del tema tiene 1.233,16 KB de CSS, aunque solo se transfieren 148,18 KB. Mi sitio personal tiene su CSS incluido en línea en el HTML por lo que no aparece en el análisis, pero en contraste tiene un tamaño de archivo de 9,5 KB antes de procesarlo. Una vez más, el sitio de demostración del tema es más complejo, pero no es 129 veces más complejo. También hay un gran margen para disminuir el tamaño del archivo CSS.
Paso 3: Auditoría de rendimiento con Lighthouse Performance
A continuación vamos a utilizar una segunda auditoría de rendimiento para confirmar la información que tenemos hasta ahora y ayudarnos a obtener una dirección más específica sobre las áreas que necesitan atención.
Los navegadores de Chromium vienen con una herramienta de auditoría par sitios web llamada "Lighthouse". Esta es la misma herramienta que impulsa el sitio web de Google Page Speed, pero también está directamente disponible en el navegador.
Para acceder a ella, con tu sitio todavía abierto en una ventana de incógnito, dirígete a la pestaña Audits (Auditorías) en las herramientas para desarrolladores. Establece Device (Dispositivo) en Mobile, desactiva todas las auditorías excepto Performance, deja Throttling establecido en Simulated Fast 3G, 4x CPU Slowdown, y deja marcado Clear storage (Borrar almacenamiento). Haz clic en el botón Run audits (Ejecutar auditorías) para iniciar la auditoría de rendimiento:
Estos son los resultados de la auditoría de mi página personal:
Como puedes ver, la optimización cuidadosa ha llevado a una puntuación de 100 sobre 100, con todas las auditorías aprobadas. Es importante destacar que el valor Time to Interactive (tiempo de interactividad) es de 1,9 segundos. Esta auditoría está realizada en 3G rápido simulado en lugar de 3G lento, pero está muy por debajo de la velocidad de 5 segundos recomendada por Google.
Estos son los resultados de la auditoría de la página de demostración del tema (información de identificación eliminada):
Este es un resultado bastante duro. La velocidad de tiempo de interactividad es de 12,4 segundos, y sin siquiera estar en 3G lento emulado se pierde la velocidad recomendada de Google en 7,4 segundos.
Las secciones Opportunities y Diagnostics nos dan algo similar a una lista de tareas a completar, y era de esperar, las tareas se alinean con los problemas que identificamos en la última sección. Cada una de estas secciones se puede ampliar para mostrar más detalles sobre lo que se debe hacer para acelerar el sitio. Hablaremos de formas de tomar medidas en la siguiente sección, pero por ahora echemos un vistazo más de cerca a algunos de los puntos de mayor prioridad en esta auditoría.
Las imágenes se cargan demasiado pronto
En primer lugar, verás que en la parte superior de la lista de oportunidades aparece Defer offscreen images (Aplazar imágenes fuera de la pantalla). Esto significa que los archivos de imagen se están cargando antes de que sea necesario y, por lo tanto, la auditoría admite lo que determinamos en la última sección. Estima que cargar imágenes más tarde podría ahorrar 10 segundos de tiempo de carga. Por lo tanto, esta optimización por sí sola podría reducir potencialmente la medida de Time to Interactive por debajo del objetivo de 5 segundos.
La expansión de la sección muestra que se están cargando 31 imágenes antes de que se necesiten, incluso más que mi conjetura inicial de 27. Los datos estimados que podrían ahorrarse potencialmente ascienden a 2.021 KB. Eso es enorme. (Identificación de información eliminada):
Algunos archivos de imagen demasiado grandes
La siguiente oportunidad de mayor prioridad en la lista estima que se podrían guardar 2,4 segundos de tiempo de carga si el sitio tuviera "imágenes de tamaño adecuado". En la última sección vimos que el tamaño total del archivo de todas la imagenes de la página era bastante sustancial, pero no pudimos determinar si alguna imagen en concreto era demasiado grande. La ampliación de esta sección de la auditoría nos dice que, de hecho, 9 imágenes son demasiado grandes y podrían optimizarse significativamente, lo que podría ahorrar 487 KB (información de identificación eliminada):
Carga de CSS no utilizado
Anteriormente mencionamos que probablemente se estaban cargando algunos datos innecesarios y aquí vemos que ese es el caso. La auditoría estima 0,75 segundos que se podrían ahorrar aplazando, es decir, no cargando, el CSS no utilizado. Ampliando la sección vemos que hay cuatro archivos CSS que no se utilizan en su totalidad o de forma parcial, un equivalente a 135 KB de datos (información de identificación eliminada):
Problema 5, no hay un problema, auditoría aprobada sobre la velocidad del servidor
También quiero señalar algo que está funcionando en favor de este sitio de demostración del tema, y es que el servidor en el que se hospeda es ágil. Observa el elemento 6 de las auditorías aprobadas destaca que al servidor solo tardó 350 ms en dar respuesta y empezar a enviar datos.
Por el contrario, este es un ejemplo de un sitio que ha fallado en esta auditoría con un servidor que le cuesta al sitio medio segundo adicional debido al lento tiempo de respuesta:
Esta métrica no nos proporciona feedback exacto sobre la calidad de los servidores de un proveedor de alojamiento. Obtener una respuesta en rojo no significa que el proveedor sea malo, ya que puede estar causado por una opción en su configuración que provoca la lenta respuesta. Sin embargo, la obtención de un resultado dentro de las reglas verdes descarta que el servidor sea malo, porque si lo fuera no sería capaz de generar una validación positiva en la auditoría sobre el tiempo de respuesta.
Resumen de por qué ese sitio de WordPress es lento
Ahora que hemos pasado por nuestro proceso de evaluación paso a paso, podemos identificar algunas de las razones más destacadas por las que el sitio de demostración de tema que hemos estado examinando es tan lento, categorizando bajo los problemas 1 a 4 que definimos anteriormente:
1. Carga demasiado temprana de archivos
31 imágenes se cargan demasiado pronto, lo que provoca una espera de alrededor de más de 2 MB de transferencia.
2. Carga de demasiados archivos independientes
11 archivos JS y 5 archivos CSS en lugar de uno de cada uno.
3. Carga de archivos innecesarios
Se están cargando 135 KB de CSS no utilizado.
4. Tamaños de archivo demasiado grandes
9 de las 41 imágenes son demasiado grandes, equivalente a un exceso de 487 KB.
Puntos adicionales
Vimos en la métrica TTFB en la auditoría de rendimiento que el servidor de este sitio responde rápidamente, por lo que el Problema 5 sobre un hospedaje lento no es aquí, para este sitio, un problema. La carga lenta se debió a otros problemas.
En cuanto a si se está usando el almacenamiento en caché y una red CDN, problema 6 y problema 7, no tiene que ser parte de un proceso de evaluación porque tú ya sabrás si has configurado o no el almacenamiento en caché y una red CDN. (Más sobre esto en la siguiente sección).
Cómo acelerar WordPress: 7 soluciones
Muy bien, ahora estamos listos para entrar en la parte práctica donde realmente resolvemos los tipos de problemas que has visto que ocurren en el sitio de demostración del tema que hemos estado examinando. Desafortunadamente, ese sitio no es mío y no lo puedo arreglar, pero si y siempre que veas que aparecen los mismos problemas en tus propios sitios WordPress, esto es lo que debes hacer al respecto.
Hay varios plugins disponibles que pueden gestionar la mayoría de las soluciones que estoy a punto de plantear. Sin embargo, se da el caso de que existe un plugin gratuito creado por SiteGround, los patrocinadores de este artículo, que empleado junto con su servicio de alojamiento para WordPress, te permite implementar cada una de las siguientes soluciones.
Consulta más detalles sobre lo que ofrecen y consigue hasta un 70% de descuento en su alojamiento gestionado para WordPress a través de Themeforest:
El plugin se llama SG Optimizer y lo puedes descargar desde wordpress.org.
Nota: para usar este plugin necesitas usar SiteGround como tu proveedor de alojamiento, ya que interactúa con la configuración concreta de WordPress y la optimización que SiteGround realiza en sus servidores.
Por supuesto, puedes utilizar cualquier combinación de plugins que desees para implementar cada una de las siguientes soluciones, pero como SG Optimizer puede encargarse de todas ellas lo voy a utilizar para proporcionar ejemplos.
1. Carga de archivos demasiado temprana
Solución: Usa siempre la carga diferida
La carga diferida o "lazy loading" es una técnica de optimización de sitios web que consiste en cargar únicamente las imágenes que se encuentran en el área visible de la página, así como las que están a punto de aparecer por el desplazamiento. Vimos en nuestro ejemplo anterior que la carga diferida puede tener un gran impacto, y puede marcar la diferencia entre un sitio que se carga a la velocidad requerida y uno que se retrasa de forma dañina.
La carga diferida se puede configurar directamente en un tema, pero en WordPress es más habitual habilitarla a través de un plugin.
En el plugin SG Optimizer puedes activarla desde la sección Optimización de medios activando estas opciones:
Vale la pena repetir: si nuestra página de demostración de tema había instalado este plugin y cambiado la posición de estos interruptores, habrían ahorrado más de 2 MB y 10 segundos de carga y muy posiblemente hubiesen cumplido con el tiempo recomendado por Google.
2. Carga de demasiados archivos independientes
Solución: Combinar archivos JS y CSS
La razón por la que no hay necesidad de tener más de un archivo JS o CSS es que puedes coger todos los archivos separados y combinarlos en uno a través de un proceso automatizado. Esto normalmente también se hace con un plugin para que a medida que agregues y elimines cosas de tu sitio, tu CSS y tu JS se pueden volver a combinar según sea necesario.
En SG Optimizer puedes activar la combinación en la sección Optimización de la portada activando los interruptores Minimizar archivos JavaScript y Minificar archivos CSS:
3. Carga de datos innecesarios
Solución: Desactiva todo menos lo esencial
Los plugins activos cuando no son necesarios para el funcionamiento de un sitio es una de las causas principales por las que se cargan un montón de archivos CSS y JS que realmente no necesitas.
Sé severo y elimina los plugins que no son usados por tu configuración actual. Si hay una manera de ejecutar tu sitio sin utilizar un plugin dado, hazlo. Incluso si no tienen archivos CSS o JS asociados para cargar, cada plugin añade carga de procesamiento a tu servidor. El beneficio que proporciona cada plugin tiene que ser claro y significativo, de lo contrario elimínalo.
Además, revisa la configuración de los plugins que necesitas mantener y examina si hay opciones de configuración que te permitan cargar menos recursos. Por ejemplo, si un plugin tiene submódulos desactiva tantos como sea posible. Si ofrece estilos personalizados trata de evitarlos. Sé tan espartano como sea posible, recordando que cada segundo adicional de tiempo de carga causa la pérdida de visitantes.
Un punto adicional es que WordPress en sí cargará automáticamente archivos que añaden imágenes emojis a tu sitio. Esto, en la mayoría de los sitios, cabe directamente en la categoría de datos innecesarios. Para evitar que WordPress cargue emojis puedes ir al área de Optimización de la portada de SG Optimizer y activar la opción Desactivar Emojis:
4. Tamaños de archivo demasiado grandes
Solución parte 1: Minificar HTML, JS y CSS
En este punto habrás reducido la cantidad de HTML, JS y CSS al mínimo, y combinado tu JS y CSS en archivos únicos. Ahora estás preparado para asegurarte de que esos archivos sean tan pequeños en tamaño como sea posible haciendo algo llamado minificado.
El minimizado de archivos basados en texto como HTML, JS y CSS elimina todo el espacio en blanco y los saltos de línea. Hacer esto puede reducir los archivos a la mitad de su anterior tamaño.
Al igual que con la combinación, el minificado en WordPress se realiza a través de un plugin para que los archivos puedan ser re-minimizados según sea necesario.
En el plugin SG Optimizer esto se hace en el área de Optimización de la portada con los mismos interruptores que activan el minificado. Activa los tres:
Solución Parte 2: Comprimir imágenes
Vimos en nuestro examen del sitio de demostración del tema que se podrían haber ahorrado 487 KB si se hubiese empleado una mayor compresión de imagen.
En términos generales, las imágenes deben optimizarse y comprimirse correctamente antes de añadirlas a un sitio, pero a veces no tienes la oportunidad y tienes que optimizar las imágenes sobre la marcha.
SG Optimizer puede optimizar las imágenes existentes y las nuevas a través de la sección Optimización de medios. Activa el primer interruptor y, si necesitas optimizar las imágenes existentes, haz clic en el botón Comenzar optimización:
Solución Parte 3: Usar compresión GZIP
Estoy seguro de que en alguna ocasión habrás tenido la experiencia de descargar archivos que han sido zipped, es decir, comprimidos para que sean más pequeños y su transferencia sea más rápida. Bueno, efectivamente la misma cosa se puede hacer en tu sitio a través de GZIP, lo que te permitiendo que este sea más pequeño y más rápido.
Como sucede con gran parte de las soluciones mencionadas hasta ahora, habilitar GZIP en WordPress se logra a través de un plugin.
En SG Optimizer dirígete a la sección Optimización del entorno y desliza este interruptor:
5. Servicio de alojamiento demasiado lento
Solución: Elige un alojamiento rápido y optimizado
Al evaluar alojamientos, intenta encontrar la página en su sitio que proporcione información sobre sus centros de datos y sus componentes tecnológicos. Este es un tema un poco más complejo de establecer que los otros que hasta ahora hemos discutido, pero fíjate en lo que la empresa expone sobre cómo aseguran que sus servidores entreguen sitios rápidamente. ¿Son propietarios de su propio centro de datos? Si es así, ¿dónde está y cuán confiable es? Si no es así, ¿en qué centros de datos se apoya la empresa? ¿Google Cloud? ¿Aws? ¿Qué nivel de reputación disfrutan dichos centros de datos?
Sin embargo, algo más fácil de evaluar sobre un proveedor de alojamiento para WordPress es si ofrecen o no optimizaciones del sistema explícitamente confeccionadas para sitios WordPress. Por ejemplo, ya has visto en las soluciones que cubrimos anteriormente cómo SiteGround ofrece el plugin SG Optimizer para interactuar con servidores que estén configurados para ayudar a optimizar los sitios creados con WordPress. Trate de encontrar un anfitrión que conozca WordPress, y emprenda medidas especiales para atenderlo.
6. No usar almacenamiento en caché
Solución: Utiliza varias capas de almacenamiento en caché
El almacenamiento en caché, que consiste en el almacenamiento de datos para una entrega más rápida, se puede controlar en múltiples niveles en un sitio WordPress. Al igual que con muchas de las anteriores soluciones, el almacenamiento en caché se implementa en WordPress a través de un plugin, y en algunos alojamientos existirán ajustes del panel de control que deberán ser también activados.
Almacenamiento en caché del navegador
El primero de esos niveles está en el propio navegador. Pueden transmitirse reglas al navegador sobre cuánto tiempo debería almacenar los archivos de tu sitio. En SG Optimizer, en la sección Optimización del entorno, puedes cambiar el conmutador de Caché del navegador para ampliar la duración del almacenamiento en caché de los recursos por parte del explorador:
También puedes hacer que SG Optimizer elimine las cadenas agregadas por WordPress de forma predeterminada al final de los nombres de archivo, lo que ayudará aún más al almacenamiento en caché del navegador. Esto se hace en la sección Optimización de portada:
Almacenamiento en caché del servidor
Dependiendo del alojamiento y el plugin de almacenamiento en caché que estés utilizando habrá varios tipos de almacenamiento en caché que puedan tener lugar en el servidor.
Por defecto, cada vez que una persona visita una página web todo tiene que ser generado por WordPress, a través de la combinación de contenido de la base de datos con la información de tu tema y los archivos de plugin. El almacenamiento en caché en el servidor almacena una copia de lo que se genera para que la siguiente persona pueda cargar esa copia almacenada en lugar de esperar a que la página se cree desde cero de nuevo.
En el caso de usar el alojamiento de SiteGround junto con SG Optimizer, tendrás acceso a Caché dinámica y Memcached. (Cada una de ellas tiene que estar habilitado en el panel de control de la cuenta de alojamiento antes de poder ser empleada en WordPress).
Ambas se activan en el área Ajustes de supercacher del plugin SG Optimizer, activando el conmutador de Caché dinámica:
Y el conmutador Memcached:
7. No usar una CDN
Solución: ¡Utiliza una CDN!
Incluso aunque tu sitio cargue muy rápidamente para ti, eso no significa necesariamente que se cargue con la misma rapidez para alguien ubicado más lejos del servidor que tú. Con el fin de garantizar que todos tengan una rápida experiencia de carga de tu sitio, lo mejor que puedes hacer es usar una red CDN (Content Delivery Network), es decir, una red de entrega de contenido.
Una red CDN es una red de servidores adicionales repartidos por todo el mundo en los que se duplicará tu sitio web. A continuación, en lugar de cargar el sitio desde tu centro de datos original, un visitante lo cargará desde el punto de la CDN más cercano a su ubicación.
Para ilustrar cómo puede funcionar esto, la siguiente imagen muestra los propios centros de datos de SiteGround, en naranja, y los puntos CDN con los que se integra, en azul:
Observa lo cerca que están los servidores de CDN de las personas de Oceanía, América del Sur, Africa y gran parte de Europa y Asia.
En mi experiencia, la mayoría de los proveedores de alojamiento no incluyen el acceso a una red CDN y esta tiene que ser organizada por separado, o si tienen una red CDN integrada, hay que pagar un precio extra para poder usarla. Sin embargo, en el caso de SiteGround, el uso de la CDN integrada (Cloudflare) se incluye sin ningún cargo adicional.
Una solución de bonificación
A veces, después de haber hecho todo lo anterior, es posible que encuentres que tu sitio sigue siendo demasiado lento, y la razón podría simplemente estar en que estás usando un tema mal diseñado. Si el desarrollador de tu tema fue consciente en la forma en la que creó el código que ejecuta tu sitio, no hay mucho que se pueda hacer si él o ellos mismos no realizan una completa revisión de optimización.
Si crees que tu tema podría ser el mayor culpable de la lentitud de tu sitio, intenta cambiar y probar temporalmente algunos otros temas y fíjate en qué medida proporcionan una variación. Si cambiar de tema provoca una importante aceleración en la velocidad de carga, descubrirás que desafortunadamente tienes un fiasco, y que es hora de conseguir un nuevo tema mejor diseñado para conseguir una rápida carga.
Ahora ya estás listo para ir veloz
He compartido absolutamente todo lo que he aprendido a lo largo de mis 12 años de experiencia en hacer que los sitios de WordPress carguen súper rápido, y ahora todo lo que tienes que hacer es implementar los pasos y soluciones de evaluación que te he mostrado.
Dados los costes potencialmente altos de una optimización deficiente, sorprendentemente, la velocidad de carga del sitio todavía se suele pasar por alto. Es de vital importancia y es algo que todos los administradores de un sitio web deberían estar entusiasmados por aprender y dominar personalmente.
Aspira a esa puntuación de auditoría de rendimiento de 100 sobre 100, consigue que tus visitantes disfruten de tu sitio web en menos de unos segundos y, a continuación, observa como aumenta el éxito de tu sitio.
Gracias a SiteGround por patrocinar este artículo, ¡no olvides que puedes obtener hasta un 70% de descuento en su alojamiento gestionado para WordPress a través de Themeforest!
