Efter en före­läs­ning på WordCamp Stock­holm om hur man utveck­lar för mobi­len, följt upp av upp­täck­ten att Com­pass har funk­tio­ner för att base64-enco­da både bil­der och typ­snitt bestäm­de jag mig för att under­sö­ka hur de oli­ka delar­na stac­kar upp när man gör oli­ka saker. Var­je sida tes­tas på GTmetrix, så får vi se vad som ver­kar ge bäst resul­tat. I nulä­get har ing­et krut lagts på att sidan ska vara cross-brow­ser, tek­ni­ker­na fun­ge­rar i Chro­me och Fire­fox, åtminsto­ne. En fram­ti­da post/diskussion kan myc­ket väl vara att se hur tek­ni­ker­na kan använ­das. Kanske man kan ska­la bort litet av tyng­den från base64-enco­ding om man inte läg­ger in alla filer, det behö­ver ock­så under­sö­kas. Jag är ock­så osä­ker på hur caching fun­ge­rar med <link>-ele­ment för Goog­le Fonts gente­mot @import i filen — någon som vet? För när­va­ran­de finns inte sidorna/etc till­gäng­li­ga, men om det finns intres­se kan jag läg­ga upp dem på Git­hub för fram­ti­da expe­ri­ment.

Benchmark Den grundläggande sidan är baserad på en minimal, responsiv template från

Ini­ti­a­lizr, utan var­ken jQue­ry eller Moder­nizr, eftersom tes­ten inte tit­tar på java­script. Jag använ­der sex iko­ner från Paul Robert Lloyd, och två typ­snitt med ful­la famil­jer (nor­mal, kur­siv, fet­stil och kur­siv fet­stil) (Ale­greya och Ubun­tu). Typ­snit­ten finns både på Goog­le Web­fonts och på FontSquir­rel. De expe­ri­ment som inte använ­der Goog­le Web­fonts använ­der stan­dard web­kit­tet från FontSquir­rel.

Tekniker

Minifiera CSS

På bench­mark­si­dan används icke-mini­fi­e­rad CSS, men från och med expe­ri­ment två är stil­mal­len kom­pri­me­rad via Sass, det­ta för att få en bra idé om hur myc­ket det gör.

Bilder

Bil­der­na ser­ve­ras på tre oli­ka sätt:

1. Sex uni­ka bil­der (om ing­et annat anges)
2. Bil­der­na ihop­ba­ka­de med Sass magis­ka spri­tes (Mar­ke­ras med IS)
3. Enskil­da bil­der, men enko­da­de i bas64 för att mins­ka HTTP requests (Mar­ke­ras med II)

Typsnitt

Typ­snit­ten ser­ve­ras på fyra oli­ka sätt:

1. Var­je font för sig, i alla nöd­vän­di­ga for­mat, lokalt (om ing­et annat anges)
2. Ett anrop till Goog­le Web­fonts, impor­te­rar filen (Mar­ke­ras med FG)
3. Bas64 enko­da­de i CSS-filen (Mar­ke­ras med FI)
4. Ett anrop till Goog­le Web­fonts, <link> i hea­dern (Mar­ke­ras med FGL)

Tabell med Data

• Beräk­nat på band­bredd av 0.25Mbit, samt för­dröj­ning av 0.25s/anrop