Optimize Site Speed by Inlining Critical CSS

@basgr from @peakaceag#SMX #32A
Bastian Grimm, Peak Ace AG | @basgr
Next-gen performance optimization - the 2018 edition
How fast is fast enough?

#SMX #32A @basgr from @peakaceag
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…

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

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

Google is obsessed site speed and keeps pushing for
faster sites all the time!

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 a retail store
Level of stress caused by
delays on mobile is
comparable to watching
a horror movie!

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

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)

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.

#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.

#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

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)

This is how it looks like in Google Analytics
Behavior > events > pages: performance metrics [first-contentful-paint]
Source: Google Analytics

The cool kids’ way of doing this (using GTM):
#1 #3
#2 #4

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

Critical rendering path optimization
Initial view
(critical)
Below the fold
(not critical)

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;

Web browsers use the CSSOM to render a page

Google doesn’t make a single GET request for its CSS!

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

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

<!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?

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

HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), W3Total (CSS,
JS, HTML minify, caching, compression)

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

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

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.
#SMXInsights
Share these #SMXInsights on your social channels!

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

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

Classic scenario: using external CSS
Easy to use with one big disadvantage: CSS is render-blocking!

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

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

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

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

Highest quality, (more) efficient data compression, smaller files
It hasn’t fully caught on yet, but it is very exciting!
#4 New image formats

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

WebP: Google’s alternative to JPEG, PNG, and GIF
Lossy and lossless compression, transparency, metadata, color profiles, animation, and
much smaller files (30% vs. JPEG, 80% vs. PNG)
Everything about WebP: http://pa.ag/1EpFWeN

We’re not quite there yet...
Currently only supported by Chrome, Opera, and Android
Source: http://pa.ag/2FZK4XS

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

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

Using HTML5 and <picture> with newer templates
Browsers, which don‘t support <picture> will ignore this. <source> browsers, which
don't support WebP, will use <img> as a fallback.

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

It really depends on the visual itself:

Talking about image file types…

Guetzli: 35% smaller JPEGs due to better encoding
No new file type needed at all; operating systems and browsers don’t need to adapt!
Source: http://pa.ag/2nyZjxf

#5 … more?

@peakaceag with @basgr#SMX #32A
Make sure to get the basics right!
▪ Optimize images: reduce overhead for JPGs & PNGs (metadata,
etc.), request proper sized images and try new formats.
▪ Implement effective caching and compression.
▪ Whenever possible, use asynchronous requests.
▪ Decrease size of CSS and JavaScript files (minify).
▪ Use a content distribution network (CDN) / an asset server
(as well as cookie-less domains) to optimize parallel requests.
▪ Lean mark-up (no comments, use inline CSS / JS only where
necessary or useful)
▪ Consider (DNS) pre-fetching & pre-rendering if feasible.
▪ Watch (& optimize) for TTFB, don’t forget you back-end
architecture / systems (e.g. DB, webserver etc.).
All slides on SlideShare: http://pa.ag/iss17speed
Use my checklist on SlideShare to double check:

http://pa.ag/smxw18spd
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:

Optimize Site Speed by Inlining Critical CSS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Optimize Site Speed by Inlining Critical CSS

Ähnlich wie Optimize Site Speed by Inlining Critical CSS (20)

Mehr von Bastian Grimm

Mehr von Bastian Grimm (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Optimize Site Speed by Inlining Critical CSS