Tag Archives: Wordpress

velocidad de carga lenta

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

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

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