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.

[-] Indice de contenidos
  • Comprimir estilos CSS
  • .htaccess para comprimir estilos
  • .htaccess para comprimir javascript
  • Método para comprimir todo menos las imágenes
  • Comprimir con GZIP
  • Aprende más sobre optimización del rendimiento
  • Aprovecha los comentarios
  • 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.

    ¿Con ganas de aprender más? Conóceme y sigue mis perfiles sociales AQUÍ.

    También puedes conocer mis servicios:.

    Servicios SEO


    Servicios personalizados como Consultor SEO Freelace para profesionales, eCommerce, agencias y PYMES

    15 comentarios

    1. David Ortega

      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. Antonio

      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. Jhonatan

      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. Jesús de Blas

      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. jlmora

      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. Aitor

      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. carlos

      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. racso

      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. autocompletado

      ¿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. jlmora

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

    11. Javier

      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. jlmora

      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. Anita

      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. Josep Maria

      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.

    Dejar un comentario

    Tu dirección de correo electrónico no será publicada.

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.