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