Optimising for fast web page load times

1. Page Speed Matters
Optimising for fast web page load times

2. John Kilmister
John Kilmister
Welcome
LeadSoftwareEngineeratPureGym
johnkilmister

3. John Kilmister
Agenda
Techniques
What is slow and why should I care
Identification Tools

4. John Kilmister
What is slow
and why should
I care?

5. John Kilmister
Why - Mobile
“Four in 10 Americans give up
accessing a mobile shopping
site that won’t load in just three
seconds”
Sources: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
https://moz.com/learn/seo/page-speed

6. John Kilmister
Why – Lost Customers
Sources: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
“Google has calculated that by
slowing its search results by just
four tenths of a second they
could lose 8 million searches
per day”

7. John Kilmister
Why – Page Rank
“Google has indicated site speed (and as
a result, page speed) is one of the
signals used by its algorithm to rank
pages.”
Source: https://moz.com/learn/seo/page-speed

8. John Kilmister
Page LoadCompleted
What is slow?
Page Loaded
Target3sInitial Render
Target2s
Backend
Target0.2s

9. John Kilmister
Identification
Tools

10. John Kilmister
Chrome Dev Tools
Quick, free and easy
Very Detailed
Can be Hard to use and
often get mixed results

11. John Kilmister
Web Page Test
https://www.webpagetest.org/
Free tool that shows
you how you page is
loaded
Remote testing of your
page

12. John Kilmister
Google Page Speed Test
https://developers.google.com/speed/pagespeed/
Free tool that tells you
both what is wrong and
how to resolve it
Remote testing of your
page
No waterfall breakdown
of data

13. John Kilmister
Speed Curve
Brings together best of
all sides. Inc throttling
traffic, screen shots and
loading waterfall
Benchmark competitors and
take snapshots over time
Paid for service starting at
$20 per month

14. John Kilmister
Techniques

15. John Kilmister
Content
Delivery
Networks

16. John Kilmister
Content Delivery Networks
Source: https://docs.microsoft.com/en-us/azure/cdn/cdn-overview

17. John Kilmister
Content Delivery Networks

18. John Kilmister
Non Blocking
CSS

19. John Kilmister
Non Blocking CSS
Default
Content
CSS Fetch
Content
Font Load
Prefetch Font, Inline above fold CSS then Load CSS file using JS
Content Content
Font Load
CSS Parsed
CSS CSS Fetch
CSS Parsed
First Render
First Render

20. John Kilmister
Non Blocking
JavaScriptJScript

21. John Kilmister
Non Blocking JavaScript
<script>
<script async>
<script defer>
Content
JS Load
Content
Content
Content
JS Execute
JS Load JS Execute
JS Execute
JS Load
JS Load
Content

22. John Kilmister
Page Size
JScript

23. John Kilmister
Focus on Size
GZip
Responses
Progressive
JPEG
Minification
HTML, CSS
and JS
Resources: http://youmightnotneedjquery.com/ https://tinypng.com
PNG
Compression
Remove JS
Libraries

24. John Kilmister
Chrome Code Usage
https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

25. John Kilmister
Some More Techniques…
Non Blocking JS
Gzip Resources
Minify Html/CSS/JSS
Cache, Cache, Cache
Use a CDN
Cookie less domains
Non Blocking CSS
Use HTML 5 picture
rather than CSS for
responsive images
HTTP 2
Use of Prefetch
Consider Amp Pages
Reduce Page Size
Compress Images
Reduce server side time
Avoid additional
redirects
Review framerates and
Jank
Lazy Load Images

26. John Kilmister
Questions

27. John Kilmister
Other Talks
Page speed in detail?
Social and search optimisation for Developers?
A short developers guide to recruiting amazing developers
?
?
The journey to continuous deployments