1.
Site Speed for Digital Marketers
@matclayton

2.
Why should you care about Site Speed?

3.
mixcloud.com mat@mixcloud.com3
2010: Google confirm Site Speed effects rankings

4.
mixcloud.com mat@mixcloud.com4
2018: Google confirm Site Speed also impacts mobile rankings

5.
Site Speed directly impacts conversion rates and your bottom line
Read more: https://skilled.co/resources/speed-affects-website-infographic

6.
GoogleBot will crawl more pages
Read more: https://mitchfournier.com/2011/08/03/reducing-page-load-times-dramatically-increased-my-googlebot-crawl-ra
This is due to Page Speed, which is a component of Site
Speed.
We’ve seen shifts in indexing based on Site speed as well
but often less pronounced.

7.
It is just a better user experience

8.
What are Page Speed and Site Speed?

9.
Page Speed: Time To First Byte
Essentially how fast can you get the HTML to the
browser

10.
Read more: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
Site Speed: Can mean many things to different
people
State Purpose Metric
Is it happening? Did the navigation start successfully? Has the server
responded?
First Paint
Is it useful? Has enough content rendered that users can engage with it? First Meaningful Paint
Is it usable? Can users interact with the page, or is it still busy loading? Time To Interaction

11.
What makes up a website?

12.
Loading Waterfalls - https://www.webpagetest.org/

13.
What makes up a website?

14.
Waterfall View: https://www.webpagetest.org/

15.
Waterfall View: https://www.mixcloud.com

16.
Comparisons and loading videos

17.
How to measure Site Speed

18.
JavaScript: Navigation Timing API

19.
JavaScript: Navigation Timing API

20.
Google Analytics

21.
Pingdom

22.
YSlow: Browser Extension

23.
YSlow: Browser Extension

24.
Google PageSpeed: Site + Chrome Extension

25.
Google LightHouse: Site and Inbuilt in Chrome

26.
Google LightHouse: Overall Performance

27.
Google LightHouse: Opportunities

28.
Connections and Requests

29.
- Anycast DNS
- A round trip from San Diego to
London ~160mS
- Anycast send traffic to a local
datacenter ~20ms
- A few Anycast Providers
- AWS Route53
- CloudFlare
- EasyDNS
Domain Name Service (DNS)
How customers find where your web servers are.

30.
HTTP2
http://www.http2demo.io/

31.
HTTP 1.1 HTTP 2
Why HTTP2 speeds up your site

32.
Head of blocking
HTTP 2.0HTTP 1.1

33.
Checking HTTP version

34.
- HTTP Header Compression (HPACK)
This will just work, and shaves off a good 1-2k depending on your use of cookies
- Request Priorities
Allows the browser to set request priorities and ensure that it get the most important
ones first
- Server Push:
WARNING this is very very hard to get right, and you’ll make it worse if you get it wrong
Other benefits of HTTP2

35.
Domain sharing
HTTP2: Yesterday’s performance best-practices are today’s anti-pa
Read more: https://docs.google.com/presentation/d/1_SMrVmiMxW2X1QZ1EcCnLKSosiD0PppP70Q3bw-l5Lg/present?slide=id.g40fbe
Sprites

36.
(Things which don’t change)

37.
Invest in Javascript/CSS tooling, specifically bundling

38.
CSS + JS: Concatenate and Minify
Read more: https://github.com/mishoo/UglifyJS2

39.
Tree shaking
less code == less data to transfer == faster site

40.
Split up your CSS + Javascript into multiple small files
(Advanced)
This allows you to download more files in parallel and helps with
caching
You can also Lazy Load Javascript when its required.

41.
Enable GZIP/Deflate

42.
Enable GZIP/Deflate
ompression will work well on text based assets: HTML / Javascript / CSS / JSON / XM
Usually 2-3x saving

43.
Caching is super important

44.
Caching Requests

45.
Caching Requests: Ensure they have a unique URL

46.
Caching Requests: Headers

47.
Caching Requests
Caching works for static assets which never change: Images / CSS / Javascript / Static HTM

48.
Use a Content Delivery Network (CDN)
Advantages
• Reduce request latency
- A round trip from San Diego to London
~160mS
- Anycast routes to a local datacenter
~20ms
• Caching, reduces server load
• SSL Termination done right
• DDoS protection
• HTTP2 support
• Compression / Minify static assets
Disadvantages
• Cost (free plans available)
• Provider dependency
• Not all content is cacheable

49.
The more elements in the HTML:
• The more bytes there are to download
• The slower the Javascript interactions will be
• The slower scrolling will be
Be especially careful with any parts of the HTML which involve loops
Reduce the number of HTML elements
Bad
Good
<div id=“my-list-item“>
<li>My Content</li>
</div>
<li id=“my-list-item“>My Content</li>

50.
Lazy load sections of the page
Read more: https://developers.google.com/web/fundamentals/performance/critical-rendering-path
Lazy Load in parts of the page which aren’t immediately required, or content critical.

51.
Images are still the number one cause of bloat on the web.”

52.
Fixing Images: BIG BIG WIN

53.
Choose the right image format for the job
Read more: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimizatio
Vector
Simple shapes represented
by lines shapes and points.
e.g. icons
Raster
Each pixel has individual
colour values. e.g. photos

54.
Vector Images: Use SVG
• Prefer vector to raster images when possible
• SVG are just simple XML files, exportable by all major image editors
• Compress very well using gzip
• Its also possible to build images using CSS3 or fonts

55.
Choose the right image format
Always check the file size after converting the image, this isn’t a hard and fast set
of rules

56.
WebP (Advanced)
Read more: https://developers.google.com/speed/webp/gallery1
Typically a 30% saving for users with support for WebP (Chrome only)

57.
Ensure raster images are the correct size: BIG BIG BIG WIN
Responsive images can cause a lot of additional bloat
Read more: https://internetingishard.com/html-and-css/responsive-images

58.
Retina images
Ship multiple variants, without downloading the large image for all devices

59.
Perception of speed: Progressive JPEG’s
Read more: https://optimus.keycdn.com/support/progressive-jpeg/

60.
Perception of speed: Loading states

61.
Perception of speed: Loading states
Read more: https://code.facebook.com/posts/991252547593574/the-technology-behind-preview-photos

62.
Caching is super important

63.
<html>
<head>
<title>My Page</title>
<link rel=“stylesheet" href=“my-css.css”>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
Ensure all CSS files required for rendering the page are included in the <head>
Optimize CSS includes

64.
Remove any unused CSS (hard to get correct)
Read more: https://cscheng.info/2016/05/06/quick-way-to-find-unused-css-with-chrome-devtools.htm
UnCSS: https://github.com/uncss/uncss
PurifyCSS: https://github.com/purifycss/purifycss

65.
Minimal CSS rendering (Super Advanced)
(styled components, this is hard and needs a complete rethink of your design to achieve)

66.
Caching is super important

67.
Optimize <script> positions
<html>
<head>
<title>My Page</title>
<script type="text/javascript" src=“my-script.js"></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
Bad
This will block rendering, causing the page to stall whilst it parses the Javascrip

68.
Read more: https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup
Solution 1: Moved to just above </body><html>
<head>
<title>My Page</title>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
<script type="text/javascript" src=“my-script.js"></script>
</body>
</html>
<html>
<head>
<title>My Page</title>
<script type="text/javascript" src=“my-script.js" async></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
Solution 2: Make the scripts async

69.
Remove all the bloat (aka tracking pixels and 3rd party scripts)
At least ensure they are embedded using async, so they don’t block page render
I would recommend you setup a regular review and remove session.

70.
In Summary
Everything comes down to one of 4 techniques
1. Reduce the number of assets
2. Reduce the size of assets
3. Make the assets load faster (DNS / Caching / CDN’s)
4. Prioritise the order of assets
5. Use HTTP2 ;)
It might not be your job, but hopefully you can now point
your development team in the right direction

71.
Thank you for listening
Any Questions?

72.
Mat Clayton
Co-Founder
mat@mixcloud.com
+44 (0) 7872007851