3 optimizaciones básicas para que tu WP cargue más rápido

velocidad de carga lenta
Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Facebook0Email this to someone

A mi también me ha pasado: necesitas un blog funcionando en tiempo record y lo haces a toda mecha. Y cuando te quieres dar cuenta, resulta que tu flamante nueva web tarda la vida entera en cargarse… Lo ideal es que la carga no supere los 2s pero según subí el backup y metí el theme elegido el resultado fue:

Te voy a contar las 3 cosas que me propuse hacer para mejorar la velocidad de carga de este blog, en el poquito tiempo que tenía:

  • Activar la compresión gzip
  • Activar un sistema de caché para WordPress, escogí Hypercache
  • Reducir las peticiones al servidor

Qué es la compresión gzip y como activarla

La compresión gzip consiste en forzar al servidor de tu web a comprimir los ficheros para que ocupen menos cuando alguien navegue por a tu web. Igual que cuando comprimes archivos para enviarlos por email. Para habilitarla lo único que necesitas son ganas, un editor de texto (el notepad vale) y acceso por FTP al servidor de tu web:

  1. Accede via FTP a tu servidor y en la raíz (donde esté el index.html/.php) busca el archivo .htaccess. Si existe descárgalo y abrelo con tu editor de texto.Si no tuvieras el archivo, desde el editor de texto crea un archivo nuevo y después lo salvas como .htaccess (así, con el punto tal cual y sin extensión).
  2. Si hubiera alguna configuración en él, no la borres. Lo normal es que si es un WordPress tuvieras esto:


    # BEGIN WordPress
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    # END WordPress

    Y tienes que añadir las siguientes líneas para comprimir archivos html, textos, javascript, css y xml:

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript

    O también podrías comprimir sólo aquellos archivos que creas conveniente, añadiendolos así:

    setoutputfilter-deflate

  3. Sube el archivo al servidor y sobreescribe la anterior versión
Atención, mantén siempre a salvo una copia del .htaccess original por si la pifias con algún espacio o carácter no deseado: el servidor colapsa y no sirve la web. Subes la copia de seguridad y una vez que esté OK, vuelves al principio o a revisarlo al detalle.

Más información [en inglés] sobre cómo funciona la compresión gzip aquí

Y aquí el resultado:

ganamos 3,5s con gzip

Mejorando el rendimiento con un sistema de caché: Hypercache

Empecemos por el principio, la definición de Caché Web de la Wikipedia reza:

Se llama caché web a la caché que almacena documentos web (es decir, páginas, imágenes, etcétera) para reducir el ancho de banda consumido, la carga de los servidores y el retardo en la descarga. Un caché web almacena copias de los documentos que pasan por él, de forma que subsiguientes peticiones pueden ser respondidas por el propio caché, si se cumplen ciertas condiciones.

WordPress es un sistema de gestión de contenidos (CMS) en el que todo dato (post, página, comentario,etc…) se guarda en una base de datos.

Cuando un usuario llega a un artículo por ejemplo, pide esa URl al servidor y éste se encarga de consultar la base de datos para crear la página. Lo que hace un sistema de caché como el plugin Hypercache es hacer todas las consultas antes de que el usuario las pida, para generar archivos fijos: así nos ahorramos el procesamiento del servidor.

No voy a entrar a la configuración del plugin, pero para notar la diferencia podeis incluso dejarlo todo por defecto y ver que vuestra web usa ya el turbo:

Hypercache rapidisisimo!

Reduciendo las peticiones al servidor

En las imágenes anteriores he dejado la información de las puntuaciones, pero pingdom también te da el detalle de qué archivos se van cargando, cuanto tardan en llegar las peticiones, en servirse y verse por el usuario.

antes y después de optimizar la velocidad web

Antes: tiempo de carga 5s, de los cuales 3,6 son solo para empezar a servir archivos.

Después: menos de 1s, y empieza a cargar en décimas de segundo

Al igual que con las consultas a la base de datos, cualquier acción que tenga que hacer el servidor ralentiza la carga de la web. Así que es posible mejorar la velocidad programándola de esa forma y debería ser una práctica standard en todo desarrollo web.

Como no tengo apenas tiempo y esta es una web personal, he omitido este paso: si tienes tiempo, necesidad o recursos te lo aconsejo.

La siguiente lista es una recomendación general de lo que se puede hacer:

  • Los tamaños o comprimir las imágenes es algo ultra-básico, pero son errores que suelen verse a menudo: fotos a alta resolución que luego se ven pequeñas…¡súbelas al tamaño final! ¡Comprímelas con photoshop o el editor que uses!
  • Agrupar todas las imágenes en 1 solo archivo, conocido como sprite: si usamos esta técnica, la apariencia será la misma y ahorramos tantas peticiones como imágenes cargues en tu web (menos una claro).
  • Lo mismo puedes hacer con los archivos CSS, Javascript,etc... Pueden condensarse en un único archivo por cada tipo= menos peticiones. También hay plugins y webs que te hacen todo ese trabajo casi automáticamente, busca por “minify + el tipo de arhivo a “comprimir”.
  • Como punto final: reduce las peticiones “a mano”.

    Esto también debería ser una buena práctica, pero como las plantillas de WP las hacen para que la gente no tenga que saber nada de programar…pues hay campos para que los usuarios puedan añadir información de forma fácil: otra(s) consulta(s) más a la base de datos y trabajo extra que tendrá que hacer el servidor.

    Esto ocurre mucho por ejemplo con los pies de página: el típico texto de “Copyright @ 2013 de Empresa.com blablablabla…” Eso es un desperdicio porque es información estática e igual en todas las páginas de tu sitio web.

    La solución: editar las plantillas de tal forma que el servidor tenga que trabajar lo mínimo. En parte esto se soluciona usando Hypercache, pero cuando el servidor crea los archivos, se nota. En una página con 200 visitas al día te va a dar igual, pero cuando sean 20.000 puede marcar la diferencia entre que el proyecto sea rentable o no…

Espero que te haya sido útil, ánimo y al toro :D

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Facebook0Email this to someone

7 comentarios a “3 optimizaciones básicas para que tu WP cargue más rápido”

  1. Gracias por compartir esta información. Te quería preguntar que tester utilizas para la medición de velocidad, gracias!

    David - Marketing Online 17/10/2013 en 12:50
    • Hola David, creo que en el post queda bastante claro cual es la herramienta usada pero por si alguno se perdió es: http://tools.pingdom.com/fpt/ y también suelo usar http://gtmetrix.com/ aunque esta hace los tests desde Canadá y solo sirve para comparativas e ir mejorando (me parece mejor que la herramienta de Pingdom).

      Por cierto, este blog está abierto a opiniones y comentarios pero para enlazar a mi competencia ya la enlazo yo si me apetece :)

  2. ¡Gracias por el tutorial!

    Pepetolete 16/05/2014 en 14:24
  3. Pablo, soy lo suficientemente novato como para hacer esta pregunta tranquilo.

    ¿Es posible que cada una de estas 3 optimizaciones que comentas (y que seguro que funcionan) no funcionen en determinadas páginas web?

    Por ejemplo, páginas diseñada a medida (y “caras”) y no temas gratuitos de WordPress o incluso algunos comprados.

    En una diseñada a medida he probado las 3, en todas sus combinaciones, y en mi caso juraría que ninguna de ellas me ha venido bien. Sin embargo, en temas gratuitos o comprados, si que me ha sido muy útil.

    • David, aquí se puede preguntar lo que se quiera, que nadie nace “enseñado”.

      De las tres cuestiones que planteo, se pueden implementar en cualquier web aunque no use WordPress, siempre y cuando el servidor sea Apache (es el standard para Linux y el 95% de los hostings es lo que proveen) o sistema similar (si lo hay que no soy experto en sistemas).

      Es decir que en una web hecha a mano o que no sea WP lo único que no vas a poder hacer de un click es usar el plugin Hypercaché, nada más. La compresión gzip y reducir las peticiones al servidor son cosa de configuración del .htaccess en el caso de gzip y del html/css de la web, en el caso de las peticiones.

      PD: todo lo que hace Hypercaché o cualquier otro plugin de cacheado sea para WP u otro CMS, lo puedes configurar a mano en el servidor/htaccess, pero da como mínimo para otro artículo…que podré escribir en cuanto el curro y mis hijas me den algo de margen :P

  4. Hola ya lo hice y aumentó la velocidad pero todavía está un poco lento ¿qué recomiendas para eliminar el javascript?

    gracias, nos vemos, un abrazo

    Andrea

    • Hola Andrea, eliminar lo que se dice eliminar no deberías al 100%, pero comprimirlo, aunar todos los archivos .js en uno solo (al igual que en el caso de los css) es una medida que aportará velocidad, básicamente porque reduces peticiones al servidor o incluso a servidores externos. Si tienes la gran mayoría de cosas más importantes ya optimizadas (caché, minimo posible de peticiones, gzip, orden de carga, imágenes y archivos comprimidos al máximo), entonces yo me iría a comprobar la calidad/velocidad del hosting, pero ante todo ser autocrítico y evaluar qué factores hemos pasado por alto que hagan nuestra web tan lenta… A veces es cuestión de eliminar peso (imágenes principalmente) o de darles otro enfoque a nivel de diseño para reducir peso total de la web y/o peticiones, consultas lentas,etc…).

Deja un comentario

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

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies