The latest in site speed: advanced #webperf 2018

Bastian Grimm, Peak Ace AG | @basgr
The latest in #webperf 2018: better metrics, images, custom fonts & CRP
Web Performance Madness

3 @peakaceag pa.ag
USA Today created a superfast GDPR compliant offering
500 vs. 34 requests, 140 vs. 0 JS files, 6 vs. 1 CSS, 5.01 MB vs. 356 kB in size, etc.
EU
0.300 sec
0.345 sec
0.995 sec
443
US
1.700 sec
3.604 sec
19.261 sec
8,792
Start Render
First Interactive
Load Time
Speed Index
34 859Total Requests
356 kB 5,092 kBBytes in

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

5 @peakaceag pa.ag
Let’s 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.”

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

7 @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)

8 @peakaceag pa.ag
Optimising 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.

9 @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.

10 @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)
First Meaningful Paint – the paint after which the
biggest above-the-fold layout change has happened
and your most important element is visible!

11 @peakaceag pa.ag
Watching a video on YouTube? This is your hero element:

12 @peakaceag pa.ag
Chrome Dev Tools > Performance > Profiling (Frames)

13 @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)

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

15 @peakaceag pa.ag
The cool kids’ way of doing this (using GTM)
#1 #3
#2 #4
This needs to go directly
into your HTML mark-up
because GTM doesn’t
support ES6 script atm.

16 @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
#2 Critical rendering path

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

Some brief, technical background:

20 @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;

21 @peakaceag pa.ag
Web browsers use the CSSOM to render a page
If this is external CSS, the browser
needs to wait for the download.

22 @peakaceag pa.ag
Google doesn’t make a single GET request for its CSS!
Because requesting external CSS is more expensive than inlining everything.

23 @peakaceag pa.ag
How to know which CSS is critically required
“Critical” renders in multiple resolutions & builds a combined/compressed CRP CSS:
Critical & criticalCSS on GitHub: http://pa.ag/2wJTZAu & http://pa.ag/2wT1ST9
▪ 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 – manually
that’d be a lot of work!

24 @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 { colour: 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 { colour: 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 implementation…
Is it worth all the effort?

26 @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 optimisations

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

28 @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

29 @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
BASICS (W3TOTAL)
0.791 sec
0.159 sec
0.600 sec
0.931 sec
FULLY OPTIMISED
0.789 sec
0.157 sec
0.410 sec
0.563 sec
(+32%)
(+41%)

Highest quality, (more) efficient data compression & smaller files
#3 Image optimisation

31 @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

32 @peakaceag pa.ag
Basic optimisation for all images: put ‘em on a diet!
tinyPNG & tinyJPG for smart (lossy) compression & removal of metadata et al.
http://tinypng.com | http://tinyjpg.com

33 @peakaceag pa.ag
WebP: Google’s alternative to JPEG, PNG, and GIF
Lossy & 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

34 @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.

35 @peakaceag pa.ag
There is way more: FLIF, BPG, JPEG-XR, etc.
If you’re “image-heavy”, play around with it!
Further reading: http://pa.ag/1S5OQmX

36 @peakaceag pa.ag
SEMrush (blog) could save 80-90% of it’s image traffic
Better compression combined with modern image formats (i.e. WebP & JPEG-XR)

Pretty, varied, colourful, and often very slow!
#4 Custom web fonts

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

39 @peakaceag pa.ag
Classic scenario: using external CSS
Easy to use with one big disadvantage: it’s render-blocking!
CSS (font) call to Google causes
the render to stop / block until
the download has been finished!

FOIT (flash of invisible text) or FOUT (flash of unstyled text)
can cause annoying flickering
Asynchronous?

41 @peakaceag pa.ag
Fighting the flash of unstyled text/content
Make your fall-back font match the intended web font (letter spacing, heights, etc.)
Give it a try: https://pa.ag/2qgE8EH

42 @peakaceag pa.ag
Fighting the flash of invisible text
New stuff to play around with: various “font-display” strategies (no IE/Edge yet)
More: http://pa.ag/2eUwVob
‘font-display’ allows to display text while the font for it is still loading!

43 @peakaceag pa.ag
Don‘t miss Monica Dinculescu‘s great talk titled
„Fontastic Web Performance“
Watch the full talk: https://pa.ag/2qf6hvK

44 pa.ag@peakaceag
If you can only do one thing, I’d recommend doing this:
100ms blocking period, but no swap. Even after it’s downloaded (only on next page view)
Go to your CSS file, look for @font-face and add
’font-display:optional’ - there hasn’t been a
safer & easier gain in #webperf in a long time!

45 @peakaceag pa.ag
e-mail me > bg@pa.ag
ALWAYS LOOKING FOR TALENT! CHECK OUT JOBS.PA.AG
Bastian Grimm
bg@pa.ag
twitter.com/peakaceag
facebook.com/peakaceag
www.pa.ag
Want the deck?
WINNER

The latest in site speed: advanced #webperf 2018

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to The latest in site speed: advanced #webperf 2018

Similar to The latest in site speed: advanced #webperf 2018 (20)

More from Anton Shulke

More from Anton Shulke (20)

Recently uploaded

Recently uploaded (20)

The latest in site speed: advanced #webperf 2018