Cómo aumentar la velocidad de carga y el SEO de tu web con la compresión de HTML/CSS/JAVA y Gzip

velocidad carga web

Comparte en tus redes...

A estas alturas, todos sabemos que comprimir el código HTML, CSS y JS y otros archivos con GZIP aumenta la velocidad de la web y mejora exponencialmente el SEO general de nuestra web. La velocidad de carga de una página web es un factor muy importante para el posicionamiento y la usabilidad de la misma.

Google da mayor relevancia a los sitios que son más rápidos, cuya carga no tarde más de unos pocos segundos (basándonos en conexiones de banda ancha), ya que su objetivo es siempre ofrecer la mejor experiencia al usuario. La experiencia del usuario Google no la registra pasando formularios de opinión, sería un locura imposible de realizar, así que lo hace controlando unas métricas: CTR, tasa de rebote, tiempo de permanencia, páginas visitadas, tiempo de carga, adaptabilidad de móviles, etc, etc…

 

compresion de css y html

 

La velocidad de carga se debe a muchos factores, tales como el peso de los ficheros descargables (código, fotos, vídeos, etc.), el peso de los propios ficheros, 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,como por ejemplo una de la que hablamos mucho en nuestro blog https://toolbox.seositecheckup.com

Así pues tenemos que tener en cuenta siempre todos estos factores, aunque hoy nos centraremos en cómo comprimir los archivos CSS y Javascript, y también minificar HTML y PHP, para que tengan el menor peso posible, favoreciendo la velocidad de carga de un sitio web.

 

Compresión de las hojas de estilo y Javascripts

Existen muchas herramientas online que harán el trabajo por nosotros, rápidamente y sin error. 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. Algunas de ellas:
 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.

 

Compresión de HTML y PHP

Minimizar el código HTML o PHP de una página no es una operación sencilla, ya que se estamos tocando un código muy sensible, que incluye elementos CSS y Java incrustados (los <style> para dar estilos en HTML y lo <script> de Java, entre ellos el mismo Google Analytics). Aún así existen herramientas para comprimir estos códigos:

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.

IMPORTANTE

Antes de realizar cualquiera de estas acciones con ficheros css, html, php, etc… hay que hacer copias de seguridad y guardarlas en un sitio seguro, no sería la primera vez que se nos fastidia una web completa por realizar estas acciones, encontrarnos  con un error y no disponer de una copia de seguridad reciente.

A nosotros nos gusta mucha HTML Compressor, una herramienta online gratuita multifichero, muy fácil de usar y práctica…

 

GZIP: la otra opción de compresión

Gzip es otro modo de comprimir el contenido de una web, que trabaja del lado servidor. Es una solución muy eficaz y ampliamente utilizada, que puede bajar el tamaño de archivos de una web hasta el 70%.

Gzip se usan para comprimir ficheros con textos, los archivos .pdf, .jpg, .png, etc… es mejor comprimirlos con herramientas externas antes de subirlos al servidor. Por ejemplo, para todos los formatos de imagen, recomendamos de este blog Kraken.io, la mejor opción de compresión sin duda, por encima de herramientas como por ejemplo el “guardar para la web” de Photoshop.

Gzip, al ser un comando dado al servidor, se activa con  unas líneas de código en el archivo .htaccess, que debe estar en la ráiz del servidor. Mi configuración favorita, es esta:

# Activar el recurso Keep Alive
<ifModule mod_headers.c>
 Header set Connection keep-alive
</ifModule>

 ######################
# Compresión GZIP #
######################

#GZIP Comprime información y aumenta velocidad de acceso
<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>

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

######################
# Compresión DEFLATE #
######################

AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/html5
AddOutputFilterByType DEFLATE text/txt
AddOutputFilterByType DEFLATE text/pdf
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 application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

 

Además siempre aconsejamos activar y configurar bien la caché de parte del servidor, para que los usuarios no descarguen toda la información descargable en cada visita a la web…

ExpiresActive On
ExpiresDefault A0 
# 1 AÑO
<FilesMatch "\.(flv|ico|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A9030400
</FilesMatch>

# 1 MES
<FilesMatch "\.(pdf|swf)$">
ExpiresDefault A2592000
</FilesMatch>

# 1 SEMANA
<FilesMatch "\.(jpg|jpeg|png|gif|txt|xml|js|css|htm|html|php)$">
ExpiresDefault A604800
</FilesMatch>

Be the first to comment on "Cómo aumentar la velocidad de carga y el SEO de tu web con la compresión de HTML/CSS/JAVA y Gzip"

Leave a comment