Efter en föreläsning på WordCamp Stockholm om hur man utvecklar för mobilen, följt upp av upptäckten att Compass har funktioner för att base64-encoda både bilder och typsnitt bestämde jag mig för att undersöka hur de olika delarna stackar upp när man gör olika saker. Varje sida testas på GTmetrix, så får vi se vad som verkar ge bäst resultat. I nuläget har inget krut lagts på att sidan ska vara cross-browser, teknikerna fungerar i Chrome och Firefox, åtminstone. En framtida post/diskussion kan mycket väl vara att se hur teknikerna kan användas. Kanske man kan skala bort litet av tyngden från base64-encoding om man inte lägger in alla filer, det behöver också undersökas. Jag är också osäker på hur caching fungerar med <link>-element för Google Fonts gentemot @import i filen — någon som vet? För närvarande finns inte sidorna/etc tillgängliga, men om det finns intresse kan jag lägga upp dem på Github för framtida experiment.
Benchmark Den grundläggande sidan är baserad på en minimal, responsiv template från
Initializr, utan varken jQuery eller Modernizr, eftersom testen inte tittar på javascript. Jag använder sex ikoner från Paul Robert Lloyd, och två typsnitt med fulla familjer (normal, kursiv, fetstil och kursiv fetstil) (Alegreya och Ubuntu). Typsnitten finns både på Google Webfonts och på FontSquirrel. De experiment som inte använder Google Webfonts använder standard webkittet från FontSquirrel.
Tekniker
Minifiera CSS
På benchmarksidan används icke-minifierad CSS, men från och med experiment två är stilmallen komprimerad via Sass, detta för att få en bra idé om hur mycket det gör.
Bilder
Bilderna serveras på tre olika sätt:
- Sex unika bilder (om inget annat anges)
- Bilderna ihopbakade med Sass magiska sprites (Markeras med IS)
- Enskilda bilder, men enkodade i bas64 för att minska HTTP requests (Markeras med II)
Typsnitt
Typsnitten serveras på fyra olika sätt:
- Varje font för sig, i alla nödvändiga format, lokalt (om inget annat anges)
- Ett anrop till Google Webfonts, importerar filen (Markeras med FG)
- Bas64 enkodade i CSS-filen (Markeras med FI)
- Ett anrop till Google Webfonts,
<link>i headern (Markeras med FGL)
Tabell med Data
| Page Speed Grade | YSlow Grade | Total page size | Total # of requests | Load (s) * | |
|---|---|---|---|---|---|
| Base | B (81%) | B (87%) | 161KB | 16 | 4.63 |
| Minified (2) | B (81%) | B (87%) | 159KB | 16 | 4.62 |
| IS (3) | A (97%) | A (95%) | 159KB | 11 | 3.37 |
| FG (4) | C (73%) | B (86%) | 344KB | 17 | 5.59 |
| FG, IS (5) | A (91%) | A (94%) | 344KB | 12 | 4.34 |
| II (6) | A (98%) | A (97%) | 159KB | 10 | 3.12 |
| FG, II (7) | A (93%) | A (95%) | 344KB | 11 | 4.09 |
| FI (8) | B (87%) | B (87%) | 490KB | 8 | 3.91 |
| FI, II (9) | A (97%) | A (97%) | 491KB | 2 | 2.42 |
| FI, IS (10) | A (92%) | A (95%) | 490KB | 3 | 2.66 |
| FGL (11) | C (76%) | B (86%) | 344KB | 17 | 5.59 |
| FGL, IS (12) | A (95%) | A (94%) | 344KB | 12 | 4.34 |
| FGL, II (13) | A (97%) | A (95%) | 344KB | 11 | 4.09 |
- Beräknat på bandbredd av 0.25Mbit, samt fördröjning av 0.25s/anrop