Archivo de etiquetas de 'javascript'

Optimizar la carga de una web (y IV)

Una entrada aún más rápida para comentar el resultado del siguiente paso de la optimización, que ha sido Minificar (que poco me gusta este palabro) el código Javascript y los CSS. Para comprimir estos ficheros he usado YUI Compressor, que es un programa Java hecho por el mismo grupo de Yahoo! mismo que hace posible YSlow.

Gracias a esta herramienta hemos reducido el tamaño de los ficheros a descargar en 30Kb, y por tanto arañamos unos milisegundos al tiempo total, sobretodo con la caché vacía que era el apartado que menos había mejorado (e incluso empeorado durante un paso). YSlow nos da un aprobado alto con una puntuación de 90, ya queda poco para terminar el trabajo.

Optimizar la carga de una web (y II)

Para continuar optimizando la carga del blog, el siguiente paso que nos recomiendan desde Yahoo! es usar una Content Delivery Network (CDN) que reparta la entrega de los datos estáticos (imágenes, CSS y JS principalmente) usando una red de servidores repartidos por todo el mundo.

Normalmente el uso de estas redes está reservado para grandes corporaciones que pueden pagarlas, pero nosotros vamos a apoyarnos en la infraestructura de Google para descargar a nuestro pobre servidor de atender estas peticiones, y de paso permitir que el navegador descargue en paralelo los ficheros, ya que al estar en dominios distintos no estará limitado por el número máximo de descargas simultaneas.

Lo primero que vamos a hacer es usar el API de Google para cargar las librerías Javascript que usa el blog. En este apunte encontraréis una explicación detallada de las ventajas de usar este API. Si usamos wordpress, este plugin nos hará todo el trabajo sucio.

Después tenemos que añadir a la configuración de YSlow el dominio ‘ajax.googleapis.com‘ para que nos reconozca lo que descarga desde esa dirección como perteneciente a nuestra CDN. El como hacerlo lo podemos ver en su FAQ.

El siguiente paso es pasar todo el contenido estático a otra CDN. Para ello vamos a hacer un poco de trampa y usar el servicio de Google App Engine para montarnos una CDN. Con la información de esta entrada monté lo básico y pasé todo lo que pude a la página de Google Apps, pero me mosqueaba que siempre se recargaban las imágenes, los css y los js, y con Firebug vi que Google no respondía a las peticiones If-Modified-Since y siempre devolvía el contenido como nuevo. Al fichero de la aplicación hay que añadirle la linea ‘default_expiration: “365d”‘ para que la fecha de expiración se de en un año por defecto.

En esta otra entrada continúan el trabajo de la anterior pero añadiendo el control de la cache del navegador y así evitar enviar los datos con cada petición.Como en el anterior apartado, deberemos añadir el dominio que creemos a la configuración de YSlow para que nos lo tenga en cuenta.

Después de este cambio los tiempos de carga no han variado apenas, pero hemos descargado bastante nuestro servidor principal, con lo que en caso de necesitar atender a muchas peticiones lo tendrá más fácil. Además, los servidores de Google comprimen de forma automática los ficheros de texto (css y js) por lo que ahorramos en ancho de banda.

La puntuación que nos da YSlow ha subido hasta 80, no sólo por usar la CDN sino porque al utilizarla hemos mejorado otros puntos como añadir la cabecera de Expires, comprimir el contenido o configurar los ETags (estos no son compatibles con las CDNs por lo que todo lo que se descarga de una no necesita tener esa cabecera).




Cerrar
Enviar por Correo