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

Cuando termines este post te recomiendo seguir con: SEO Prestashop, SEO Magento, Penalizaciones Google y Auditoría SEO Precio.

Si buscas servicios completos de Marketing Online te invito a conocer mi nuevo proyecto en Jlmora Consultor de Marketing Online.


Etiquetas de este post: htaccess, WPO,

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
  • 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>

    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Í


    Conoce mis servicios SEO.

    Si buscas hosting con el mejor rendimiento y especializado en SEO pulsa aquí


    SEO Freelance


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

    Si buscas servicios completos de Marketing Online te invito a conocer mi nuevo proyecto en Jlmora Consultor de Marketing Online Alli podrás conocer mis servicios como onsultor de Marketing Online y reservar una charla gratuita en la que hacer una primera toma de contacto.

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

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

    12. 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!!

    13. 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 una respuesta

    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.