Etikettarkiv: mobil

Mobilutveckling — vad är bäst?

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

Page Speed Gra­de YSlow Gra­de Total page size Total # of requests Load (s) *
Base B (81%) B (87%) 161KB 16 4.63
Mini­fi­ed (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äk­nat på band­bredd av 0.25Mbit, samt för­dröj­ning av 0.25s/anrop