SlideShare ist ein Scribd-Unternehmen logo
1 von 84
Bastian Grimm
Peak Ace AG
@basgr
THE NEED FOR SPEED:
#WEBPERF 2018 EDITION
I’ve got some serious issues…
For me, there is nothing worse than having to wait for anything to load!
I’m not a very patient guy…
GDPR is actually pretty cool!
pa.ag@peakaceag6
USA Today created a super fast GDPR-compliant domain
500 vs. 34 requests, 140 vs. 0 JS files, 6 vs. 1 CSS, 5.01 MB vs. 356 kB in size, etc.
EU
0.300 sec
0.345 sec
0.995 sec
443
US
1.700 sec
3.604 sec
19.261 sec
8,792
Start Render
First Interactive
Load Time
Speed Index
34 859Total Requests
356 kB 5,092 kBBytes in
Fast loading time plays an important role in overall user experience!
Performance = user experience!
pa.ag@peakaceag8
My favourite statistic regarding web performance
Source: Ericsson ConsumerLab, Neurons Inc. 2015
Solving a maths problem
Experiencing mobile delays
Watching a horror movie
Standing at the edge of a virtual cliff
Watching a melodramatic TV show
Waiting in line at a retail store
Level of stress caused by
mobile delays is
comparable to watching
a horror movie!
pa.ag@peakaceag10
Revisited: page speed (load time) is a ranking factor
Source: http://pa.ag/2iAmA4Y | http://pa.ag/2ERTPYY
pa.ag@peakaceag12
Now, please don’t forget your desktop; both are relevant!
Especially for responsive sites, this can be a massive challenge!
With the mobile-first index, will desktop rankings use
mobile page speed instead of desktop page speed?
No […] as mentioned […], while our index will be built from
mobile documents, we’re going to continue to build a great
search experience for all users, whether they come from
mobile or desktop devices.”
Source: Google spokesperson (https://pa.ag/2FGGKAi)
However, details really depend on each individual setup
#1 Get the basics absolutely right
pa.ag@peakaceag14
Client-side/front-end optimisation tasks
Use my checklist on SlideShare to double check:
All slides on SlideShare: http://pa.ag/iss18speed
▪ Establish a content-first approach: progressive enhancement,
also prioritise visible, above the fold content: 14kB (compressed).
▪ Reduce size: implement effective caching and compression.
▪ Whenever possible, use asynchronous requests.
▪ Decrease the size of CSS and JavaScript files (minify).
▪ Lean mark-up: no comments, use inline CSS/JS only where
necessary or useful.
▪ Optimise images: reduce overhead for JPGs & PNGs (metadata,
etc.), request properly sized images and try new formats.
▪ Minimise browser reflow & repaint.
pa.ag@peakaceag15
Server-side/back-end optimisation tasks
Use my checklist on SlideShare to double check:
All slides on SlideShare: http://pa.ag/iss18speed
▪ Use (DNS) pre-fetching & pre-rendering (resource hints).
▪ Use a Content Distribution Network (CDN)/an asset server
(as well as cookie-less domains) to optimise parallel requests.
▪ Switch to HTTPS, combine by utilising HTTP/2 and HTTP/2
specific features (e.g. ServerPush).
▪ Leverage browser caching, also consider using edge caching.
▪ Enable OCSP stapling (for HTTPS) to speed up CA validation.
▪ Database & query optimisation (e.g. mem-caching).
▪ General code & runtime optimisation (e.g. CPU utilisation).
Highest quality, (more) efficient data compression & smaller files
#2 Image optimisation
pa.ag@peakaceag17
60% of all web traffic is made up of images...
The average website transfers between 800 and 900kB of images per URL!
Source: https://pa.ag/2xwHOFN
pa.ag@peakaceag18
Basic optimisation for all images: put ‘em on a diet!
tinyPNG & tinyJPG for smart (lossy) compression & removal of metadata et al.
API access, various plug-ins (WP, etc.) as well as direct integration into Photoshop.
Source: http://tinypng.com | http://tinyjpg.com
pa.ag@peakaceag19
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
pa.ag@peakaceag20
You can use WebP with an on-the-fly replacement
Swap PNG and JPEG images per re-write (i.e. using nginx / Apache configuration).
Alternatively: the <picture> element allows you to specify multiple file types manually.
VS.
pa.ag@peakaceag21
There is way more: FLIF, BPG, JPEG-XR, etc.
If you’re “image-heavy”, play around with it!
Further reading: http://pa.ag/1S5OQmX
pa.ag@peakaceag22
SEODAY could save 3.3 MB in images!
Better compression combined with modern image formats (i.e. WebP & JPEG-XR).
pa.ag@peakaceag23
We did this for one of our clients:
Overall image transfer traffic decreased from 550GB to 140GB (a 75% reduction)!
(To be fair: only half of their JPGs were properly optimised beforehand.)
Because latency does matter, especially for international sites!
Let’s talk (image) CDNs for a minute
pa.ag25
Especially for global businesses, CDNs can be a great help
Use CDNPerf.com to find the one that suits you best, depending on where you are and
which regions/countries you‘re predominantly serving:
Give it a try: https://www.cdnperf.com/
pa.ag26
Test your (CDN) latency from all over the world:
Try it out: https://pa.ag/2HX6aje
Pretty, varied, colourful, and often very slow!
#3 Custom web fonts
pa.ag@peakaceag28
>70% of all websites use at least one non-standard font!
Result: 97kB of additional data and on average 3-4 additional HTTP requests.
Source: https://pa.ag/2I7vAHC
pa.ag@peakaceag29
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 finished!
FOIT (flash of invisible text) or FOUT (flash of unstyled text)
can cause irritating flickering
Asynchronous?
pa.ag@peakaceag31
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
pa.ag@peakaceag32
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’ enables text to be displayed while the font itself is still loading!
pa.ag@peakaceag33
Don‘t miss Monica Dinculescu‘s incredible talk:
”Fontastic Web Performance“
Watch the full talk: https://pa.ag/2qf6hvK
pa.ag@peakaceag34
If you can only do one thing, I’d recommend doing this:
100ms blocking period, but no swap. Even after it’s downloaded (only on next page view)
Go to your CSS file, look for @font-face and add
’font-display:optional’ - there hasn’t been a
safer & easier gain in #webperf in a long time!
Because the PageSpeed Insights score is not enough!
#4 Better measurement
pa.ag@peakaceag36
Translating experiences into 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?
▪ Is it usable?
› Can users interact with the page or
is it still busy loading?
▪ Is it smooth/pleasing?
› 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)
pa.ag@peakaceag37
Optimising for and measuring paint timings
Time to First Paint – marks the point when the
browser starts to render something - the first bit of
content on the screen.
First Paint (FP)
#1 #2
pa.ag@peakaceag38
Optimising for and measuring paint timings
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.
First Paint (FP) First Contentful
Paint (FCP)
#1 #2 #3 #4
pa.ag@peakaceag39
Optimising for and measuring paint 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!
pa.ag@peakaceag40
Watching a video on YouTube? This is your hero element:
pa.ag@peakaceag41
Chrome Dev Tools > Performance > Profiling (Frames)
pa.ag@peakaceag42
Track paint times 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)
pa.ag@peakaceag43
This is what it looks like in Google Analytics
Behaviour > events > pages: performance metrics [first-contentful-paint]
Source: Google Analytics
pa.ag@peakaceag44
The cool kids way of doing this (using GTM)
#1 #3
#2 #4
This needs to go directly
into your HTML mark-up
because GTM doesn’t
support ES6 script atm.
pa.ag@peakaceag45
Combine it with Google Data Studio
Test it: http://pa.ag/2Ee550q
pa.ag@peakaceag46
New: Google just introduced “First Input Delay” (FID)
Measure how responsive your site is when users try to interact with it!
First Input Delay (FID) measures the time from
when a user first interacts with your site (i.e.
when they click a link, a button, or use a custom,
JavaScript-powered control) to the time when
the browser is actually able to respond to
that interaction.
pa.ag@peakaceag47
Wait… what?!
Put simply, this is what FID is supposed to reflect:
For example, on a blog, it’s most likely to be
reflected by the time taken between someone
clicking a link and the browser responding to
that interaction (i.e. requesting the next page to
load). The reason there might be a delay is if the
browser’s main thread is busy doing something
else (usually executing JavaScript code).
pa.ag@peakaceag48
Time to Interactive (TTI) vs. First Input Delay (FID)
TTI measures how long it takes a site to load and be able to respond to interaction. FID
measures the delay when someone interacts while the page is not (yet) active.
The user just happened to
interact with the page at
the beginning of the main
thread’s busiest period (e.g.
CSS/JS execution). If the user
had interacted just a moment
earlier (during the idle
period), the browser could
have responded right away.
Main thread is idle
Main thread is busy
Styles are loaded and
browser can paint content
Navigation
start
Main thread is
idle for 5+ seconds
Browser is loaded and
browser can paint content
Browser is loaded and
browser can paint content
FID
TTI
FCP
Network
requests
Main
thread
pa.ag@peakaceag49
Tracking FID in JavaScript using Google Analytics
More: https://pa.ag/2IlRV7O
pa.ag@peakaceag50
Diagnosing a higher-than-expected FID
Create a performance trace of your site as it’s loading (CPU & network throttling enabled)
and look for individual tasks on the main thread that take a long time to execute:
More: https://pa.ag/2MMEEmd
pa.ag@peakaceag51
Coming soon: image (hero element) visibility tracking
Current state: intent to implement (in Chrome) via Element Timing API
Source: https://pa.ag/2xwF6jB
The Element Timing API will allow developers
to know when certain important image elements
are first displayed on the screen. It will also enable
them to measure the display time of images that
take up a large fraction of the viewport when they
first show up. This will let them understand, measure,
and improve user discomfort when waiting for
important elements to be displayed.
The code and resources required to render the initial view of a web page
#5 Critical rendering path
pa.ag@peakaceag53
Critical rendering path optimisation
Initial view (critical)
Below the fold (not critical)
A brief, technical overview:
pa.ag@peakaceag55
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:18px;
h1
font-size:22px;
a
font-size:12px;
div
font-size:16px;
p
font-size:12px;
p
font-size:16px;
56 @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.
pa.ag@peakaceag57
Google doesn’t make a single CSS GET request!
Because requesting external CSS is more expensive than inlining everything.
pa.ag@peakaceag58
How to know which CSS is critically required
“Critical” renders in multiple resolutions and 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!
pa.ag@peakaceag59
<!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 are necessary for “Start Render” into the first 14kB 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 example…
Is it worth all the effort?
pa.ag@peakaceag61
Before & after: a fresh WordPress setup #1
HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), no caching
and no other performance optimisations.
pa.ag@peakaceag62
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).
pa.ag@peakaceag63
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 inline.
pa.ag@peakaceag64
Performance metrics comparison, at a glance
Rendering starts significantly earlier; this allows for faster interaction with the site.
KPI / MEASUREMENT
Load Time
Time to First Byte (TTFB)
Start Render
Time to Interactive (TTI)
DEFAULT WP
1.357 sec
0.454 sec
1.000 sec
0.956 sec
BASICS (W3TOTAL)
0.791 sec
0.159 sec
0.600 sec
0.931 sec
FULLY OPTIMISED
0.789 sec
0.157 sec
0.410 sec
0.563 sec
(+32%)
(+41%)
pa.ag@peakaceag65
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 above the fold 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.
… and feel free to disagree, but please think about it for a minute.
#6 Let’s talk AMP
AMP certainly encourages people to take the need
for fast loading sites more seriously.
Drives discussion/innovation
Suddenly, different teams/stakeholders (have to) care
about performance and it becomes an “agenda topic”.
Enables collaboration
Converting existing sites to AMP almost never works,
you need to rebuild the entire HTML & CSS from scratch
(which requires time & resources).
Creates additional effort
Extending CMS capabilities to manage AMP content is expensive,
additional maintenance (IT, editorial, etc.) further increases costs.
Maintenance & costs
pa.ag@peakaceag71
The average user doesn’t understand what is happening
Everything they search for will be served to them via Google’s “portal”.
Navigation behaviour changes as well; swiping is THE way to navigate on Google!
#1 #2 #3 #4
Seriously, just putting it on GitHub doesn’t make it less regulated!
Not really open-source
AMP makes it easier for them (same structure) and it’s even
hosted on Google. Also, consider changing crawl behaviour (another URL).
Can impact crawling
… because we are talking web performance!
Maybe all this shouldn’t matter…
Actually, AMP is not really *that* fast…
Google is cheating with speed
pa.ag@peakaceag76
Publisher Type
Start Render
(in sec)
Load Time
(in sec)
First Interactive
(in sec)
Speed Index
The Guardian AMP 1.466 2.664 4.600 1,989
The Guardian Responsive 0.567 5.871 7.167 1,226
The Telegraph AMP 1.300 1.494 8.785 1,520
The Telegraph Responsive 1.700 10.188 15.692 5,724
Daily Mail AMP 1.200 2.153 1.246 1,636
Daily Mail Responsive 1.933 9.746 4.340 5,810
CNN AMP 0.900 8.577 14.605 1,876
CNN Responsive 1.543 15.543 17.458 8,567
AMP vs. regular website: major UK newspapers
The Guardian mostly outperforms AMP with its regular sites (well done!)
(Settings for WPT: London, Chrome, Cable)
Source: Peak Ace AG research (May 2018)
pa.ag@peakaceag77
AMP vs. regular website: major German newspapers
German newspapers have faster websites (compared to UK, except for The Guardian),
thus the gap/difference with regards to their AMP domains is even smaller!
Source: Peak Ace AG research (March 2018)
Publisher Type
Start Render
(in sec)
Load Time
(in sec)
First Interactive
(in sec)
Speed Index
ZEIT Online AMP 1.000 1.168 2.272 1,151
ZEIT Online Responsive 0.400 1.985 2.177 1,024
stern AMP 0.900 0.907 3.363 1,058
stern m-Subdomain 0.300 2.243 2.087 909
Süddeutsche AMP 1.100 1.654 2.804 1,817
Süddeutsche Responsive 2.200 4.935 4.988 2,768
Spiegel Online AMP 1.100 1.138 2.089 1,112
Spiegel Online m-Subdomain 1.500 3.921 5.101 2,519
pa.ag@peakaceag78
AMP magic: pre-fetching, pre-rendering (and caching)
There is ~1 second avg. difference from the
pre-rendering vs. direct load of any AMP.
That’s speed you can’t make up and the perceived
loading time for a user is even greater.
Only if you go full PWAMP (Progressive Web App + AMP) will
secondary – and following – clicks/interactions be fast as well.
Only the 1st request is fast
So, what should you do?
pa.ag@peakaceag81
Please take care of your website first:
(Whether you like AMP or not)
Using AMP must NOT be an excuse for
having a slow-loading website. First, invest
in your property to become best-in-class,
before considering using AMP, if at all.”
pa.ag@peakaceag82
If you still feel like implementing AMP, here you go:
Aleyda has a fantastic deck with loads of free tips on her SlideShare!
Get the slides: https://pa.ag/2FQjBMa
Still in alpha - but really, really cool…
#8 Bonus: predictive pre-*
pa.ag@peakaceag84
Interesting concept: predictive #webperf with guess.js
guess.js’ goal is to make the web faster and smarter by replacing manual decision
making with an automated data-driven approach:
More: https://pa.ag/2kEJfLy & https://pa.ag/2NGgwH5
Calculating the likelihood
of visiting a link within the
viewport, using guess.js
to pre-fetch/render.
pa.ag@peakaceag85
gatsby.js + guess.js = insanely fast!
Manage in WP, combine with APIs, export into a static PWA (backed by React)
Source: https://www.gatsbyjs.org/
pa.ag@peakaceag86
We’re hiring! 30+ performance marketing jobs in Berlin!
Come and say “hello” or apply via jobs.pa.ag. We look forward to talking to you!
Always looking for talent!
Check out jobs.pa.ag
pa.ag@peakaceag87
Bastian Grimm
bg@pa.ag
Liked the deck? Here you go:
ALWAYS LOOKING FOR TALENT! CHECK OUT JOBS.PA.AG
twitter.com/peakaceag
facebook.com/peakaceag
www.pa.ag
WINNER
http://pa.ag/seod18perf

Más contenido relacionado

Was ist angesagt?

Powerpoint presentation
Powerpoint presentationPowerpoint presentation
Powerpoint presentationCourtney7c
 
ChatGPT vs. GPT-3.pdf
ChatGPT vs. GPT-3.pdfChatGPT vs. GPT-3.pdf
ChatGPT vs. GPT-3.pdfAddepto
 
brightonSEO - Creating A PPC Campaign Using ChatGPT - An Experiment
brightonSEO - Creating A PPC Campaign Using ChatGPT - An ExperimentbrightonSEO - Creating A PPC Campaign Using ChatGPT - An Experiment
brightonSEO - Creating A PPC Campaign Using ChatGPT - An ExperimentFarah Radford
 
Delimit Your Data With Google Sheets - #WTSfest 2020
Delimit Your Data With Google Sheets - #WTSfest 2020Delimit Your Data With Google Sheets - #WTSfest 2020
Delimit Your Data With Google Sheets - #WTSfest 2020HannahRamptonButler
 
Dynamic Models with Django
Dynamic Models with DjangoDynamic Models with Django
Dynamic Models with Djangoschacki
 
SEO TRENDS 2023: 5 Things to Look Out For
SEO TRENDS 2023: 5 Things to Look Out ForSEO TRENDS 2023: 5 Things to Look Out For
SEO TRENDS 2023: 5 Things to Look Out ForJomer Gregorio
 
AI生成工具的新衝擊 - MS Bing & Google Bard 能否挑戰ChatGPT-4領導地位
AI生成工具的新衝擊 - MS Bing & Google Bard 能否挑戰ChatGPT-4領導地位AI生成工具的新衝擊 - MS Bing & Google Bard 能否挑戰ChatGPT-4領導地位
AI生成工具的新衝擊 - MS Bing & Google Bard 能否挑戰ChatGPT-4領導地位eLearning Consortium 電子學習聯盟
 
Todd Jacobucci presents ChatGPT
Todd Jacobucci presents ChatGPT Todd Jacobucci presents ChatGPT
Todd Jacobucci presents ChatGPT Todd Jacobucci
 
Unleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPTUnleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPTDemetris D-Papa
 
Introduction to Chat GPT
Introduction to Chat GPTIntroduction to Chat GPT
Introduction to Chat GPTDianaGray10
 
Your Complete Snapchat Playbook
Your Complete Snapchat PlaybookYour Complete Snapchat Playbook
Your Complete Snapchat PlaybookTodd Brison
 
사회인의 휴학, Gap Year 이야기
사회인의 휴학, Gap Year 이야기사회인의 휴학, Gap Year 이야기
사회인의 휴학, Gap Year 이야기Seongyun Byeon
 
Construisez vos propres dashboards SEO automatisés grâce à Google Apps Script
Construisez vos propres dashboards SEO automatisés grâce à Google Apps ScriptConstruisez vos propres dashboards SEO automatisés grâce à Google Apps Script
Construisez vos propres dashboards SEO automatisés grâce à Google Apps ScriptSEO CAMP
 
New SEO Strategies: 3 Steps To Perfect SEO Content Creation
New SEO Strategies: 3 Steps To Perfect SEO Content CreationNew SEO Strategies: 3 Steps To Perfect SEO Content Creation
New SEO Strategies: 3 Steps To Perfect SEO Content CreationSearch Engine Journal
 
Quick & Dirty Tips for : Better PowerPoint Presentations Faster
Quick & Dirty Tips for : Better PowerPoint Presentations FasterQuick & Dirty Tips for : Better PowerPoint Presentations Faster
Quick & Dirty Tips for : Better PowerPoint Presentations FasterEugene Cheng
 
ChatGPT Mastery and the chatGPT Handbook.pdf
ChatGPT Mastery and the chatGPT Handbook.pdfChatGPT Mastery and the chatGPT Handbook.pdf
ChatGPT Mastery and the chatGPT Handbook.pdfJirotgak Gotau
 
Developing an Intranet Strategy
Developing an Intranet StrategyDeveloping an Intranet Strategy
Developing an Intranet StrategyDNN
 
제 16회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Secret X 팀] : XAI를 활용한 수능 영어영역 문제풀이
제 16회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Secret X 팀] : XAI를 활용한 수능 영어영역 문제풀이제 16회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Secret X 팀] : XAI를 활용한 수능 영어영역 문제풀이
제 16회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Secret X 팀] : XAI를 활용한 수능 영어영역 문제풀이BOAZ Bigdata
 

Was ist angesagt? (20)

Powerpoint presentation
Powerpoint presentationPowerpoint presentation
Powerpoint presentation
 
ChatGPT vs. GPT-3.pdf
ChatGPT vs. GPT-3.pdfChatGPT vs. GPT-3.pdf
ChatGPT vs. GPT-3.pdf
 
brightonSEO - Creating A PPC Campaign Using ChatGPT - An Experiment
brightonSEO - Creating A PPC Campaign Using ChatGPT - An ExperimentbrightonSEO - Creating A PPC Campaign Using ChatGPT - An Experiment
brightonSEO - Creating A PPC Campaign Using ChatGPT - An Experiment
 
Delimit Your Data With Google Sheets - #WTSfest 2020
Delimit Your Data With Google Sheets - #WTSfest 2020Delimit Your Data With Google Sheets - #WTSfest 2020
Delimit Your Data With Google Sheets - #WTSfest 2020
 
Dynamic Models with Django
Dynamic Models with DjangoDynamic Models with Django
Dynamic Models with Django
 
SEO TRENDS 2023: 5 Things to Look Out For
SEO TRENDS 2023: 5 Things to Look Out ForSEO TRENDS 2023: 5 Things to Look Out For
SEO TRENDS 2023: 5 Things to Look Out For
 
AI生成工具的新衝擊 - MS Bing & Google Bard 能否挑戰ChatGPT-4領導地位
AI生成工具的新衝擊 - MS Bing & Google Bard 能否挑戰ChatGPT-4領導地位AI生成工具的新衝擊 - MS Bing & Google Bard 能否挑戰ChatGPT-4領導地位
AI生成工具的新衝擊 - MS Bing & Google Bard 能否挑戰ChatGPT-4領導地位
 
Todd Jacobucci presents ChatGPT
Todd Jacobucci presents ChatGPT Todd Jacobucci presents ChatGPT
Todd Jacobucci presents ChatGPT
 
Content Creation
Content CreationContent Creation
Content Creation
 
Unleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPTUnleashing The Power Of CHAT-GPT
Unleashing The Power Of CHAT-GPT
 
Introduction to Chat GPT
Introduction to Chat GPTIntroduction to Chat GPT
Introduction to Chat GPT
 
Your Complete Snapchat Playbook
Your Complete Snapchat PlaybookYour Complete Snapchat Playbook
Your Complete Snapchat Playbook
 
사회인의 휴학, Gap Year 이야기
사회인의 휴학, Gap Year 이야기사회인의 휴학, Gap Year 이야기
사회인의 휴학, Gap Year 이야기
 
Construisez vos propres dashboards SEO automatisés grâce à Google Apps Script
Construisez vos propres dashboards SEO automatisés grâce à Google Apps ScriptConstruisez vos propres dashboards SEO automatisés grâce à Google Apps Script
Construisez vos propres dashboards SEO automatisés grâce à Google Apps Script
 
New SEO Strategies: 3 Steps To Perfect SEO Content Creation
New SEO Strategies: 3 Steps To Perfect SEO Content CreationNew SEO Strategies: 3 Steps To Perfect SEO Content Creation
New SEO Strategies: 3 Steps To Perfect SEO Content Creation
 
Quick & Dirty Tips for : Better PowerPoint Presentations Faster
Quick & Dirty Tips for : Better PowerPoint Presentations FasterQuick & Dirty Tips for : Better PowerPoint Presentations Faster
Quick & Dirty Tips for : Better PowerPoint Presentations Faster
 
ChatGPT Mastery and the chatGPT Handbook.pdf
ChatGPT Mastery and the chatGPT Handbook.pdfChatGPT Mastery and the chatGPT Handbook.pdf
ChatGPT Mastery and the chatGPT Handbook.pdf
 
Amazon Machine Learning
Amazon Machine LearningAmazon Machine Learning
Amazon Machine Learning
 
Developing an Intranet Strategy
Developing an Intranet StrategyDeveloping an Intranet Strategy
Developing an Intranet Strategy
 
제 16회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Secret X 팀] : XAI를 활용한 수능 영어영역 문제풀이
제 16회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Secret X 팀] : XAI를 활용한 수능 영어영역 문제풀이제 16회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Secret X 팀] : XAI를 활용한 수능 영어영역 문제풀이
제 16회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [Secret X 팀] : XAI를 활용한 수능 영어영역 문제풀이
 

Ähnlich wie The need for Speed: Advanced #webperf - SEOday 2018

Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Bastian Grimm
 
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
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Bastian Grimm
 
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 2018Anton Shulke
 
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
 
AMP - SMX München 2018
AMP - SMX München 2018AMP - SMX München 2018
AMP - SMX München 2018Bastian Grimm
 
Front-End Performance Checklist 2020
Front-End Performance Checklist 2020Front-End Performance Checklist 2020
Front-End Performance Checklist 2020Harsha MV
 
Word press optimizations
Word press optimizations Word press optimizations
Word press optimizations Shawn DeWolfe
 
How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfAndrea Verlicchi
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin HowlettFITC
 
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...Izabela Wisniewska
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performanceSagar Desarda
 
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
 
Speed up your site! #wcmtl2015 by Meagan Hanes
Speed up your site! #wcmtl2015 by Meagan HanesSpeed up your site! #wcmtl2015 by Meagan Hanes
Speed up your site! #wcmtl2015 by Meagan HanesMeagan Hanes
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 
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 2014Bastian Grimm
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorDan Taylor
 
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 2018Bastian Grimm
 

Ähnlich wie The need for Speed: Advanced #webperf - SEOday 2018 (20)

Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 
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...
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
 
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
 
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...
 
AMP - SMX München 2018
AMP - SMX München 2018AMP - SMX München 2018
AMP - SMX München 2018
 
Front-End Performance Checklist 2020
Front-End Performance Checklist 2020Front-End Performance Checklist 2020
Front-End Performance Checklist 2020
 
Word press optimizations
Word press optimizations Word press optimizations
Word press optimizations
 
How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdf
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
Search Oxford March 2022 - Most common ecommerce mistakes that are killing yo...
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
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
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 
Speed up your site! #wcmtl2015 by Meagan Hanes
Speed up your site! #wcmtl2015 by Meagan HanesSpeed up your site! #wcmtl2015 by Meagan Hanes
Speed up your site! #wcmtl2015 by Meagan Hanes
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
Web Performance Optimization (WPO)
Web Performance Optimization (WPO)Web Performance Optimization (WPO)
Web Performance Optimization (WPO)
 
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
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
 
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
 

Mehr von 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 AirBastian 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 secretsBastian 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 AGBastian 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 2019Bastian Grimm
 
Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019Bastian Grimm
 
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, ParisBastian Grimm
 
Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Bastian 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 2018Bastian Grimm
 
Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 2018Bastian 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 2018Bastian Grimm
 
Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018Bastian Grimm
 
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 DublinBastian 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 2017Bastian Grimm
 
Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Digitale Assistenten - OMX 2017
Digitale Assistenten - OMX 2017Bastian Grimm
 
Migration Best-Practices: Successfully re-launching your website - SMX New Yo...
Migration Best-Practices: Successfully re-launching your website - SMX New Yo...Migration Best-Practices: Successfully re-launching your website - SMX New Yo...
Migration Best-Practices: Successfully re-launching your website - SMX New Yo...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 2017Bastian 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 2017Bastian Grimm
 
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 2017Bastian 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 2017Bastian Grimm
 
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 BarcelonaBastian Grimm
 

Mehr von Bastian Grimm (20)

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
 
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
 
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
 
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
 
Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019Migration Best Practices - SMX West 2019
Migration Best Practices - SMX West 2019
 
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
 
Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018
 
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 - SMX London 2018
Migration Best Practices - SMX London 2018Migration Best Practices - SMX London 2018
Migration Best Practices - SMX London 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
 
Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - SMX München 2018Digitale Assistenzsysteme - SMX München 2018
Digitale Assistenzsysteme - 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
 
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
 
Migration Best-Practices: Successfully re-launching your website - SMX New Yo...
Migration Best-Practices: Successfully re-launching your website - SMX New Yo...Migration Best-Practices: Successfully re-launching your website - SMX New Yo...
Migration Best-Practices: Successfully re-launching your website - SMX New Yo...
 
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
 
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
 

Último

Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 

Último (20)

Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 

The need for Speed: Advanced #webperf - SEOday 2018

  • 1. Bastian Grimm Peak Ace AG @basgr THE NEED FOR SPEED: #WEBPERF 2018 EDITION
  • 2. I’ve got some serious issues…
  • 3. For me, there is nothing worse than having to wait for anything to load! I’m not a very patient guy…
  • 4. GDPR is actually pretty cool!
  • 5. pa.ag@peakaceag6 USA Today created a super fast GDPR-compliant domain 500 vs. 34 requests, 140 vs. 0 JS files, 6 vs. 1 CSS, 5.01 MB vs. 356 kB in size, etc. EU 0.300 sec 0.345 sec 0.995 sec 443 US 1.700 sec 3.604 sec 19.261 sec 8,792 Start Render First Interactive Load Time Speed Index 34 859Total Requests 356 kB 5,092 kBBytes in
  • 6. Fast loading time plays an important role in overall user experience! Performance = user experience!
  • 7. pa.ag@peakaceag8 My favourite statistic regarding web performance Source: Ericsson ConsumerLab, Neurons Inc. 2015 Solving a maths problem Experiencing mobile delays Watching a horror movie Standing at the edge of a virtual cliff Watching a melodramatic TV show Waiting in line at a retail store Level of stress caused by mobile delays is comparable to watching a horror movie!
  • 8. pa.ag@peakaceag10 Revisited: page speed (load time) is a ranking factor Source: http://pa.ag/2iAmA4Y | http://pa.ag/2ERTPYY
  • 9. pa.ag@peakaceag12 Now, please don’t forget your desktop; both are relevant! Especially for responsive sites, this can be a massive challenge! With the mobile-first index, will desktop rankings use mobile page speed instead of desktop page speed? No […] as mentioned […], while our index will be built from mobile documents, we’re going to continue to build a great search experience for all users, whether they come from mobile or desktop devices.” Source: Google spokesperson (https://pa.ag/2FGGKAi)
  • 10. However, details really depend on each individual setup #1 Get the basics absolutely right
  • 11. pa.ag@peakaceag14 Client-side/front-end optimisation tasks Use my checklist on SlideShare to double check: All slides on SlideShare: http://pa.ag/iss18speed ▪ Establish a content-first approach: progressive enhancement, also prioritise visible, above the fold content: 14kB (compressed). ▪ Reduce size: implement effective caching and compression. ▪ Whenever possible, use asynchronous requests. ▪ Decrease the size of CSS and JavaScript files (minify). ▪ Lean mark-up: no comments, use inline CSS/JS only where necessary or useful. ▪ Optimise images: reduce overhead for JPGs & PNGs (metadata, etc.), request properly sized images and try new formats. ▪ Minimise browser reflow & repaint.
  • 12. pa.ag@peakaceag15 Server-side/back-end optimisation tasks Use my checklist on SlideShare to double check: All slides on SlideShare: http://pa.ag/iss18speed ▪ Use (DNS) pre-fetching & pre-rendering (resource hints). ▪ Use a Content Distribution Network (CDN)/an asset server (as well as cookie-less domains) to optimise parallel requests. ▪ Switch to HTTPS, combine by utilising HTTP/2 and HTTP/2 specific features (e.g. ServerPush). ▪ Leverage browser caching, also consider using edge caching. ▪ Enable OCSP stapling (for HTTPS) to speed up CA validation. ▪ Database & query optimisation (e.g. mem-caching). ▪ General code & runtime optimisation (e.g. CPU utilisation).
  • 13. Highest quality, (more) efficient data compression & smaller files #2 Image optimisation
  • 14. pa.ag@peakaceag17 60% of all web traffic is made up of images... The average website transfers between 800 and 900kB of images per URL! Source: https://pa.ag/2xwHOFN
  • 15. pa.ag@peakaceag18 Basic optimisation for all images: put ‘em on a diet! tinyPNG & tinyJPG for smart (lossy) compression & removal of metadata et al. API access, various plug-ins (WP, etc.) as well as direct integration into Photoshop. Source: http://tinypng.com | http://tinyjpg.com
  • 16. pa.ag@peakaceag19 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
  • 17. pa.ag@peakaceag20 You can use WebP with an on-the-fly replacement Swap PNG and JPEG images per re-write (i.e. using nginx / Apache configuration). Alternatively: the <picture> element allows you to specify multiple file types manually. VS.
  • 18. pa.ag@peakaceag21 There is way more: FLIF, BPG, JPEG-XR, etc. If you’re “image-heavy”, play around with it! Further reading: http://pa.ag/1S5OQmX
  • 19. pa.ag@peakaceag22 SEODAY could save 3.3 MB in images! Better compression combined with modern image formats (i.e. WebP & JPEG-XR).
  • 20. pa.ag@peakaceag23 We did this for one of our clients: Overall image transfer traffic decreased from 550GB to 140GB (a 75% reduction)! (To be fair: only half of their JPGs were properly optimised beforehand.)
  • 21. Because latency does matter, especially for international sites! Let’s talk (image) CDNs for a minute
  • 22. pa.ag25 Especially for global businesses, CDNs can be a great help Use CDNPerf.com to find the one that suits you best, depending on where you are and which regions/countries you‘re predominantly serving: Give it a try: https://www.cdnperf.com/
  • 23. pa.ag26 Test your (CDN) latency from all over the world: Try it out: https://pa.ag/2HX6aje
  • 24. Pretty, varied, colourful, and often very slow! #3 Custom web fonts
  • 25. pa.ag@peakaceag28 >70% of all websites use at least one non-standard font! Result: 97kB of additional data and on average 3-4 additional HTTP requests. Source: https://pa.ag/2I7vAHC
  • 26. pa.ag@peakaceag29 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 finished!
  • 27. FOIT (flash of invisible text) or FOUT (flash of unstyled text) can cause irritating flickering Asynchronous?
  • 28. pa.ag@peakaceag31 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
  • 29. pa.ag@peakaceag32 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’ enables text to be displayed while the font itself is still loading!
  • 30. pa.ag@peakaceag33 Don‘t miss Monica Dinculescu‘s incredible talk: ”Fontastic Web Performance“ Watch the full talk: https://pa.ag/2qf6hvK
  • 31. pa.ag@peakaceag34 If you can only do one thing, I’d recommend doing this: 100ms blocking period, but no swap. Even after it’s downloaded (only on next page view) Go to your CSS file, look for @font-face and add ’font-display:optional’ - there hasn’t been a safer & easier gain in #webperf in a long time!
  • 32. Because the PageSpeed Insights score is not enough! #4 Better measurement
  • 33. pa.ag@peakaceag36 Translating experiences into 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? ▪ Is it usable? › Can users interact with the page or is it still busy loading? ▪ Is it smooth/pleasing? › 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)
  • 34. pa.ag@peakaceag37 Optimising for and measuring paint timings Time to First Paint – marks the point when the browser starts to render something - the first bit of content on the screen. First Paint (FP) #1 #2
  • 35. pa.ag@peakaceag38 Optimising for and measuring paint timings 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. First Paint (FP) First Contentful Paint (FCP) #1 #2 #3 #4
  • 36. pa.ag@peakaceag39 Optimising for and measuring paint 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!
  • 37. pa.ag@peakaceag40 Watching a video on YouTube? This is your hero element:
  • 38. pa.ag@peakaceag41 Chrome Dev Tools > Performance > Profiling (Frames)
  • 39. pa.ag@peakaceag42 Track paint times 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)
  • 40. pa.ag@peakaceag43 This is what it looks like in Google Analytics Behaviour > events > pages: performance metrics [first-contentful-paint] Source: Google Analytics
  • 41. pa.ag@peakaceag44 The cool kids way of doing this (using GTM) #1 #3 #2 #4 This needs to go directly into your HTML mark-up because GTM doesn’t support ES6 script atm.
  • 42. pa.ag@peakaceag45 Combine it with Google Data Studio Test it: http://pa.ag/2Ee550q
  • 43. pa.ag@peakaceag46 New: Google just introduced “First Input Delay” (FID) Measure how responsive your site is when users try to interact with it! First Input Delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.
  • 44. pa.ag@peakaceag47 Wait… what?! Put simply, this is what FID is supposed to reflect: For example, on a blog, it’s most likely to be reflected by the time taken between someone clicking a link and the browser responding to that interaction (i.e. requesting the next page to load). The reason there might be a delay is if the browser’s main thread is busy doing something else (usually executing JavaScript code).
  • 45. pa.ag@peakaceag48 Time to Interactive (TTI) vs. First Input Delay (FID) TTI measures how long it takes a site to load and be able to respond to interaction. FID measures the delay when someone interacts while the page is not (yet) active. The user just happened to interact with the page at the beginning of the main thread’s busiest period (e.g. CSS/JS execution). If the user had interacted just a moment earlier (during the idle period), the browser could have responded right away. Main thread is idle Main thread is busy Styles are loaded and browser can paint content Navigation start Main thread is idle for 5+ seconds Browser is loaded and browser can paint content Browser is loaded and browser can paint content FID TTI FCP Network requests Main thread
  • 46. pa.ag@peakaceag49 Tracking FID in JavaScript using Google Analytics More: https://pa.ag/2IlRV7O
  • 47. pa.ag@peakaceag50 Diagnosing a higher-than-expected FID Create a performance trace of your site as it’s loading (CPU & network throttling enabled) and look for individual tasks on the main thread that take a long time to execute: More: https://pa.ag/2MMEEmd
  • 48. pa.ag@peakaceag51 Coming soon: image (hero element) visibility tracking Current state: intent to implement (in Chrome) via Element Timing API Source: https://pa.ag/2xwF6jB The Element Timing API will allow developers to know when certain important image elements are first displayed on the screen. It will also enable them to measure the display time of images that take up a large fraction of the viewport when they first show up. This will let them understand, measure, and improve user discomfort when waiting for important elements to be displayed.
  • 49. The code and resources required to render the initial view of a web page #5 Critical rendering path
  • 50. pa.ag@peakaceag53 Critical rendering path optimisation Initial view (critical) Below the fold (not critical)
  • 51. A brief, technical overview:
  • 52. pa.ag@peakaceag55 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:18px; h1 font-size:22px; a font-size:12px; div font-size:16px; p font-size:12px; p font-size:16px;
  • 53. 56 @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.
  • 54. pa.ag@peakaceag57 Google doesn’t make a single CSS GET request! Because requesting external CSS is more expensive than inlining everything.
  • 55. pa.ag@peakaceag58 How to know which CSS is critically required “Critical” renders in multiple resolutions and 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!
  • 56. pa.ag@peakaceag59 <!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 are necessary for “Start Render” into the first 14kB 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
  • 57. Let’s look at an implementation example… Is it worth all the effort?
  • 58. pa.ag@peakaceag61 Before & after: a fresh WordPress setup #1 HTTP, no HTTP/2, Twenty Seventeen theme (1x CSS, 8x JS, custom fonts), no caching and no other performance optimisations.
  • 59. pa.ag@peakaceag62 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).
  • 60. pa.ag@peakaceag63 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 inline.
  • 61. pa.ag@peakaceag64 Performance metrics comparison, at a glance Rendering starts significantly earlier; this allows for faster interaction with the site. KPI / MEASUREMENT Load Time Time to First Byte (TTFB) Start Render Time to Interactive (TTI) DEFAULT WP 1.357 sec 0.454 sec 1.000 sec 0.956 sec BASICS (W3TOTAL) 0.791 sec 0.159 sec 0.600 sec 0.931 sec FULLY OPTIMISED 0.789 sec 0.157 sec 0.410 sec 0.563 sec (+32%) (+41%)
  • 62. pa.ag@peakaceag65 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 above the fold 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.
  • 63. … and feel free to disagree, but please think about it for a minute. #6 Let’s talk AMP
  • 64. AMP certainly encourages people to take the need for fast loading sites more seriously. Drives discussion/innovation
  • 65. Suddenly, different teams/stakeholders (have to) care about performance and it becomes an “agenda topic”. Enables collaboration
  • 66. Converting existing sites to AMP almost never works, you need to rebuild the entire HTML & CSS from scratch (which requires time & resources). Creates additional effort
  • 67. Extending CMS capabilities to manage AMP content is expensive, additional maintenance (IT, editorial, etc.) further increases costs. Maintenance & costs
  • 68. pa.ag@peakaceag71 The average user doesn’t understand what is happening Everything they search for will be served to them via Google’s “portal”. Navigation behaviour changes as well; swiping is THE way to navigate on Google! #1 #2 #3 #4
  • 69. Seriously, just putting it on GitHub doesn’t make it less regulated! Not really open-source
  • 70. AMP makes it easier for them (same structure) and it’s even hosted on Google. Also, consider changing crawl behaviour (another URL). Can impact crawling
  • 71. … because we are talking web performance! Maybe all this shouldn’t matter…
  • 72. Actually, AMP is not really *that* fast… Google is cheating with speed
  • 73. pa.ag@peakaceag76 Publisher Type Start Render (in sec) Load Time (in sec) First Interactive (in sec) Speed Index The Guardian AMP 1.466 2.664 4.600 1,989 The Guardian Responsive 0.567 5.871 7.167 1,226 The Telegraph AMP 1.300 1.494 8.785 1,520 The Telegraph Responsive 1.700 10.188 15.692 5,724 Daily Mail AMP 1.200 2.153 1.246 1,636 Daily Mail Responsive 1.933 9.746 4.340 5,810 CNN AMP 0.900 8.577 14.605 1,876 CNN Responsive 1.543 15.543 17.458 8,567 AMP vs. regular website: major UK newspapers The Guardian mostly outperforms AMP with its regular sites (well done!) (Settings for WPT: London, Chrome, Cable) Source: Peak Ace AG research (May 2018)
  • 74. pa.ag@peakaceag77 AMP vs. regular website: major German newspapers German newspapers have faster websites (compared to UK, except for The Guardian), thus the gap/difference with regards to their AMP domains is even smaller! Source: Peak Ace AG research (March 2018) Publisher Type Start Render (in sec) Load Time (in sec) First Interactive (in sec) Speed Index ZEIT Online AMP 1.000 1.168 2.272 1,151 ZEIT Online Responsive 0.400 1.985 2.177 1,024 stern AMP 0.900 0.907 3.363 1,058 stern m-Subdomain 0.300 2.243 2.087 909 Süddeutsche AMP 1.100 1.654 2.804 1,817 Süddeutsche Responsive 2.200 4.935 4.988 2,768 Spiegel Online AMP 1.100 1.138 2.089 1,112 Spiegel Online m-Subdomain 1.500 3.921 5.101 2,519
  • 75. pa.ag@peakaceag78 AMP magic: pre-fetching, pre-rendering (and caching) There is ~1 second avg. difference from the pre-rendering vs. direct load of any AMP. That’s speed you can’t make up and the perceived loading time for a user is even greater.
  • 76. Only if you go full PWAMP (Progressive Web App + AMP) will secondary – and following – clicks/interactions be fast as well. Only the 1st request is fast
  • 77. So, what should you do?
  • 78. pa.ag@peakaceag81 Please take care of your website first: (Whether you like AMP or not) Using AMP must NOT be an excuse for having a slow-loading website. First, invest in your property to become best-in-class, before considering using AMP, if at all.”
  • 79. pa.ag@peakaceag82 If you still feel like implementing AMP, here you go: Aleyda has a fantastic deck with loads of free tips on her SlideShare! Get the slides: https://pa.ag/2FQjBMa
  • 80. Still in alpha - but really, really cool… #8 Bonus: predictive pre-*
  • 81. pa.ag@peakaceag84 Interesting concept: predictive #webperf with guess.js guess.js’ goal is to make the web faster and smarter by replacing manual decision making with an automated data-driven approach: More: https://pa.ag/2kEJfLy & https://pa.ag/2NGgwH5 Calculating the likelihood of visiting a link within the viewport, using guess.js to pre-fetch/render.
  • 82. pa.ag@peakaceag85 gatsby.js + guess.js = insanely fast! Manage in WP, combine with APIs, export into a static PWA (backed by React) Source: https://www.gatsbyjs.org/
  • 83. pa.ag@peakaceag86 We’re hiring! 30+ performance marketing jobs in Berlin! Come and say “hello” or apply via jobs.pa.ag. We look forward to talking to you! Always looking for talent! Check out jobs.pa.ag
  • 84. pa.ag@peakaceag87 Bastian Grimm bg@pa.ag Liked the deck? Here you go: ALWAYS LOOKING FOR TALENT! CHECK OUT JOBS.PA.AG twitter.com/peakaceag facebook.com/peakaceag www.pa.ag WINNER http://pa.ag/seod18perf