Acelera tu blog a tope usando el fichero .htaccess

En alguna ocasión te he hablado de cómo mejorar la velocidad de carga de tu web, con algunos trucos y consejos, pero hoy te quiero contar como acelerar un blog usando .htaccess.

El motivo es que la mayoría de las formas de acelerar un sitio web y mejorar su velocidad de carga, suele ser a través de servicios de terceros, plugins o con configuraciones complejas.

Pero hay una serie de consejos básicos, como habilitar la compresión de los ficheros o gestionar la cache que te van a ayudar a mejorar ligeramente la velocidad de carga de tu blog.

¿Que es .htaccess?

Lo primero es lo primero, por lo que es fundamental saber bien dónde vamos a tocar para acelerar tu blog usando .htaccess.

.htaccess es un fichero de configuración especial, normalmente en el root de tu servidor web, usado por apache o nginx (el software de tu servidor web) para poder gestionar tus directorios, accesos, redirecciones, etc.

También podremos encontrar este fichero en subdirectorios de nuestro servidor web.

Pero el que nos interesa es el que esta directamente en la raíz y es el que usaremos para llamar a funciones de apache que nos servirán para mejorar la carga de nuestra web.

En mi caso, al ser mi servidor Webempresa, usare el que esta en mi raíz, llamado public_html

¿Cómo activamos .htaccess en WordPress?

Es bien sencillo, como vas a comprobar ahora mismo.

Si estás usando enlaces permanentes amigables para el SEO (y deberías usarlos), por ejemplo %postname%, ya estás usando .htaccess y tendrá este aspecto:

# BEGIN WordPress

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

# END WordPress

Los ajustes necesarios para acelerar un blog usando htaccess

Comenzamos con los ajustes.

Lo primero de todo, como siempre, es realizar una copia de seguridad del fichero, por si acaso algo dejara de funcionar.

Además, muchos de estos ajustes también los realizan plugins de caché, pero en todo caso no suele haber conflicto, solo que no notarás un cambio espectacular.

Y que estos cambios afectarán a los ficheros de tu web, que están en tu servidor. Pero si «llamas» a ficheros externos, como javascript de Facebook, o similares, estos no se verán afectados.

Truco #1. Activar la compresión Gzip

Cada respuesta que tu servidor de, debería ir «gzipped» o comprimida, antes de mandarla a tus visitantes. De esta forma la compresión Gzip ayuda a reducir la cantidad de datos que son enviados, lo que ahorra en ancho de banda y acelera la carga de tu web.

Normalmente la diferencia entre una web que utiliza gzip o no, es del 50-70% del ahorro de ancho de banda.

Si quieres, puedes probar si ya lo tienes activo y cuanto ahorro te supone, usando esa herramienta online: checkgzipcompression.com

Esta captura veis el resultado probando mi blog:

Acelerar un blog usando htaccess y gzip

Y ahora, si quieres esta funcionalidad en tu blog, solo tienes que insertar estas líneas al final de tu fichero .htaccess:

mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

A continuación, guarda tu fichero de nuevo en el servidor. Si quieres probar, puedes usar la herramienta de antes.

Hay varias formas de activar Gzip en tu servidor, dependiendo si usas apache, nginx, etc. En cualquier caso, estas líneas deberían valer para cualquier sistema.

Si no te funciona, probablemente ya tengas Apache2 y te venga mejor este código. Elimina el anterior y prueba este:

AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype

Truco #2. Acelerar un blog usando htaccess para configurar los tiempos de expiración y cabeceras de la caché

Si analizas tu sitio con Google PageSpeed o alguna otra herramienta de optimización, probablemente te advierta sobre que debes usar la caché del navegador para mejorar la velocidad.Acelerar un blog usando htaccess y pagespeed

El motivo de esto es que cada vez que alguien vista tu web, tiene que descargar los ficheros javascript, css, html, etc. de tu web, cuando esto solo es necesario la primera vez.

Puedes ahorrar mucho tiempo y peticiones al servidor si estableces que se use la caché del navegador para esto.

Así si un usuario vuelve a u sitio, este será más rápido porque muchas de las cosas las tendrá ya cargadas.

Pero es importante fijar un tiempo prudente de expiración, para que esos ficheros caduquen y vuelvan a ser descargados.

Si no no se visualizarán los cambios que hagamos a esos ficheros (si publicas un nuevo post, sí que se verá).

Este tiempo es flexible y se puede cambiar según el tipo de web que tengas, pero en la mayoría de los casos nuevamente te servirá este código:

# BEGIN Expire headers

ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"

# END Expire headers

Al igual que antes, pega este código al final de tu fichero.

Y con este código, que añadimos también al final, lo que hacemos es gestionar las directivas por las cuales se controlan y modifican las peticiones y respuestas HTTP en las cabeceras de los ficheros.

# BEGIN Cache-Control Headers

<filesmatch ".(ico|jpe?g|png|gif|swf)$"="">
Header set Cache-Control "public"

<filesmatch ".(css)$"="">
Header set Cache-Control "public"

<filesmatch ".(js)$"="">
Header set Cache-Control "private"

<filesmatch ".(x?html?|php)$"="">
Header set Cache-Control "private, must-revalidate"

# END Cache-Control Headers

¿Que más puedo hacer con .htaccess?

Pues es una herramienta bastante poderosa y ¡ya sabes que el poder conlleva responsabilidad!

Puedes crear redirecciones o manipular las URL de tu web, además de mejorar también la seguridad de tu blog y ganar unos puntos de posicionamiento web.

¿Quieres disparar las visitas de tu web o tu blog?

mockup-masterclass-SEO copy

Aumenta tu tráfico y mejora el posicionamiento de tu web con esta clase gratuita sobre SEO que Dean Romero ha preparado para ti.

Accede ahora a las 3 lecciones y empieza a transformar los datos de tu cuenta de Analytics hoy mismo.

Si quieres ir sabiendo más, le puedes echar un vistazo a esta web: Htaccess file overview

Y ya sabes que si no te atreves con estos cambios o lo técnico no es lo tuyo, puedes contar con mi ayuda para que me haga cargo de todos estos aspectos de tu web. ¡Échale un vistazo a mi servicio de mantenimiento para blogs!

¿Sabías que a través del fichero .htaccess puedes acelerar la velocidad de tu blog? ¿Lo has intentado y estás atascado? Estoy a tu disposición en los comentarios. ¡Pregúntame lo que quieras! 😉

10 comentarios en “Acelera tu blog a tope usando el fichero .htaccess”

  1. Hola Javier,

    tanto la compresión de imágenes como de toda la página es una herramienta / recurso muy interesante para cualquier tipo de sitio, tanto si es un blog, como si es una tienda online.

    De esta forma al reducir los tiempos de carga cuando hay más tráfico de la cuenta, el lector no tiene que esperar esos 3-4 segundos más quea veces parecen eternos.

    1. Totalmente cierto Juanjo. Esos 3-4 segundos son la diferencia con que el usuario se vaya o no!

      Así que usar todos los recursos disponibles es casi obligatorio, pero este es que es casi uno básico!

      Un abrazo.

  2. Muy buena entrada Javier. Yo hago estas optimizaciones a través de W3 Total Cache o WP Super Cache, pero está bien saber hacerlo así también.

    Al hilo de la entrada te comento una cosa a ver si me puedes ayudar. Estoy intentando agregar el Vary Accept-Encoding header a través de htaccess y no consigo…
    Añado este código al final del fichero:

    Header append Vary: Accept-Encoding

    Pero nada. ¿Sabes algo de esto?
    Gracias. Un abrazo

  3. Hola Joana. Efectivamente la mayoría se hace desde W3 Total Cache y similares, pero ahí tenemos una opción más si como yo además integras WordPress con HTML «de toda la vida».

    Para lo que comentas, imagino estas poniendo todo el código completo:


    Header append Vary: Accept-Encoding

    Este debe servirte y funcionar si usas Apache. Si solo usas nginx debes usar
    gzip_vary on

    Algún problema con un CDN??
    Un abrazo.

    1. Gracias Javier por contestar. El código lo pegué mal, el que estoy intentando usar es este (teóricamente debería funcionar):

      Header append Vary: Accept-Encoding

      No hay problema con el CDN, lo he desactivado por si acaso y no tiene que ver, a ver si encuentro solución.
      Abrazo

      1. Ahora que me doy cuenta, es que no me deja pegar el código, he quitado los tags:

        IfModule mod_headers.c
        FilesMatch «.(js|css|xml|gz)$»
        Header append Vary: Accept-Encoding
        /FilesMatch
        /IfModule

        1. Efectivamente no me di cuenta que a mi mismo me paso.

          Ese es el código que te comento debe funcionar. A no ser que no sea Apache.

          Un saludo.

          1. Sí es Apache, tengo la web en cuestión en Webempresa. No sé porque no funciona, tampoco parece ser ningún conflicto con el plugin de cache. Seguiré investigando. Gracias de todos modos. Un abrazo

Los comentarios están cerrados.

Acceso gratuito
a la Academia de
Hormigas en la Nube

+20 cursos disponibles sobre herramientas, marketing y ventas

Por tiempo limitado estoy regalando el acceso a la librería de recursos de la Academia de Hormigas en la Nube.

Cursos de ActiveCampaign, Elementor, Beaver Builder, WordPress, Copywriting, ventas, email marketing y más te estan esperando dentro. Disponible gratis por tiempo limitado.

Mockup escritorio herramientas
Ir arriba