Volver al anterior capítulo
Volver al principio
Ir al siguiente capítulo
70%

Además del contenido de calidad, uno de los factores más importantes que toman en cuenta los algoritmos de Google para la indexación y debida organización de los sitios web en los resultados de las búsquedas, es la velocidad de carga. Si eres el propietario de una página web, blog o tienda online de WordPress (o cualquier otro CMS en realidad), una de tus mayores preocupaciones debería ser mejorar la velocidad de carga, ya que no sólo es crítico, sino que influye directamente en las visitas y en las conversiones de tu página web.

guia wpo seo wordpress como mejorar velocidad carga

Si tu idea es posicionar lo más arriba posible en buscadores como Google, tienes que empezar a plantearte una revisión completa del WPOWeb Performance Optimization (en español es la optimización del rendimiento web, pero lo he leído tantas veces en inglés que ya me suena mal). La idea de escribir esta guía para mejorar el tiempo de carga de WordPress , como parte de mi tutorial WordPress, no es otra que ayudarte a entender este concepto y que lo puedes aplicar en tu página web, blog o tienda online tu mismo (aunque siempre tendrás mi servicio SEO a mano).

Índice

Esta página esta continuamente actualizándose. Vuelve de vez en cuando.

#1 Prepara las herramientas que vas a necesitar

guia para hacer un blog paso a paso herramientas

Para hacer un buen análisis y una posterior optimización de la velocidad de carga de tu instalación WordPress es crítico disponer de una serie de herramientas, que pueden facilitarte la vida y hacer del proceso algo mucho más sencillo y llevadero.

Dominio Web

mejores herramientas instalar configurar dominio web
Desde 7€/año
Ir a Dominio

Alojamiento Web

mejores herramientas instalar configurar alojamiento web
Desde 4€/mes
Ir a Hosting

Wordpress

mejores herramientas instalar configurar wordpress.org
Gratis
Ir a WordPress

#2 Importancia de la velocidad de carga en WordPress

tutorial wordpress como aumentar tiempo carga instalacion wordpress

Si te ganas la vida con tu página web, blog o tienda online, la velocidad de carga es algo que no puedes permitirse el lujo de ignorar. Loadstorm ha realizado una infografía en la que ha fusionado algunos resultados bastante interesantes, demostrando que el aumento de un solo segundo en el tiempo de carga de la web conduce a una pérdida del 7% de las conversiones, un 11% menos de páginas vistas y una disminución del 16% en la satisfacción del cliente.

Consigue hacer lo contrario y disminuye 1 segundo la velocidad de carga de tu instalación WordPress y podrías llegar a ganar, fácilmente, un de 7% tus beneficios. Los que vivimos en países desarrollados, a veces se nos olvida que la calidad de servicio de Internet no es uniforme en todo el mundo, incluso utilizando un CDN (hablaremos sobre este tema un poco más abajo) y optimizar todo al 200%. Tu página web puede tardar en cargar en 2 segundos en Nueva York, 2,3 segundos en Dublín y de 4 a 5 segundos en la India.

Al realizar una optimización más profunda puedes llegar a disminuir el tiempo de carga en Europa en 0,3 segundos, pero sólo podrás disminuirlo en 1,8 segundos en África, que a lo mejor es tu mercado objetivo y daría lugar a más ventas. No hay que olvidar que la red es enorme y que ciertos números son promedios, habiendo muchos que forman parte de una muestra única de un conjunto muy variado.

Además de todos los beneficios directos que aporta una buena carga web, es un hecho bien conocido que la velocidad de la página tiene un impacto enorme en la optimización SEO, por ende, en el posicionamiento. Google intenta confundirnos, intencionadamente, sobre los detalles, pero algunas investigaciones arrojan luz sobre una posible correlación. Una cosa es segura: una mejor velocidad de carga = mejor posicionamiento en los ojos de Google.

Si te preocupa el medio ambiente (a mí personalmente sí), puedes pensar en este proceso como un ejercicio de reducción de tu huella de carbono. Una página web más rápida es, generalmente, el resultado de menos procesamiento, un menor número de solicitudes y el requerimiento de menos datos, lo que significa que los equipos donde se aloja tu página web trabajan menos, reducen su producción de calor, que a su vez significa menos refrigeración necesaria. El efecto es probablemente imperceptible en un simple servidor, pero estoy totalmente seguro de que sería medible a escala.

Por dónde empezar

Voy a dividir esta guía WPO de WordPress en varias partes para que sea más amena y “tragable”. Inicialmente, voy a hablar de algunas consideraciones generales, donde trataré de explicarte los detalles más importantes sobre la velocidad de carga. Las dos secciones siguientes se centrarán en la mejora que cualquier usuario puede realizar sobre su instalación WordPress. Habrá cierta superposición en estas dos últimas secciones. Insto a los que no estéis tan familiarizados con el código a revisar de arriba a abajo ambas secciones, ya que muchas de las técnicas para mejorar el tiempo de carga de WordPress pueden ser ejecutadas siguiendo simples guías, a pesar de que necesiten algo de código para llevarse a cabo.

De hecho, si te soy sincero, yo soy malísimo con el código, y en proyectos web grandes necesito apoyo en esta área, por lo que no te asustes que todos estamos igual. Cuando llegues al final, espero que seas capaz de quedarte, al menos, con un par de ideas que puedas aplicar inmediatamente en tu página web, blog o tienda online de WordPress, para que sea mucho más rápida para ti y para todos los usuarios.

#3 Razones por las que una página web o blog es lenta

tutorial wordpress como mejorar tiempo carga lenta wordpress

Entender por qué un sitio web es lento es clave para tomar ciertas decisiones. Existe una enorme diferencia entre una página web que carga despacio porque está alojada en un servidor de bajo coste/calidad y otra que tiene un código ineficiente y cientos de imágenes mal optimizadas sobresaturando sus recursos. Voy a dividir la velocidad de tu página web en diferentes capas. Tu trabajo será analizar y optimizar cada una de estas capas. Por ahora, vamos a aprender acerca de todos los componentes que entran en juego en WPO.

Nota: Ten en cuenta que no todos los elementos se pueden corregir siempre.

#3.1 Tecnología básica

La tecnología y el lenguaje que se utilizan para que tu página web funcione determina la rapidez con que el código se procesa en el servidor. Utilizar sólo HTML es un problema menor, pero la mayoría de páginas web utilizan programación del lado del servidor. Puedes estar utilizando ASP.net, PHP o tal vez HHVM para ejecutar código PHP. Por desgracia, no hay mucho que puedas hacer para aumentar la velocidad en los idiomas básicos.

Si bien no soy un experto, creo que técnicamente ASP.net tiene la capacidad de ser más rápido que PHP, pero las diferencias son despreciables. HHVM comenzó superando a PHP cuando fue lanzado, pero las dos tecnologías han tenido un “pique” (amistosa) y parece que PHP 7 superará a HHVM, que se espera que mejorará el rendimiento y hará a los usuarios muy felices.

Uno de los sitios donde sí puedes marcar la diferencia es en la configuración del servidor. Por ejemplo, los servidores pueden ser configurados para enviar datos en un formato comprimido, (conocido como compresión gzip, que te explicaré más abajo). Esta es una simple configuración que puedes activar o desactivar a tu antojo, aunque te recomiendo que la dejes activa, porque la velocidad de carga de tu web aumentará.

#3.2 Sistema de Gestión de Contenidos

Como norma general, cualquier página desarrollada con un CMS siempre va a ser más lenta que una que usa sólo HTML estático (siempre y cuando esta última este bien ejecutada). Si bien es cierto que un sistema de caché para todas las páginas puede reducir al mínimo las diferencias de velocidad, estos datos almacenados en caché a veces tienen que ser purgados y los usuarios registrados o que hayan iniciado sesión no disfrutan de una versión de la web cacheada, además de que la administración del contenido siempre consume más recursos.

Dicho esto, un CMS bien construido hará más bien que mal. Es más seguro, te ofrece millones de posibilidades y te permite gestionar el contenido con mucha facilidad. Todos los sistemas CMS conocidos entran en la categoría “bien desarrollados”, por lo que WordPress, Joomla y Drupal están bien desde el punto de vista de la velocidad de carga. De todas maneras, los problemas de velocidad pueden ser más comunes en unos CMS que en otros, pero esto suele estar relacionado con la cantidad de código adicional que se utiliza en plantillas y plugins (me extenderé sobre este tema más abajo).

La razón de que estos sistemas de gestión de contenidos sean más lentos que los sitios estáticos es que necesitan conectarse a un servidor, el servidor necesita procesar una solicitud, generar código HTML y enviarla de vuelta al navegador. Durante este proceso se hacen muchas consultas a la base de datos, que no hacen más que aumentar los tiempos de carga.

Nota: La mayoría de los CMS tienen mecanismos para optimizar este proceso, que es la razón por la que las páginas web tienden a cargar en un par de segundos, haciendo de estos sistemas una solución muy viable.

#3.3 Extensiones

Cuando pongo extensiones me refiero a cualquier código “extra” que utilices con tu CMS. En WordPress esto tiene nombre propio: themes y plugins (En Joomla y Drupal se llaman templates y extensiones). Normalmente, salvo contadas excepciones, estos temas y plugins no son creados por las mismas personas que desarrollaron el CMS. Esto significa que, si los desarrolladores no están al tanto de las mejores prácticas para el CMS en cuestión, van a cometer errores. y el rendimiento va a bajar. Por ejemplo, puede que necesites realizar una consulta a la base de datos una vez en cada operación.

Si no piensa bien estas cosas, es posible que, en vez de 1, pueda llegar a hacer 3, por lo que estás multiplicando x3 el trabajo del servidor (no te equivoques, dependiendo de tus necesidades 3 consultas, en ocasiones, pueden llegar a ser más rápidos que 1, por lo que elegir cuidadosamente el método es muy importante). Esto son, a grosso modo, las cosas que pueden dar al traste con cualquier tiempo de carga de cualquier instalación, sea cual sea el CMS que se use. En esta guía te voy a mostrar algunas de las técnicas de codificación que más ralentizan el código. Por ahora me quedo contento si has entendido que las extensiones añaden una capa de carga a tu página web o blog.

Nota: Con WordPress, este aspecto negativo se ve magnificado por el hecho de que sea una comunidad tan abierta, ya que hace que sea extremadamente fácil contribuir con código malo.

#3.4 Servidores y hosting

Tu servidor es un factor determinante en la velocidad de tu WordPress, especialmente durante las horas de más tráfico. Voy a separar estos dos términos antes de empezar decirte cómo optimizarlos, de manera que aprendas un poco más sobre cómo inciden en la velocidad de carga. Tu servidor es un equipo físico en algún lugar (preferiblemente en el continente donde más tráfico tengas) que tiene propiedades similares a un ordenador en tu casa. Tiene memoria, CPU, disco duro y ciertos parámetros (software) que dictan cómo funciona. Tu plan de alojamiento web es, esencialmente, un conjunto de servicios vinculados a un servidor. Esto incluye cosas como las copias de seguridad automáticas, gestión de servidores y así sucesivamente.

El factor más importante de un hosting es el plan o precio que pagas por el mismo. Muchas veces no hace falta empezar por lo mejor o lo más rápido. Basta con contratar algo ajustado a las necesidades de ese momento, ya que la nube te permite ir contratando a medida que se crece, consiguiendo reducir el coste en tecnología (que a día de hoy es casi irrisorio). Existen 3 tipos de planes que tienes que entender (porque luego algunas empresas se inventan otros entre medias), los cuales se dividen en hosting compartido, VPS o servidor dedicado.

  • Hosting compartido: En un servicio compartido, es posible llegar a tener cientos de personas en un mismo servidor. Esto significa que varios centenares de personas comparten el mismo espacio en el disco, memoria, velocidad de la CPU y ancho de banda (Los recursos no se comparten de manera uniforme). En este caso, una página web o blog defectuosa puede utilizar hasta el 80% de los recursos del servidor, dejando a otros 99 usuarios con el 20% restante o peor
  • VPS (Virtual Private Server): Un VPS también es compartido, pero, por lo general, entre un menor número de usuarios (Los recursos si que se distribuyen de manera uniforme). Si hay 5 usuarios en el mismo servidor, cada uno recibiría el 20% de la memoria. En este caso, si un usuario tiene una página web que consuma muchos recursos, las demás seguirán rindiendo perfectamente
  • Hosting dedicado: En un servidor dedicado, tu eres el único usuario del servidor y de todos sus recursos. Esto anula completamente el efecto “mal vecino” que comparten los anteriores, aunque su precio, configuración y mantenimiento no están al alcance de cualquier usuario
Nota: Si te lo tuviera que explicar en pocas palabras, sus diferencias están determinadas en la cantidad de personas que utilizan el mismo servidor para tener su página o blog.

#3.5 Parámetros del servidor

Como ya he mencionado anteriormente, el servidor de tu página web o blog es un factor clave que determinará la velocidad de carga del sitio web. En pocas palabras, cuanto mayor sea el rendimiento del servidor, mejor rendimiento y velocidad e carga tendáa tu sitio web. Es todo cuestión de tamaño: Si tiene una instalación WordPress pequeña, con unas 10.000 visitas al mes, no importa si tu servidor tiene 1 GB de RAM y 8 GB. Por el contrario, si tienes una con 400.000 visitas mensuales (como este blog) ¿Crees que sería suficiente con ese servidor? La pregunta se contesta sola ¿Verdad?

Otro factor que marcará la diferencia, como te decía más arriba, es la ubicación del servidor. Esto es lógica pura y aplastante y es muy fácil de entender: Si eres un usuario de México (que son una gran parte de las visitas que tiene este blog) y mi servidor se encuentra en París (muy habitual), recibirá los datos de forma mucho más rápida un usuario español que uno mexicano ¿Verdad? ¿Entonces en qué continente contrato mi servidor? (La respuesta te la voy a ir explicando poco a poco, pero es bueno que empieces a conocer al CDN).

Los datos, cuando viajan dentro de los cables de fibra óptica, alcanzan una velocidad cercana a la de la luz, pero una vez se acercan al destino (a tu caso por ejemplo) se ralentizan a las velocidades de tu ISP (Esto sin contar el viaje a través de cortafuegos, routers y otros seres mágicos que tienden a ralentizar las cosas). La distancia afecta a la velocidad de carga de las solicitudes más habituales. Lo que quiero decir con esto es que la descarga de un archivo de 1 GB desde México lleva casi la misma cantidad de tiempo que si se hace desde España. Cuando se nota es cuando pides esa misma descarga 10.000 veces al día (aquí la distancia se nota mucho)

¿En qué afecta todo esto a tu página web o blog? Muy fácil, cuando se carga una página web o blog puede llegar a hacer un gran número de solicitudes. Esto incluye hojas de estilo, imágenes, archivos javascript y muchos otros. Si reduces esas solicitudes al mínimo, puedes maximizar la velocidad de carga.

#3.6 Equipo del receptor

La edad, calidad y rendimiento del ordenador que utiliza el usuario para acceder a tu página o blog también afecta en gran medida a la velocidad de conexión que se percibe. Tengo un iPad 2 algo maltratado en casa y mi conexión parece ir mucho más lenta en ese dispositivo que en el Macbook Pro que uso para trabajar, estando ambas conectada a la misma Wifi y a la misma distancia. Existen numerosas razones para que ocurra esto, pero creo que la principal es la edad del equipo. La degradación de los componentes ha causado que el iPad use la memoria de manera menos eficiente.

Hasta hace poco esto no era un gran problema ya que la mayoría de la computación se llevaba a cabo en el servidor. Con el auge de máquinas más potentes y las nuevas tecnologías web, los sitios web dejan de lado del cliente la potencia de procesamiento. Esto significa animaciones mucho más rápidas y reales, pero también significa que los dispositivos más lentos van a sufrir.

#4 Herramientas para medir la velocidad de carga de una web

tutorial wordpress como mejorar tiempo carga instalacion wordpress

Vivimos en un mundo “rápido“, que todo cambia deprisa y no tenemos tiempo ni de parar a mirar. Con las páginas web y blogs pasa lo mismo, buscamos la información y la queremos buena y deprisa. Es por esto por lo que la velocidad de carga de tu página web se está convirtiendo en un deber más de toda web que quieras posicionar en las primeras posiciones de cualquier motor de búsqueda.

Este factor ha tomado un papel fundamental en aspectos como la captación de tráfico orgánico y, a su vez, ha sido un elemento imprescindible de analizar para trabajos de usabilidad y optimización de landing pages o procesos de compra. Además es un factor cada vez más importante para los motores de búsqueda como Google. Vamos a ver las herramientas que necesitas conocer para medir la velocidad de carga de tu página web o blog.

GTmetrix

mejores herramientas seo analisis velocidad de carga gtmetrix
Gratis / Desde $14,95€/mes

GTmetrix te permite medir la velocidad de carga de tu blog utilizando tecnología de Google page Speed y Yahoo! YSlow y ver cual es su comportamiento en una gran cantidad de parámetros tales como JavaScript, CSS, solicitudes HTTP, Ajax, cantidad de elementos DOM, etc.

Ir a GTmetrix

PageSpeed Insights

mejores herramientas seo analisis velocidad de carga google pagespeed insights
GRATIS

Google PageSpeed Insights es una poderosa herramienta de análisis que ofrece Google para optimizar la velocidad de carga de los sitios web. Te da sugerencias (bastante técnicas) para mejorar el tiempo de carga en navegadores de escritorio y en dispositivos móviles. Dispone de extensiones para Firefox y Chrome.

Ir a PageSpeed Insights

Pingdom Tools

mejores herramientas seo analisis velocidad de carga pingdom tools
Gratis / Desde 11,95€/mes

Pingdom Tools es un referente en cuanto a análisis de sitios web ya que revisa el peso y la carga de cada uno de los elementos que componen tales sitios y genera un colorido reporte en forma de cascada que permite tomar medidas específicas sin mayores conocimientos técnicos.

Ir a Pingdom Tools
Quiero conocer más herramientas para medir la velocidad de carga de una web

#5 Pasos básicos para mejorar la velocidad de carga de tu web

tutorial wordpress como aumentar tiempo carga instalacion wordpress

Antes de empezar a optimizar tu web y mejorar su velocidad de rendimiento, te adelant0 que vas a ver las dos caras de la moneda: métodos y consejos para desarrolladores y para los que no están familiarizados (Ten en cuenta que esto no significa que todos los consejos para principiantes sean fáciles de configurar). Te iré asesorando a medida que vaya leyendo, haciendo la distinción en función de la dificultad. Si tuviera que resumirlo en pocas palabras, cualquier cosa que tengas que hacer en el código a tu tema o plugins estará en la sección avanzada y todo lo demás estará en la sección más básica.

En esta primera sección, la más básica o general, voy a hablar sobre métodos, consejos y trucos que puedes realizar sin tocar el código de tu página web o blog (sin tener que tocar el código del WordPress, de la plantilla o de los plugins). Como mucho tendrás que editar algunos archivos del servidor y utilizar comandos de terminal. Estas optimizaciones no suele hacerlas el desarrollador, pero si conoces alguien que se desenvuelva bien entre servidores te vendrá fenomenal. Hay unas cuantas cosas que hacer que estoy seguro que aumentarán la velocidad de carga de tu sitio web. De hecho, para facilitar la comprensión, he intentado seguir la lista que había seguido en la anterior sección “Razones por las que una página web es lenta“.

#5.1 Actualiza la tecnología más importante

El 99.99% de los usuarios no tienen los conocimientos suficientes para optimizar un PHP, pero siempre pueden asegurarse de que está correctamente actualizado. Desde mi experiencia, cuanto más caro es tu alojamiento, más rigurosos son con las actualizaciones del PHP (siempre que sea un entorno administrado). Muchos servidores baratos o de gama baja sólo actualizan su versión de PHP si se lo dices.

Analizando ciertos puntos de referencia de PHP es cuando te das cuenta de la importancia de este tema. Existen cambios o actualizaciones de PHP que pueden tener un impacto enorme, sobre todo cuando hablamos de PHP 7. El proceso de actualizar tu versión de PHP será diferente, en función de tu hosting. Inicia sesión en tu panel de control (cpanel o plesk normalmente) y busca “Configuración de PHP“. Si lo has hecho bien deberías ver un cuadro de selección que te permite alternar entre las distintas versiones del PHP. Siempre dependerá de qué versión sea la más estable, pero nunca estés muy por debajo de la última versión.

Antes de hacer ningún cambio, hay ciertos “peligros” que debes tener en cuenta antes de actualizar un PHP. El código de tu sitio web y tus archivos no van a desaparecer de forma repentina, pero si tiene estás funcionando un código muy antiguo, es posible que destapes problemas con los que no contabas. Si no estás seguro de qué hacer, asegúrate de preguntar a tu servicio de alojamiento si podrás volver hacia atrás o deshacer (downgrade) cualquier cambio que hagas si las cosas no salen bien.

#5.2 Actualiza el CMS

Este punto debería ser evidente, pero la realidad es que sigo viendo muchas páginas web y blogs con versiones de WordPres antiguas. La actualización de un CMS generalmente no proporciona un aumento impresionante de la velocidad de carga, pero si que solucionan problemas de seguridad. Un agujero en la seguridad del CMS puede terminar con un código malicioso inyectado en tu sitio web que puede destrozar el rendimiento, y hacer que las cosas vayan mucho más despacio.

Aparte, las actualizaciones del CMS tienden a optimizar el sistema, lo que permite escribir un mejor código. Como resultado de esta optimización tu base de datos será más ligera y sus consultas serán más rápidas, lo que se suele traducir en una mejora de la velocidad de carga a la larga.

Nota: No esperes mejoras de velocidad por pasar de la versión de WordPress 4.4 a la 4.5.

#5.3 Reduce solicitudes

Este tema te lo voy a explicar en detalle más abajo, en la sección avanzada, pero hay algunas cosas básicas que puedes ir haciendo para mejorar el tiempo de carga de tu web. En primer lugar, para averiguar cuántas peticiones hace tu página web o blog puedes utilizar algunas herramientas que te faciliten ese trabajo. Por ejemplo, puede ver las solicitudes desde las “Herramientas para desarrolladores” del navegador o utilizar una herramienta online como Pingdom Tools para obtener una buena visión del conjunto.

Es importante que entiendas que, cuando añades contenido a tu sitio web, aumentan las solicitudes ya que también añades imágenes y otros elementos multimedia. Básicamente, añades una petición por artículo. Si a esto le sumas una galería de fotos y añades que las 5 primeras imágenes se muestren también en las páginas de archivo, podríamos estar hablando de hasta 60-70 peticiones en una sola página o entrada.

Si eres fotógrafo, artista o simplemente alguien a quien le gusta la imagen (este soy yo) es probable que no quieras añadir un menor número de imágenes a tus entradas o páginas. En estos casos, una posible cura sería disminuir el número máximo de entradas a mostrar en el sitio o mostrar un menor número de imágenes en tus listas de archivos.

tutorial wordpress velocidad carga numero maximo entradas

En “Ajustes > Lectura” puedes configurar el número máximo de entradas a mostrar en el sitio web

Un segundo paso es evitar o eliminar aquellos plugins que afectan al front-end (lo que ves como usuario) del sitio web. Esto puede llegar a ser muy dañino para la velocidad de carga, ya que muchos plugins añaden sus propios estilos y scripts, por lo que notarás una mejoría en el rendimiento si los eliminas (dependiendo de la calidad del plugin, puedes llegar a ahorrar a tu servidor varias decenas de peticiones).

Cambiar la plantilla también puede ahorrar una gran cantidad de peticiones, aunque en muchos casos esta no sea una opción viable. Me he dado cuenta de que muchos themes, sobre todo aquellos que ofrecen montones de características en el mismo pack, tienden a sobrecargar de scripts y estilos innecesariamente.

El Lazy Loading o la carga diferida de imágenes es una herramienta muy potente que puede hacer que tu sitio web parezca más rápido. En realidad, no disminuye la cantidad de solicitudes, pero si la necesidad de cargarlas. La idea detrás de la carga diferida es que las imágenes que aparecen al final de la página no necesitan ser mostradas hasta que el usuario se desplaza cerca de las mismas.

A3 Lazy Load

mejores plugins wordpress carga diferida imagenes a3 lazy load
Gratis
Ir al plugin

BJ Lazy Load

mejores plugins wordpress carga diferida imagenes bj lazy load
Gratis
Ir al plugin

Lazy Load

mejores plugins wordpress carga diferida imagenes lazy load
Gratis
Ir al plugin
Otro buen método para disminuir las solicitudes es la concatenación (de la cual te voy a hablar en detalle en la sección avanzada). Entender este concepto es fácil, en vez de cargar 10 archivos Javascript por separado, puedes hacer lo mismo cargando 1 único archivo Javascript en el que pegas un archivo tras otro. Esto significa que, en lugar de descargar 10 archivos de un promedio de 20 kb cada uno, descargarías un único archivo de 200 KB, lo que resultaría en una carga mucho más rápida. Esto es bastante fácil de hacer cuando se codifica el sitio desde cero, pero mucho más difícil cuando ya existe o está en funcionamiento.

Dependency Minification

mejores plugins wordpress seo dependency minification
Gratis
Ir al plugin

Merge + Minify + Refresh

mejores plugins wordpress seo merge minify refresh
Gratis
Ir al plugin

MinQueue

mejores plugins wordpress seo minqueue
Gratis
Ir al plugin
Quiero conocer más plugins de WordPress
Nota: Estos plugins te ayudan automatizar el proceso, pero he tenido resultados mixtos cuando los he usado. Dales una oportunidad, si consigues que funcionen correctamente es posible que vea una reducción significativa de las solicitudes realizadas.

Aunque a mi, en particular, no me gustan los artículos o páginas con paginación, en algunos casos puede tener sentido dividir un artículo o página en varias páginas. Eso sí, y te lo pido por favor, no lo hagas sólo para aumentar páginas vistas. Hazlo si creas una megaguía de, por ejemplo, los mejores 500 hoteles del mundo con sus respectivas imágenes (puede ser una buena idea dividirlo en secciones de 50-100).

#5.4 Elimina plugins innecesarios

Todos los plugins son piezas de código que ayudan a realizar funciones que, de otra manera, sería difícil y costoso de hacer. Pero a veces complican más que ayudan y se convierten en contraproducentes. Ya sea porque no hacen su trabajo correctamente, porque entran en conflicto con otros plugins, porque sobrecargan el servidor o por lo que sea, es importante mantener a raya este tipo de plugins.

mejores plugins wordpress seo posicionamiento web p3 plugin performance profiler

P3- Plugin Performance Profiler es el plugin de Worpdress perfecto para detectar plugins que afecten a la velocidad de carga de tu sitio web

Aquí  es cuando entra en juego el plugin P3- Plugin Performance Profiler, que te permite detectar cuál de tus plugins están impactando en los tiempos de carga del sitio web. Con el informe que genera, serás capaz de identificar qué plugins están ralentizado la velocidad de carga de tu página web o blog. Si existe algún plugin que afecte al rendimiento de tu sitio web en exceso, es un buen momento de buscar y encontrar plugins alternativos.

mejores plugins wordpress seo posicionamiento web p3 plugin performance profiler

En “Herramientas > P3 Plugin Profiler” haz click en “Start Scan” y verás un informe con los tiempos de carga de los plugins de tu instalación WordPress

Otra opción es desactivar cualquier cosa que tengas instalada, pero que no utilices. Por ejemplo, yo uso a menudo plugins como Thumbnail Regenerator, Theme Check o P3. Si bien estos ofrecen un valor añadido cuando los usas, sólo los necesito en momentos puntuales. Cuando no los utilizo, los desactivo (de hecho, en muchas ocasiones los llega a eliminar por completo), para asegurarme de que no tienen impacto en el rendimiento del sitio web.

#5.5 Elimina elementos innecesarios

Existen muchos elementos de diseño y módulos (normalmente impulsados por JavaScript), de aspecto agradable pero que no tienen ningún sentido. Te voy a dar dos ejemplos.

El primer ejemplo tiene que ver con elementos frustrantes. Supón que tienes un menú de usuario que se despliega con una animación impactante cuando pasas el puntero del ratón sobre ella. Cuando un usuario lo ve por primera vez, va a pensar que “mola mucho”. Sin embargo, cuando ya lo haya usado varias veces, le resultará cada vez más molesto. Pregúntate una cosa ¿Por qué cualquier usuario debería esperar un segundo para que aparezca el menú?

Este problema lo causan, generalmente, los programadores y propietarios del sitio web, que no utilizan el sitio web de la misma manera que sus usuarios. Por ejemplo, cuando quieres iniciar sesión en WordPress, por lo general visitas “<code>/ wp-admin /</ code>”, pero tus usuarios, probablemente, usan el enlace de inicio de sesión que hay que hay en la cabecera. Por lo tanto, asegúrate de dar una experiencia de usuario fluida, y no una que simplemente se vea bien o bonita, ya que puede ser frustrante en el largo plazo.

Aparte del aspecto puramente visual (UX), tu sitio web mejorará su velocidad de carga. Es fácil de entender, ya que habrá menos elementos que animar y menos Javascript que cargar, lo que se traducirá en un sitio web más rápido o uno que parezca más rápido (que al final es lo mismo).

El segundo ejemplo tiene que ver con la eficiencia y la conversión. Mi ejemplo favorito es un elemento que se está empezando a poner de moda en las instalaciones WordPress: las sliders. Prácticamente cualquier investigación que se haga sobre el tema (aquí tienes una de Conversionxl) apunta a la misma conclusión: las sliders son simplemente horribles. Para que te hagas una pequeña idea, ocupan demasiado espacio web, tienen graves vulnerabilidades en seguridad, afectan a tu posicionamiento web y ralentizan la velocidad de carga del sitio web ¿Te siguen gustando las sliders?

Quiero hacer hincapié en el hecho de que, para una empresa, el objetivo de su página web o blog no es que se vea bonita. Hacerla más atractiva es una herramienta que se utiliza para lograr el verdadero objetivo: ganar dinero. Si después de hacer una investigación llegas a la conclusión de que la slider de la página de inicio está afectando al tiempo de carga de la web ¿No lo eliminarías si eso aumentará tus ingresos?

Lo ideal es que analices todos los elementos de tu sitio web y tomes algunas decisiones (aunque estas a veces sean duras) y que, en el camino, eduques a tus usuarios. Infórmate sobre ese tema en particular, haz tu propia investigación y, sobre todo, mide el resultado. Además, ten en cuenta que, aunque en algunos casos la eliminación total de ese elemento es lo correcto, siempre existe la manera de reemplazarlo. Puedes estar pensando que, retirar tu slider, puede hacer que tu tasa de conversión baje, pero a lo mejor no has pensado que, si la sustituyes con el texto plano y enlaces puede llegar a aumentar muy por encima del nivel al que estaba cuando había slider ¿Estás dispuesto a averiguarlo?

#5.6 Utiliza un CDN

Desde mi experiencia, el CDN o Content Delivery Network (Red de entrega de contenidos) es una herramienta perfecta para cualquier sitio web, ya que hace que todo sea mucho más sencillo y rápido. Hay dos razones principales por las que me encanta usar CDN: la primera es que permiten alojar imágenes en un servidor aparte y la segunda es que disminuyen los tiempos de carga de las imágenes. En resumen, te ayudan a mejorar el rendimiento de uno de los elementos que más lata da en una instalación web: la carga de las imágenes (aunque no es lo único).

Me gusta alojar las imágenes fuera del servidor de la instalación de WordPress, ya que libera el contenido. Puedo cambiar mi dominio o pasar de un hosting a otro, que mis archivos multimedia siempre estarán en el mismo lugar. Una base de datos y una plantilla que estén en la media pesarían alrededor de 10-25 Mb. Sin embargo, puede haber más de 2 GB de imágenes para transferir también. Si colocas esos 2 GB en otro servidor (u otros servidores), sólo tendrás que preocuparte de 25 Mb.

La idea detrás de un CDN es colocar los recursos solicitados lo más cerca del usuario, geográficamente hablando. Mi página web se encuentra alojada en algún lugar de París, y uso Amazon CloudFront (aunque también te recomiendo MaxCDN) como un CDN. Esto significa que, si alguien accede a mi sitio web desde México, puede recibir las imágenes desde un centro de datos de su continente (normalmente EE.UU.). Esto reduce los tiempos de transferencia, hops (número de routers /cortafuegos /etc. que los datos tienen que atravesar) y otros parámetros, lo que se traduce en un sitio web mucho más rápido.

#5.7 Activa la cache

El almacenamiento en caché es, probablemente, el mejor método para mejorar la velocidad de carga de tu sitio web y el que más alegrías te va a traer. La memoria caché la puedes entender con una simple analogía: ¿Recuerdas cuando aprendiste a sumar en la escuela? Necesitabas contar, físicamente, 5+4 (Para ello usabas los dedos o lo que tuvieses a mano). Hoy ya sabes la respuesta y conoces automáticamente e resultado: 9. Tu cerebro ha cacheado el resultado, asi que ya no es necesario que saques los dedos para contar.

Con los sitios web hay una vuelta de tuerca más, ya que el resultado de esa suma no siempre es el mismo. He aquí por qué: Imagina un sitio web que sólo muestra el nombre y el año actual. El contenido de ese sitio web sólo cambia una vez al año (cuando cambia el año). Sin embargo, cada vez que el servidor carga el sitio web calcula cuál es el año en curso. Lo que el cacheo o almacenamiento en caché hace es, esencialmente, guardar una copia HTML de la página web o blog por un tiempo determinado. En el ejemplo anterior podría configurar el caché para que caduque una vez al día. Esto significa que, una vez al día, la página web o blog se carga de forma habitual: se detecta una solicitud, el servidor procesa el código y devuelve el resultado en forma de HTML. Por último, guarda el HTML resultante en la memoria.

La próxima vez que alguien cargue el sitio web, la caché carga el código HTML de la memoria, en vez de pedírsela al servidor. Esto puede no parecer mucho, pero para un sitio web medio esto podría convertirse en varios segundos de ahorro en el tiempo de carga. Ten en cuenta que, lo que te acabo de explicar, es un sistema de caché completo para un sitio web, pero hay muchos otros tipos (es una profesión en sí misma). Por suerte, los que usamos WordPress podemos configurar un sistema de cacheo con bastante facilidad. Para ello te dejo los 3 mejores plugins para configurar e implementar la caché en tu instalación WordPress.

W3 Total Cache

mejores plugins wordpress almacenamiento cache w3 total cache
GRATIS
Ir al plugin

WP Rocket

mejores plugins wordpress almacenamiento cache wp rocket
GRATIS / 1 SITIO ($39) / 3 SITIOS ($99) / SITIOS ILIMITADOS ($199)
Ir al plugin

WP Super Cache

mejores plugins wordpress almacenamiento cache wp super cache
GRATIS
Ir al plugin
Quiero conocer más plugins de WordPress
Nota: Te aconsejo usar WP Rocket por su facilidad de uso, ya que podrás poner en marcha un sistema de cache en cuestión de minutos, y porque podrás ahorrarte un 20% con el código “ignaciosantiago20”.

Hay bastantes ajustes para cada plugin, asi que te recomiendo es leer detenidamente cada uno de los ajustes, para obtener el mejor rendimiento. Por si no sabes por dónde empezar, te dejo un tutorial muy bueno de un crack en estos temas, Miguel Floro.

Dicho esto, desde mi experiencia te digo que, simplemente utilizando la configuración básica, vas a lograr, al menos, el 80% máximo de mejora de la velocidad de carga, así que merece la pena cuanto antes, incluso si eres un novato o tienes pocos conocimientos.

También debes saber que puedes mejorar el sistema de almacenamiento en caché desde el servidor. Algunos servicios autogestionados de WordPress ofrecen almacenamiento en caché a nivel de servidor (que siempre será más rápido). Muchos de estos servicios de alojamiento no permiten instalar plugins de cacheo, ya que ralentizarían el sitio web.

#5.8 Optimiza la base de datos

Con el tiempo, tu base de datos adquiere cierto peso muerto que, por desgracia, es inevitable. Dentro de este peso hay 2 partes principales, los datos que no utilizas y el nivel de consumo de tu base de datos. Los datos que se usan pueden proceder de muchos sitios. Por ejemplo, aunque tengas soluciones (o plugins) personalizadas para eliminar usuarios (en el caso de un foro), tal vez no elimines los metadatos asociados a esos usuarios correctamente. Esto podría dejar cientos (o miles en algunos casos, dependiendo del tamaño del sitio web) de filas huérfanas en la base de datos (en definitiva, inservibles).

Limpiar todo esto no es difícil, pero es importante que aprendas, tanto a limpiar la casa, como a cuidarla. Lo primero que quieres hacer es buscar y eliminar los plugins que no uses o que no aporten nada. Este proceso es rápido, ya que tan sólo tienes que ir a “Plugins > Plugins instalados” y ver cuales están inactivos. Además, el plugin P3 te dará pistas de qué plugins están sobresaturando el servidor.

tutorial wordpress como eliminar plugin wordpress

Para eliminar un plugin dirígete a “Plugins > Plugins instalados” y haz click en “Borrar”

Pero esto no acaba aquí, ya que hacer click en “Borrar” es el primer paso, pero no el último. Remarco esto porque es importante que aprendas a meter comandos SQL en tu base de datos. Sé que puede sonar a chino, pero si sigues esta guía SEO te prometo que es muy fácil. Lo primero es acceder a tu base de datos, y si no recuerdas tu nombre de usuario y contraseña no te preocupes, ya que están almacenadas en el archivo wp-config.php. El código que estás buscando se parece a este:

Por ejemplo, en donde pone “nombredeusuario” estaría el nombre del usuario de base de datos, y donde pone “contraseña” la contraseña. Ahora tienes que acceder al panel de control phpMyAdmin, que está en la lista de opciones del panel de control Cpanel.

tutorial wordpress velocidad carga optimizar base de datos phpmyadmin

Accede a tu Cpanel y haz click en “phpMyAdmin”

tutorial wordpress velocidad carga optimizar base de datos phpmyadmin

Elige la base de datos que quieres optimizar o limpiar (mira en nombre en tu wp-config.php)

tutorial wordpress velocidad carga optimizar base de datos phpmyadmin

Haz click en la ficha SQL y escribe las consultas que quieras (aquí tienes unas cuantas) y, cuando hayas terminado, haz click en “Continuar”

Si terminas viendo un mensaje que dice que ninguna tabla se ha modificado, entonces felicidades, tus tablas ya estaban en buenas condiciones para esta tarea en particular. De todas formas, yo entiendo que esto no es fácil y que este tema puede sobrepasar a más de uno. Es por ello que te traigo una solución más fácil, para principiantes en el tema. Y esta solución no es otra que una serie de plugins que te permitirán hacer todo tipo de optimizaciones a la base de datos, sin ser un prodigio de las bases de datos.

Revision Control

mejores plugins wordpress optimizar base de datos revision control
Gratis
Ir al plugin

WP DBmanager

mejores plugins wordpress optimizar base de datos wp dbmanager
Gratis
Ir al plugin

WP Optimize

mejores plugins wordpress optimizar base de datos wp optimize
Gratis
Ir al plugin
Quiero conocer más plugins de WordPress
Por último, y para tratar tanto la limpieza de la base de datos como su posible sobrecarga, puedes utilizar una herramienta integrada en MySQL que se encarga de optimizar la base de datos de forma automática (Si conoces la desfragmentación del disco para los discos duros, es parecido). Sigue estos pasos a menudo y tu base de datos estará en perfectas condiciones para aguantar lo que la eches encima.

tutorial wordpress velocidad carga optimizar base de datos phpmyadmin

Accede a phpMyadmin, elige la base de datos, elige todos las tablas y optimizar la base de datos

tutorial wordpress velocidad carga optimizar base de datos phpmyadmin

El resultado es un informe de las tablas de la base de datos que se optimizado y las que no

#5.9 Optimiza las imágenes

Una parte de la optimización de la velocidad de carga de WordPress que se pasa por alto a menudo es la forma de gestionar las imágenes. Si simplemente siguieses unos simples pasos podrías conseguir, fácilmente, una mejora de la velocidad y, por ende, del posicionamiento web. Por ello debes tener bien presentes los siguientes plugins.

EWWW Image Optimizer

mejores plugins wordpress optimizar imagenes ewww image optimizer
Gratis
Ir al plugin

Imsanity

mejores plugins wordpress optimizar imagenes imsanity
Gratis
Ir al plugin

WP Smush

mejores plugins wordpress optimizar imagenes wp smush wmpu dev
Gratis
Ir al plugin
Quiero conocer más plugins de WordPress

Siempre que sea posible, lo mejor es tratar de automatizar la optimización de imágenes. Para que tengas una pequeña ayuda, voy a compartir contigo algunas de las herramientas de optimización de imágenes que suelo usar. Como normal general, ejecuta los optimizadores con más perdidas primero y después los que tienen menos pérdidas, así mejorarás el rendimiento. La mayoría de los desarrolladores se olvidan de que los optimizadores de imágenes optimizan un archivo en particular en vez de una imagen.

Nota: No tiene sentido optimizar el archivo de una imagen y luego cambiarla de tamaño, recortarla o cambiarla a otro formato, ya que todos los cambios realizados en ese archivo no habrán valido de nada y las optimizaciones se habrán perdido por el camino.

PNG

SVG

GIF

Nota: Te recomiendo encarecidamente que tengas jpegmini y tinypng siempre a mano.

#5.10 Desactiva el hotlinking

El hotlinking es quizás una de las prácticas más utilizadas y menos comprendidas por los bloggers. Aunque es una acción que no acelere tu sitio web directamente, sí que resta actividad a la carga del servidor, especialmente si tienes un sitio popular.

Todos sabemos que “compartir es bueno“, que “hay que enlazar” y todas esas cosas que hacen que la web sea hipertextual, hasta ahí de acuerdo. El problema viene con las imágenes. Cuando alguien usa una imagen tuya para ilustrar una publicación suya, si en vez de alojar la imagen en su servidor hace “hotlinking“, o sea, “Añadir … desde una URL“, algo que incluso tiene su pantalla al efecto en WordPress en el cargador de imágenes, está aumentando la carga de tu servidor sin saberlo (espero).

Entonces ¿Cómo puedo evitar que alguien robe los recursos de tu servidor? Muy fácil, para evitar que la gente haga hotlinking en los contenidos multimedia de tu sitio web necesitas hacer algunos retoques al código del .htaccess.

Si lo prefieres, puedes utilizar la herramienta htaccesstools.com para generar el código necesario, que después puedas agregar al archivo .htaccess de tu instalación WordPress. Normalmente, tu hosting debería poder ayudarle con esto.

Nota: Una vez que evites el hotlinking, podrás estar seguro de que los recursos del servidor no se consumen en un sitio web que no sea el suyo propio.

#5.11 Habilita la compresión Gzip

Realizar esta acción puede traducirse en una enorme mejora de velocidad de carga. La compresión gzip se encarga de comprimir varios activos antes de enviarlos a tu navegador para la fase de interpretación. Es algo que ha de configurarse en el servidor. Basta con que añadas este código a tu archivo .htaccess.

La razón por la que esta acción ayuda tanto al tiempo de carga de tu sitio web es porque el CSS y el HTML utilizan gran cantidad de contenido repetido. Cuantos más tenga tu contenido, mejor se pueden comprimir. Un ejemplo un poco rudimentario, pero con el que estoy seguro de que te quedará clarísimo el trabajo de la compresión gzip: Si tienes “Nacho es impresionante” 100 veces en el código de tu sitio web, podrías sustituir ese texto con “12d” y ahorrarías mucho espacio. Esta es la esencia de cualquier compresión y cuantos más patrones tengas, mayor compresión podrás lograr.

#5.12 Elige un hosting de calidad

La elección de un buen hosting es todo un arte y si no conoces bien el medio, puede convertirse en una apuesta al azar y en un error a medio-largo plazo. Aunque es una opción que te ofrecía en el capítulo 3, porque mi deber es informarte de lo que hay en el mercado, mi primera recomendación es que no uses un alojamiento compartido. Si recuerdas lo que te explicaba más arriba, este tipo de servicios de hosting, aunque son más económicos (ya que cuestan alrededor de 4€/mes), su servicio no es fiable, ya que tienden a bajar su rendimiento debido al uso excesivo de recursos por parte de otros usuarios que están en el mismo espacio.

Bluehost

mejores herramientas contratar hosting bluehost
Desde $3,95/mes
Ir a Bluehost

DigitalOcean

como elegir mejor hosting wordpress digitalocean
Desde $5/mes
Ir a DigitalOcean

DreamHost

como elegir mejor hosting wordpress dreamhost
Desde $7,96/mes
Ir a DreamHost

Hostgator

mejores herramientas contratar hosting hostgator
Desde $4,86/mes
Ir a Hostgator

SiteGround

elegir hosting wordpress siteground
Desde 3,95€/mes
Ir a SiteGround

Webempresa

mejores herramientas contratar hosting webmepresa
Desde 5,27€/mes
Ir a Webempresa
Nota: En caso de que quieras empezar por algo económico te recomiendo Webempresa, ya que tienen un servicio de soporte en español 24X7 bastante bueno.

Muchas veces se tiende a contratarlos por gastar lo menos posible, pero te advierto que es un error, porque traen más problemas que beneficios. Pagando un poco más tendrás un servicio de mucha más calidad, que mejorará la velocidad de carga de tu sitio web y su posicionamiento web (que es de lo que se trata). Si lo piensas, pagar de 20€ a 40€ al mes no es tanto. Si lo piensas, en el caso intermedio en 1€ al día, que no supone ningún desfalco bancario. Desde mi experiencia, te sugiero que no uses un alojamiento compartido a menos que sea absolutamente necesario o que no puedas permitirte un hosting de más calidad.

Asimismo, tampoco recomiendo contratar un alojamiento dedicado. Aunque es la mejor opción a nivel de rendimiento, necesitas amplios conocimientos para gestionarlo correctamente. Si lo contratas sin esos conocimientos, no vas a saber administrarlo y estarás totalmente perdido, sin poder sacarlo su potencial. Si tienes un sitio web tan popular y tiene tanto tráfico que necesita servidores dedicados, probablemente es el momento de contratar a alguien que sepa todo sobre su tecnología.

Básicamente sólo te queda 1 opción, y esa no es otra que el VPS. Si buscas bien puedes llegar a contratar un plan por 12€/mes, pero siempre depende de las empresas que ofrecen este tipo de servicios, por lo que te toca mirar detenidamente las características del servicio. En general, suelen costar alrededor entre 20€ y 50€ al mes. Los servidores VPS están (prácticamente) libres del “efecto vecino”, y también ofrecen más recursos y, con frecuencia, servicios adicionales como copias de seguridad, actualizaciones automáticas y mucho más.

Gigas

elegir hosting wordpress gigas
Desde 15,8€/mes
Ir a Gigas

Godaddy Pro

elegir hosting wordpress godaddy
Desde 36€/mes
Ir a Godaddy PRO

SiteGround

elegir hosting wordpress siteground
Desde $29/mes
Ir a SiteGround
Nota: Si estás buscando un servicio de alojamiento para WordPress de calidad, Gigas es una opción perfecta y muy buen de precio para lo que ofrece.

Otra opción es un servicio de hosting administrado especializado en WordPress. Este tipo de alojamiento ofrece se centra más en una instalación WordPress. En un VPS como los de antes puedes ejecutar cualquier aplicación que te guste, pero un alojamiento pensado 100% para WordPress, tan sólo debería permitirte instalar y ejecutar todo lo que tenga que ver con WordPress.

Factoría Digital

como elegir mejor hosting wordpress factoriadigital
Desde 14,95€/mes
Ir a Factoría Digital

Media Temple

elegir hosting wordpress media temple
Desde $20/mes
Ir a Media Temple

Webempresa

elegir hosting wordpress wpengine
Desde $29/mes
Ir a WP Engine
Nota: En este último caso te recomiendo el servicio de Factoría Digital. Aunque son nuevos, ofrecen un servicio a medida para WordPress que hará las delicias de cualquier instalación.

Como resultado, los servidores se construyen específicamente pensando en WordPress, con ciertas características que harán que tu página web o blog cargue muy rápido, ya que suelen venir, por ejemplo, con un sistema de almacenamiento en caché a nivel de servidor instalado y configurado y otras muchas ventajas. En definitiva, si el hosting especializado en WordPress, si está bien gestionado, puede llegar incluso a desactivar algunos plugins y temas que puedan estar ralentizando tu WordPress o estén dando problemas de seguridad.

#5.13 Monitoriza tu sitioweb

Monitorizar o hacer un seguimiento a tu sitio web no va a mejorar su tiempo de carga, pero te avisará cuando algo vaya mal y podrás solucionarlo a tiempo y con garantías, evitando perdidas de velocidad con el tiempo. Además, reaccionar a un problema de velocidad de carga antes de que llegue a ser notable es una gran manera de retener a tus usuarios.

GTmetrix

mejores herramientas seo analisis velocidad de carga gtmetrix
Gratis / Desde $14,95€/mes
Ir a GTmetrix

PageSpeed Insights

mejores herramientas online monitorizar web dominio monitis
Desde $6/mes
Ir a PageSpeed Insights

Pingdom Tools

mejores herramientas seo analisis velocidad de carga pingdom tools
Gratis / Desde 11,95€/mes
Ir a Pingdom Tools

#6 Pasos avanzados para mejorar la velocidad de carga de tu web

A los desarrolladores web les gusta culpar a los usuarios o propietarios de que la velocidad de un sitio web no sea todo lo rápida que debería. Hay, por supuesto, algo de verdad en esto, pero creo que muchos de esos desarrolladores escriben código, que es similar a mentir por omitir. Según ellos, técnicamente, el código no es defectuoso, no contiene errores y no ralentiza la carga del sitio web. Sin embargo, tampoco hacen mucho para mejorar esa velocidad o asegurarse de que se mantiene óptima en el tiempo. No suele haber ninguna maldad detrás de estas afirmaciones, tan sólo se trata de cómo ha sido desarrollado gran parte del código.

En esta parte de la guía voy a explicarte, ya seas desarrollador o no, algunas de las cosas que puedes hacer para asegurarte de que el sitio web funcione sin problemas y mantener a raya el rendimiento decreciente el mayor tiempo posible.

#6.1 Conoce las herramientas

Aunque pueda parecer una tarea sencilla, pocos desarrolladores entienden realmente su significado. No existe manera humana de saberlo todo acerca de algo tan grande como WordPress. Lo que sí que puedes hacer es detectar señales cuándo realizas la investigación. En pocas palabras: conocer tu oficio y seguir aprendiendo (de manera continua). Por ejemplo, ¿Alguna vez has tenido que sacar un gran número de metadatos para un post en particular? ¿Tal vez usando “get_post_meta ()” 20 veces se puede aproximar? Puede llegar a pensar que esto es un desperdicio, ya que estamos haciendo 20 solicitudes a la base de datos. He visto a personas utilizar la clase WPDB para obtener directamente todos los metadatos del post y funciones de matriz para reorganizar y conseguir esos metadatos. Aunque la intención es buena, está completamente fuera de lugar.

La primera vez que utilizas “get_post_meta ()” saca todos los metadatos por sí mismo y los almacena en caché. Las siguientes llamadas a un mismo post utilizarán los datos almacenados en caché, no a la base de datos. Antes de tomar cualquier decisión como la del ejemplo, asegúrate de consultar el Codex de WordPress y leer ampliamente sobre los acciones que vayas a llevar a cabo.

#6.2 Reduce solicitudes

Aquí voy de nuevo con el tema de las solicitudes, pero esta vez como desarrollador. Si la plantilla o plugins que utilizas en tu instalación de WordPress necesita kilómetros de Javascript y CSS, por favor, usa la concatenación. Personalmente, me gusta desplegar mis scripts y estilos en muchos archivos porque esto es mejor para el desarrollo. Para este trabajo, uso herramientas como Gulp, que me permite concatenar automáticamente todos los archivos. Esto, por lo general, se traduce en 1 hoja de estilo y 1 hoja de Javascript en lugar de docenas. La velocidad de la página web o blog lo va a notar mucho.

#6.3 Utiliza sprites

Otra herramienta que tienes a tu disposición y que es determinante son los sprites. Los sprites no son más que imágenes concatenadas. Por ejemplo, en lugar de cargar todos los iconos sociales por separado, se pueden combinar en una sola imagen y utilizar esa imagen como fondo, colocándola de una manera precisa para que sólo sea visible lo que necesitas. Twitter, por ejemplo, utiliza sprites, y se une a muchos más sitios web de gran tamaño que quieren ofrecer este tipo de propiedades user-friendly. En este sentido puedes usar Sprite PadSprite Me, ambos son herramientas perfectas para ayudarte a crear sprites de tu CSS. Cuando necesito crear un sprite suelo utilizar Stitches, una herramienta que te recomiendo, ya que te permite subir imágenes y las organizar y genera los estilos de forma automática.

Nota: Aunque los sprites del CSS son útiles, no son esenciales.

#6.4 Minifica los archivos

La concatenación y la minificación suelen ir mano a mano. Una vez que tengas los archivos finales del proyecto web es un buen momento para hacerlos los más pequeños (y ligeros) posible. Después de todo, tu navegador no necesita todos esos amables comentarios, espacios, saltos de línea, sangrías, ya que sigue siendo igual de feliz con una masa de código ilegible. También puedes usar Gulp para esta acción, pero hay muchas otras herramientas como Grunt y herramientas web para tareas específicas como la optimización de imágenes, minimización, etc.

#6.5 Carga los scripts en el footer

A menos que sea absolutamente necesario utilizar un script en el encabezamiento (header.php), asegúrate de que se carga en el pie de página (footer.php). Cuando utilices la función wp_enqueue_script () establece el quinto parámetro en true para poder cargar el script (secuencia de comandos) en el pie de página. Esto aumentará la velocidad aparente del sitio web. No disminuye el némero de solicitudes o el tamaño de los archivos, pero hace que el contenido más importante se cargue en primer lugar.

Nota: Si un script no funcionase correctamente, por la razón que sea, no impedirá que el contenido se cargue correctamente.

#6.6 Priorizar el contenido

También se puede dar prioridad a otro tipo de contenido, al igual que hacemos colocando los scripts en el pie de página. Por ejemplo, si el sidebar (barra lateral) contiene información relacionada, pero contenido que no es esencial (que probablemente debería serlo) puedes hacer que se cargue más tarde que el contenido principal. Esto no es siempre una buena opción, pero si te centras en cargar el contenido más importante cuanto antes, se va a traducir en un sitio web con una mejor apariencia en la rapidez de carga y que también posicionará mejor en Google.

#6.7 Deshabilita pingbacks y trackbacks

Los trackbacks y pingbacks de WordPress se utilizan para hacerte saber que alguien ha enlazado tu sitio web desde otra página web o blog. Los trackbacks son manuales y los pingbacks automáticos, y ambos terminan en la lista de moderación de tus comentarios. He de avisarte que, prácticamente, el 99% de todos los trackbacks y pingbacks son spam. De hecho, si empiezas recibir demasiados, la velocidad de carga de tu sitio web puede verse afectada. Para deshabilitarlos, dirígete a “Ajustes> Comentarios“, bajo predeterminado ajustes Artículo desactivar los pingbacks y trackbacks.

tutorial wordpress velocidad carga desactivar pingbacks trackbacks

Dirígete a “Ajustes> Comentarios” y desactiva la opción “

Nota: Siempre puedes utilizar el plugin WP SpamShield Anti-Spam para mantener a raya el spam.

#6.8 Utiliza tamaños apropiados de imagen

Cuando utilizas imágenes en tu instalación WordPress, este te permite especificar el tamaño de la imagen. Lo normal es que sepas lo grandes que van a ser las imágenes destacadas, los iconos, las miniatura, los avatares, etc. Si utilizas la funciónm add_image_size () puedes especificar el tamaño de esas imágenes. Esto significa que, cada vez que se carga una imagen, WordPress va a crear una copia de esa misma imagen en el tamaño que hayas establecido. Por ejemplo, si necesitas una imagen de 600×320px, deberíamos crear una imagen de ese tamaño exacto por 2 razones:

  1. Si creas una imagen más grande perderás ancho de banda y la velocidad de carga empeorará
  2. El hecho de cambiar el tamaño de una imagen, tanto si es más grande o más pequeña, requiere poder de procesamiento y disminuye la calidad de la imagen

tutorial wordpress velocidad carga ajustes tamaño imagenes

Dirígete a “Ajustes > Medios” y controla las dimensiones de las copias de las imágenes que crea WordPress

#6.9 Reduce y optimiza el número de consultas

Las consultas a la bases de datos pueden propiciar un empeoramiento significativo de la velocidad de carga debido, principalmente, al uso de la memoria. He trabajado en más de un proyecto donde se cayó el servidor tantas veces (debido a las consultas defectuosas) que el hosting llegó a desabilitar el sitio web temporalmente. Hay dos puntos a tener en cuenta aquí. Por un lado disminuir las consultas y, por otro, optimizarlas. Eso sí, no me refiero a la optimización que te he explicado en la sección de los pasos básicos. En este caso una optimización puede suponer aumentar (en vez de reducir) el número de consultas para sustituir un recurso que tenga un alto consumo.

En primer lugar, en WordPress evita consultas sin procesar a la base de datos. Hay cientos de funciones a tu disposición para conseguirlo, ya sean entradas, comentarios, taxonomías personalizadas o metadatos. Si necesitas escribir una consulta personalizada, asegúrate de usar la clase WPDB para una seguridad y eficiencia máxima. Trate de evitar la unión de tablas y otras cosas complejas ya que, en muchos casos, es mejor usar dos consultas individuales (que serán mucho más rápidas).

Existen un montón de herramientas para averiguar si todas las consultas que se ejecutan durante una petición y si están bien escritas. Para ello te recomiendo utilizar el plugin Query Monitor, añadir “define(‘SAVEQUERIES’, true)” a tu archivo de configuración (wp-config.php) y obtener todas las consultas a través de “$wpdb->queries“. También tienes la opción de añadir al log las consultas MySQL más lentas. Esto suele estar activo en la mayoría de los hosting, aunque siempre puedes hacerlo tu mismo o pedir al servicio de soporte que lo haga por ti. Puede encontrar más información sobre este tema en la web de MySQL.

#6.10 Coloca el CSS arriba y el Javascript abajo

Las referencias del CSS deben ir en la parte superior derecha. Los navegadores no cargarán el contenido antes de haber leído el archivo CSS. De otro modo, podrías hacer que tu página se viese, durante unos segundos, sin estilos (un horror, te lo aseguro) y sin una carga progresiva. Si no me haces caso y colocas el archivo CSS cerca del final, el navegador tiene que volver a dibujar todos los elementos de tu sitio web, el cual acabará ralentizando el tiempo de carga.

El JS (o Javascript) es relegado a la última posición, ya que evita la carga en paralelo en el navegador, lo que significa que es la única cosa que se carga. Además, la carga progresiva se bloquea si hay un script por encima del contenido. Para asegurar que todo el contenido se cargue de forma progresiva tienes que poner los scripts al final. Seguro que alguno esta pensando en los plugins gratuitos de caché, pero ya te digo que ellos tampoco logran hacer esto correctamente. Para ello puedes utilizar uno de esos plugins de caché junto con Autoptimize. De todas maneras, te aviso que, a veces, las cosas tienden a romperse y no aconsejaría esta opción a alguien que no sea capaz de meterse en un servidor a arreglar un problema. Si prefieres que lo hagan por ti, prueba WPRocket.

#6.11 Utiliza hooks de activación, desactivación y desinstalación

Muchas de las cosas que hace un plugin, en realidad no es necesario hacerlas en cada petición: Crear funciones adicionales, regenerar reglas de reescritura, añadir tablas personalizadas a la base de datos, etc son sólo algunas de ellas. Mi consejo es que las unas en una función de activación, que sólo se ejecutará cuando se active el plugin. Esto reduce el procesamiento, lo que permitirá una mejora de la velocidad de carga.

Por otra parte, debes asegurarte de eliminarlas cuando se desactiven y retirar por completo algunos de sus componentes, utilizando hooks desactivación y desinstalación. Esto ayuda a que la base de datos de WordPress permanezca virgen, lo que retrasa el momento en que se ralentizará debido al exceso de recursos. Cuando esto sucede, lo que a veces es inevitable, una simple optimización será suficiente para hacer que las cosas vuelvan a funcionar de nuevo.

#6.12 Utiliza plugins sociales ligeros

Los botones sociales para permitir compatir tu contenido en las redes sociales son imprescindibles para cualquier sitio web y deberían formar una parte importante de cualquier estrategia de marketing online. Sin embargo, a veces, los propietarios o desarrolladores del sitio web no lo piensan bien e implementan demasiadas opciones, lo que no sólo molesta a los usuarios, sino que ralentiza la web. Mi consejo personal con este tipo de plugins para compartir en los medios sociales es que sea lo más sencillo posible. Aquí te dejo mis plugins favoritos.

Easy Social Share Buttons

mejores plugins wordpress botones sociales easy social share buttons for wordpress
$19
Ir al plugin

Floating Social Bar

mejores plugins wordpress botones sociales floating social bar
Gratis
Ir al plugin

Social Sharing

mejores plugins wordpress botones sociales social sharing danny
Gratis
Ir al plugin
Quiero conocer más plugins de WordPress

El plugin Floating Social Bar, por ejemplo, no se carga hasta que el usuario realmente mueve el cursor sobre el botón de acción social (el cual es una réplica). Social Sharing by Danny tiene un tamaño de 50 KB, el cual es increíblemente bajo y hace que todo vaya mucho más rápido. Por último, el plugin Easy Social Share Buttons, aunque no es nada ligero, es el que yo uso debido a la larga lista de opciones que ofrece (entre ellas, muchas de las que hemos visto en esta guía), ya que no todo es optimizar, también hay que pensar en los usuarios.

#6.13 Aprende y edúcate a ti mismo

Sí, es cierto que, tanto los clientes, como los usuarios en general, hacen sus propios sitios web lentos, pero es más un factor para educarles y enseñarles. Por ejemplo, crear documentación para el usuario final puede ayudar a que el sitio web siga siendo rápido, además de que aumenta la satisfacción del cliente e incluso la reducción de la carga de trabajo en el largo plazo. Céntrate, específicamente, en aquellos aspectos que pueden causar problemas, tales como el uso adecuado de los plugins, no instalar 24 herramientas de analítica a la vez (muy habitual), etc.

Mejora la velocidad de carga de tu web hoy mismo

Son muchas las ventajas de tener una página web o blog optimizada y con una velocidad de carga rápida, no sólo porque podrás mejorar tus estadísticas haciendo que los usuarios se sientan cómodos permaneciendo en tu sitio web, sino que además mejorarás tu posicionamiento web al ser mejor valorado por Google. So lo miramos desde la perspectiva del marketing, tener un sitio web que cuyo funcionamiento sea eficiente es una buena forma de potenciar la imagen de tu marca y mejorar tu credibilidad. Y por si eso fuera poco, cachear tus páginas es también muy eficaz a la hora de liberar recursos en tu servidor.

De todas maneras me gustaría hacer hincapié, aunque ya lo habrás observado a lo largo de la guía, que, aunque una velocidad de carga óptima es muy importante, no lo es todo. Si lo llevásemos al extremo, también podrías eliminar las imágenes por completo (porque ocupan mucho espacio y ralentizan la carga) y no utilizar estilos y JavaScript. Esto podría reducir el tiempo de carga varios milisegundos, pero ¿Te ayudaría a algo que a ganar una carrera de velocidad? Ten siempre en cuenta cuál es el objetivo de tu sitio web.

mejorar velocidad de carga wordpress analisis gtmetrix

Análisis en GTmetrix del dominio ignaciosantiago.com

Mi blog de marketing online saca una nota bastante buena, pero no la mejor. Y eso que tengo un servidor dedicado, con un sistema de cache con varnish implementado, a lo que hay que añadir un CDN en MaxCDN  y Amazon Cloudfront (en el futuro sólo el segundo). Aún así la velocidad se resiente ¿Por qué? Muy fácil, porque hay otras cosas que son claves para mí. Por ejemplo, en mi página web yo utilizo un plugin de botones sociales (Easy Social Share Buttons), que no es recomendable si llevamos al extremo esta tipo de optimización, pero yo necesito una solución que me permita configurar, a medida, cada una de las redes sociales.

Completa guía para analizar y mejorar el tiempo de carga de tu #blog de #WordPress Click to Tweet

Te puedo decir mil cosas más, pero el objetivo va a ser el mismo: usar lo que realmente necesites tu pero, sobretodo, tus usuarios. Al fin y al cabo tu sitio web se dirige a una audiencia, y es en ella en quien tienes que fijarte para poner o quitar ciertos elementos. Prueba a preguntar a tus lectores si el nuevo popup o la nueva opción para hacer lo que sea les gusta, te sorprenderás. A lo mejor te das cuenta de que estás ofreciendo cosas que no hacen falta, y puedes invertir tiempo y esfuerzo en añadir otras opciones.

Si necesitas alguna opción o plugin en tu instalación WordPress que es crítica para tu sitio web y esta ralentiza el tiempo de carga, busca otra opción o trabaja en mejorar la que tienes.

Si sigues mi guía para mejorar la velocidad de carga de Worpdress, pagarás menos costes de alojamiento y este estará mejor optimizado. Al fin y al cabo, lo que persigo es que tengas una instalación limpia, rápida y segura. Lo demás casi viene sólo. Espero que te haya gustado mi guía y que la recomiendes a tus amigos y familiares. Me ha costado mucho tiempo hacerla, pero ha merecido la pena cada minuto que he invertido. Por último, como entiendo que puede quedarte alguna duda o pregunta, por favor, baja un poco más y deja tu comentario, estaré encantado de atenderlo.

¿Te ha gustado el contenido? Valóralo

 
Volver al anterior capítulo
Subir al índice
Ir al siguiente capítulo

Guía para crear, diseñar, gestionar, optimizar y rentabilizar un blog

Volver al principio
Nota: Los capítulos tienen un orden concreto pero, si quieres saltar directamente a alguno de ellos, haz click sobre el icono. Una vez que hayas superado y dominado cada uno de los capítulos de mi guía para crear un blog de éxito, podrás crear, diseñar, gestionar, optimizar y monetizar tu propio blog. Si necesitas ayuda durante el proceso, por favor, ponte en contacto conmigo en cualquier momento. También dispongo un servicio de diseño para blogs y una selección de las mejores herramientas para bloggers.