SlideShare uma empresa Scribd logo
1 de 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

Mais conteúdo relacionado

Mais procurados

SEO Automation Without Using Hard Code by Tevfik Mert Azizoglu - BrightonSEO ...
SEO Automation Without Using Hard Code by Tevfik Mert Azizoglu - BrightonSEO ...SEO Automation Without Using Hard Code by Tevfik Mert Azizoglu - BrightonSEO ...
SEO Automation Without Using Hard Code by Tevfik Mert Azizoglu - BrightonSEO ...Tevfik Mert Azizoglu
 
JBehaveの導入やってみたよ!
JBehaveの導入やってみたよ!JBehaveの導入やってみたよ!
JBehaveの導入やってみたよ!theboyalex
 
データモデリング入門-astah*を使って、TMの手法を使う-
データモデリング入門-astah*を使って、TMの手法を使う-データモデリング入門-astah*を使って、TMの手法を使う-
データモデリング入門-astah*を使って、TMの手法を使う-Koichi Inami
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sassKnoldus Inc.
 
zozotown real time linkage infrastructure
zozotown real time linkage infrastructurezozotown real time linkage infrastructure
zozotown real time linkage infrastructureKeisukeTaniguchi2
 
Conference slide design tips for brightonSEO speakers (and other events too)
Conference slide design tips for brightonSEO speakers (and other events too)Conference slide design tips for brightonSEO speakers (and other events too)
Conference slide design tips for brightonSEO speakers (and other events too)Kelvin Newman
 
SEO for Changing E-commerce Product Pages - How to Optimize your Online Store...
SEO for Changing E-commerce Product Pages - How to Optimize your Online Store...SEO for Changing E-commerce Product Pages - How to Optimize your Online Store...
SEO for Changing E-commerce Product Pages - How to Optimize your Online Store...Aleyda Solís
 
Riverpodでテストを書こう
Riverpodでテストを書こうRiverpodでテストを書こう
Riverpodでテストを書こうShinnosuke Tokuda
 
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」Junichiro Kazama
 
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...LazarinaStoyanova
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Eric Sembrat
 
pg_bigmを触り始めた人に伝えたいこと
pg_bigmを触り始めた人に伝えたいことpg_bigmを触り始めた人に伝えたいこと
pg_bigmを触り始めた人に伝えたいことMasahiko Sawada
 
Using command line to save time on common SEO tasks
Using command line to save time on common SEO tasks Using command line to save time on common SEO tasks
Using command line to save time on common SEO tasks DinoKukic
 
Elasticsearch勉強会#39 LT 20201217
Elasticsearch勉強会#39 LT 20201217Elasticsearch勉強会#39 LT 20201217
Elasticsearch勉強会#39 LT 20201217Tetsuya Sodo
 
SEO Project Management for Successful Processes #TheInbounder
SEO Project Management for Successful Processes #TheInbounderSEO Project Management for Successful Processes #TheInbounder
SEO Project Management for Successful Processes #TheInbounderAleyda Solís
 
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Springドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring増田 亨
 

Mais procurados (20)

SEO Automation Without Using Hard Code by Tevfik Mert Azizoglu - BrightonSEO ...
SEO Automation Without Using Hard Code by Tevfik Mert Azizoglu - BrightonSEO ...SEO Automation Without Using Hard Code by Tevfik Mert Azizoglu - BrightonSEO ...
SEO Automation Without Using Hard Code by Tevfik Mert Azizoglu - BrightonSEO ...
 
Java script
Java scriptJava script
Java script
 
Introduction to sass
Introduction to sassIntroduction to sass
Introduction to sass
 
JBehaveの導入やってみたよ!
JBehaveの導入やってみたよ!JBehaveの導入やってみたよ!
JBehaveの導入やってみたよ!
 
WiredTigerを詳しく説明
WiredTigerを詳しく説明WiredTigerを詳しく説明
WiredTigerを詳しく説明
 
データモデリング入門-astah*を使って、TMの手法を使う-
データモデリング入門-astah*を使って、TMの手法を使う-データモデリング入門-astah*を使って、TMの手法を使う-
データモデリング入門-astah*を使って、TMの手法を使う-
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
 
zozotown real time linkage infrastructure
zozotown real time linkage infrastructurezozotown real time linkage infrastructure
zozotown real time linkage infrastructure
 
Conference slide design tips for brightonSEO speakers (and other events too)
Conference slide design tips for brightonSEO speakers (and other events too)Conference slide design tips for brightonSEO speakers (and other events too)
Conference slide design tips for brightonSEO speakers (and other events too)
 
SEO for Changing E-commerce Product Pages - How to Optimize your Online Store...
SEO for Changing E-commerce Product Pages - How to Optimize your Online Store...SEO for Changing E-commerce Product Pages - How to Optimize your Online Store...
SEO for Changing E-commerce Product Pages - How to Optimize your Online Store...
 
Riverpodでテストを書こう
Riverpodでテストを書こうRiverpodでテストを書こう
Riverpodでテストを書こう
 
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
JSUG 20141127 「Spring Bootを用いたドメイン駆動設計」
 
運用業務でのRedmine
運用業務でのRedmine運用業務でのRedmine
運用業務でのRedmine
 
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
How to Implement Machine Learning in Your Internal Linking Audit - Lazarina S...
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
 
pg_bigmを触り始めた人に伝えたいこと
pg_bigmを触り始めた人に伝えたいことpg_bigmを触り始めた人に伝えたいこと
pg_bigmを触り始めた人に伝えたいこと
 
Using command line to save time on common SEO tasks
Using command line to save time on common SEO tasks Using command line to save time on common SEO tasks
Using command line to save time on common SEO tasks
 
Elasticsearch勉強会#39 LT 20201217
Elasticsearch勉強会#39 LT 20201217Elasticsearch勉強会#39 LT 20201217
Elasticsearch勉強会#39 LT 20201217
 
SEO Project Management for Successful Processes #TheInbounder
SEO Project Management for Successful Processes #TheInbounderSEO Project Management for Successful Processes #TheInbounder
SEO Project Management for Successful Processes #TheInbounder
 
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Springドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
ドメインロジックに集中せよ 〜ドメイン駆動設計 powered by Spring
 

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

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

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

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

Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationKnoldus Inc.
 

Último (20)

Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog PresentationData governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
 

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