14 Steps - Configurar ETags

¿Qué son los ETags? Son un mecanismo que los servidores utilizan para validar si un componente está validado en el cliente. El problema aparece cuando tenemos servidores replicados. Este mecanismo está pensado para que nuestras peticiones se sirvan desde un solo servidor y no de dos o tres balanceados. En el caso de tener un solo servidor podemos configurar los ETags en caso contrario vale la pena desactivarlas.
FileETag none

14 Steps - Mod_deflate

Otra manera para ganar velocidad de transferencia es la compresión. Dicha compresión se realiza en el servidor y luego será descomprimida en el cliente. Útil cuando nuestra versión de apache es 2.x.

Activar la compression con mod_deflate:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/php

Comprimir todo menos imágenes
<Location />
# Insert filter
SetOutputFilter DEFLATE

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>

Nivel de compresión:
DeflateCompressionLevel 3



14 Steps - Mod_gzip

Una manera sencilla pero útil para ganar velocidad de transferencia es que el servidor comprima los elementos que van a ser enviados. Mediante mod_gzip le podemos indicar al servidor que cosas queremos enviar comprimidas. El cliente se encargará de descomprimir la información enviada. Útil cuando nuestra versión de apache es la 1.3.

Para activar el modulo mod_gzip:

# Enable the module
mod_gzip_on yes

# Allow GZIP compression for all requests
mod_gzip_item_include mime .?

# By file extension
SetEnvIfNoCase request_uri \.mdb$ gzip=9
SetEnvIfNoCase request_uri \.bmp$ gzip cache-enable=mem
SetEnvIfNoCase request_uri \.(?:jpg|gif|png|swf|avi|rm)$ no-gzip

# By MIME type
SetEnvIfNoCase mime text/.* gzip=9 cache-enable=mem
SetEnvIfNoCase mime audio/wav gzip cache-enable=mem
SetEnvIfNoCase mime image/bmp gzip cache-enable=mem
SetEnvIfNoCase mime message/rfc822 gzip

SetEnvIfNoCase mime application/msword gzip
SetEnvIfNoCase mime application/postscript gzip
SetEnvIfNoCase mime application/vnd.ms-excel gzip
SetEnvIfNoCase mime application/vnd.ms-powerpoint gzip
SetEnvIfNoCase mime application/vnd.ms-works gzip
SetEnvIfNoCase mime application/x-javascript gzip cache-enable=mem
SetEnvIfNoCase mime application/x-msaccess gzip
SetEnvIfNoCase mime application/pdf gzip

# Exceptions for old browsers
#BrowserMatchNoCase \bOpera(?:\s5\.|/5) and mime application/.* no-gzip vary-agent !cache-enable
#BrowserMatchNoCase \bMozilla/4\.[67] and (mime application/.* or mime image/.*) no-gzip vary-agent !cache-enable
#BrowserMatchNoCase \bNetscape(?:6/6\.|/) and mime application/.* no-gzip vary-agent !cache-enable
#BrowserMatchNoCase \bFirefox/1 and mime application/pdf no-gzip vary-agent !cache-enable

SetEnvIfNoCase (mime text/css) or (mime image/jpeg) vary-agent
BrowserMatchNoCase \bMSIE\s[567]\. and (mime text/css or mime image/jpeg) no-gzip vary-agent !cache-enable

# Vary header should be properly set for caching
Header merge Vary User-Agent env=vary-agent

# Set expiry delta for static content.
# Dynamic pages should set expiry delta by oneself.
Header merge Cache-Control max-age=86400 env=cache-enable


14 Steps - Expires Headers

Otra forma de que el navegador cliente memorice nuestra información es mediante cabeceras de expiración. Con estas cabeceras podemos decir durante cuanto tiempo queremos que el navegador no nos vuelva a pedir un elemento.

Ejemplo 1:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>


Ejemplo 2:
<FilesMatch "^(bg-header|bg-div|calendar|boton)\.gif$">
Header set Cache-Control "max-age=29030400"
</FilesMatch>


Ejemplo 3:
<FilesMatch "\.(js|css|pdf|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
<FilesMatch "\.(html|htm|txt)$">
Header set Cache-Control "max-age=600"
</FilesMatch>
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>


14 Steps - Mod_expires

Ahora lo que queremos conseguir es que el cliente memorice elementos de nuestra página. Mediante mod_expires podemos decir al navegador del cliente que elementos debe guardar en memoria y durante cuanto tiempo.

Ejemplo 1:
ExpiresDefault "access plus 1 month"
ExpiresDefault "access plus 4 weeks"
ExpiresDefault "access plus 30 days"

ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

Ejemplo2:
# enable expirations
ExpiresActive On

# expire GIF images after a month in the client's cache
ExpiresByType image/gif A2592000

# HTML documents are good for a week from the
# time they were changed
ExpiresByType text/html M604800

Trucos CSS (Tutorial parte 11) - Comprimir el CSS

En servidores como apache en el archivo .htaccess podemos escribir una directriz e indicar al servidor que cuando envie un archivo CSS lo comprima para que su peso sea menor. El cliente se encarga de descomprimir el archivo.

¿Cómo activar la compresión dentro del archivo .htaccess?

<IfModule mod_deflate.c>
AddType application/php .php
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/php
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>


«Anterior

Trucos CSS (Tutorial parte 11) - Comprimir el CSS

htaccess Time Cheat Sheet

Aquí tenemos un listado para saber que valor tenemos que poner a las caches.


# 300 5 MIN
# 600 10 MIN
# 900 15 MIN
# 1800 30 MIN
# 2700 45 MIN
#
# 3600 1 HR
# 7200 2 HR
# 10800 3 HR
# 14400 4 HR
# 18000 5 HR
# 36000 10 HR
# 39600 11 HR
# 43200 12 HR
# 46800 13 HR
# 50400 14 HR
# 54000 15 HR
# 86400 24 HR



# 86400 1 DAY
# 172800 2 DAY
# 259200 3 DAY
# 345600 4 DAY
# 432000 5 DAY
# 518400 6 DAY
# 604800 7 DAY
#
# 604800 1 WEEK
# 1209600 2 WEEK
# 1814400 3 WEEK
# 2419200 4 WEEK



# 2419200 1 MONTH
# 4838400 2 MONTH
# 7257600 3 MONTH
# 9676800 4 MONTH
# 12096000 5 MONTH
# 14515200 6 MONTH
# 16934400 7 MONTH
# 19353600 8 MONTH
# 21772800 9 MONTH
# 24192000 10 MONTH
# 26611200 11 MONTH
# 29030400 12 MONTH


Caching with mod_headers, htaccess

Aquí tenemos un ejemplo de como se usa mod_headers.c
# 3 Month
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=7257600"
</FilesMatch>
# 1 Week
<FilesMatch "\.(js|css|pdf|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# 10 Minutes
<FilesMatch "\.(html|htm)$">

Header set Cache-Control "max-age=600"
</FilesMatch>
# NONE
<FilesMatch "\.(pl|php|cgi|spl)$">
Header unset Cache-Control
Header unset Expires
Header unset Last-Modified
FileETag None
Header unset Pragma
</FilesMatch>


Caching with mod_expires - htaccess

Aquí tenemos un ejemplo de cómo cachear con mod_expires.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A86400
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
</IfModule>