These are the slides from my talk "Your WebPerf Sucks" at HK CodeConf 2015 (http://hongkong.codeconf.io) at Science Park in Hong Kong, October 24th.
Web Performance is an important aspect of building for the web and this talk highlights different aspects of what is important and what can be done to improve web performance and build faster sites. While mentioning different aspects of possible improvements, the main focus lies on optimising the critical rendering path to get pages on the screen faster and what tools can help to do so.
29. — Ian Feather
“Performance is a compromise
between design and performance.
You can only be as fast as the
design allows.”
30. Collaboration & communication between designers
and developers nowadays is essential and more
important than ever before.
Breaking Silos
31. 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.
32. If your website is 15MB it’s not HTML5, it’s
stupid.
— Christian Heilmann
38. 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
40. 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
41. Every request fetched inside of HEAD, will postpone
the rendering of the page
Loading Assets
47. 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.
48. 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).