International Site Speed - ISS Munich 2018

Bastian Grimm, Peak Ace AG | @basgr
A Guide To Super-Speed Around The World
International Site Speed

I’ve got some serious issues…

For me, there is nothing worse than having to wait for anything to load!
I’m not a very patient guy…

4 @peakaceag pa.ag
Cognitive Load with Stressful Situations
Source: Ericsson ConsumerLab, Neurons Inc. 2015
Solving a math problem
Experiencing mobile delays
Watching a horror movie
Standing at the edge of a virtual cliff
Watching a melodramatic TV show
Waiting in line at retail store
Level of stress caused
by delays on mobile is
comparable to watching
a horror movie!

Fast loading time plays an important role in overall user experience!
Performance = User Experience!

6 @peakaceag pa.ag
Here is what I really do care about: Engagement!
Better user engagement all over the board (baseline: MoM before & after a roll-out)
Source: Google Analytics
KPI / MEASUREMENT
Bounce Rate (BR)
Time-on-Site (ToS)
Views per Session (VpS)
BEFORE
42.60 %
4:30 min
3.7 pages
AFTER
35.95 %
5:14 min
4.8 pages

7 @peakaceag pa.ag
You don‘t want to take notes all the time?
https://pa.ag/iss18speed

8 @peakaceag pa.ag
Revisited: PageSpeed (load time) is a ranking factor
Source: http://pa.ag/2iAmA4Y & http://pa.ag/2ERTPYY

9 @peakaceag pa.ag
Google is obsessed with site speed and always pushes for
faster sites:
Source: http://pa.ag/1cWFCtY

10 @peakaceag pa.ag
Lets get this straight - this is what your users expect:
Obviously, slow page loading time is a major factor in page abandonment.
According to a Nielsen report, 47 % of people
expect a website to load within two seconds,
and 40 % will leave a website if it does not
load fully within three seconds.”

12 @peakaceag pa.ag
▪ Time spent Downloading simply measures the time to complete a HTTP request.
▪ It‘s an average on files such as CSS, JS and others – thus the number is heavily flawed.
▪ The only valid use case seems to be monitoring “the trend”.
▪ The over all numbers does not reflect “PageSpeed”!
Don‘t get fooled by GSCs „Time spent Downloading“
The data doesn‘t reflect how page load feels at all!
Source: http://pa.ag/2xo20YH

A bit of everything, for everyone…!
#1 Intro: Must-have Tools

14 @peakaceag pa.ag
Google’s PageSpeed Insights
I am not the biggest fan…

15 @peakaceag pa.ag
Webpagetest.org has it all – at a glance!
TTFB, keepalive, compression & caching, image usage, CDN & waterfall, and diagrams.

16 @peakaceag pa.ag
The new kid in town: Google Lighthouse
Try it out: https://developers.google.com/web/tools/lighthouse/

17 @peakaceag pa.ag
You need to monitor your site continuously over time!
Source: https://www.peterhedenskog.com/blog/2015/04/open-source-performance-dashboard/

Measuring responsiveness of a web server: The amount of time between
creating a connection & downloading the contents of a web page.
#2 Time to First Byte (TTFB)

19 @peakaceag pa.ag
Free, global TTFB testing with keycdn.com
DNS, TTFB & TLS times from 14 different locations at-a-glance
Source: https://tools.keycdn.com/performance

20 @peakaceag pa.ag
Should I worry about my TTFB?
And what‘s an acceptable result to aim for?
More: http://pa.ag/2lKCIRH & http://pa.ag/2mkJTMY

Number of requests, blocking vs. non-blocking, asynchronous requests etc.
#3 Optimise HTTP requests

22 @peakaceag pa.ag
Strong increase: # of requests & file-size
Average: 304 KB of JS code and 6.4 CSS files per page
http://pa.ag/18o6WyO

23 @peakaceag pa.ag
Having to load 23 CSS and JavaScript files sucks!
Deichmann (AT) wastes 3 seconds using blocking-resources...

24 @peakaceag pa.ag
Whenever you see this: Reduce the amount of requests!
Combine multiple CSS & JavaScripts files to one (per type)

25 @peakaceag pa.ag
Don‘t forget: Minify CSS & JavaScript files
Remove white-spaces, line-brakes, comments & shortens variables/functions
For CSS, try:
▪ http://www.phpied.com/cssmin-js/
▪ http://developer.yahoo.com/yui/compressor/
▪ http://www.minifycss.com/css-compressor/
For JS, go with:
▪ http://jscompress.com/
▪ https://github.com/mishoo/UglifyJS
▪ http://www.crockford.com/javascript/jsmin.html
▪ https://developers.google.com/closure/compiler

26 @peakaceag pa.ag
Asynchronous requests where possible
Use HTML 5 async, JavaScript workarounds and/or loader:
Further information: http://pa.ag/18o8War

27 @peakaceag pa.ag
For all images: Put ‘em on a diet!
tinyPNG & tinyJPG for smart (lossy) compression & removal of meta-data et al.
http://tinypng.com | http://tinyjpg.com

Pretty, varied, colorful, and slow!
#4 Custom web fonts

29 @peakaceag pa.ag
68% of all websites use at least one non-standard font!
Result: 114 kB additional data and on average 2.9 HTTP requests
Source: http://pa.ag/1BRUnbe
Font transfer size & font requests Sites with custom fonts
Font transfer size (kB) Font requests

30 @peakaceag pa.ag
Classic scenario: using external CSS
Easy to use with one big disadvantage: CSS is render-blocking!

31 @peakaceag pa.ag
Load custom fonts with FontLoader
Google's asynchronous solution: webfont.js (JavaScript loads first, then CSS)

32 @peakaceag pa.ag
Not very successful and also problematic
FOUT (flash of unstyled text) = super annoying flickering
Fighting the FOUT: http://pa.ag/1BRWMmu

33 @peakaceag pa.ag
How I usually tackle this
Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi

34 @peakaceag pa.ag
New stuff to play around with: “font-display” strategies
More: http://pa.ag/2eUwVob

There is no reason anymore, to not deliver content directly via HTTP/2,
which is super fast.
#5 Go HTTPS & HTTP/2

36 @peakaceag pa.ag
Top 3 for high volume queries: >60 % HTTPS results!
Source: SEMrush Ranking Factors 2017 - https://semrush.com/ranking-factors

37 @peakaceag pa.ag
HTTPS ranking “boost“? Well… maybe… maybe not!
Source: http://pa.ag/2ekj4Gi & http://pa.ag/2pRq0PS

38 @peakaceag pa.ag
Even if you don't believe in a “boost”…
Since January ‘17 login/credit card fields on HTTP are flagged as “not secure”
Source: http://pa.ag/2eh2Trk

39 @peakaceag pa.ag
Last chance: Chrome goes full HTTPs in July 2018!
Chrome 68 is going to flag every single HTTP URL!
Source: http://pa.ag/2rmIAjg

41 @peakaceag pa.ag
Please make sure to combine:
If you are using HTTPS
without HTTP/2 (SPDY)
you are doing it all wrong!

42 @peakaceag pa.ag
Some tools to get you started with HTTP/2:
Download and test: https://tools.keycdn.com/http2-test & http://pa.ag/2cG7R3k & https://www.ssllabs.com/ssltest/

43 @peakaceag pa.ag
HTTP/2 specific optimisation strategies & features
Source: http://pa.ag/2pmhObg

pre-fetching of DNS, resources and whole pages
#6 Pre-Fetching & -Rendering

45 @peakaceag pa.ag
Breakdown of requests for Netdoktor.de (waterfall view)
DNS lookup for the asset server (static.netdoktor.de) takes ~300 ms

46 @peakaceag pa.ag
DNS pre-fetching in <head>: 81 ms = 75 % time saved
Very useful for other hosts' resources, that you want to use at a later stage.

47 @peakaceag pa.ag
One step further: pre-connecting HTTPS
Don't just pre-resolve DNS names, also allow for TLS-handshake.

The next image in a gallery or a larger version of an image (zoom)
Critical HTML fragments like boxes or layers (Sign Up/Sign in)
What else could I pre-fetch?

Shopping basket (Checkout), as soon as an article is placed inside
The next page of a multipage article
Also, what could I pre-render?

Because the PageSpeed Insights score is not enough!
#7 Better measurement

51 @peakaceag pa.ag
Translating experiences to performance metrics:
User experience
▪ Is it happening?
› Did the navigation start successfully?
Has the server responded?
▪ Is it useful?
› Has enough content rendered for users
to engage with it?
▪ Is it usable?
› Can users interact with the page or is it
still busy loading?
▪ Is it smooth/delightful?
› Are the interactions smooth and
natural, free of lag and jank?
Corresponding metric
First Paint (FP) / First Contentful Paint (FCP)
First Meaningful Paint (FMP) -> Hero Element Timing
Time to Interactive (TTI)
Long tasks (technically the absence of those long tasks)

52 @peakaceag pa.ag
Optimizing and measuring for painting timings
#1 #2
First Paint (FP)
Time to First Paint – marks the point when the
browser starts to render something, the first bit of
content on the screen.

53 @peakaceag pa.ag
#1 #2 #3 #4
First Paint (FP) First Contentful
Paint (FCP)
Time to First Contentful Paint – marks the point when
the browser renders the first bit of content from the
DOM, text, an image etc.

54 @peakaceag pa.ag
#1 #2 #3 #4 #5 #6
First Paint (FP) First Contentful
Paint (FCP)
First Meaningful
Paint (FMP) / Hero!
Time to Interactive
(TTI)
Time to First Contentful Paint – marks the point when
the browser renders the first bit of content from the
DOM, text, an image etc.

Care about your Hero (Element)!
Optimize for First Meaningful Paint

56 @peakaceag pa.ag
Track paint timings with Google Analytics (in theory)
Get the tracking code snippets: http://pa.ag/2viHQSz
version 62 and up
You must ensure your
PerformanceObserver is
registered in the <head>
before any stylesheets, so it
runs before FP/FCP happens.
(a buffered flag TBD in v.2)

57 @peakaceag pa.ag
This is how it looks like in Google Analytics
Behavior > events > pages: performance metrics [first-contentful-paint]
Source: Google Analytics

58 @peakaceag pa.ag
The cool kids’ way of doing this (using GTM):
#1 #3
#2 #4

59 @peakaceag pa.ag
Combine it with Google Data Studio:
Test it: http://pa.ag/2Ee550q

The code and resources required to render the initial view of a web page
#7 Critical rendering path

61 @peakaceag pa.ag
Critical rendering path optimization
Initial view
(critical)
Below the fold
(not critical)

62 @peakaceag pa.ag
CSSOM: the CSS Object Model
▪ The CSSOM is a “map” of the CSS styles
found on a web page.
▪ It’s much like the DOM (Document Object
Model), but for CSS rather than HTML.
▪ The CSSOM combined with the DOM is
used by browsers to display web pages.
body
font-size:16px;
h1
font-size:22px;
p
font-size:16px;
p
font-size:12px;
a
font-size:12px;
img
font-size:16px;

63 @peakaceag pa.ag
Web browsers use the CSSOM to render a page

64 @peakaceag pa.ag
Google doesn’t make a single GET request for its CSS!

65 @peakaceag pa.ag
How to know which CSS is critically required?
▪ Minimum: a snapshot of CSS rules to
render a default desktop resolution (e.g.
1280x1024).
▪ Better: various snapshots for mobile
phones, pad/s & desktop/s – a lot of work!
Source: http://pa.ag/2o4x0uE

66 @peakaceag pa.ag
My favorite: “critical” (using Node / Phantom JS)
Renders a site in multiple resolutions & builds a combined and compressed CRP CSS:
Critical & criticalCSS on GitHub: http://pa.ag/2wJTZAu & http://pa.ag/2wT1ST9

67 @peakaceag pa.ag
If you want to play around: criticalcss.com
Give it a try: http://pa.ag/2nVIwXB

68 @peakaceag pa.ag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CRP loading demo</title>

<style> h1 { color: green; } </style>

<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" />

<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

<script>
*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
(function(){ ... } ());
/*! loadCSS rel=preload polyfill. [c] 2017 Filament Group, Inc. MIT License */
(function(){ ... } ());
</script>
</head>
<body>
</body>
</html>


<style> h1 { color: green; } </style>


<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
(function(){ ... } ());
/*! loadCSS rel=preload polyfill. [c] 2017 Filament Group, Inc. MIT License */
(function(){ ... } ());
Putting it all together
Fit the HTML, CSS & JS that’s necessary for “Start Render” into that first 14 kB round trip!
Inline your critical CSS
1
Loading non-critical CSS
async using rel=“preload“
2
Apply the CSS once it has
finished loading via “onload“
3
Fallback for non-JS requests
4
Implement loadCSS script for
older browsers
5

Let’s look at an actual implementation…
Is it worth the effort?

70 @peakaceag pa.ag
Before & after: a fresh WordPress setup #1
HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), no caching
and no other performance optimizations

71 @peakaceag pa.ag
HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), W3Total (CSS,
JS, HTML minify, caching, compression)

72 @peakaceag pa.ag
HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), W3Total (CSS,
JS, HTML minify, caching, compression) + CRP CSS inlined

73 @peakaceag pa.ag
Performance metrics comparison at a glance
Rendering starts significantly earlier; this allows for faster interaction with the site.
KPI / MEASUREMENT
Load Time
Time to First Byte (TTFB)
Start Render
Time to Interactive (TTI)
DEFAULT WP
1.357 sec
0.454 sec
1.000 sec
0.956 sec
BASIC PERFORMANCE
0.791 sec
0.159 sec
0.600 sec
0.931 sec
FULLY OPTIMIZED
0.789 sec
0.157 sec
0.410 sec
0.563 sec
(+32%)
(+41%)

74 @peakaceag pa.ag
TL;DR
Implement proper tracking, measure “First Meaningful Paint” (Hero Element delivery).
Audit, clean and (afterwards) split CSS into two parts: “initial view” and “below the fold”.
Use “critical” to generate and inline your critical path CSS.
Use rel=“preload“ and “loadCSS” to async load below the fold / site-wide CSS.
Off-load all overhead (JS, etc.) to stay within 14kB for faster, initial paint.

Highest quality, (more) efficient data compression & smaller files
#9 New image formats

76 @peakaceag pa.ag
62% of all web traffic is made up of images...
… and 51% of all URLs load more than 40 images per request.
Source: http://pa.ag/1SGDOEo
Average bytes per page by content type Image requests per page

77 @peakaceag pa.ag
WebP: Google’s alternative to JPEG, PNG, and GIF
Lossy and lossless compression, transparency, metadata, colour profiles, animation, and
much smaller files (30% vs. JPEG, 80% vs. PNG) – but only in Chrome, Opera & Android
Everything about WebP: http://pa.ag/1EpFWeN / WebP support: http://pa.ag/2FZK4XS

78 @peakaceag pa.ag
You can still use WebP with on-the-fly replacement
Swap PNG and JPEG images per re-write (i.e., using .htaccess)
VS.

79 @peakaceag pa.ag
There is more: FLIF, BPG etc.
Left: image size compared to original PNG
Further reading: http://pa.ag/1S5OQmX

AMP for better experience on mobile!
#10 Accelerated Mobile Pages

81 @peakaceag pa.ag
AMP: stripped down HTML for maximum performance
Google values speed much more than (HTML) features
What is not allowed:
▪ external CSS
▪ JavaScript (except async JS)
▪ Flash, Java & Co.
Maximum mobile performance:
▪ less CPU and memory
▪ less bandwidth
▪ less battery usage
▪ Better user experience
Keep in mind:
▪ text and images only, everything else is limited
▪ CSS only inline (non-blocking)
▪ CSS with limitation in size
▪ Requires width and height values (i.e. images)

82 @peakaceag pa.ag
AMP gained quite a bit of momentum:
Source: http://pa.ag/2qoc2bh & http://pa.ag/2qoaOwc & http://pa.ag/2rmWGRN

83 @peakaceag pa.ag
Compared to a regular site, AMP is extremely fast…
But totally different UX and only 3 % of AMP visitors actually transition to non-AMP URL
Source: http://pa.ag/2fkyXLJ
6231
929
Regular AMP
Mobile page load time
0 2000 4000 6000 8000
(ms)
Real-world data: mobile load times
5.7x faster

84 @peakaceag pa.ag
Multiple publishers said an AMP page view
currently generates around half as much
revenue as a page view on their full mobile
websites.”
Via WSJ: publishers still not 100 % happy
AMP page views only generate half as much revenue as “real“ mobile sites…
Source: http://pa.ag/2fzOWK3

85 @peakaceag pa.ag
But… isn‘t AMP only for publishers?
AMP for products will be available very soon in a SERP near you! Meanwhile check
eBay (US) or Zalando (DE).
More: https://ampbyexample.com/samples_templates/product/

87 @peakaceag pa.ag
http://pa.ag/iss18speed
Always looking for talent! Check out jobs.pa.ag
Bastian Grimm
bg@pa.ag
twitter.com/peakaceag
facebook.com/peakaceag
www.pa.ag
Liked the deck? Here you go:

International Site Speed - ISS Munich 2018

Recommended

Recommended

More Related Content

More from Bastian Grimm

More from Bastian Grimm (20)

Recently uploaded

Recently uploaded (20)

International Site Speed - ISS Munich 2018