3. 3 @peakaceag pa.ag
Google is obsessed with site speed and always pushes for
faster sites:
Source: http://pa.ag/1cWFCtY
4. 4 @peakaceag pa.ag
Don‘t get fooled by GSCs „Time spent Downloading“
The data is sh*t and doesn‘t reflect how page load feels at all!
Source: http://pa.ag/2xo20YH
▪ 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”!
5. 5 @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.”
„
6. 6 pa.ag@peakaceag
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!
7. Fast loading time plays an important role in overall user experience!
Performance = User Experience!
8. Measuring responsiveness of a web server: The amount of time between
creating a connection & downloading the contents of a web page.
#1 Time to First Byte (TTFB)
9. 9 @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
10. 10 @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
11. Number of requests, blocking vs. non-blocking, asynchronous requests etc.
#2 Optimise HTTP requests
12. 12 @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
13. 13 @peakaceag pa.ag
Having to load 23 CSS and JavaScript files sucks!
Deichmann (AT) wastes 3 seconds using blocking-resources – Reduce, combine & minify!
14. 14 @peakaceag pa.ag
For all other images: Put ‘em on a diet!
tinyPNG & tinyJPG for smart (lossy) compression & removal of meta-data et al.
http://tinypng.com | http://tinyjpg.com
15. 15 @peakaceag pa.ag
For everything else: asynchronous requests where possible
Use HTML 5 async, JavaScript workarounds and/or a loader:
Further information: http://pa.ag/18o8War
17. 17 @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
18. 18 @peakaceag pa.ag
Classic scenario: using external CSS
Easy to use … but one big disadvantage: CSS is render-blocking!
19. 19 @peakaceag pa.ag
Load custom fonts with Fontloader
Google's asynchronous solution: webfont.js (JavaScript loads first, then CSS)
20. 20 @peakaceag pa.ag
Not very successful and also problematic:
FOUT (Flash of unstyled Text) = super annoying flickering
Fighting the FOUT: http://pa.ag/1BRWMmu
21. 21 @peakaceag pa.ag
How I usually tackle this:
Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi
22. 22 @peakaceag pa.ag
Some new stuff to play with: „font-display“ strategies
More: http://pa.ag/2eUwVob
24. 24 @peakaceag pa.ag
Breakdown of requests for Netdoktor.de (waterfall view)
DNS lookup for the asset server (static.netdoktor.de) takes ~300 ms
25. 25 @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.
26. 26 @peakaceag pa.ag
One step further: pre-connecting HTTPS
Don't just pre-resolve DNS names, also allow for TLS-handshake.
27. Shopping basket (Checkout), as soon as an article is placed inside
The next page of a multipage article
What else could I preload?
29. 29 @peakaceag pa.ag
What is not allowed:
▪ external CSS
▪ JavaScript (except async JS)
▪ Flash, Java & Co.
AMP: stripped down HTML for maximum performance
Google values speed much more than (HTML) features
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)
30. 30 pa.ag@peakaceag
Without a doubt, 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
31. 31 pa.ag@peakaceag
… And it gained quite a bit of momentum:
Source: http://pa.ag/2qoc2bh & http://pa.ag/2qoaOwc & http://pa.ag/2rmWGRN
32. 32 @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
„
33. 33 @peakaceag pa.ag
But… isn‘t AMP only for publishers?
AMP for products will be available very soon in a SERP near you!
More: https://ampbyexample.com/samples_templates/product/
40. 40 @peakaceag pa.ag
This is just the beginning: more warnings from Oct. ‘17!
Chrome 62 is flagging every single HTTP URL in incognito mode!
Source: http://pa.ag/2rmIAjg
41. 41 @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/
46. 46 @peakaceag pa.ag
Try webpagetest.org – they have it all:
A lot of info at-a-glance: TTFB, Keep-Alive, Compression & Caching, Image Usage,
CDN & waterfall diagrams
47. 47 @peakaceag pa.ag
The new kid in town: Google Lighthouse
Try it out: https://developers.google.com/web/tools/lighthouse/
48. 48 @peakaceag pa.ag
You need to monitor your site continuously over-time!
https://www.peterhedenskog.com/blog/2015/04/open-source-performance-dashboard/
50. 50 @peakaceag pa.ag
Translate 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 that
users can 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)
51. 51 pa.ag@peakaceag
Optimizing and measuring for Painting Timings
#1 #2
First Paint (FP)
Time to first paint - which marks the point when the
browser starts to render something, the first bit of
content on the screen.
52. 52 pa.ag@peakaceag
Optimizing and measuring for Painting Timings
#1 #2 #3 #4
First Paint (FP) First Contentful
Paint (FCP)
Time to first paint - which marks the point when the
browser starts to render something, the first bit of
content on the screen.
Time to first contentful paint - which marks the point
when the browser renders the first bit of content from
the DOM, text, an image, etc.
53. 53 pa.ag@peakaceag
Optimizing 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 - which marks the point when the
browser starts to render something, the first bit of
content on the screen.
Time to first contentful paint - which marks the point
when the browser renders the first bit of content from
the DOM, text, an image, etc.
54. Care about your hero (element)!
Optimize for First Meaningful Paint
55. 55 pa.ag@peakaceag
Track paint timings with Google Analytics (in theory):
Get the tracking code snippets: http://pa.ag/2viHQSz
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)
„
version 62 and up
56. 56 @peakaceag pa.ag
This is how it looks like in Google Analytics
Behaviour > Events > Pages: Performance Metrics [first-contentful-paint]
Source: Google Analytics
61. 61 pa.ag@peakaceag
CSSOM: The CSS Object Model
body
font-size:16px;
h1
font-size:22px;
p
font-size:16px;
p
font-size:12px;
a
font-size:12px;
img
font-size:16px;
▪ The CSSOM is basically a "map" of the CSS
styles found on a web page.
▪ It is much like the DOM (Document Object
Model), but for the CSS rather than the HTML.
▪ The CSSOM combined with the DOM are used
by browsers to display web pages.
62. 62 pa.ag@peakaceag
Web browsers use the CSSOM to render a page
To display your webpage, a web browser must
take a few steps. For the moment we will simplify
it a little and talk about four main steps that will
illustrate the importance of the CSSOM:
64. 64 pa.ag@peakaceag
How to know what 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 - so lot‘s of work!
Source: http://pa.ag/2o4x0uE
65. 65 @peakaceag pa.ag
My current favourite: „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
66. 66 @peakaceag pa.ag
If you want to play around & try: criticalcss.com
Give it a try: https://criticalcss.com/
67. 67 @peakaceag pa.ag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="widht=device-width">
<title>CRP loading demo</title>
<!-- critical CSS goes here -->
<style> h1 { color: green; } </style>
<!-- use async preload // no IE, Edge & some other uninportant 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>
<!-- critical CSS goes here -->
<style> h1 { color: green; } </style>
<!-- use async preload // no IE, Edge & some other uninportant ones
(http://caniuse.com/#search=preload) -->
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" />
<!-- use async preload // no IE, Edge & some other uninportant 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
68. (Let’s have a look at an actual implementation)
Is it really worth the effort?
69. 69 @peakaceag pa.ag
Before vs. after comparison: A fresh WordPress setup #1
HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, Custom Fonts)
No caching & no other performance optimizations
70. 70 @peakaceag pa.ag
Before vs. after comparison: 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)
71. 71 @peakaceag pa.ag
Before vs. after comparison: 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!
72. 72 @peakaceag pa.ag
Performance metrics comparison at-a-glance
Rendering starts significantly earlier; this also 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. 74 @peakaceag pa.ag
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 / side-wide CSS
Off-load all overhead (JS, etc.) to stay within 14KB for faster, initial paint
TL;DR
76. 76 pa.ag@peakaceag
Really make sure to get the basics right!
▪ Optimise images: Reduce overhead for JPGs & PNGs
(metadata, etc.), request proper sized imgs & 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 optimise parallel requests
▪ Lean mark-up (no comments, use inline CSS / JS only where
necessary / 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:
77. 77 @peakaceag pa.ag
http://pa.ag/sm17speed
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: