Cómo reducir el tiempo de carga de WordPress (2 ejemplos reales)

Autor: Max Camuñas

Fecha: 06/06/2017

Lo prometido es deuda. La semana pasada te contaba cómo optimizar tu web o blog para mejorar su velocidad de carga paso a paso y te prometía que en el próximo post explicaría cómo reducir el tiempo de carga de WordPress con dos ejemplos reales.

Este post se compone de dos partes:

  1. ¡Optimiza tu web o blog! Cómo mejorar la velocidad de carga de WordPress
  2. Cómo reducir el tiempo de carga de WordPress (2 ejemplos reales) 

En el primer post me centraba en los factores que afectan en la carga de un sitio web, las herramientas para medir su velocidad, los plugins que utilizo para reducir el tiempo de carga de WordPress y en cómo comprimir imágenes para disminuir su peso y tamaño.

Hoy me toca poner en práctica todos esos consejos y herramientas, en concreto en los blogs de dos de mis clientas, para qué veas cómo funciona el proceso completo de optimización de WordPress.

Por lo tanto, te voy a explicar paso a paso los plugins que voy instalado, la velocidad de carga con cada una de las acciones y especialmente los resultados finales tras todo el proceso.

Además, he seleccionado dos proyectos que requieren de una gran cantidad de imágenes en sus posts: un blog de moda y otro de viajes.

 

Reducir el tiempo de carga de WordPress (ejemplo 1): Cuélate en mi vestidor


Cuélate en mi vestidor es un blog de moda, streetstyle y nuevas tendencias. Como puedes imaginar, en ese tipo de blogs las imágenes son fundamentales y en cada una de sus entradas su autora sube una media de diez.

cuelateenmivestidor.com

De modo que ¡empezamos!

 

1. Datos antes de la optimización

Reducir el tiempo de carga de WordPress (ejemplo 1): Cuélate en mi vestidor

Analizando los primeros datos que muestra Pingdom, puedes ver que los resultados no son del todo malos:

  • Grado de rendimiento: 68 de 100 (según el nivel de rendimiento de Google PageSpeed).
  • Tiempo de carga: 3.50 segundos. Una cifra que considero alta. Todo lo que esté por encima de 3 segundos hay que intentar reducirlo.
  • Tamaño de la página: 5.2 MG.
  • Solicitudes a servidores externos: 143 llamadas.

 

2. Plugins que tiene instalados el blog

Ahora es el momento de revisar qué plugins tiene instalados el blog antes de la optimización:

  1. Aviso de Cookie
  2. CPO Shortcodes
  3. Force Regenerate Thumbnails
  4. Optimize Database after Deleting Revisions
  5. Redux Framework
  6. Smooth Scroll Up
  7. W3 Total Cache
  8. WP Google Fonts
  9. WP Instagram Widget
  10. WP Smush
  11. WP-SpamShield
  12. Yoast SEO

En total, 12 plugins instalados. En realidad no es una cifra alta.

¿Qué datos arroja el análisis de los plugins instalados?

En primer lugar, que cuando diseñé el blog, ya dejé instalado algún que otro plugin para reducir el tiempo de carga de WordPress, como WP Smush y Optimize Database after Deleting Revisions.

En segundo lugar, que hay plugins como WP Instagram Widget o WP Google Fonts, que son los que realizan muchas solicitudes a otros servidores.

Y en tercer lugar, que hay algunos que vamos a sustituir, como es el caso de W3 Total Cache.

 

3. Instalación de WP Rocket

Lo primero que hago es desactivar y eliminar W3 Total Cache para sustituirlo por WP Rocket para la optimización de los archivos HTML y las Google Fonts.

Reducir el tiempo de carga de WordPress (ejemplo 1): Cuélate en mi vestidor

Hecho esto, vuelvo a analizar el blog con Pingdom y ya puedes ver cómo he conseguido reducir el tiempo de carga de WordPress casi un segundo.

 

4. Instalación de BJ Lazy Load

El siguiente paso es instalar el plugin BJ Lazy Load para que las imágenes carguen bajo demanda (carga perezosa), es decir, que no carguen hasta que el usuario vaya desplazándose por la página y necesite visualizarlas.

Reducir el tiempo de carga de WordPress (ejemplo 1): Cuélate en mi vestidor

Tras instalar este plugin, analizo de nuevo la página y ahora puedes ver como el tiempo de carga ha bajado un poco más, hasta los 2.28 segundos.

 

5. Instalación de WP-Optimize

Es el momento de llevar a cabo optimización de la base de datos, limpiar las revisiones de entradas antiguas o eliminar los comentarios de la carpeta spam con el plugin WP-Optimize.

Reducir el tiempo de carga de WordPress (ejemplo 1): Cuélate en mi vestidor

Y tras estas acciones, el resultado es…

Reducir el tiempo de carga de WordPress (ejemplo 1): Cuélate en mi vestidor

Por lo tanto, el tiempo de carga ahora mismo está en 2.17 segundos y todavía me queda una acción por ejecutar.

 

6. Instalación de WPO Alejandro Novás

Para terminar, instalo el plugin WPO para reducir las cadenas de código sobrantes.

Vuelvo a analizar el blog y ya he acabado el proceso completo de optimización para reducir su tiempo de carga.

 

7. Resultado final

Reducir el tiempo de carga de WordPress (ejemplo 1): Cuélate en mi vestidor

En resumen, tras todo este proceso he conseguido reducir el tiempo de carga de WordPress de forma muy considerable, pasando de los 3.50 segundos iniciales hasta los 1.95 de ahora.

Además, ha mejorado el rendimiento de Google PageSpeed, pasando de 68 a 73, se ha reducido el tamaño de la página en 1MB y ha descendido el numero de peticiones a otros servidores (de 143 a 117).

 

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers


Pekebikers es el blog de Ana y Laura, dos mamás que comparten experiencias viajeras con su público, otros papás con hijos, a los que dan consejos y recomendaciones para viajar con bicicleta y en familia.

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

¡Empezamos!

 

1. Datos antes de la optimización

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

Los primeros datos de Pingdom muestran que los resultados tampoco son del todo malos:

  • Grado de rendimiento: 88 de 100 (según el nivel de rendimiento de Google PageSpeed).
  • Tiempo de carga: 2.61 segundos. También, es mejorable, pero aceptable para ser un blog prácticamente sin optimizar.
  • Tamaño de la página: 5.4 MG, un peso considerable.
  • Solicitudes a servidores externos: 204 llamadas, un número que hay que intentar bajar.

 

2. Plugins que tiene instalados el blog

Aquí puedes ver los plugins que tiene instalados este blog antes de la optimización:

  1. Akismet Anti-Spam
  2. Aviso de Cookie
  3. BackWPup
  4. CPO Shortcodes
  5. Instagram Feed
  6. Monarch Plugin
  7. TinyMCE Advanced
  8. WP Rocket
  9. WP Smush
  10. Yet Another Related Posts Plugin
  11. Yoast SEO

Un total de 11 plugins, una cifra pequeña.

Como puedes ver, ya dejé instalados un par de plugins para reducir el tiempo de carga de WordPress cuando rediseñé el blog hace unos meses (WP Rocket y WP Smush). Después te cuento más sobre esto.

 

3. Compresión de las imágenes

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

La primera tarea que realizo para reducir el tiempo de carga de WordPress es comprimir con WP Smush las imágenes pendientes, en este caso 32.

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

Una vez comprimidas esas 32 imágenes, vuelvo a analizar el blog con Pingdom y ya se ha reducido un poco el tiempo de carga: de 2.61 a 2.39 segundos.

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

 

4. Plugins de caché

Llegados a este punto, quiero hacer una prueba (más aún).

En concreto, voy a desactivar WP Rocket, para que veas como el tiempo de carga se dispara hasta los 6.05 segundos.

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

Ese era el tiempo de carga medio (incluso mayor) cuando hice el rediseño del blog hace unos meses.

Como no podía dejar esa espantosa cifra y entregarle así el blog a las clientas, instalé WP Rocket.

Antes de pasar al siguiente paso, una prueba más.

Ahora vuelvo a activar WP Rocket e instalo también BJ Lazy Load, que es como lo tengo configurado en este blog y lo que he hecho en el primer ejemplo:

  • WP Rocket para la optimización de los archivos HTML y las Google Fonts.
  • BJ Lazy Load para la carga de las imágenes

Y el resultado es…

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

Con la combinación de estos dos plugins ¡el tiempo de carga vuelve a aumentar!

Es decir, la combinación que me funciona muy bien en este blog, no sirve para un blog que tiene una cantidad de fotografías mucho mayor.

Entonces, vuelvo a desinstalar BJ Lazy Loady dejo WP Rocket como único plugin de caché para todos los tipos de archivos.

 

5. Instalación de WP-Optimize

Después de los jueguecitos con los pugins de caché, es el momento de limpiar y optimizar la base de datos, para lo cual instalo en plugin WP-Optimize.

Tras optimizar las tablas de la base de datos, limpiar todas las revisiones de entradas, limpiar la papelera de posts, los comentarios spam o los pingbacks, el tiempo de carga se ha reducido más.

Recuerda desactivar este plugin, pues recomiendo activarlo siempre que quieras optimizar tu base de datos y volverlo a desactivar cuando lo hayas hecho.

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

Ahora ha pasado de 2.39 a 2.23 segundos.

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

 

6. Instalación de WPO Alejandro Novás

Por último, instalo el plugin WPO de Alejandro Novás para eliminar las cadenas innecesarias de código.

Reducir el tiempo de carga de WordPress (ejemplo 2): Pekebikers

 

7. Resultado final

El blog ha pasado de 2.61 a 1.90 segundos, por lo que se ha cumplido el objetivo de reducir el tiempo de carga de WordPress.

También hay que tener en cuenta que ya estaba instalado WP Rocket antes del análisis, y que, cuando lo he desactivado, la velocidad de carga se ha disparado a más de 6 segundos.

[piopialo vcboxed=»1″]Aprende a reducir el tiempo de carga de WordPress con 2 ejemplos reales[/piopialo]

Hasta aquí estos dos ejemplos reales para enseñarte cómo reducir el tiempo de carga de WordPress. Espero que te haya sido muy útil y consigas mejorar la velocidad de tu web o blog 😉

32 Comentarios

  1. RaMGoN

    Muy buenas pruebas y muestras Max.

    ¿Has probado con algún CDN?

    Responder
      • RaMGoN

        Pues con Cloudflare la verdad es que los resultados son buenos, después de algunas de las acciones que tu aplicas servir todo el tráfico desde un CDN aligera más todavía la cosa. Todo es cuestión de probar.

        Responder
        • Max Camuñas

          Oye, pues me lo apunto en mi lista de tareas pendientes. Gracias por la recomendación 🙂

          Responder
  2. José Antonio Carreño

    Muy buen artículo, Max. ¡Felicidades!

    Tengo que probar ese WP Rocket, ya que veo que funciona bastante bien. Yo a día de hoy utilizo WP Super Caché porque de los que he probado funciona bastante bien y no da ningún problema de incompatibilidad.

    Cuando lo pruebe ya te contaré. 🙂

    ¡Un abrazo, crack!

    Responder
    • Max Camuñas

      Hola Jose 🙂

      Nooo, WP super caché no jaja

      Prueba WP Rocket y quedarás encantado. Si quieres que te lo pases para probarlo, avísame 😉

      Un abrazo!

      Responder
      • José Antonio Carreño

        ¿Tanto odio le tienes al WP Super Caché? jajaja! No sé, a mi me funciona bien. Naturalmente, estamos hablando de un plugin gratuito frente a uno de pago. Diferencia habrá seguro. 😉

        ¡Un abrazo enorme!

        Responder
        • Max Camuñas

          No no, odio ninguno jaja

          Pero cuando pruebas uno de pago, ya sabes…

          ¡Un abrazo!

          Responder
  3. Ruben Mañez

    Muy interesante Max y muy curioso lo que en un blog si que te ha funcionado (la combinación de WP Rocket y Lazy Load) en otro no tiene por qué funcionar igual de bien.

    Una de mis tareas pendientes es mejorar mi velocidad de carga, así que me lo pongo de tarea pendiente y me obligaré a escribir un post sobre ello y así seguro que me pongo al lío ?

    Un abrazo!

    Responder
    • Max Camuñas

      ¿Has visto que curioso?

      Esto es una muestra de que para casi nada existe una fórmula mágica.

      Si necesitas ayuda cuando te pongas con ello, avísame 😉

      Un abrazo!

      Responder
      • Rubén Mañez

        ¡Totalmente de acuerdo!

        Es igual que una estrategia para un blog, la estrategia que utiliza una persona para conseguir visitas/suscriptores no tiene por qué servir para otra persona o no en el mismo nivel.

        Cada persona un mundo = cada blog un mundo jajaja

        Muchas gracias Max te avisaré si me hago un lío 🙂

        Un abrazo!

        Responder
    • José Antonio Carreño

      Rubén tiene razón. No todo funciona igual en todos sitios, ya que depende mucho de lo que cada web tenga instalado, el hosting etc.

      De hecho, yo en su día quité el Lazy Load porque me daba problemas de visualización en algunos elementos del diseño (claro, también es cierto que estoy hablando de que los problemas eran con Thrive Content Builder, que últimamente falla bastante…jejeje!)

      ¡Saludos!

      Responder
      • Max Camuñas

        Qué le pasa a Thrive Content Builder? No eres el primero al que se lo escucho jaja

        Responder
  4. Mario GJ

    No había oído hablar del plugin WPO de Alejandro.
    Parece que dan buen resultado.
    Supongo que después de usarlo también es recomendable quitarlo igual que el optimice no??
    Buen post!!

    Responder
    • Max Camuñas

      Hola Mario,

      Creo que si lo desinstalas deja de cumplir su objetivo. Yo lo tengo instalado.

      Gracias por pasarte!

      Responder
  5. Sergio Albillo

    Genial Max! Conozco y utilizo todos ellos, salvo WP Rocket. Vengo usando en mis desarrollos WP Super Caché, pero lo probaré para ver la diferencia. Gracias, un abrazo!

    Responder
    • Max Camuñas

      Hola Sergio 🙂

      WP Rocket es un plugin en el que merece la pena invertir, sin ninguna.

      Ya me contarás cuando lo pruebes.

      Gracias por pasarte!

      Responder
  6. Javier Sanz

    Puestos a optimizar por qué no empiezas por las imágenes. Solo la imagen de perfil que aparece a la derecha (http://www.pekebikers.com/wp-content/uploads/2014/08/Foto-Perfil.jpg) pesa ¡¡¡1 Mb!!! es una imagen de 2500×2379 y se muestar con una anchura de 250px. Reduciéndole el tamaño y guardándola correctamente se podría dejar en 13Kb, y no es el único ejemplo, ya que he localizado en una primera batida imágenes de entre 1000 y 1200 píxeles de ancho cuando se muestran por la plantilla es de 614px.
    Igualmente habría que tratar de corregir las redirecciones 301 de los posts que han cambiado de ruta, eliminar los nombres de archivo con ñ para evitar errores 404, …
    Además como consejo, habría que buscar el modo de insertar los feeds de twitter y facebook de otro modo para reducir el altísimo número de peticiones. A mi particularmente para facebook me gusta el plugin Recent Facebook Post, que te permite elegir el número de entradas a recuperar, y además al dejarlas cacheadas en bbdd no conecta contra facebook lo que te permite ahorrar peticiones y personalizar el diseño para que se integre más con la página.
    Un placer leerte

    Responder
    • Max Camuñas

      Muchas gracias por tus consejos Javier 🙂

      Muy valiosos! Saludos

      Responder
      • Javier Sanz

        No hay de qué! Me parece justo devolver los favores…
        Veo que ya has aplicado alguno de ellos y has reducido más de un mega en la web actual
        Un saludo

        Responder
  7. José Manuel Peña

    Buena prueba Máx. No hay una fórmula mágica pero sin duda algunos son medio universales. Para mi web me falto por probar el Cdn y wp rocket que me quedo con la duda de si mejoraria me carga.He parado porque la velocidad es como el diseño, nunca sabes cuando parar jaja.

    Responder
    • Max Camuñas

      Hola José Manuel,

      Te recomiendo probar WP Rocket, 100%.

      Ya verás como bajas más aún la velocidad de carga.

      Tienes toda la razón, esto engancha jaja.

      Gracias por pasarte!

      Responder
  8. Luis

    El resultado no es del todo mal, pero con WP Rocket podrías haber mejorado un poco más y también tendrías que haber probado con optimizar las imágenes, quitar las Google Fonts o instalarlas en el propio servidor, así reduces todavía más el tiempo de carga.

    Responder
    • Max Camuñas

      Hola Luis,

      WP Rocket lo uso siempre, es uno de mis plugins imprescindibles, y las imágenes también están optimizadas 😀

      Tienes razón con lo de las Google Fonts. Me lo guardo para otro post.

      Saludos!

      Responder
  9. Jesús Abalos

    Hola Max..
    Pienso que es interesante compartir mi experiencia con este post.
    Gracias a los Plugins mencionados en este post ( Wp Optimize y WPO) ha subido el Pagespeed de mi blog de un 87 a un 96 en GTMetrix, así como ver reducidos los tiempos de carga y demás, con lo que aprovecho para indicar la veracidad y validez de estos consejos y darte las gracias por ayudar a aquellos usuarios, que como yo, estamos empezando con nuestros sitios webs.
    Un abrazo y continúa con este gran trabajo!!

    Responder
    • Max Camuñas

      Hola Jesús,

      Muchas gracias por confirmar y verificar mis consejos.

      Me encanta ver cómo os sirven para mejorar a las personas que estáis empezando.

      Un abrazo!

      Responder
  10. Leire

    Hola, me ha encantado este artículo. Muy útil la verdad, enhorabuena.
    ¿Podrías por favor indicarme cuál es en concreto el plugin WP Rocket? Me aparecen varias opciones y no sé cuál es la que tu sugieres.

    Muchas gracias de nuevo!!

    Responder
    • Max Camuñas

      Hola Leire,

      Te dejo la web oficial de WP Rocket: wp-rocket.me/es

      Saludos

      Responder
  11. Veronica

    Muchas gracias Max por compartir de modo tan detallado tu trabajo. Muchos existos. Saludos desde Italia.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Soy Max Camuñas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseño de su web desde cero.

¡MÁS SOBRE MÍ!