El usuario va navegando tan tranquilamente cuando...
“It’s time for us to treat performance as an essential design feature, not just as a technical best practice.”
El performance de la web no sólo afecta a la experiencia del usuario, sino también al SEO, y por supuesto al negocio.
Amazon
Aumenta sus ganancias en un 1% cada 100ms de mejora en la velocidad de descarga.
Yahoo
9% de aumento en el tráfico por cada 400ms de mejora.
Etsy
Cada 160k extra de peso en una página aumenta 12% la taza de rebote.
“80-90% of the time spent by users waiting for pages to load is spent on the frontend, all the work that needs to be done after the HTML document has arrived.”
Los archivos de texto (.html, .css, .js, etc) pueden enviarse comprimidos desde el servidor para reducir su peso durante el viaje hasta el cliente. Esta reducción suele ser muy significativa.
Lo normal seria que nuestro servicio de host tenga activada la compresión gzip pero nunca está de más comprobarlo, y en caso de que no sea así, ponernos en contacto con ellos para que la activen.
Solemos escribir nuestro CSS y nuestro Javascript optimizado para su lectura, es decir, con una indentación y espaciado claro, comentarios, etc. Los ordenadores no necesitan esto para interpretarlos y es por eso que a la hora de subir un fichero al servidor podemos reducir bastante su peso si nos deshacemos de todo lo que no sea imprescindible.
Para ello existen varias herramientas. Por convención se suele diferenciar a los ficheros comprimidos con la extensión .min (Ej: styles.min.css)
Tambien podemos compilar el css comprimido directamente desde Sass.
sass style.scss:style.css --style compressed
“A picture is worth a thousand words, but its cost can be so much greater.”
Las imágenes son el recurso que más añade al peso total de la página.
En móvil la proporción se mantiene.
En móvil, el alto peso de las imágenes descargadas no sólo afecta la experiencia de usuario sino que puede tener un alto coste para su bolsillo dependiendo las condiciones de su plan de datos.
Un ejemplo: Performance is money, part 1: the end-user's wallet
<style> al comienzo del svg.
Intentar tener un solo archivo Css. Gracias al @import Sass es sencillo creando un archivo principal que será el que se compile en css y sólo incluirá llamadas al resto de las hojas de estilo.
styles.scss => styles.css
@import 'base/normalize';
@import 'base/typography';
@import 'base/forms';
@import 'layout/grid';
@import 'layout/header';
@import 'layout/footer';
@import 'components/navigation';
@import 'components/slider';
Con el Javascript podemos hacer lo mismo que el con el Css y combinar todos los archivos en uno solo, aunque no es tan sencillo. Hay que tener en cuenta más parametros como el orden de carga, la dependencia entre unos archivos y otros o qué scripts se necesitan ejecutar en qué momento.
La técnica de sprites proviene de la industria del videojuego y consiste en combinar diferentes imágenes en una sóla para luego acceder solo al fragmento de imágen que necesitamos en cada caso.
En web, esto nos permite tener una sola llamada al servidor en lugar de una por cada imágen.
.icon {
background-image: url('img/sprite.png');
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
.icon--alert { background-position: 0px 0px; }
.icon--favorite { background-position: 0px -24px; }
.icon--share { background-position: -48px -24x; }
.icon--mail { background-position: 0 -48px; }
...
[class^=icon-] {
background-repeat: no-repeat;
}
.icon-github {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANS...');
}
.icon-twitter {
background-image: url('data:image/png;base64,OP444iVBORve=w0KG...');
}
.icon-facebook {
background-image: url('data:image/png;base64,AAff33VBORw0Kojij...');
}
Bad practice? (“On Mobile, Data URIs are 6x Slower than Source Linking”)
<symbol>Definición del SVG:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-twitter" viewBox="214.7 0 182.6 792">
<!-- contenido del svg -->
</symbol>
<symbol id="icon-facebook" viewBox="0 26 100 48">
<!-- contenido del svg -->
</symbol>
</svg>
Uso con el svg inline en el HTML:
<svg class="twitter-icon">
<use xlink:href="#icon-twitter"></use>
<svg>
Uso con el svg en un archivo externo:
<svg class="twitter-icon">
<use xlink:href="ruta/externa/icons.svg#icon-twitter"></use>
<svg>