+34 638350949info@seoparaweb.es

Cómo aumentar la velocidad de carga con compresión de CSS/JAVA y Gzip

Comprimir el código CSS y JS y otros archivos con GZIP aumenta la velocidad de la web y mejora el SEO

La velocidad de una página web es un factor muy importante para el posicionamiento web y la usabilidad.

Google da mayor relevancia a los sitios rápidos, cuya carga no tarde más de unas décimas de segundos (basándonos en conexiones de banda ancha), ya que su objetivo es siempre ofrecer la mejor experiencia al usuario.

La velocidad de carga se debe a muchos factores, tales como el peso de las descargas desde el servidor (código, fotos, vídeos, etc.), el número de llamadas al servidor, las llamadas a apis externas, etc.

Podemos analizar cada uno de estos factores a través de herramientas muy válidas y gratuitas, tales como GT Metrix y Pingdom Tools, que dan una nota a la página web que queremos analizar en base a todos los factores de WPO (Web Performance Optimization) y muestran detalladamente el rendimiento de cada aspecto de la web, y cómo mejorarlo.

Hoy nos centramos especialmente en cómo comprimir los archivos CSS y Javascript, y también minificar los HTML y PHP, para que tengan el menor peso posible, favoreciendo la velocidad de carga de un sitio web.

COMPRESIÓN DE CSS Y JS

Uno de estos factores, como decíamos, es el código.

Seguramente todos los que hayan manejado un poco de código se habrán dado cuenta de que contiene cantidad de espacios en blanco y notas, que hacen que cada archivo .css o .js sea de mayor tamaño en Mb de lo que podría ser.

Existen herramientas online que harán el trabajo por nosotros: borrarán todos los espacios y caracteres innecesarios de un archivo .css o .js para devolvernos una versión normalmente llamada “min”, de mucho menor tamaño.

http://www.minifycss.com/css-compressor/

mi favorito, permite elegir distintas opciones y el grado de compresión (4 niveles de muy alto a bajo)

http://refresh-sf.com/yui/

utiliza YUI Compressor y puede comprimir tanto CSS como JS

http://cssminifier.com/ ; http://javascript-minifier.com/

muy sencillo de utilizar.

COMPRESIÓN DE HTML Y PHP

Minimizar el código HTML o PHP de una página no es una operación tan sencilla, ya que se está tocando un código muy sensible, que puede incluir elementos CSS y Java encrustados (los <style> para dar estilos en HTML y lo <script> de Java, entre ellos el mismo Google Analytics)

Aún así existen herramientas online para comprimir estos códigos. Una de ellas es:

http://webappcompress.eu/

NOTA: la herramienta misma advierte que al minimizar HTML se perderán las etiquetas <pre> (texto preformateado) y el estilo white-space:pre;.

Una vez que hayamos obtenido las versiones comprimidas de nuestros códigos, tendremos que actualizar los enlaces existentes entre los distintos archivos y finalmente subirlas al servidor.

GZIP: OTRA OPCIÓN DE COMPRESIÓN

Gzip es otro modo de comprimir el contenido de una web, y es un comando que trabaja del lado servidor. O sea que es el servidor, una vez que se le envían estas instrucciones de compresión, el que sabe qué archivos tiene que comprimir.

Hoy día es una solución muy eficaz y ampliamente utilizada, que puede bajar el tamaño de archivos de una web hasta el 70%.

NOTA: Gzip no comprime cualquier tipo de archivo. De hecho los archivos .pdf, .jpg, .png, .mpg, etc. es mejor optimizarlos o comprimirlos siempre antes de subirlos al servidor (aquí una nota interesante al respecto http://yslow.es/compresion-gzip/).

Gzip, al ser un comando dado al servidor, se activa incluyendo unas líneas de código en el archivo .htaccess.

<ifModule mod_gzip.c>

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

</ifModule>

Para que funcione, el servidor tendrá que tener activada la librería correspondiente, que acepte el comando mod_gzip.

Otra opción es utilizar el comando mod_deflate:

<IfModule mod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

</IfModule>

Artículos recomendados

Deja un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies. Para mayor información consulte nuestros Términos y Condiciones

ACEPTAR