Comprimir CSS y JS con .htaccess [mejorar tiempo de carga]
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:
- Menor peso de nuestros estilos
- Menor peso de nuestros javascripts.
- 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:
[sociallocker id=»5570″]
<Files *.css>
SetOutputFilter DEFLATE
</Files>
.htaccess para comprimir javascript
<Files *.js>
SetOutputFilter DEFLATE
</Files>
[/sociallocker]
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
[sociallocker id=»5570″]
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.
[/sociallocker]
Comprimir con GZIP
Para ello necesitaremos tener instañado el módulo gzip en nuestro apache.
[sociallocker id=»5570″]
<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>
[/sociallocker]
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.
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.
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?
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
Pues en el mismo título lo poner en el .htaccess
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.
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?
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?
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
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/.*?
¿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.
Page Speed a veces falla… Si lo estas comprobando y es que se sirve comprimido será que está bien
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.
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.
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!!
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.