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-encoda både bil­der och typ­snitt bestämde jag mig för att under­söka hur de olika delarna stac­kar upp när man gör olika saker. Varje sida tes­tas på GTmetrix, så får vi se vad som ver­kar ge bäst resul­tat. I nulä­get har inget krut lagts på att sidan ska vara cross-browser, tek­ni­kerna fun­ge­rar i Chrome och Fire­fox, åtminstone. En fram­tida post/diskussion kan myc­ket väl vara att se hur tek­ni­kerna kan använ­das. Kanske man kan skala bort litet av tyng­den från base64-encoding om man inte läg­ger in alla filer, det behö­ver också under­sö­kas. Jag är också osä­ker på hur caching fun­ge­rar med <link>–ele­ment för Google Fonts gente­mot @import i filen — någon som vet? För när­va­rande finns inte sidorna/etc till­gäng­liga, men om det finns intresse kan jag lägga upp dem på Git­hub för fram­tida experiment.

Bench­mark Den grund­läg­gande sidan är base­rad på en mini­mal, respon­siv temp­late från

Ini­ti­a­lizr, utan var­ken jQuery 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 fulla famil­jer (nor­mal, kur­siv, fet­stil och kur­siv fet­stil) (Ale­greya och Ubuntu). Typ­snit­ten finns både på Google Web­fonts och på FontSquir­rel. De expe­ri­ment som inte använ­der Google Web­fonts använ­der stan­dard web­kit­tet från FontSquirrel.

Tek­ni­ker

Mini­fi­era CSS

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

Bil­der

Bil­derna ser­ve­ras på tre olika sätt:

  1. Sex unika bil­der (om inget annat anges)
  2. Bil­derna ihop­ba­kade med Sass magiska spri­tes (Mar­ke­ras med IS)
  3. Enskilda bil­der, men enko­dade i bas64 för att minska HTTP requests (Mar­ke­ras med II)

Typ­snitt

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

  1. Varje font för sig, i alla nöd­vän­diga for­mat, lokalt (om inget annat anges)
  2. Ett anrop till Google Web­fonts, impor­te­rar filen (Mar­ke­ras med FG)
  3. Bas64 enko­dade i CSS-filen (Mar­ke­ras med FI)
  4. Ett anrop till Google Web­fonts, <link> i hea­dern (Mar­ke­ras 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
Mini­fied (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