SlideShare a Scribd company logo
1 of 45
Bastian Grimm
Peak Ace AG
Web Performance Madness:
Critical Rendering Path Optimisation
@basgr
http://www.slideshare.net/bastiangrimm
2 pa.ag@peakaceag
No need to take notes:
https://pa.ag/brgh18spd
Because the PageSpeed Insights score is not enough!
#1 Better measurement
4 @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)
5 @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.
6 @peakaceag pa.ag
Optimising and measuring for painting timings
#1 #2 #3 #4
First Paint (FP) First Contentful
Paint (FCP)
Time to First Paint – marks the point when the
browser starts to render something, the first bit of
content on the screen.
Time to First Contentful Paint – marks the point when
the browser renders the first bit of content from the
DOM, text, an image etc.
7 @peakaceag pa.ag
Optimising and measuring for painting timings
#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 Paint – marks the point when the
browser starts to render something, the first bit of
content on the screen.
First Meaningful Paint – the paint after which the
biggest above-the-fold layout change has happened
and your most important element is visible!
8 @peakaceag pa.ag
Watching a video on YouTube? This is your hero element:
9 @peakaceag pa.ag
Chrome Dev Tools > Performance > Profiling (Frames)
10 @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)
11 @peakaceag pa.ag
This is how it looks like in Google Analytics
Behavior > events > pages: performance metrics [first-contentful-paint]
Source: Google Analytics
12 @peakaceag pa.ag
The cool kids’ way of doing this (using GTM)
#1 #3
#2 #4
13 @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
15 @peakaceag pa.ag
Critical rendering path optimisation
Initial view
(critical)
Below the fold
(not critical)
Some brief, technical background:
17 @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;
18 @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
19 @peakaceag pa.ag
Google doesn’t make a single GET request for its CSS!
Because requesting external CSS is more expensive than in-lining everything.
20 @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!
21 @peakaceag pa.ag
If you want to play around first: Try criticalcss.com
Give it a try: http://pa.ag/2nVIwXB
22 @peakaceag pa.ag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CRP loading demo</title>
<!-- critical CSS goes here -->
<style> h1 { colour: green; } </style>
<!-- use async preload // no IE, Edge & some other unimportant ones (http://caniuse.com/#search=preload) -->
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" />
<!--noscript for req. without JS -->
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
<!-- include polyfill for shitty browsers -->
<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>
<!-- use async preload // no IE, Edge & some other unimportant ones
(http://caniuse.com/#search=preload) -->
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" />
<!-- critical CSS goes here -->
<style> h1 { colour: green; } </style>
<!-- use async preload // no IE, Edge & some other unimportant ones
(http://caniuse.com/#search=preload) -->
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" />
<!--noscript for req. without JS -->
<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 the effort?
24 @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
25 @peakaceag pa.ag
Before & after: a fresh WordPress setup #2
HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), W3Total (CSS,
JS, HTML minify, caching, compression)
26 @peakaceag pa.ag
Before & after: a fresh WordPress setup #3
HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), W3Total (CSS,
JS, HTML minify, caching, compression) + CRP CSS inlined
27 @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 OPTIMIZED
0.789 sec
0.157 sec
0.410 sec
0.563 sec
(+32%)
(+41%)
28 @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.
#3 New image formats
30 @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
31 @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
32 @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.
33 @peakaceag pa.ag
There is way more: FLIF, BPG, JPEG-XR, etc.
If you’re “image-heavy”, go play with it!
Further reading: http://pa.ag/1S5OQmX
34 @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)
35 @peakaceag pa.ag
Please DON’T use a 1.2 MB background image, Kelvin?
Seriously, this can be as small as 83 KB (PNG) or even 17 KB (WebP)!
Pretty, varied, colourful, and often very slow!
#4 Custom web fonts
37 @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
38 @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?
40 @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
41 @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!
42 @peakaceag pa.ag
Don‘t miss Monica Dinculescu‘s great talk titled
„Fontastic Web Performance“
Watch the full talk: https://pa.ag/2qf6hvK
43 pa.ag@peakaceag
If you can only do one thing, I’d recommend doing this:
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!
44 pa.ag@peakaceag
We’re hiring! 25+ Performance Marketing jobs in Berlin!
Come and say “hello” or apply via jobs.pa.ag. Looking forward to speaking to you!
Always looking for talent!
Check out jobs.pa.ag
45 @peakaceag pa.ag
http://pa.ag/brgh18spd
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:

More Related Content

What's hot

What's hot (20)

Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018
 
How fast is fast enough - SMX West 2018
How fast is fast enough - SMX West 2018How fast is fast enough - SMX West 2018
How fast is fast enough - SMX West 2018
 
Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019
 
Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018
 
Migration Best Practices - Search Y 2019, Paris
Migration Best Practices - Search Y 2019, ParisMigration Best Practices - Search Y 2019, Paris
Migration Best Practices - Search Y 2019, Paris
 
International Site Speed Tweaks - ISS 2017 Barcelona
International Site Speed Tweaks - ISS 2017 BarcelonaInternational Site Speed Tweaks - ISS 2017 Barcelona
International Site Speed Tweaks - ISS 2017 Barcelona
 
AMP - SMX München 2018
AMP - SMX München 2018AMP - SMX München 2018
AMP - SMX München 2018
 
Whats Next in SEO & CRO - 3XE Conference 2018 Dublin
Whats Next in SEO & CRO - 3XE Conference 2018 DublinWhats Next in SEO & CRO - 3XE Conference 2018 Dublin
Whats Next in SEO & CRO - 3XE Conference 2018 Dublin
 
HPEC 2021 grblas
HPEC 2021 grblasHPEC 2021 grblas
HPEC 2021 grblas
 
OK Google, Whats next? - OMT Wiesbaden 2018
OK Google, Whats next? - OMT Wiesbaden 2018OK Google, Whats next? - OMT Wiesbaden 2018
OK Google, Whats next? - OMT Wiesbaden 2018
 
Migration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on AirMigration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on Air
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
 
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
The Need for Speed (5 Performance Optimization Tipps) - brightonSEO 2014
 
Three site speed optimisation tips to make your website REALLY fast - Brighto...
Three site speed optimisation tips to make your website REALLY fast - Brighto...Three site speed optimisation tips to make your website REALLY fast - Brighto...
Three site speed optimisation tips to make your website REALLY fast - Brighto...
 
Advanced data-driven technical SEO - SMX London 2019
Advanced data-driven technical SEO - SMX London 2019Advanced data-driven technical SEO - SMX London 2019
Advanced data-driven technical SEO - SMX London 2019
 
Rendering SEO (explained by Google's Martin Splitt)
Rendering SEO (explained by Google's Martin Splitt)Rendering SEO (explained by Google's Martin Splitt)
Rendering SEO (explained by Google's Martin Splitt)
 
DeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the EdgeDeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the Edge
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
TechSEO Boost 2018: Implementing Hreflang on Legacy Tech Stacks Using Service...
 
Introduction core web vitals
Introduction core web vitalsIntroduction core web vitals
Introduction core web vitals
 

Similar to Web Performance Madness - brightonSEO 2018

Front end optimization
Front end optimizationFront end optimization
Front end optimization
Abhishek Anand
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
areyouok
 
Magento performancenbs
Magento performancenbsMagento performancenbs
Magento performancenbs
varien
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
Kirk Yamamoto
 

Similar to Web Performance Madness - brightonSEO 2018 (20)

The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / Webgrind
 
Intro To Django
Intro To DjangoIntro To Django
Intro To Django
 
Front end optimization
Front end optimizationFront end optimization
Front end optimization
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜
 
How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version)
How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version)How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version)
How We Build NG-MY Websites: Performance, SEO, CI, CD (Thai version)
 
How We Build NG-MY Websites: Performance, SEO, CI, CD
How We Build NG-MY Websites: Performance, SEO, CI, CDHow We Build NG-MY Websites: Performance, SEO, CI, CD
How We Build NG-MY Websites: Performance, SEO, CI, CD
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
Magento performancenbs
Magento performancenbsMagento performancenbs
Magento performancenbs
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
Web Optimisation
Web OptimisationWeb Optimisation
Web Optimisation
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
 
PAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonPAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark Tomlinson
 
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
 

More from Bastian Grimm

More from Bastian Grimm (13)

SEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secretsSEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
SEOday Köln 2020 - Surprise, Surprise - 5 SEO secrets
 
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
Data-driven Technical SEO: Logfile Auditing - SEOkomm 2018
 
Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018
 
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
Migration Best-Practices: So gelingt der erfolgreiche Relaunch - SEOkomm 2017
 
Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017Welcome to a New Reality - SEO goes Mobile First in 2017
Welcome to a New Reality - SEO goes Mobile First in 2017
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
 
Technical SEO: 2017 Edition - SEO & Love Verona 2017
Technical SEO: 2017 Edition - SEO & Love Verona 2017Technical SEO: 2017 Edition - SEO & Love Verona 2017
Technical SEO: 2017 Edition - SEO & Love Verona 2017
 
Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016
Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016
Quo Vadis SEO (Die Zukunft des SEO) - SEOkomm Salzburg 2016
 
Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016
 
Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Recently uploaded (20)

The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
TEST BANK For Principles of Anatomy and Physiology, 16th Edition by Gerard J....
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 

Web Performance Madness - brightonSEO 2018

  • 1. Bastian Grimm Peak Ace AG Web Performance Madness: Critical Rendering Path Optimisation @basgr http://www.slideshare.net/bastiangrimm
  • 2. 2 pa.ag@peakaceag No need to take notes: https://pa.ag/brgh18spd
  • 3. Because the PageSpeed Insights score is not enough! #1 Better measurement
  • 4. 4 @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)
  • 5. 5 @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.
  • 6. 6 @peakaceag pa.ag Optimising and measuring for painting timings #1 #2 #3 #4 First Paint (FP) First Contentful Paint (FCP) Time to First Paint – marks the point when the browser starts to render something, the first bit of content on the screen. Time to First Contentful Paint – marks the point when the browser renders the first bit of content from the DOM, text, an image etc.
  • 7. 7 @peakaceag pa.ag Optimising and measuring for painting timings #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 Paint – marks the point when the browser starts to render something, the first bit of content on the screen. First Meaningful Paint – the paint after which the biggest above-the-fold layout change has happened and your most important element is visible!
  • 8. 8 @peakaceag pa.ag Watching a video on YouTube? This is your hero element:
  • 9. 9 @peakaceag pa.ag Chrome Dev Tools > Performance > Profiling (Frames)
  • 10. 10 @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)
  • 11. 11 @peakaceag pa.ag This is how it looks like in Google Analytics Behavior > events > pages: performance metrics [first-contentful-paint] Source: Google Analytics
  • 12. 12 @peakaceag pa.ag The cool kids’ way of doing this (using GTM) #1 #3 #2 #4
  • 13. 13 @peakaceag pa.ag Combine it with Google Data Studio: Test it: http://pa.ag/2Ee550q
  • 14. The code and resources required to render the initial view of a web page #2 Critical rendering path
  • 15. 15 @peakaceag pa.ag Critical rendering path optimisation Initial view (critical) Below the fold (not critical)
  • 16. Some brief, technical background:
  • 17. 17 @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;
  • 18. 18 @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
  • 19. 19 @peakaceag pa.ag Google doesn’t make a single GET request for its CSS! Because requesting external CSS is more expensive than in-lining everything.
  • 20. 20 @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!
  • 21. 21 @peakaceag pa.ag If you want to play around first: Try criticalcss.com Give it a try: http://pa.ag/2nVIwXB
  • 22. 22 @peakaceag pa.ag <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CRP loading demo</title> <!-- critical CSS goes here --> <style> h1 { colour: green; } </style> <!-- use async preload // no IE, Edge & some other unimportant ones (http://caniuse.com/#search=preload) --> <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> <!--noscript for req. without JS --> <noscript><link rel="stylesheet" href="non-critical.css"></noscript> <!-- include polyfill for shitty browsers --> <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> <!-- use async preload // no IE, Edge & some other unimportant ones (http://caniuse.com/#search=preload) --> <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> <!-- critical CSS goes here --> <style> h1 { colour: green; } </style> <!-- use async preload // no IE, Edge & some other unimportant ones (http://caniuse.com/#search=preload) --> <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> <!--noscript for req. without JS --> <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
  • 23. Let’s look at an implementation… Is it worth the effort?
  • 24. 24 @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
  • 25. 25 @peakaceag pa.ag Before & after: a fresh WordPress setup #2 HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), W3Total (CSS, JS, HTML minify, caching, compression)
  • 26. 26 @peakaceag pa.ag Before & after: a fresh WordPress setup #3 HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), W3Total (CSS, JS, HTML minify, caching, compression) + CRP CSS inlined
  • 27. 27 @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 OPTIMIZED 0.789 sec 0.157 sec 0.410 sec 0.563 sec (+32%) (+41%)
  • 28. 28 @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.
  • 29. Highest quality, (more) efficient data compression & smaller files. #3 New image formats
  • 30. 30 @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
  • 31. 31 @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
  • 32. 32 @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.
  • 33. 33 @peakaceag pa.ag There is way more: FLIF, BPG, JPEG-XR, etc. If you’re “image-heavy”, go play with it! Further reading: http://pa.ag/1S5OQmX
  • 34. 34 @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)
  • 35. 35 @peakaceag pa.ag Please DON’T use a 1.2 MB background image, Kelvin? Seriously, this can be as small as 83 KB (PNG) or even 17 KB (WebP)!
  • 36. Pretty, varied, colourful, and often very slow! #4 Custom web fonts
  • 37. 37 @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
  • 38. 38 @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!
  • 39. FOIT (flash of invisible text) or FOUT (flash of unstyled text) can cause annoying flickering Asynchronous?
  • 40. 40 @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
  • 41. 41 @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!
  • 42. 42 @peakaceag pa.ag Don‘t miss Monica Dinculescu‘s great talk titled „Fontastic Web Performance“ Watch the full talk: https://pa.ag/2qf6hvK
  • 43. 43 pa.ag@peakaceag If you can only do one thing, I’d recommend doing this: 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!
  • 44. 44 pa.ag@peakaceag We’re hiring! 25+ Performance Marketing jobs in Berlin! Come and say “hello” or apply via jobs.pa.ag. Looking forward to speaking to you! Always looking for talent! Check out jobs.pa.ag
  • 45. 45 @peakaceag pa.ag http://pa.ag/brgh18spd 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: