Post on 15-Apr-2017
Your WebPerf is !
Holger Bartel | @foobartel | HK CodeConf 23/10/2015
So, why?
42 requests, 6.3 MB
250 requests, 6.7 MB
"
86 requests, 10.2 MB
Performance is a thing.
Users expect ~2-3 seconds to load a site…
Expectations
Users expect ~2-3 seconds to load a site…
That’s the definition of ‘fast’
We’re even aiming to deliver something in even less
Expectations
50% of people say they'll abandon a page that takes longer than 4 seconds to load
Expectations
Faster is Be!er!
So, why?
The Real World (and why you should care)
40% of surveyed online shoppers will abandon a page that takes more than 3
seconds to load.— Akamai (2009)
Speeding up a fundraising site by 60% increased donations by 14%.
— Kyle Rush, Obama Campaign (2012)
Adding half a second to a search results page can decrease traffic and ad
revenues by 20 percent — Google
Every additional 100 milliseconds of load time decreased sales by 1 percent.
— Amazon
Images - The Big Evil(and an easy fix)
Original Optimised
2 MB @ 298 x 530
73 KB
ImageOptim App
01 Oct 2012 - 15 Oct 2014
http://httparchive.org/interesting.php
http://httparchive.org/interesting.php
01 Oct 2014 - 01 Oct 2015
Performance is Design
Performance is Design
Design is Performance
Performance is Design
Design is Performance
Design directs Performance
— Ian Feather
“Performance is a compromise between design and performance.
You can only be as fast as the design allows.”
Collaboration & communication between designers and developers nowadays is essential and more
important than ever before.
Breaking Silos
Get designs into the browser as soon as possible, so you, your team and your client can
get a be"er feel for what it will be like in the real world.
If your website is 15MB it’s not HTML5, it’s stupid.
— Christian Heilmann
Ask yourself:
What's the gain?
What do you want to achieve?
A carousel with 7 images - is it really worth the load time or just pre"y to look
at?
Whereas it's questionable if images 3-7 will be seen
in the first place.
Building for Performance
Rendering Pages
Waiting for DOM and CSSOM to build the render tree.
Render tree contains nodes to render the page.
Layout computes the exact position and size.
Paint turns the render tree into pixels on screen.
Render-Tree Construction, Layout & Paint
Wait for CSS
Avoids “Flash of Unstyled Content” (FOUC)
Render Blocking CSS
The parser has to stop for scripts before continuing to parse HTML.
JavaScript can query and modify DOM and CSSOM.
JavaScript blocks DOM construction unless explicitly declared as async.
Render Blocking JavaScript
Every request fetched inside of HEAD, will postpone the rendering of the page
Loading Assets
Every request takes roughly ~200ms
Avoid unnecessary redirects
Limit HTTP Requests
Critical Resource
Critical Path Length
Critical Bytes
Critical Rendering Path
Optimising the dependency graph between HTML, CSS, and JavaScript.
Optimising the Critical Rendering
Path
Optimising the Critical Rendering
Path
=Ge!ing ! on the
screen fast
To get our li!le friend ! on the screen fast…
Minimise the number of critical resources.
Minimise the number of critical bytes.
Minimise the critical path length.
A critical resource is a resource that can block initial rendering of a page.
Analyse and characterise: number of resources, bytes, length.
Minimise number of critical resources.
Optimise order of remaining critical resources being loaded: download critical
assets as early as possible.
Optimise the number of critical bytes to reduce the download time (number of
roundtrips).
Tools
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
https://developer.yahoo.com/yslow/
Performance Testing
Chrome Dev Tools
Perf Rocks
http://perf.rocks
Perf School
github.com/bevacqua/perfschool
With achieving fast page load time, people can quickly use your site and
accomplish what they want.
People will appreciate it and end up being happier users.
Happier users mean be!er conversion rates.
Be!er conversion rates can be increased revenue, more signups,
returning visits, or downloads.
Let’s make the web less !
So…
Thanks!
Holger Bartel | @foobartel | HK CodeConf 23/10/2015