engineering html5 applications for better performance

HtMl5 eXpErTiSe aT yOuR sErViCe  

LaUrI SvAn @lAuRiSvAn Sc5 OnLiNe @sC5

EnGiNeErInG HtMl5 aPpLiCaTiOnS fOr bEtTeR pErFoRmAnCe

SlOw pAgE sPeEdS mEaNs lOsT $s!

Amazon: 1% revenue increase for every 100ms speedup Google: 0.43% sessions lost for 400ms increase in load time Yahoo: 9% more traffic with 400ms faster page loads More info: http://www.strangeloopnetworks.com/web-performance-infographics/

2005   2007   2009   2011   2013  

Web  

iPhone  

HTML5  

WeB ApPs To ChAlLeNgE NaTiVe ApPs iN SlIcKnEsS?

ı 3

UsEr eXpErIeNcE  

U6lizing  HW  accelerated  graphics,  

offline  assets,  advanced  gestures  and  high  perf  JS  

engines  

WeB SiTeS StIlL GeT BiGgEr NoV 2010- SePt 2013 StAtS, HtTp ArChIvE / StEvE SoUdErS

We’rE nOt LeArNiNg!

HTML5 App •  1000 DOM elements •  1Mb of images and 100

network requests on page load

How about these? •  1s first page fold

Native App •  1000 widgets? •  1Mb of images and 100

network requests on app startup?

•  1s application install?

WeB eNgInEs aRe qUiTe fAsT! LeT’s uSe tHe sAmE yArDsTiCk wHeN mEaSuRiNg

MoBiLe DeViCeS - 5 yEaRs BaCk iN CpU SpEeD, 10 yEaRs BaCk iN CoNnEcTiOn BaNdWiDtH

  Samsung

Galaxy S4 My Machine

(2003) My Machine

(2010) CPU / MFLOPS 1500 373 4,256 Display / Pixels 2073600 1,920,000 4,096,000 Connection Speed / bps 384000* 300,000 4,000,000 Latency 300ms* 100ms 50ms

*  Assuming  3G/UMTS  safe  speed,  due  to  low  adop6on  of  4G  networks  

LeT’s TaRgEt fOr MoBiLe ApP PeRfOrMaNcE

•  1s app startup time (first page load time) •  1s for any subsequent view/page (reasonable delay) •  100ms UI response time (noticeable delay) •  16ms paints (LCDs will refresh 50-60Hz, the rest is surplus)

See e.g. Nielsen (1993): Usability Engineering, or http://www.nngroup.com/articles/the-need-for-speed/ http://www.nngroup.com/articles/response-times-3-important-limits/

If yOuR eMuLaToR rUnS 20 tImEs fAsTeR tHaN tHe TaRgEt, wHaT cAn yOu eXpEcT aBoUt PeRfOrMaNcE?

oNe-sEcOnD PaGe LoAdS

OnE SeCoNd BuDgEt

•  Turn on radio 300ms!•  DNS lookup + 150ms!•  SSL handshake + 200ms!•  Load, HTML & critical resources + 200ms!•  Parse à Layout à Paint = 150ms!

… It’s tricky over 3G!!

AnAtOmY oF An AvErAgE WeB PaGe

HtTp ReSoUrCe PiPeLiNe IlLuStRaTeD 6 ReSoUrCeS pEr DoMaIn

PaGe LoAd WaTeRfAlL – FiNd tHe PrObLeMs

Conges6o

n,  

load  order?  

Not  re

ally  neede

d  in  th

e  1s

t  fold  

SiMuLaTe SlOw PaGe SpEeDs •  Developers tend to have ultra-fast computers & networks and forget

the Edge & 3G network •  Tip: Network Link Conditioner XCode Plugin & ipfw rules

•  For localhost: https://gist.github.com/laurisvan/6783674

MeAsUrE YoUr PaGeS - WeBpAgEtEsT.OrG

CaNnEd ImPrOvEmEnTs - MoD_PaGeSpEeD aNd NgX_PaGeSpEeD

•  Canned implementation of best practices •  A few dozen different optimizations that rewrite your

HTML, CSS, JS and images •  Applicable for ‘web sites’, harder to use for ‘web apps’ •  Sample docker script and nginx conf available at

https://github.com/laurisvan/docker-pagespeed

OpTiMiZiNg fOr LaTeNcY

1.  Enable HTTP 1.1 & keep-alive 2.  Cache your content (expires, max-age, ETags etc.) 3.  Use CDN for static assets 4.  Compress & resize the images 5.  JavaScript & CSS monoliths; sprites, icon fonts 6.  Compress & minify: CSS, HTML, JavaScript 7.  Shard resources for a few domains 8.  Adaptive image sizes 9.  Optimize load order: Defer JavaScript, lazy-load images 10. Inline critical CSS & HTML for 1st page fold

ReAd MoRe: HiGh PeRfOrMaNcE BrOwSeR NeTwOrKiNg (IlYa GrIgOrIk / GoOgLe)

http://chimera.labs.oreilly.com/books/1230000000545 TL;DR: http://www.igvita.com/slides/2012/webperf-crash-course.pdf

60 fRaMeS ScRoLl aNd AnImAtIoN

OlD-ScHoOl OpTiMiZaTiOnS WoN’t HeLp YoU

•  JavaScript is typically not your problem •  CSS selector lengths typically have only a minor impact •  Browsers spend ~90% of its computation layouting and

painting

What you want to track is •  The causes of relayout and repainting •  What their costs are •  Tip: Watch out for surprises, like pointer events:

http://www.thecssninja.com/javascript/pointer-events-60fps

“TyPiCaL PaInT LoOp” Func6on  call  /  Event  

Recalculate  Style  

Layout  

Paint  

Composite  Layers  

JavaScript  Engine  (CPU  /  Virtual  Machine)  

Render  Tree  &  Layout  Engine  (CPU)  

Paint  Engine  (CPU)  

Compositor  (GPU)  

AlL CsS OpErAtIoNs aReN’t EqUaL

•  Geometry changing ops •  width, height etc…

•  Paint-only ops •  borders, outlines, box shadow, etc…

•  Composition only (or less) •  CSS3 Transforms, Opacity •  100% GPU only!

OpTiMiZiNg LaYoUtS & PaInTs

•  Separate DOM reads from DOM writeshttps://github.com/wilsonpage/fastdom

•  Do your DOM changes through a smart proxy http://facebook.github.io/react/ http://www.ractivejs.org/

•  If you really have a million items, use Canvas instead of based DOM approaches (like SoundCloud’s equaliser bars)

•  Avoid expensive paint operations (shadows, border radius, flexbox etc…)

•  Use CSS3 transforms for animating (no reflows) •  Use translateZ(0) hack for HW accelerating elements

1/10 sEcOnD tO ReSpOnD, OnE sEcOnD tO sHoW ThE rEsUlTs

TrAdItIoNaL PaGeS DoN’t Do aNyThInG uNtIl yOu TeLl

*click*   *click*  

Tradi&onal  

ImMeDiAtE FeEdBaCk bUyS YoU tImE OvErAlL pErFoRmAnCe mAy gEt fAsTeR, tOo

*click*   *click*  

Feedback  

PrElOaDiNg & BoOtStRaPpInG To ShOw tHe NeXt PaGe FaStEr YoU MaY HuRt YoUrSeLf BaD!

*click*  

+  

*click*  

Preloading  

Bootstrapping  

LaZy LoAd - OpTiMiZiNg fOr tHe FiRsT PaGe FoLd

+   +  

1st  fold  inlined   Rest  of  the  page  as  separate  resources  

+  

Lazy  Load  

PeRfOrMaNcE iS nO ExCePtIoN. At sOmE pOiNt yOuR aRcHiTeCtUrE wIlL fIgHt aGaInSt yOu.

QuAlItY AtTrIbUtEs oF yOuR aPp aRe sEt bY yOuR ArChItEcTuRe.

ReCaP: GeTtInG tO tHe pErFoRmAnCe tArGeTs

•  Set the performance goals, prepare for tradeoffs •  Track the goals from the beginning •  Don’t guess; measure •  Simulate the target devices in your daily work •  Keep your code simple, don’t trade it for performance •  Perfect is the enemy of the good

HoMeWoRk: PlAn yOuR PeRfOrMaNcE BuDgEt

Create a breakdown of your performance budget, with a 1s page load target. Estimate the latency and bandwidth requirements for your site, including the resources you pull from the web. Consider the context; what would be your estimated page load time be for a Cable/DSL, 4G or 3G connection? Justify your estimate through a few paragraphs explanation and a quick breakdown + a few calculations of the resources within your web page.

ThAt’s AlL!

AnY QuEsTiOnS?

HtMl5 eXpErTiSe aT yOuR sErViCe  

LaUrI SvAn

ThAnK yOu !

Head of Tech, SC5 Online Ltd https://github.com/laurisvan https://twitter.com/laurisvan