Además de las imágenes, los sitios web pueden incorporar otros elementos multimedia que cada día van creciendo. Estos elementos multimedia suelen ser ficheros externos que hay que cargar, habitualmente con los elementos <object> o <embed> y que pueden suponer una sobrecarga para las páginas.
REDUCCIÓN DE FICHEROS SWF (ADOBE FLASH)
Categoría: Contenidos
Aunque los ficheros de Adobe Flash no son concretamente imágenes, sí que es cierto que como elementos multimedia se deben un respeto, ya que existen en muchos sitios web. Los ficheros SWF están comprimidos de por sí gracias al sistema deflate propio de Java, por lo que al final, lo que recibimos ya está reducido, pero se puede reducir aún más gracias a 7-Zip, que comprime mejor. Para ello usaremos apparat. Es recomendable mirar en profundidad su configuración.
reducer -i test\test.swf
[i] Apparat -- http://apparat.googlecode.com/
[i] Launching tool: Reducer
[i] Waiting for 7z ...
[i] Compression ratio: 18.224573%
[i] Total bytes: 310
[i] Completed in 547ms.
OPTIMIZACIÓN DE FUENTES CSS @FONT-FACE
Categoría: Conectividad, Contenidos
Una de las novedades de CSS3 es que permite a los navegadores cargar un fichero de fuente y así mostrar la página con los tipos de letra que el sitio web decide y no depender de las fuentes del sistema. Estas fuentes se cargan a través de las hojas de estilo y, como los ficheros de fuente no suelen ser muy reducidos en tamaño, pueden perjudicar el rendimiento de carga.
Hay que tener en cuenta que, aunque por defecto el código del @font-face se carga en la cabecera de la página, hasta que esta no acaba de pintarse en el navegador, no se ejecuta el cambio del tipo de letra.
Teniendo en cuenta esto, y que gracias a JavaScript podemos modificar los estilos, podemos mejorar un código tal que así:
<style type="text/css" media="screen">
@font-face {
font-family: 'WebFont';
src: url('http://www.example.com/webfont.eot');
src: local('☺'), url('http://www.example.com/webfont.woff') format('woff'), url('http://www.example.com/webfont.ttf') format('truetype'), url('http://www.example.com/webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font: 60px/68px 'WebFont', Arial, sans-serif; letter-spacing: 0;}
p {font: 18px/27px 'WebFont', Arial, sans-serif;}
</style>
Por un código en dos partes, donde dejaremos en la cabecera algunos estilos:
<style type="text/css" media="screen">
h1 {font: 60px/68px 'WebFont', Arial, sans-serif;letter-spacing: 0;}
p {font: 18px/27px 'WebFont', Arial, sans-serif;}
</style>
Y al final de la página, cargaremos de forma retardada las fuentes, eso sí, cacheadas en un servidor estático para que no se tengan que descargar cada página.
<script type="text/javascript">
var fuente1 = "@font-face {" +
" font-family: 'WebFont';" +
" src: url('http://s.example.com/webfont.eot');" +
" src: local('☺'), url('http://s.example.com/webfont.woff') format('woff'), url('http://s.example.com/webfont.ttf') format('truetype'), url('http://s.example.com/webfont.svg#webfont') format('svg');" +
" font-weight: normal; font-style: normal;" +
"}";
(function() {
var estilo1 = document.styleSheets[0];
if ("function" === typeof(estilo1.insertRule)) {
estilo1.insertRule(fuente1, 0);
} else if ("string" === typeof(estilo1.cssText) ) {
estilo1.cssText = fuente1;
}
})();
</script>
Además, hay que tener en cuenta que, en algunos casos, Internet Explorer tiene ciertos problemas con la carga de las fuentes, sobre todo si el sitio incluye varios JavaScript, ya que dependiendo si se ponen antes de la hoja de estilos puede bloquear la carga. En el caso óptimo esto no ocurre lo que permite mejorar el rendimiento en cualquier situación.