SlideShare a Scribd company logo
Bastian Grimm, Peak Ace AG | @basgr
A Complete Guide To Super-Speed Around The World
Speed is absolutely everything!
2 @peakaceag pa.ag
You don‘t want to take notes all the time?
https://pa.ag/iss17speed
3 pa.ag@peakaceag
Revisited: Pagespeed (Load Time) is a ranking factor
Source: http://pa.ag/2iAmA4Y & http://pa.ag/2w9mbv3
4 @peakaceag pa.ag
Google is obsessed with site speed and always pushes for
faster sites:
Source: http://pa.ag/1cWFCtY
5 @peakaceag pa.ag
Yada-Yada
6 @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”!
7 @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.”
„
8 @peakaceag pa.ag
100 ms can already make a huge difference!
A one second delay in page response = -11 % page views and -7 % conversions
Mozilla: 2.2 seconds faster to load = +15,4 % download conversions
Amazon: 100ms faster = +1% in revenue
9 @peakaceag pa.ag
Yada-Yada
10 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!
11 @peakaceag pa.ag
Here is what I really do care about: Engagement!
Better user engagement all over the board (baseline: MoM before & after 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
Fast loading time plays an important role in overall user experience!
Performance = User Experience!
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)
14 @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
15 @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.
#2 Optimise HTTP requests
17 @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
18 @peakaceag pa.ag
Having to load 23 CSS and JavaScript files sucks!
Deichmann (AT) wastes 3 seconds using blocking-resources...
19 @peakaceag pa.ag
Whenever you see this: Reduce the amount of requests!
Combine multiple CSS & JavaScripts files to one (per type)
20 @peakaceag pa.ag
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
Don‘t forget: Minify CSS & JavaScript files
Remove white-spaces, line-brakes, comments & shortens variables/functions
21 @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
22 @peakaceag pa.ag
For everything else: asynchronous requests where possible
Use HTML 5 async, JavaScript workarounds and/or loader:
Further information: http://pa.ag/18o8War
Pretty, varied, colourful and ... slow!
#3 Custom Webfonts
24 @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
25 @peakaceag pa.ag
Classic scenario: using external CSS
Easy to use … but one big disadvantage: CSS is render-blocking!
26 @peakaceag pa.ag
Load custom fonts with Fontloader
Google's asynchronous solution: webfont.js (JavaScript loads first, then CSS)
27 @peakaceag pa.ag
Not very successful and also problematic:
FOUT (Flash of unstyled Text) = super annoying flickering
Fighting the FOUT: http://pa.ag/1BRWMmu
28 @peakaceag pa.ag
How I usually tackle this:
Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi
29 @peakaceag pa.ag
Some new stuff to play with: „font-display“ strategies
More: http://pa.ag/2eUwVob
pre-fetching of specific DNS, resources and whole pages
#4 Pre-Fetching & -Rendering
31 @peakaceag pa.ag
Breakdown of requests for Netdoktor.de (waterfall view)
DNS lookup for the asset server (static.netdoktor.de) takes ~300 ms
32 @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.
33 @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?
Another (new) element in mobile SERPs
#5 Accelerated mobile pages (AMP)
37 @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)
38 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
39 pa.ag@peakaceag
… And it gained quite a bit of momentum:
Source: http://pa.ag/2qoc2bh & http://pa.ag/2qoaOwc & http://pa.ag/2rmWGRN
40 @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
„
41 @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/
There is no reason anymore, to not deliver content directly via HTTP/2,
which is super fast.
#6 Go HTTPS & HTTP/2
43 @peakaceag pa.ag
Source: Searchmetrics US Ranking Factors 2016 – Download: http://pa.ag/2gO9Qq3
44 @peakaceag pa.ag
Top 3 for high volume queries: >60 % HTTPS results!
Source: SEMrush Ranking Factors 2017 - https://semrush.com/ranking-factors
45 @peakaceag pa.ag
This is what I think is going to happen:
We’ll be seeing more than 90 %
of all top 10 results on HTTPS
by the end of 2017!”
„
46 @peakaceag pa.ag
HTTPS ranking “boost“? Well… maybe… maybe not!
Source: http://pa.ag/2ekj4Gi & http://pa.ag/2pRq0PS
47 @peakaceag pa.ag
Soon: HTTPS will be required for AMP?!
Source: http://pa.ag/2fuOdYq
48 @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
49 @peakaceag pa.ag
This is just the beginning: more warnings from Oct. ‘17!
Chrome 62 is going to flag every single HTTP URL in incognito mode!
Source: http://pa.ag/2rmIAjg
50 @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/
So yes, you need HTTPS!
52 @peakaceag pa.ag
Let me make this very, very clear:
If you are using HTTPS
without HTTP/2 (SPDY) you
are doing it all wrong!”
„
A bit of everything, for everyone…!
#7 More Tools
54 @peakaceag pa.ag
Googles‘ PageSpeed Insights
I am really not the biggest fan…!
55 @peakaceag pa.ag
Pingdoms’ waterfall chart is a good starting point:
It’s free, easy to use and the data feels simple to consume…
56 @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
57 @peakaceag pa.ag
WordPress & Site Speed Plug-ins
Plugin-Download:
▪ https://wordpress.org/plugins/w3-total-cache/
▪ https://wordpress.org/plugins/bwp-minify/
▪ https://wordpress.org/plugins/wp-smushit/
▪ https://wp-rocket.me/
58 @peakaceag pa.ag
You need to monitor your site continuously over-time!
https://www.peterhedenskog.com/blog/2015/04/open-source-performance-dashboard/
Time for some crazy stuff!?
The code and resources required to render the initial view of a web page.
#8 Critical Rendering Path
61 pa.ag@peakaceag
Critical Rendering Path Optimisation
Initial view
(Critical)
Below the fold
(Not critical)
62 pa.ag@peakaceag
Critical Rendering Path Optimisation
Understanding how HTML, CSS & JS will be turned into rendered output
Source: http://pa.ag/2vhOt7W
Optimizing for performance is all about under-
standing what happens between receiving the
HTML, CSS, and JavaScript bytes and the required
processing to turn them into rendered pixels -
that's the critical rendering path.
„
63 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.
64 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:
65 pa.ag@peakaceag
Google doesn‘t do a single GET request for their CSS!
66 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
67 @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
68 @peakaceag pa.ag
If you just want to play around: criticalcss.com
Give it a try: https://criticalcss.com/
69 @peakaceag pa.ag
Putting it all together:
Fit the HTML, CSS & JS that’s necessary for “Start Render” into that first 14 KB round trip!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="widght=device-width">
<tittle>CRP loading demo </titltle>
<!-- 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>
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
<!-- 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(){ ... } ());
(A dirty way to prove it probably is…)
Is it really worth the effort?
71 @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
72 @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)
73 @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!
74 @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%)
Highest quality, (more) efficient data compression, smaller files.
It hasn’t fully caught on yet, but is very exciting:
#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
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)
Everything about WebP: http://pa.ag/1EpFWeN
78 @peakaceag pa.ag
We‘re not quite there yet....
Currently only supported by Chrome, Opera and Android
Source: http://caniuse.com/#feat=webp
79 @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)
80 @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.
81 @peakaceag pa.ag
Using HTML5 and <picture> with newer templates
Browsers, that don‘t support <picture>, will ignore this.
<Source> browsers, who don't support WebP, will use <img> as a fallback.
More Information: http://responsiveimages.org/
82 @peakaceag pa.ag
This is not the end of the story just yet: FLIF, BPG etc.
Left: image size compared to original PNG size
Further reading: http://pa.ag/1S5OQmX
Talking about image file-types…
84 @peakaceag pa.ag
Guetzli: -35% smaller JPEGs due to better encoding
No new “filetype” needed at all; operating systems and browsers don’t need to adopt!
Source: https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
Has anyone heard of this?
#10 Brotli
86 @peakaceag pa.ag
87 @peakaceag pa.ag
20–25 % higher compression rate (vs. Zopfli/Deflate)
A completely new data format: currently only for Firefox and nginx
Try it out: http://pa.ag/1XdM1RV & http://pa.ag/1XdMK5w
88 @peakaceag pa.ag
http://pa.ag/iss17speed
Always looking for talent! Check out jobs.pa.ag
Bastian Grimm
bg@pa.ag
twitter.com/peakaceag
facebook.com/peakaceag
www.pa.ag
Interested? Here you go:

More Related Content

What's hot

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...
Bastian Grimm
 
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Bastian Grimm
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
Bastian Grimm
 
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
Bastian Grimm
 
Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018
Bastian Grimm
 
Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019
Bastian Grimm
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
Bastian Grimm
 
Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014
Bastian Grimm
 
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
Bastian Grimm
 
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
Bastian Grimm
 
Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018
Bastian Grimm
 
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
Bastian Grimm
 
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Bastian Grimm
 
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
Distilled
 
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
Bastian Grimm
 
SEO Tools of the Trade - Barcelona Affiliate Conference 2014
SEO Tools of the Trade - Barcelona Affiliate Conference 2014SEO Tools of the Trade - Barcelona Affiliate Conference 2014
SEO Tools of the Trade - Barcelona Affiliate Conference 2014
Bastian Grimm
 
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different marketsSabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann
 
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)
Anton Shulke
 
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick StoxSMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
patrickstox
 
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your LogsSearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
Distilled
 

What's hot (20)

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...
 
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
 
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 - SMX London 2018
Migration Best Practices - SMX London 2018Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018
 
Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014
 
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
 
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 - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 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
 
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
Technical SEO: Crawl Space Management - SEOZone Istanbul 2014
 
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
 
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
 
SEO Tools of the Trade - Barcelona Affiliate Conference 2014
SEO Tools of the Trade - Barcelona Affiliate Conference 2014SEO Tools of the Trade - Barcelona Affiliate Conference 2014
SEO Tools of the Trade - Barcelona Affiliate Conference 2014
 
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different marketsSabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets
 
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)
 
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick StoxSMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
 
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your LogsSearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
 

Viewers also liked

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
Bastian Grimm
 
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
Bastian Grimm
 
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
Bastian Grimm
 
The Search Landscape in 2017
The Search Landscape in 2017The Search Landscape in 2017
The Search Landscape in 2017
Rand Fishkin
 
SEO: SERPs im Wandel - SMX Munich 2017
SEO: SERPs im Wandel - SMX Munich 2017SEO: SERPs im Wandel - SMX Munich 2017
SEO: SERPs im Wandel - SMX Munich 2017
Philipp Klöckner
 
Fast Growing Companies: 10 SEO Lessons Learned
Fast Growing Companies: 10 SEO Lessons LearnedFast Growing Companies: 10 SEO Lessons Learned
Fast Growing Companies: 10 SEO Lessons Learned
Philipp Klöckner
 
Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016
Bastian Grimm
 
Relaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, StolpersteineRelaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, Stolpersteine
Philipp Klöckner
 
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
Bastian Grimm
 
Next Era of SEO: A Guide to SEO Split-Testing
Next Era of SEO: A Guide to SEO Split-TestingNext Era of SEO: A Guide to SEO Split-Testing
Next Era of SEO: A Guide to SEO Split-Testing
Tom Anthony
 
Campixx 2017 SEO für KMU
Campixx 2017 SEO für KMUCampixx 2017 SEO für KMU
Campixx 2017 SEO für KMU
Heiko Hoehn
 
Content-Produktion aus der Praxis – Von der Idee zum Inhalt – SEO Campixx 2017
Content-Produktion aus der Praxis – Von der Idee zum Inhalt – SEO Campixx 2017Content-Produktion aus der Praxis – Von der Idee zum Inhalt – SEO Campixx 2017
Content-Produktion aus der Praxis – Von der Idee zum Inhalt – SEO Campixx 2017
Niels Dahnke
 
The Future of Mobile - Presented at SMX Munich
The Future of Mobile - Presented at SMX MunichThe Future of Mobile - Presented at SMX Munich
The Future of Mobile - Presented at SMX Munich
Eric Enge
 
Machine Learning und SEO: Ein Vektor sagt mehr als 1000 Wörter
Machine Learning und SEO: Ein Vektor sagt mehr als 1000 WörterMachine Learning und SEO: Ein Vektor sagt mehr als 1000 Wörter
Machine Learning und SEO: Ein Vektor sagt mehr als 1000 Wörter
Stefan Fischerländer
 
Wil Reynolds en The Inbounder; 'Ir donde están los usuarios, construir una es...
Wil Reynolds en The Inbounder; 'Ir donde están los usuarios, construir una es...Wil Reynolds en The Inbounder; 'Ir donde están los usuarios, construir una es...
Wil Reynolds en The Inbounder; 'Ir donde están los usuarios, construir una es...
We Are Marketing
 
Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016
Bastian Grimm
 
SEO & UX: So Happy Together
SEO & UX: So Happy TogetherSEO & UX: So Happy Together
SEO & UX: So Happy Together
Rand Fishkin
 
Content Audits - Inhalte datenbasiert optimieren - Contentixx 2017
Content Audits - Inhalte datenbasiert optimieren - Contentixx 2017Content Audits - Inhalte datenbasiert optimieren - Contentixx 2017
Content Audits - Inhalte datenbasiert optimieren - Contentixx 2017
luna-park GmbH
 
Semantic blockchain
Semantic blockchainSemantic blockchain
Semantic blockchain
Ben Gardner
 
#SMX Munich - Think BIG act BIG
#SMX Munich - Think BIG act BIG#SMX Munich - Think BIG act BIG
#SMX Munich - Think BIG act BIG
Lisa Myers
 

Viewers also liked (20)

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
 
The Search Landscape in 2017
The Search Landscape in 2017The Search Landscape in 2017
The Search Landscape in 2017
 
SEO: SERPs im Wandel - SMX Munich 2017
SEO: SERPs im Wandel - SMX Munich 2017SEO: SERPs im Wandel - SMX Munich 2017
SEO: SERPs im Wandel - SMX Munich 2017
 
Fast Growing Companies: 10 SEO Lessons Learned
Fast Growing Companies: 10 SEO Lessons LearnedFast Growing Companies: 10 SEO Lessons Learned
Fast Growing Companies: 10 SEO Lessons Learned
 
Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016Technical SEO: 2016 Edition - SEODAY 2016
Technical SEO: 2016 Edition - SEODAY 2016
 
Relaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, StolpersteineRelaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, Stolpersteine
 
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
 
Next Era of SEO: A Guide to SEO Split-Testing
Next Era of SEO: A Guide to SEO Split-TestingNext Era of SEO: A Guide to SEO Split-Testing
Next Era of SEO: A Guide to SEO Split-Testing
 
Campixx 2017 SEO für KMU
Campixx 2017 SEO für KMUCampixx 2017 SEO für KMU
Campixx 2017 SEO für KMU
 
Content-Produktion aus der Praxis – Von der Idee zum Inhalt – SEO Campixx 2017
Content-Produktion aus der Praxis – Von der Idee zum Inhalt – SEO Campixx 2017Content-Produktion aus der Praxis – Von der Idee zum Inhalt – SEO Campixx 2017
Content-Produktion aus der Praxis – Von der Idee zum Inhalt – SEO Campixx 2017
 
The Future of Mobile - Presented at SMX Munich
The Future of Mobile - Presented at SMX MunichThe Future of Mobile - Presented at SMX Munich
The Future of Mobile - Presented at SMX Munich
 
Machine Learning und SEO: Ein Vektor sagt mehr als 1000 Wörter
Machine Learning und SEO: Ein Vektor sagt mehr als 1000 WörterMachine Learning und SEO: Ein Vektor sagt mehr als 1000 Wörter
Machine Learning und SEO: Ein Vektor sagt mehr als 1000 Wörter
 
Wil Reynolds en The Inbounder; 'Ir donde están los usuarios, construir una es...
Wil Reynolds en The Inbounder; 'Ir donde están los usuarios, construir una es...Wil Reynolds en The Inbounder; 'Ir donde están los usuarios, construir una es...
Wil Reynolds en The Inbounder; 'Ir donde están los usuarios, construir una es...
 
Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016Crawl Budget Best Practices - SEODAY 2016
Crawl Budget Best Practices - SEODAY 2016
 
SEO & UX: So Happy Together
SEO & UX: So Happy TogetherSEO & UX: So Happy Together
SEO & UX: So Happy Together
 
Content Audits - Inhalte datenbasiert optimieren - Contentixx 2017
Content Audits - Inhalte datenbasiert optimieren - Contentixx 2017Content Audits - Inhalte datenbasiert optimieren - Contentixx 2017
Content Audits - Inhalte datenbasiert optimieren - Contentixx 2017
 
Semantic blockchain
Semantic blockchainSemantic blockchain
Semantic blockchain
 
#SMX Munich - Think BIG act BIG
#SMX Munich - Think BIG act BIG#SMX Munich - Think BIG act BIG
#SMX Munich - Think BIG act BIG
 

Similar to International Site Speed Tweaks - ISS 2017 Barcelona

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...
Branded3
 
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
Anton Shulke
 
A Holistic View of Website Performance
A Holistic View of Website PerformanceA Holistic View of Website Performance
A Holistic View of Website Performance
Rene Churchill
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
areyouok
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
topgeek
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
Andy Davies
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For Speed
Vijay Rayapati
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
Andy Davies
 
Plop
PlopPlop
Plop
oakleaf
 
High Performance Web Sites
High Performance Web SitesHigh Performance Web Sites
High Performance Web Sites
Páris Neto
 
High Performance Websites By Souders Steve
High Performance Websites By Souders SteveHigh Performance Websites By Souders Steve
High Performance Websites By Souders Steve
w3guru
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
Parham
 
Life in the Fast Lane: Speed, Usability & Search Engine Optimization
Life in the Fast Lane: Speed, Usability & Search Engine OptimizationLife in the Fast Lane: Speed, Usability & Search Engine Optimization
Life in the Fast Lane: Speed, Usability & Search Engine Optimization
Dana DiTomaso
 
SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained
Steve Weber
 
Fluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP ArchiveFluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP Archive
Paul Calvano
 
10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today
Chris Love
 
Web Front End Performance
Web Front End PerformanceWeb Front End Performance
Web Front End Performance
Chris Love
 
10 things you can do to speed up your web app today stir trek edition
10 things you can do to speed up your web app today   stir trek edition10 things you can do to speed up your web app today   stir trek edition
10 things you can do to speed up your web app today stir trek edition
Chris Love
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
Otto Kekäläinen
 
Optimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 confOptimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 conf
Máté Nádasdi
 

Similar to International Site Speed Tweaks - ISS 2017 Barcelona (20)

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 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
 
A Holistic View of Website Performance
A Holistic View of Website PerformanceA Holistic View of Website Performance
A Holistic View of Website Performance
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
Http/2 - What's it all about?
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
 
Performance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For SpeedPerformance Tuning Web Apps - The Need For Speed
Performance Tuning Web Apps - The Need For Speed
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
 
Plop
PlopPlop
Plop
 
High Performance Web Sites
High Performance Web SitesHigh Performance Web Sites
High Performance Web Sites
 
High Performance Websites By Souders Steve
High Performance Websites By Souders SteveHigh Performance Websites By Souders Steve
High Performance Websites By Souders Steve
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
 
Life in the Fast Lane: Speed, Usability & Search Engine Optimization
Life in the Fast Lane: Speed, Usability & Search Engine OptimizationLife in the Fast Lane: Speed, Usability & Search Engine Optimization
Life in the Fast Lane: Speed, Usability & Search Engine Optimization
 
SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained SEO 101 - Google Page Speed Insights Explained
SEO 101 - Google Page Speed Insights Explained
 
Fluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP ArchiveFluent 2018: Tracking Performance of the Web with HTTP Archive
Fluent 2018: Tracking Performance of the Web with HTTP Archive
 
10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today
 
Web Front End Performance
Web Front End PerformanceWeb Front End Performance
Web Front End Performance
 
10 things you can do to speed up your web app today stir trek edition
10 things you can do to speed up your web app today   stir trek edition10 things you can do to speed up your web app today   stir trek edition
10 things you can do to speed up your web app today stir trek edition
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...The 5 most common reasons for a slow WordPress site and how to fix them – ext...
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
 
Optimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 confOptimizing browser experience - App!mobile 2013 conf
Optimizing browser experience - App!mobile 2013 conf
 

More from Bastian Grimm

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
Bastian Grimm
 
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
Bastian Grimm
 
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
Bastian Grimm
 
Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018
Bastian Grimm
 
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
Bastian Grimm
 
Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017
Bastian Grimm
 
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
Bastian Grimm
 
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
Bastian Grimm
 

More from Bastian Grimm (8)

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

Recently uploaded

How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 

Recently uploaded (20)

How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 

International Site Speed Tweaks - ISS 2017 Barcelona

  • 1. Bastian Grimm, Peak Ace AG | @basgr A Complete Guide To Super-Speed Around The World Speed is absolutely everything!
  • 2. 2 @peakaceag pa.ag You don‘t want to take notes all the time? https://pa.ag/iss17speed
  • 3. 3 pa.ag@peakaceag Revisited: Pagespeed (Load Time) is a ranking factor Source: http://pa.ag/2iAmA4Y & http://pa.ag/2w9mbv3
  • 4. 4 @peakaceag pa.ag Google is obsessed with site speed and always pushes for faster sites: Source: http://pa.ag/1cWFCtY
  • 6. 6 @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”!
  • 7. 7 @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.” „
  • 8. 8 @peakaceag pa.ag 100 ms can already make a huge difference! A one second delay in page response = -11 % page views and -7 % conversions Mozilla: 2.2 seconds faster to load = +15,4 % download conversions Amazon: 100ms faster = +1% in revenue
  • 10. 10 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!
  • 11. 11 @peakaceag pa.ag Here is what I really do care about: Engagement! Better user engagement all over the board (baseline: MoM before & after 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
  • 12. Fast loading time plays an important role in overall user experience! Performance = User Experience!
  • 13. 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)
  • 14. 14 @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
  • 15. 15 @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
  • 16. Number of requests, blocking vs. non-blocking, asynchronous requests etc. #2 Optimise HTTP requests
  • 17. 17 @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
  • 18. 18 @peakaceag pa.ag Having to load 23 CSS and JavaScript files sucks! Deichmann (AT) wastes 3 seconds using blocking-resources...
  • 19. 19 @peakaceag pa.ag Whenever you see this: Reduce the amount of requests! Combine multiple CSS & JavaScripts files to one (per type)
  • 20. 20 @peakaceag pa.ag 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 Don‘t forget: Minify CSS & JavaScript files Remove white-spaces, line-brakes, comments & shortens variables/functions
  • 21. 21 @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
  • 22. 22 @peakaceag pa.ag For everything else: asynchronous requests where possible Use HTML 5 async, JavaScript workarounds and/or loader: Further information: http://pa.ag/18o8War
  • 23. Pretty, varied, colourful and ... slow! #3 Custom Webfonts
  • 24. 24 @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
  • 25. 25 @peakaceag pa.ag Classic scenario: using external CSS Easy to use … but one big disadvantage: CSS is render-blocking!
  • 26. 26 @peakaceag pa.ag Load custom fonts with Fontloader Google's asynchronous solution: webfont.js (JavaScript loads first, then CSS)
  • 27. 27 @peakaceag pa.ag Not very successful and also problematic: FOUT (Flash of unstyled Text) = super annoying flickering Fighting the FOUT: http://pa.ag/1BRWMmu
  • 28. 28 @peakaceag pa.ag How I usually tackle this: Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi
  • 29. 29 @peakaceag pa.ag Some new stuff to play with: „font-display“ strategies More: http://pa.ag/2eUwVob
  • 30. pre-fetching of specific DNS, resources and whole pages #4 Pre-Fetching & -Rendering
  • 31. 31 @peakaceag pa.ag Breakdown of requests for Netdoktor.de (waterfall view) DNS lookup for the asset server (static.netdoktor.de) takes ~300 ms
  • 32. 32 @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.
  • 33. 33 @peakaceag pa.ag One step further: pre-connecting HTTPS Don't just pre-resolve DNS names, also allow for TLS-handshake.
  • 34. 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?
  • 35. Shopping basket (Checkout), as soon as an article is placed inside The next page of a multipage article Also, what could I pre-render?
  • 36. Another (new) element in mobile SERPs #5 Accelerated mobile pages (AMP)
  • 37. 37 @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)
  • 38. 38 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
  • 39. 39 pa.ag@peakaceag … And it gained quite a bit of momentum: Source: http://pa.ag/2qoc2bh & http://pa.ag/2qoaOwc & http://pa.ag/2rmWGRN
  • 40. 40 @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 „
  • 41. 41 @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/
  • 42. There is no reason anymore, to not deliver content directly via HTTP/2, which is super fast. #6 Go HTTPS & HTTP/2
  • 43. 43 @peakaceag pa.ag Source: Searchmetrics US Ranking Factors 2016 – Download: http://pa.ag/2gO9Qq3
  • 44. 44 @peakaceag pa.ag Top 3 for high volume queries: >60 % HTTPS results! Source: SEMrush Ranking Factors 2017 - https://semrush.com/ranking-factors
  • 45. 45 @peakaceag pa.ag This is what I think is going to happen: We’ll be seeing more than 90 % of all top 10 results on HTTPS by the end of 2017!” „
  • 46. 46 @peakaceag pa.ag HTTPS ranking “boost“? Well… maybe… maybe not! Source: http://pa.ag/2ekj4Gi & http://pa.ag/2pRq0PS
  • 47. 47 @peakaceag pa.ag Soon: HTTPS will be required for AMP?! Source: http://pa.ag/2fuOdYq
  • 48. 48 @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
  • 49. 49 @peakaceag pa.ag This is just the beginning: more warnings from Oct. ‘17! Chrome 62 is going to flag every single HTTP URL in incognito mode! Source: http://pa.ag/2rmIAjg
  • 50. 50 @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/
  • 51. So yes, you need HTTPS!
  • 52. 52 @peakaceag pa.ag Let me make this very, very clear: If you are using HTTPS without HTTP/2 (SPDY) you are doing it all wrong!” „
  • 53. A bit of everything, for everyone…! #7 More Tools
  • 54. 54 @peakaceag pa.ag Googles‘ PageSpeed Insights I am really not the biggest fan…!
  • 55. 55 @peakaceag pa.ag Pingdoms’ waterfall chart is a good starting point: It’s free, easy to use and the data feels simple to consume…
  • 56. 56 @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
  • 57. 57 @peakaceag pa.ag WordPress & Site Speed Plug-ins Plugin-Download: ▪ https://wordpress.org/plugins/w3-total-cache/ ▪ https://wordpress.org/plugins/bwp-minify/ ▪ https://wordpress.org/plugins/wp-smushit/ ▪ https://wp-rocket.me/
  • 58. 58 @peakaceag pa.ag You need to monitor your site continuously over-time! https://www.peterhedenskog.com/blog/2015/04/open-source-performance-dashboard/
  • 59. Time for some crazy stuff!?
  • 60. The code and resources required to render the initial view of a web page. #8 Critical Rendering Path
  • 61. 61 pa.ag@peakaceag Critical Rendering Path Optimisation Initial view (Critical) Below the fold (Not critical)
  • 62. 62 pa.ag@peakaceag Critical Rendering Path Optimisation Understanding how HTML, CSS & JS will be turned into rendered output Source: http://pa.ag/2vhOt7W Optimizing for performance is all about under- standing what happens between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels - that's the critical rendering path. „
  • 63. 63 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.
  • 64. 64 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:
  • 65. 65 pa.ag@peakaceag Google doesn‘t do a single GET request for their CSS!
  • 66. 66 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
  • 67. 67 @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
  • 68. 68 @peakaceag pa.ag If you just want to play around: criticalcss.com Give it a try: https://criticalcss.com/
  • 69. 69 @peakaceag pa.ag Putting it all together: Fit the HTML, CSS & JS that’s necessary for “Start Render” into that first 14 KB round trip! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="widght=device-width"> <tittle>CRP loading demo </titltle> <!-- 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> 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 <!-- 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(){ ... } ());
  • 70. (A dirty way to prove it probably is…) Is it really worth the effort?
  • 71. 71 @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
  • 72. 72 @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)
  • 73. 73 @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!
  • 74. 74 @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%)
  • 75. Highest quality, (more) efficient data compression, smaller files. It hasn’t fully caught on yet, but is very exciting: #9 New image formats
  • 76. 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
  • 77. 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) Everything about WebP: http://pa.ag/1EpFWeN
  • 78. 78 @peakaceag pa.ag We‘re not quite there yet.... Currently only supported by Chrome, Opera and Android Source: http://caniuse.com/#feat=webp
  • 79. 79 @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)
  • 80. 80 @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.
  • 81. 81 @peakaceag pa.ag Using HTML5 and <picture> with newer templates Browsers, that don‘t support <picture>, will ignore this. <Source> browsers, who don't support WebP, will use <img> as a fallback. More Information: http://responsiveimages.org/
  • 82. 82 @peakaceag pa.ag This is not the end of the story just yet: FLIF, BPG etc. Left: image size compared to original PNG size Further reading: http://pa.ag/1S5OQmX
  • 83. Talking about image file-types…
  • 84. 84 @peakaceag pa.ag Guetzli: -35% smaller JPEGs due to better encoding No new “filetype” needed at all; operating systems and browsers don’t need to adopt! Source: https://research.googleblog.com/2017/03/announcing-guetzli-new-open-source-jpeg.html
  • 85. Has anyone heard of this? #10 Brotli
  • 87. 87 @peakaceag pa.ag 20–25 % higher compression rate (vs. Zopfli/Deflate) A completely new data format: currently only for Firefox and nginx Try it out: http://pa.ag/1XdM1RV & http://pa.ag/1XdMK5w
  • 88. 88 @peakaceag pa.ag http://pa.ag/iss17speed Always looking for talent! Check out jobs.pa.ag Bastian Grimm bg@pa.ag twitter.com/peakaceag facebook.com/peakaceag www.pa.ag Interested? Here you go:

Editor's Notes

  1. Add slide with more warnings