engineering html5 applications for better performance
DESCRIPTION
One second page loads, 100ms UI response time and 60fps animations - even if today's browsers are super fast, meeting these performance goals can be tricky, particularly for mobile browsers. This presentation outlines some tools & techniques to help to design web apps with performance in mind.TRANSCRIPT
![Page 1: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/1.jpg)
HtMl5 eXpErTiSe aT yOuR sErViCe
LaUrI SvAn @lAuRiSvAn Sc5 OnLiNe @sC5
EnGiNeErInG HtMl5 aPpLiCaTiOnS fOr bEtTeR pErFoRmAnCe
![Page 2: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/2.jpg)
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/
![Page 3: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/3.jpg)
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
![Page 4: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/4.jpg)
WeB SiTeS StIlL GeT BiGgEr NoV 2010- SePt 2013 StAtS, HtTp ArChIvE / StEvE SoUdErS
![Page 5: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/5.jpg)
We’rE nOt LeArNiNg!
![Page 6: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/6.jpg)
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
![Page 7: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/7.jpg)
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
![Page 8: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/8.jpg)
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/
![Page 9: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/9.jpg)
If yOuR eMuLaToR rUnS 20 tImEs fAsTeR tHaN tHe TaRgEt, wHaT cAn yOu eXpEcT aBoUt PeRfOrMaNcE?
![Page 10: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/10.jpg)
oNe-sEcOnD PaGe LoAdS
![Page 11: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/11.jpg)
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!!
![Page 12: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/12.jpg)
AnAtOmY oF An AvErAgE WeB PaGe
![Page 13: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/13.jpg)
HtTp ReSoUrCe PiPeLiNe IlLuStRaTeD 6 ReSoUrCeS pEr DoMaIn
![Page 14: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/14.jpg)
PaGe LoAd WaTeRfAlL – FiNd tHe PrObLeMs
Conges6o
n,
load order?
Not re
ally neede
d in th
e 1s
t fold
![Page 15: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/15.jpg)
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
![Page 16: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/16.jpg)
MeAsUrE YoUr PaGeS - WeBpAgEtEsT.OrG
![Page 17: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/17.jpg)
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
![Page 18: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/18.jpg)
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
![Page 19: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/19.jpg)
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
![Page 20: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/20.jpg)
60 fRaMeS ScRoLl aNd AnImAtIoN
![Page 21: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/21.jpg)
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
![Page 22: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/22.jpg)
“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)
![Page 23: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/23.jpg)
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!
![Page 24: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/24.jpg)
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
![Page 25: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/25.jpg)
1/10 sEcOnD tO ReSpOnD, OnE sEcOnD tO sHoW ThE rEsUlTs
![Page 26: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/26.jpg)
TrAdItIoNaL PaGeS DoN’t Do aNyThInG uNtIl yOu TeLl
*click* *click*
Tradi&onal
![Page 27: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/27.jpg)
ImMeDiAtE FeEdBaCk bUyS YoU tImE OvErAlL pErFoRmAnCe mAy gEt fAsTeR, tOo
*click* *click*
Feedback
![Page 28: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/28.jpg)
PrElOaDiNg & BoOtStRaPpInG To ShOw tHe NeXt PaGe FaStEr YoU MaY HuRt YoUrSeLf BaD!
*click*
+
*click*
Preloading
Bootstrapping
![Page 29: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/29.jpg)
LaZy LoAd - OpTiMiZiNg fOr tHe FiRsT PaGe FoLd
+ +
1st fold inlined Rest of the page as separate resources
+
Lazy Load
![Page 30: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/30.jpg)
PeRfOrMaNcE iS nO ExCePtIoN. At sOmE pOiNt yOuR aRcHiTeCtUrE wIlL fIgHt aGaInSt yOu.
QuAlItY AtTrIbUtEs oF yOuR aPp aRe sEt bY yOuR ArChItEcTuRe.
![Page 31: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/31.jpg)
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
![Page 32: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/32.jpg)
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.
![Page 33: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/33.jpg)
ThAt’s AlL!
AnY QuEsTiOnS?
![Page 34: Engineering HTML5 Applications for Better Performance](https://reader033.vdocuments.mx/reader033/viewer/2022042521/5484ff16b47959f60c8b4d4a/html5/thumbnails/34.jpg)
HtMl5 eXpErTiSe aT yOuR sErViCe
LaUrI SvAn
ThAnK yOu !
Head of Tech, SC5 Online Ltd https://github.com/laurisvan https://twitter.com/laurisvan