Comprimir CSS y JS con .htaccess [mejorar tiempo de carga]

Comprimir con .htaccess
Usar .htaccess para comprimir

Continuamos explicando algunas mejoras que hacemos como Consultores SEO a nuestros servidores para mejorar la experiencia de uso y con ello, por supuesto, vamos a mejorar también el posicionamiento en buscadores y otros aspectos como el bounce rate y la estancia en el sitio.

Recuerda también que publique una serie de consejos o tips sobre rendimiento que seguramente te vendrán muy bien si estás trabajando en WPO.

Comprimir estilos CSS

En esta ocasión vamos a ver como habilitar la compresión de estilos CSS y la de imágenes haciendo uso del fichero .htaccess (por supuesto estamos hablando de servidores apache). Los beneficios que vamos a obtener de esto son:

  1. Menor peso de nuestros estilos
  2. Menor peso de nuestros javascripts.
  3. Menor peso de de nuestras páginas web.

Por tanto el tiempo de carga de nuestros dominios va a decrecer y con ellos nuestros usuarios se sentirán más cómodos y los buscadores nos podrán un poquito más arriba, por lo menos hace tiempo que google anunción su voluntad de añadir la velocidad de carga entre los cientos de parámetros que afectan a la posición de los resultados de búsqueda.

.htaccess para comprimir estilos

Para comprimir los estilos de nuestro sitio web deberemos añadir unas líneas como las que se muestran a continuación:

<Files *.css>
SetOutputFilter DEFLATE
</Files>

.htaccess para comprimir javascript

<Files *.js>
SetOutputFilter DEFLATE
</Files>

Método para comprimir todo menos las imágenes

Ahora os vamos a mostrar una configuración para .htaccess que  hará que nuestro servidor apache muestre todo comprimido. Lo haremos usando el comando AddOutputFilterByType y tenemos que indicarle luego el tipo de compresión y el tipo de medio que deseamos comprimir.

Ejemplo para comprimir texto plano:

  • AddOutputFilterByType DEFLATE text/plain

Ejemplo para comprimir html

  • AddOutputFilterByType DEFLATE text/html

Ejemplo completo que comprime css,xml,javascript,x-javascript y otros muchos archivos

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

Donde pone DEFLATE podríamos poner GZIP, podemos elegir cualquiera de ellos. Pero Deflate es bastante rápido y compatible con más versiones de navegadores antiguos, por tanto os aconsejamos este último.

Comprimir con GZIP

Para ello necesitaremos tener instañado el módulo gzip en nuestro apache.

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file \.html$
mod_gzip_item_include file \.php$
mod_gzip_item_include file \.css$
mod_gzip_item_include file \.js$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include handler ^application/x-httpd-php
mod_gzip_item_exclude mime ^image/.*
</IfModule>

Aprende más sobre optimización del rendimiento

Te dejo una serie de artículos sobre WPO que te ayudarán a mejorar el rendimiento de tu web.

Aprovecha los comentarios

En todos los años que esta entrada lleva publicada muchos visitantes que han dejado en los comentarios sus preguntas y yo o ellos mismos se las han respondido. Seguramente si tienes alguna duda encontrarás allí la solución o de lo contrario no dudes en comentar para preguntar o dar tu opinión y ayudar a la comunidad.


Conoce mis servicios WPO.



Servicios personalizados para profesionales, agencias y PYMES

15 comentarios en “Comprimir CSS y JS con .htaccess [mejorar tiempo de carga]

  1. Hola muy buenas, que diferencia hay entre:

    mod_gzip_item_include handler ^application/x-httpd-php
    mod_gzip_item_include handler ^cgi-script$

    O cual es la mejor opción.

  2. Hola Juan, en mí .htaccess tengo este código:

    AddType font/opentype .otf

    AddType font/eot .eot

    AddType font/truetype .ttf

    SetOutputFilter DEFLATE

    SetOutputFilter DEFLATE

    AddOutputFilterByType DEFLATE text/plain

    AddOutputFilterByType DEFLATE text/html

    AddOutputFilterByType DEFLATE text/xml

    AddOutputFilterByType DEFLATE text/css

    AddOutputFilterByType DEFLATE text/javascript

    AddOutputFilterByType DEFLATE application/javascript

    AddOutputFilterByType DEFLATE application/x-javascript

    AddOutputFilterByType DEFLATE application/xml

    AddOutputFilterByType DEFLATE application/xhtml+xml

    AddOutputFilterByType DEFLATE application/rss+xml

    AddOutputFilterByType DEFLATE font/truetype

    AddOutputFilterByType DEFLATE font/opentype

    AddOutputFilterByType DEFLATE font/eot

    En pageSpeed me dicen: “Comprimir recursos con gzip o con deflate puede reducir el número de bytes enviados a través de la red”. Y las sugerencias son relativas a los js, css y la propia página.

    Tengo el módulo deflate activo en el servidor. Qué puedo hacer para solucionarlo?

  3. Madre mía que jaleo, no se explican las cosas paso a paso, ¿donde se meten esos códigos?, en cualquier archivo html de nuestra web?, en fin… que se lo que quiero, lo que no se es como. xD

  4. He seguido los pasos indicados en este tutorial y la web deja de funcionar, no se si hay que poner algo mas aparte del texto indicado o es que hago algo mal.

  5. Para hacer corractamente esto se tienen que tener conocimientos de .htaccess. Por otro lado en el posts pongo varias opciones, imagino que no las habrás usado todas a la cvez ¿verdad?

  6. Por más que pongo el código en .htaccess PageSpeed Insights no me la reconoce como comprimida mientras que otras webs de compression test dicen que sí lo está. El problema es que quien interesa que la reconozca es Google. ¿Alguna idea?

  7. Buenos dias

    Coloqué exactamente este codigo como pusiste

    mod_gzip_on Yes
    mod_gzip_item_include file .html$
    mod_gzip_item_include file .php$
    mod_gzip_item_include file .css$
    mod_gzip_item_include file .js$
    mod_gzip_item_include mime ^application/javascript$
    mod_gzip_item_include mime ^application/x-javascript$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include handler ^application/x-httpd-php
    mod_gzip_item_exclude mime ^image/.*

    y hablando con los que gestionan el servidor (Arsys) me comentaron que el modulo gzip y defalte estan instalados. Lo que no tengo opcion de PHP ya que en esta web no necesito php ya que es pequeña. El modulo instalado en el .htaccess no funciona.

    El codigo completo del htaccess es el siguiente:

    DirectoryIndex index.htm
    ExpiresActive On
    ExpiresByType text/css “access plus 3 month”
    ExpiresByType text/javascript “access plus 3 month”
    ExpiresByType text/html “access plus 1 month”
    ExpiresByType text/htm “access plus 1 month”
    ExpiresByType application/javascript “access plus 3 month”
    ExpiresByType application/x-javascript “access plus 3 month”
    ExpiresByType application/xhtml-xml “access plus 600 seconds”
    ExpiresByType image/gif “access plus 1 month”
    ExpiresByType image/jpg “access plus 1 month”
    ExpiresByType image/png “access plus 1 month”
    ExpiresByType image/x-icon “access plus 1 month”

    mod_gzip_on Yes
    mod_gzip_item_include file .htm$
    mod_gzip_item_include file .css$
    mod_gzip_item_include file http : // www .aloevera-tienda .es/css/base.css$
    mod_gzip_item_include file http : // www .aloevera-tienda .es/css/estilos.css$
    mod_gzip_item_include file http : // www .aloevera-tienda .es/css/contenido.css$
    mod_gzip_item_include file http : // www .aloevera-tienda .es/css/contBarCh.css$
    mod_gzip_item_include file .js$
    mod_gzip_item_include mime ^application/javascript$
    mod_gzip_item_include mime ^application/x-javascript$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include handler ^application/x-httpd-php
    mod_gzip_item_exclude mime ^image/.*

    Gracias y si pudieras ayudarme lo aqgradeceria

  8. estoy usando tu codigo de gzip para comprimir y me funciona bien pero creo entender en tu codigo que excluyes las imagenes segun google estas tambien debo comprimirlas
    ¿serviria modificar mod_gzip_item_exclude mime ^image/.* por
    mod_gzip_item_include mime ^image/.*?

  9. ¿Cómo que lío? “¡El título lo dice! El problema es que os metéis a hacer cosas que desconocéis, a aplicar recetas sin molestaros en dedicarle un solo minuto a aprender las nociones mínimas.

    “Qué lío” lo dice sólo el que no sabe.

  10. Page Speed a veces falla… Si lo estas comprobando y es que se sirve comprimido será que está bien

  11. Tengo el siguiente problema:
    Actualmente está WordPress en la raid, y la tienda online (Prestashop) en un directorio /tienda y tengo el problema que cuando se accede a un artículo /tienda/__________ (artículo) lo trata como si fuera la página de wordpress saliéndome un error; y lo que quería es que todo lo que venga de /tienda no lo tocara wordpress.
    Gracias por adelantado.

  12. Normalemente suele estar la tienda en la rais y el blog en /blog. De todas formas no debería pasarte lo que me cuentas salvo que tengas alguna configuración mal.

  13. Tengo un hosting contratado en Egalan, y estaba a punto de cabrearme porque en el pagesspeed de google me marcaba 51 y metiendo esto al htaccess me indica 98 .

    se nota la diferencia Vuelaaaa

    guauuu muchas gracias!!

  14. Buenas tardes Juan Luís.

    He aplicado estas modiciaciones en mi htacces, comprimiento el css y el js.

    Funciona muy bien.
    Gracias por compartir tu conocimiento.

    Saludos
    Josep Ma.

Deja un comentario

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