What is best for mobile performance?

Com­par­ing sprites, base64 encod­ing and oth­er tech­niques to make a site more respon­sive.

After a lec­ture on Word­Camp Stock­holm (Swedish) about how to devel­op for the mobile web (hint: laten­cy is worse than a non-respon­sive page), fol­lowed by the dis­cov­ery that Com­pass has func­tions to base64-encode both images and fonts, I decid­ed to inves­ti­gate how dif­fer­ent parts inter­act when using dif­fer­ent ways to opti­mize a page for speed.

Every page is test­ed in GTmetrix, with the results pre­sent­ed below. Cur­rent­ly I have not made any effort to make it cross-brows­er, to not cloud the issue. A future post should prob­a­bly con­cern how to make it as acces­si­ble as pos­si­ble, as well as look into how much of the heav­i­ness can be cut away. Do all of the font-files need to be encod­ed, or would it be accept­able to remove some? Feel free to fork the repos­i­to­ry to exper­i­ment more.

Benchmark

The basic page is based on a min­i­mal, respon­sive tem­plate from Ini­tial­izr, with­out jQuery or Mod­ern­izr, as the test does not fac­tor in JavaScript. I used six icons from Paul Robert Lloyd, and two full font fam­i­lies (includ­ing ital­ics, bold and ital­ic bold) (Ale­greya och Ubun­tu). The fonts are acces­si­ble both on Google Web­fonts and FontSquir­rel. The exper­i­ments use either the Google Web­fonts, or the stan­dard web kit from FontSquir­rel.

Techniques

Minified CSS

The bench­mark page uses non-mini­fied CSS, but start­ing with exper­i­ment two, the stylesheet is com­pressed through Sass.

Images

Images are served in three dif­fer­ent ways:

  1. Bench­mark is six unique images
  2. Using a Sprite through Com­pass (marked with IS)
  3. Unique images, but encod­ed in base64 to lessen HTTP requests (marked with II)

Fonts

The fonts are served in four dif­fer­ent ways:

  1. Every font by itself, in all nec­es­sary for­mats, using the web kit from FontSquir­rel, local­ly
  2. Google Web­fonts, @import-ed into the stylesheet (marked with FG)
  3. Google Web­fonts, <link>-ed in the head­er (marked with FGL)
  4. Base64 encod­ed into the CSS-file (marked with FI)

Results

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

* Cal­cu­lat­ed on a band­width of 0.25Mbit, and laten­cy of 0.25s/call

Trans­la­tion from my Swedish blog


For the moment comments are not enabled, but feel free to reach out on Twitter.