Optimización de velocidad de páginas web (3/3)

Continuación del listado de factores sobre los que podemos incidir para mejorar la velocidad de carga de páginas web.

Optimizaciones de las páginas (parte 2/2):

9) Las imágenes se pueden agregar, para evitar peticiones HTTP de descarga de las mismas. Esto no tiene mucho sentido para las imágenes que van cambiando frecuentemente, pero si las imágenes estáticas del diseño que no varían. LA herramienta para ello son los CSS Sprites, que combina varias imágenes en una grande. Muchas webs con muchos visitantes los usan (Google, Apple, Amazon), etc. Estas imágenes se pueden generar con CSS Sprites Generator http://csssprites.com.

10) El formato de las imágenes también influye en la velocidad de carga de la páginas web. JPG tiene las mejores tasas de compresión, pero la calidad de imagen sufre. Todas las imágenes que puedan tener una calidad inferior, deberían ser JPG. Si hace falta más calidad hay que utilizar PNG, que comprime sin pérdida de calidad.

11) En las imágenes PNG es muy importante convertirlas en una imagen indexada con una paleta de colores optimizada para web. Solo de esta forma se puede conseguir una buena compresión.

12) Las imágenes siempre deben de estar enlazadas en el tamaño en el que se van a mostrar  y usar los atributos width y height.. No es nada recomendable utilizar el escalado por HTML.

13) Los navegadores pueden almacenar temporalmente contenidos, guardándolos en la caché. Cuando se accede por primera vez a una web el navegador descarga toda la página web completa. Si se vuelve a cargar la misma página posteriormente, aunque haya cambiado parte del contenido, suele haber elementos que no cambian (botones de navegación, diseño del fondo, etc). En cada carga de una página web, el navegador puede enviar recomendaciones a través del encabezado HTTP de cuanto tiempo deben conservarse que elementos en la caché sin actualizarlos. En Apache tiene que estar disponible el módulo mod_expires, además de tener acceso al archivo .htaccess. En el archivo .htaccess es donde se definen los elementos de la página y su caducidad. Para establecer el tiempo de la caché hace falta probar, con un tiempo demasiado corto perdemos optimización, con un tiempo demasiado largo pueden mostrarse contenidos antiguos. La experiencia nos demuestra q ue los archivos Javascript, CSS e imágenes cambian mucho menos que los archivos HTML.

14) Las empresas de gran envergadura emplean en muchos casos Proxies con caché para el acceso a internet de sus empleados. Estos guardan las webs recibidas como copia local, no teniendo que contactarse cada vez al servidor externo. Esta posibilidad se activa mediante el encabezado HTTP (Cache-Control: Public) y el archivo .htaccess junto con el modelo mod_expires.

15) El uso del ETag dentro del encabezado HTTP. Esto es un checksum del contenido de la página web, que el navegador puede comprar con la del contenido archivados en Caché para ver si ha habido cambios. De esta forma el navegador solo carga la página de nuevo si ha cambiado.

16) El uso de Content Delivery Networds (CDN) también pueden influir positivamente en la velocidad de carga de las páginas. Los contenidos siempre se entregan del servidor geográficamente más cercano al usuario. El servicio Amazon S3 hoy en día es asequible a todos los bolsillos. Muy recomendable para páginas estáticas muy visitadas, descargas gratuitas, etc.

17) Por otro lado, Google ofrece la Google Libraries API en su CDN en el cual están alojadas todas las versiones de las bibliotecas Javascript como jQuery, Prototype o Dojo, que pueden enlazarse directamente desde la web.

18) En el caso de blogs para WordPress es recomendable utilizar un plugin para cachear los contenidos y reducir los accesos a las bases de datos. Uno que funciona muy bien es W3 Total Cache y con el cual se puede conseguir un incremento de velocidad en factor 10 si está completamente configurado.

Teniendo en cuenta estos 18 factores, conseguiremos un incremento importante de velocidad. Ahora os toca experimentar.