Hace unas semanas participe del concurso webperf-contest. Un excelente concurso de WPO con un claro objetivo: mejorar la perfomance de un sitio. Para lograr eso reescribí todo el código frontend aplicando todas las técnicas de WPO que sabía:
- Unificar y poner en el head todo el CSS
- Unificar el Javascript
- Cargar los Javascript de forma Async
- Compactar el JS, CSS y HTML
- carga de imágenes on demand (mi propio plugin)
- Configurar los cache headers
- Sacar el CSS sin usar
- Sacar el JS sin usuar
- Hacer un sprite o dataURI/MHTML para imagenes background
- Ejecutar el JS extra después del evento onLoad
- Unificar los Ajax request
- Cargar el icon de forma Async
- Armar las sombras y bordes redondeados con CSS3
- Optimizar el tamaño de las imágenes
- Precargar el Iframe y setear el src en un timer
- Separar en varios dominios base para aumentar la descarga en paralelo
El nuevo Tip
Además, tratando de lograr un mejor tiempo del evento StartRender me di cuenta que la carga del sprite es clave para lograrlo.
En la forma normal de cargar el css y el sprite
El navegador empieza a descargar la imagen cuando encuentra una regla de sprite en el css que coincide con un tag del body.
ej:
-HTML document
......
<link ref="stylesheet" type="text/css" href="style.css" />
</head>
<body>
.....
-Style.css
....
body{ background-image:url(sprite.png); }
...
En este caso el navegador descarga primero el css y luego el sprite, la descarga es 100% secuencial.
Prueba el online demo (el style esta con un sleep para la demo ).
Descargar Css y sprite en paralelo
Podemos precargar la imagen en el head usando un clasico script como este:
-HTML document
......
<script>
setTimeout(function(){
var s = document.createElement('image');
s.src = 'sprite.png';
(document.getElementsByTagName('head')[0]).appendChild(s);
},5);
</script>
<link ref="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Ahora, el navegador va a descargar el css y el sprite en paralelo, esto hace que tenga mucho mas rápido el sprite.
Prueba el Online Demo.
Conclusión
En mi opinión dataUris/MHTML de Stoyan es mucho mejor técnica, porque nos ahorramos el request del sprite. Sin embargo cuando usamos dataUris tenemos que guardar los datos de la imagen en base64 esto resulta en un 20% mas aprox. También es verdad que es mucho mas común el uso de sprites. Así que para mi es una buena idea descargar en paralelo el sprite.
Comentarios bienvenidos.
Martín 
2 Comments
Muy interesante! Para cuándo el post explicando el plugin para cargar las imágenes on demand? no trae problemas con el SEO usar esa técnica??
Javi: ya existe el post: http://tips.freedev.com.ar/performance/load-images-ondemand-and-get-faster-web/, tene en cuenta es por ahora es la unica técnica conocida crossbrowser. Si vos queres que las imagenes de tu site aparezcan el los buscadores no debes usarla.
Saludos