SlideShare a Scribd company logo
Bastian Grimm, Peak Ace AG | @basgr
Why web performance optimisation should be more than AMP!
AMP ≠ Silver Bullet
… and feel free to disagree, but please think about it for a minute.
First things first…
AMP certainly helps to push people to take the need
for fast loading sites more seriously.
#1 Drives discussion/innovation
Suddenly, different teams/stakeholders (have to) care
about performance and it becomes an “agenda topic”.
#2 Enables collaboration

Recommended for you

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

Talking international site speed optimization at International Search Summit 2017 in Barcelona, London as well as in Munich covering a broad variety of performance optimization strategies.

web performancesite speedspeed
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018

My talk from brightonSEO 2018 covering various web performance strategies, this time mainly focussing on critical rendering path, various image optimisation strategies as well as how to handle custom web fonts.

seotechnical seoweb performance
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

At Peak Ace on Air we were talking about some migration best practices and specifically about "five fatal errors to avoid". Enjoy!

seoseo servicesmigration
Converting existing sites to AMP almost never works, you need to rebuild
the entire HTML & CSS from scratch (which takes time & resources).
#3 Additional effort
Extending CMS capabilities to manage AMP content is expensive,
additional maintenance (IT, editorial, etc.) increases costs further.
#4 Maintenance & costs
Currently, the lack of proper branding possibilities is killing brand
recognition as well as decreasing customer loyalty.
#5 Lack of branding
8 @peakaceag pa.ag
Can you guess which newspaper is which?
AMP versions of four major German newspapers, without their logo they essentially all
look pretty much the same:

Recommended for you

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

My talk from SEARCHY 2019 in Paris covering best practices on how to successfully navigate through the various types of migrations (protocol migrations, frontend migrations, website migration, cms migration, etc.) from an SEO perspective - mainly focussing on all things technical SEO.

seotechnical seomigration
Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018

My talk from SEOkomm 2018 in Salzburg covering best practices on how to successfully naviate through the various types of migrations (protocal migrations, frontend migrations, etc.) from an SEO perspective - mainly focussing on all things tech.

seomigrationtechnical seo
Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014

My presentation from SMX Milan 2014 covering the history of structured data, usage statistics, schema.org implementation guidelines as well as tools.

ctrschemaseo
9 @peakaceag pa.ag
Can you guess which newspaper is which?
Due to massive limitations, their “look and feel” is totally different from regular branding;
Complex monetisation & marketing automation is hampered due to JS restrictions.
10 @peakaceag pa.ag
Also, the average user doesn’t understand what happens
Everything they search for will be served to them on 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 controlled!
#6 Not really open source
They “use” you to make it easy for them (same structure) and even hosted
on Google. Also, consider changed crawl behaviour (another URL).
#7 Crawling

Recommended for you

Rendering SEO (explained by Google's Martin Splitt)
Rendering SEO (explained by Google's Martin Splitt)Rendering SEO (explained by Google's Martin Splitt)
Rendering SEO (explained by Google's Martin Splitt)

This document discusses how search engines like Google render and digest web page content. It notes that Google places more importance on text appearing above the fold, without needing to scroll. The document also references Google patents from 2012-2018 that focus on page layout. It indicates that Google limits the CPU consumption used to render pages, and that the prominence and location of content within the rendered page layout is important. Finally, it poses the question of whether optimizing for rendering and search engine processing can help websites rank better in search results.

renderingrendering seoseo
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers

We all know that site speed matters not only for users but also for search rankings. As marketers, how can we measure and improve the impact of site speed? Mat will cover a range of topics and tools, from the basic quick wins to some of the more surprising and cutting-edge techniques used by the largest websites in the world.

searchlovesearchlove san diegosite speed
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...

Page Speed can make or break your business in 2018, as it is equally important for user experience, revenue, and SEO. Mobile page speed is becoming a Goolge ranking factor in July 2018, or is it already as of May 2018? To get an idea about the current state of the industry, SEO PowerSuite conducts an experiment for 1 mln pages to find the correlation between mobile page speed in the position in mobile SERPs. In this presentation, delivered by Aleh Barysevich at SMX London, you'll find the results of the experiment, as well as the latest tools and tips on improving page speed.

seogooglepage speed
… because we are talking web performance!
Maybe all this shouldn’t matter…
Actually, AMP is not really *that* fast…
#8 Google is cheating with speed
15 @peakaceag pa.ag
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 load time for
a user is even greater.
16 @peakaceag pa.ag
AMP vs. regular website: major German newspapers
ZEIT Online as well as stern mostly outperform AMP with their regular sites (well done!)
Source: Peak Ace AG research (March 2018) / @patrickstox found the same: http://pa.ag/2Iz6em7
Publisher Type
Start Render
(in s)
Load Time
(in s)
First Interactive
(in s)
SpeedIndex
ZEIT Online AMP 1.000 1.168 2.272 1151
ZEIT Online Responsive 0.400 1.985 2.177 1024
stern AMP 0.900 0.907 3.363 1058
stern m-Subdomain 0.300 2.243 2.087 909
Süddeutsche AMP 1.100 1.654 2.804 1817
Süddeutsche Responsive 2.200 4.935 4.988 2768
Spiegel Online AMP 1.100 1.138 2.089 1112
Spiegel Online m-Subdomain 1.500 3.921 5.101 2519

Recommended for you

Implementing schema.org in the JSON-LD format with Google Tag Manager
Implementing schema.org in the JSON-LD format with Google Tag ManagerImplementing schema.org in the JSON-LD format with Google Tag Manager
Implementing schema.org in the JSON-LD format with Google Tag Manager

Learn how to easily implement structured data (schema.org) in the JSON-LD format with Google Tag Manager. These are the slides from my talk at SEO-Day 2017 in Cologne, Germany.

seodayjson-ldschema.org
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

My talk at #brightonSEO 2014 on how to make websites FAST, covering request optimizations, caching, JS & CSS tweaks and a lot more!

performancecachingpagespeed
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript

The document discusses the challenges of indexing JavaScript-powered websites by search engines. It notes that JavaScript rendering takes significant computational resources, straining crawlers' budgets. It also suggests that client-side rendered JavaScript websites have difficulties with search engine indexing and ranking, as content may be missed during Google's two-wave indexing process for JavaScript. The document recommends using server-side rendering, hybrid rendering, or prerendering to help search engines properly index JavaScript websites.

javascript seotechnical seoseo
17 @peakaceag pa.ag
We are taking what we learned from
AMP, and are working on web
standards that will allow instant
loading for non-AMP web content.
Pre-fetching & pre-rendering outside of AMP?
If you‘ve been following the news, this shouldn‘t have come as a surprise:
More: http://pa.ag/2FyeT6h
Only if you go full PWAMP (Progressive Web App + AMP)
secondary - and following – clicks/interactions will be fast as well.
#9 Only the 1st request is fast
19 @peakaceag pa.ag
Go full AMP? Sure, what could possibly go wrong!?
Just visit bmw.com - they are full AMP but ignored important basics!
▪ Update your custom fonts (to WOFF2)
(e.g. for “BMWTypeWebBoldAll” from 101 KB down to 72 KB)
Proper compression
(e.g. logo.png: 8.0 KB instead of 23.0 KB, ditto your favicon.ico)
Better caching strategies
(e.g. the logo or favicon.ico surely won’t change daily)
Page load is not fast enough for 3G
(First Interactive >10 seconds!)
So, what should you do?

Recommended for you

10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012

Talking about advanced performance optimization strategies at SMX Stockholm 2012 covering request reduction & optimization, caching, mark-up tuning, database & webserver performance and much, much more!

grimm digitalgoogleseo
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
Dynamic Rendering - is this really an SEO silver bullet? SMX WESTDynamic Rendering - is this really an SEO silver bullet? SMX WEST
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST

This document discusses various approaches to JavaScript rendering and SEO. It begins by discussing the limitations of prerendering/dynamic rendering, noting that it creates duplicate content and outdated pages. It then discusses alternatives like server-side rendering, hybrid rendering, and static site generators that can improve the user experience. The document cautions against relying solely on prerendering and recommends approaches like server-side rendering that allow search engines to properly index the JavaScript content.

javascript seojavascriptprerendering
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different marketsSabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets

This is my slidedeck for Brighton SEO, taking place on April 27th 2018. It covers my three most important learnings about international SEO and how to set up websites in an international context. Have fun :) Ps: All images were taken from Pexels.com or Pixabay.com.

brightonseointernational seoonline marketing
21 @peakaceag pa.ag
Please take care of your website first:
(no matter if you like AMP or not)
Using AMP must NOT be an excuse for having a
slow-loading website. Invest in your property to
become best-in-class first, before even considering
using AMP, if at all.”
Because the PageSpeed Insights score is not enough!
#1 Better measurement
23 @peakaceag pa.ag
Translating experiences to performance metrics
User experience
▪ Is it happening?
› Did the navigation start successfully?
Has the server responded?
▪ Is it useful?
› Has enough content rendered for users
to engage with it?
▪ Is it usable?
› Can users interact with the page or is it
still busy loading?
▪ Is it smooth/delightful?
› Are the interactions smooth and
natural, free of lag and jank?
Corresponding metric
First Paint (FP)/First Contentful Paint (FCP)
First Meaningful Paint (FMP) -> Hero Element Timing
Time to Interactive (TTI)
Long tasks (technically the absence of those long tasks)
24 @peakaceag pa.ag
Optimising and measuring for painting timings
#1 #2
First Paint (FP)
Time to First Paint – marks the point when the
browser starts to render something, the first bit of
content on the screen.

Recommended for you

SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your LogsSearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs

In the SEO industry, we obsess on everything Google says, from John Mueller dropping a hint in a Webmaster Hangout, to the ranking data we spend £1000s to gather. Yet we ignore the data Google throws at us every day, the crawling data. For the longest time, site crawls, traffic data, and rankings have been the pillars of SEO data gathering. Log files should join them as something everyone is doing. We'll go through how to get everything set-up, look at some of the tools to make it easy and repeatable and go through the kinds of analysis you can do to get insights from the data.

marketingseodistilled
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014

My talk at SMX Milan 2014 covering our most-commonly used SEO tools for linkauditing, -evaludation, -cleanup and -management.

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

This presentation by Bastian Grimm is an integral part of SEMrush webinar https://www.semrush.com/webinars/

semrushsite speedhow to make site fast
25 @peakaceag pa.ag
Optimising and measuring for painting timings
#1 #2 #3 #4
First Paint (FP) First Contentful
Paint (FCP)
Time to First Paint – marks the point when the
browser starts to render something, the first bit of
content on the screen.
Time to First Contentful Paint – marks the point when
the browser renders the first bit of content from the
DOM, text, an image etc.
26 @peakaceag pa.ag
Optimising and measuring for painting timings
#1 #2 #3 #4 #5 #6
First Paint (FP) First Contentful
Paint (FCP)
First Meaningful
Paint (FMP) / Hero!
Time to Interactive
(TTI)
Time to First Paint – marks the point when the
browser starts to render something, the first bit of
content on the screen.
First Meaningful Paint – the paint after which the
biggest above-the-fold layout change has happened
and your most important element is visible!
27 @peakaceag pa.ag
Track paint timings with Google Analytics (in theory)
Get the tracking code snippets: http://pa.ag/2viHQSz
version 62 and up
You must ensure your
PerformanceObserver is
registered in the <head>
before any stylesheets, so it
runs before FP/FCP happens.
(a buffered flag TBD in v.2)
28 @peakaceag pa.ag
The cool kids’ way of doing this (using GTM)
#1 #3
#2 #4

Recommended for you

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

Especially in a mobile-first world, fast loading websites are of utmost importance. Also, Google has been very vocal about anything web performance in the last few years and is pushing hard to innovate repeatedly. But performance is so much more! User satisfaction should be the main goal because expectations are clear: You’ve got two to three seconds maximum to deliver, so make it count. During Bastian's SearchLeeds 2018 talk he walked through various advanced topics around web performance optimisation going way beyond Accelerated Mobile Pages (and other short-term solutions) to make any website really, really fast.

marketingsearchleedsseo
SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf

Chrome DevTools are a set of free tools built directly into the Google Chrome browser, that offer developers and SEO specialists exceptional insights into underlying SEO issues. In this session, we will look at how to use it for technical SEO auditing, performance testing and crawlability, especially for JavaScript sites.

seo
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

This document discusses using edge computing technologies like content delivery networks (CDNs) to overcome technical barriers to SEO implementation and perform edge SEO. CDNs allow SEO implementations to be done serverlessly at the edge without touching origin source code. Examples of edge SEO include dynamically generating meta titles and tags, redirecting, AB testing, collecting pseudo server logs, and dynamically rendering JavaScript to resolve issues. Edge SEO provides benefits like speed, security, and enables implementations that may otherwise be restricted by platforms. Potential issues include impacting all requests and introducing latency, but recent developments have reduced these concerns.

edge seoedge seo dan tayloroptimization 2020
29 @peakaceag pa.ag
This is how it looks like in Google Analytics/Data Studio
GA: Behaviour > events > pages: performance metrics [first-contentful-paint]
Source: Google Analytics
The code and resources required to render the initial view of a web page
#2 Critical rendering path
31 @peakaceag pa.ag
Critical rendering path optimisation
Initial view
(critical)
Below the fold
(not critical)
Some (technical) background:

Recommended for you

Accelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in MagentoAccelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in Magento

The document discusses Accelerated Mobile Pages (AMP) capabilities for Magento projects. It covers what AMP is, the benefits of using AMP like faster page speeds and improved SEO, required code elements for AMP pages, common AMP components for Magento like forms and images, and how to add features like analytics and validate AMP pages. It also provides examples of using AMP features in Magento like custom layouts, templates, and dynamic content with AMP Bind.

magentomagento meetup kharkovamp
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering

Brief explanation of how browsers make sense of and render our mess. The path to the first paint - why it is important and how to get there faster. Rendering performance - how not to shoot yourself in the foot. Drupal - the current situation

frontend performancedrupal
Complete SEO Report with checklist required
Complete SEO Report with checklist requiredComplete SEO Report with checklist required
Complete SEO Report with checklist required

multiple variations of an engaging product description for an SEO report from a digital marketing agency: Variation 1: Skyrocket your online visibility and dominate your competition with our comprehensive SEO report. • Detailed analysis of your website's current search engine performance • Personalized recommendations to improve your rankings and drive more traffic • Insights on top-performing keywords and content opportunities • Step-by-step action plan to implement high-impact SEO strategies Struggling to get your website seen by your ideal customers? Our SEO report is your secret weapon to unlocking the full potential of search engine optimization. Packed with data-driven insights, you'll uncover the exact steps needed to boost your organic traffic, outrank your competitors, and turn your website into a lead-generating machine. Whether you're a small business or an enterprise-level brand, this report is your roadmap to search engine success. This SEO report is perfect for digital marketing teams, business owners, and entrepreneurs who are ready to take their online presence to new heights. With our expert analysis and optimization recommendations, you'll be able to leverage the power of search to attract more qualified leads, increase conversions, and grow your business like never before. Variation 2: Dominate the search results and stay ahead of the competition with our cutting-edge SEO report. • Comprehensive audit of your website's current search engine performance • Tailored strategies to improve your rankings across key industry keywords • Insights on content gaps and opportunities to drive more organic traffic • Actionable steps to implement high-impact SEO tactics Struggling to get your business seen by your ideal customers online. Our SEO report is your ticket to search engine dominance. Powered by the latest data and industry best practices, this report will give you the intel you need to outrank your competitors, attract more qualified leads, and turn your website into a lead-generating powerhouse. Whether you're a solopreneur or part of an enterprise marketing team, this SEO report is designed to help you maximize your online visibility and drive real business results. With our expert analysis and optimization recommendations, you'll be able to leverage the power of search to boost your brand awareness, increase conversions, and take your company to new heights. Don't let your competition outrank you - invest in our SEO report and watch your online dominance skyrocket. Variation 3: Uncover the search engine secrets to drive more traffic and leads with our comprehensive SEO report. • In-depth analysis of your website's current search engine performance • Customized strategies to improve your rankings across high-intent keywords • Insights on content gaps and opportunities to attract your ideal customers • Step-by-step action plan to implement proven SEO tactics Struggling to get your business seen by your target audience

digital marketing agencysocial media marketingcomplete seo
33 @peakaceag pa.ag
CSSOM: the CSS Object Model
▪ The CSSOM is a “map” of the CSS styles
found on a web page.
▪ It’s much like the DOM (Document Object
Model), but for CSS rather than HTML.
▪ The CSSOM combined with the DOM is
used by browsers to display web pages.
body
font-size:16px;
h1
font-size:22px;
p
font-size:16px;
p
font-size:12px;
a
font-size:12px;
img
font-size:16px;
34 @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
35 @peakaceag pa.ag
Google doesn’t make a single GET request for its CSS!
Because requesting external CSS is more expensive than in-lining everything.
36 @peakaceag pa.ag
How to know which CSS is critically required?
“Critical” renders in multiple resolutions & builds a combined/compressed CRP CSS:
Critical & criticalCSS on GitHub: http://pa.ag/2wJTZAu & http://pa.ag/2wT1ST9
▪ Minimum: a snapshot of CSS rules to
render a default desktop resolution
(e.g. 1280x1024).
▪ Better: various snapshots for mobile
phones, pad/s & desktop/s – manually
that’d be a lot of work!

Recommended for you

SEARCH Y - Bastian Grimm - Migrations Best Practices
SEARCH Y - Bastian Grimm -  Migrations Best PracticesSEARCH Y - Bastian Grimm -  Migrations Best Practices
SEARCH Y - Bastian Grimm - Migrations Best Practices

1. The document provides best practices and guidance for migrating websites, with a focus on search engine optimization. It emphasizes thorough preparation, testing changes gradually, and post-migration monitoring to ensure no issues occur. 2. Key steps include preparing the site by fixing errors, gathering URLs, benchmarking performance, and testing changes. All internal links, files, headers and technical elements need to be updated. 3. During implementation, changes should be made gradually and thoroughly tested. Search console needs to be configured for the new site. Post-migration, redirects, errors and performance must be monitored closely.

search engine marketingsearch marketingseo
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages

The document discusses how web browsers render web pages in 5 stages: 1) Constructing the object model from HTML tags and content 2) Creating the render tree by omitting non-visible nodes 3) Calculating layout and positioning during the layout stage 4) Painting pixels on the screen during the paint stage 5) Composite layers are ordered and combined during the composite stage It provides tips for optimizing performance such as minimizing critical resources, leveraging caching, prioritizing content, and reducing reflows and repaints.

high performing web pagesmake your website load fasterhow to build fast loading web sites
Web Client Performance
Web Client PerformanceWeb Client Performance
Web Client Performance

The document provides tips for optimizing web page performance based on Yahoo's YSlow guidelines. It discusses 12 tips, including making fewer HTTP requests, using a content delivery network, adding expires headers, gzipping components, putting CSS at the top, moving scripts to the bottom, avoiding CSS expressions, making JavaScript and CSS external, reducing DNS lookups, minifying JavaScript, avoiding redirects, and removing duplicate scripts. It also discusses optimizing JavaScript performance through choosing optimal algorithms and data structures, refactoring code, minimizing DOM interactions, and using local optimizations. Measurement of performance is recommended at each stage of the optimization process.

assignmentoptimisationwade
37 @peakaceag pa.ag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CRP loading demo</title>

<style> h1 { colour: green; } </style>

<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" />

<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

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

<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" />

<style> h1 { colour: green; } </style>

<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" />

<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
(function(){ ... } ());
/*! loadCSS rel=preload polyfill. [c] 2017 Filament Group, Inc. MIT License */
(function(){ ... } ());
Putting it all together
Fit the HTML, CSS & JS that’s necessary for “Start Render” into that first 14 kB round trip!
Inline your critical CSS.
1
Loading non-critical CSS
async using rel=“preload“.
2
Apply the CSS once it has
finished loading via “onload“.
3
Fallback for non-JS requests.
4
Implement loadCSS script for
older browsers.
5
Highest quality, (more) efficient data compression & smaller files.
#3 New image formats
39 @peakaceag pa.ag
62% of all web traffic is made up of images...
… and 51% of all URLs load more than 40 images per request.
Source: http://pa.ag/1SGDOEo
Average bytes per page by content type Image requests per page
40 @peakaceag pa.ag
WebP: Google’s alternative to JPEG, PNG, and GIF
Lossy & lossless compression, transparency, metadata, colour profiles, animation, and
much smaller files (30% vs. JPEG, 80% vs. PNG) – but only in Chrome, Opera & Android
Everything about WebP: http://pa.ag/1EpFWeN / & WebP support: http://pa.ag/2FZK4XS

Recommended for you

iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019

This is a deck I put together for a Technical SEO interview for iProspect in December 2019. The task comprised of two questions relating to JavaScript SEO and E-Commerce SEO for a specific product category. I have no affiliation with either the Body Shop or Asos and any data in the presentation was sourced from publicly available third party tools; it was a purely hypothetical and educational exercise. Several assumptions have also likely been made, and the contents of the deck merely reflects my thoughts looking from the outside in. Please don't take anything in the slides as gospel. Thanks for checking it out, Nick Samuel

seotechsearch engine optimization
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick StoxSMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox

The document discusses SEO considerations for JavaScript frameworks. It notes that SEOs need to understand how JavaScript works and how search engines handle it, as many developers are not familiar with SEO. It provides tips for SEOs, including that search engines don't interact with the page content in the same way users do, and content should be loaded by default without user interaction. It also discusses different approaches to rendering pages for search engines like server-side rendering versus client-side rendering.

seotechnical seojavascript
7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services

Why a good front-end is the primary necessity of any digital solution and how can you, as a web/mobile designer or app owner, can be built a performance-optimized front-end for its users.

front endweb design and development
41 @peakaceag pa.ag
You can still use WebP with on-the-fly replacement
Swap PNG and JPEG images per re-write (i.e., using .htaccess)
Check out cloudinary image optimisation: http://pa.ag/2IDOkP9
VS.
42 @peakaceag pa.ag
There is more: FLIF, BPG, JPEG-XR, etc.
If you’re “image-heavy”, go play with it!
Further reading: http://pa.ag/1S5OQmX
Pretty, varied, colourful, and slow!
#3 Custom web fonts
44 @peakaceag pa.ag
>70% of all websites use at least one non-standard font!
Result: 114 kB additional data and on average 2.9 HTTP requests.
Source: http://pa.ag/1BRUnbe
Font transfer size & font requests Sites with custom fonts
Font transfer size (kB) Font requests

Recommended for you

Demystifying web performance tooling and metrics
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metrics

Web performance has been one of the most talked about web development topics in the recent years. Yet if you try to start your journey with the speed optimisations, you might find yourself in a pickle. With the tooling, you might feel overwhelmed—it looks complex and hard to comprehend. With the metrics: at first glance all of them seem similar, not to mention that they change over time and you cannot figure out which of them to take into account.

#webperftoolsdevtools
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?

This document discusses different approaches for rendering web content, including client-side rendering (CSR), static site generation (SSG), server-side rendering (SSR), and dynamic rendering for bots. It notes that while CSR is simple to implement and maintain, it has limitations for SEO, link previews, and performance. SSG addresses some of these issues but has challenges for dynamic content and re-rendering. SSR provides benefits like SEO and performance but has more complex infrastructure needs. Dynamic rendering for bots allows serving pre-rendered content only to bots to address SEO and link preview needs while using CSR for users.

#frontend#architecturenext20
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx

Ideal web page performance How to maximize your content view with minimal attention span of your viewers? Impact of page performance on Business metrics Profiling a Http request Browser Architecture, Critical Rendering Path Applying FFSUx to get optimal webpage performance.

web performance optimizationbrowser rendering engineperformance tuning
45 @peakaceag pa.ag
Classic scenario: using external CSS
Easy to use with one big disadvantage: CSS is render-blocking!
46 @peakaceag pa.ag
Asynchronous? Also not very successful and problematic
FOUT (flash of unstyled text) = super annoying flickering
Fighting the FOUT: http://pa.ag/1BRWMmu
47 @peakaceag pa.ag
How I usually tackle this
Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi
48 @peakaceag pa.ag
New stuff to play around with: “font-display” strategies
More: http://pa.ag/2eUwVob

Recommended for you

2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960

The document discusses a 5-step process for using a CSS grid framework called the 960 Grid System to design a website. Step 1 involves paper prototyping to define expectations. Step 2 is creating an unstyled semantic structure using the 960 Grid. Step 3 adds graphical elements in Photoshop. Step 4 finalizes production by slicing images and applying CSS. Step 5 focuses on testing across browsers before client delivery. Using this process and a CSS framework provides benefits like visual consistency and reduced cross-browser issues.

JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstackJS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack

Вы уже слышали о JAMstack, который пришел на смену SSR и SPA? Подход, который оптимизирует веб приложения так, что они ограничены только скоростью вашего интернет соединения. Никаких просадок при рендере на клиенте, никаких падений серверов от нагрузки, только SEO-friendly приложения без проблем с масштабируемостью.

#jsfest#jsfestua#jsfest2019
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...

Boomerang is an open-source Real User Monitoring (RUM) JavaScript library used by thousands of websites to measure their visitor's experiences. The developers behind Boomerang take pride in building a reliable and performant third-party library that everyone can use without being concerned about its measurements affecting their site. We recently performed and shared an audit of Boomerang's performance, to help communicate its "cost of doing business", and in doing so we found several areas of code that we wanted to improve. We'll discuss how we performed the audit, some of the improvements we've made, how we're testing and validating our changes, and the real-time telemetry we capture for our library to ensure we're having as little of an impact as possible on the sites we're included on. Boomerang is an open-source Real User Monitoring (RUM) JavaScript library used by thousands of websites to measure their visitor's experiences. Boomerang runs on billions of page loads a day, either via the open-source library or as part of Akamai's mPulse RUM service. The developers behind Boomerang take pride in building a reliable and performant third-party library that everyone can use without being concerned about its measurements affecting their site. Recently, we performed and shared an audit of Boomerang's performance, to help communicate the "cost of doing business" of including Boomerang on a page while it takes its measurements. In doing the audit, we found several areas of code that we wanted to improve and have been making continuous improvements ever since. We've taken ideas and contributions from the OSS community, and have built a Performance Lab that helps "lock in" our improvements by continuously measuring the metrics that are important to us. We'll discuss how we performed the audit, some of the improvements we've made, how we're testing and validating our changes, and the real-time telemetry we capture on our library to ensure we're having as little of an impact as possible on the sites we're included on.

performanceweb performanceboomerang
… more?
50 pa.ag@peakaceag
#1 Client-side/front-end optimisation tasks
▪ 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.
All slides on SlideShare: http://pa.ag/iss17speed
Use my checklist on SlideShare to double check:
51 pa.ag@peakaceag
#2 Server-side/back-end optimisation tasks
▪ 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 optimisations (e.g. mem-caching)
▪ General code & runtime optimisations (e.g. CPU utilisation)
All slides on SlideShare: http://pa.ag/iss17speed
Use my checklist on SlideShare to double check:
52 pa.ag@peakaceag
We’re hiring! 25+ Performance Marketing jobs in Berlin!
Come and say “hello” or apply via jobs.pa.ag. Looking forward to speaking to you!
Always looking for talent!
Check out jobs.pa.ag

Recommended for you

Myths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEOMyths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEO

Neither developers nor SEOs can “design” a website without JavaScript. Because JS makes a website so much better. Everybody loves to interact with a website! However, JS presents a challenge for SEOs. The best way to overcome the challenges generated by JS is to work hand in hand with developers & designers. The goal of this talk is to dispel some myths & identify what developers should keep in mind when developing a JS-based website.

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

My talk [DE] from SEOday 2020 in Cologne titled: "Surprise, Surprise - Fünf Dinge, die du über technische Suchmaschinenoptimierung bisher nicht wusstest". Enjoy!

seotechnical seosearch engine optimization
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

My deck from SMX London 2019 on merging logfiles with data from GA, GSC and web crawling for better SEO insights.

seotechnical seologfiles
53 @peakaceag pa.ag
http://pa.ag/smx18amp
Always looking for talent! Check out jobs.pa.ag
Bastian Grimm
bg@pa.ag
twitter.com/peakaceag
facebook.com/peakaceag
www.pa.ag
Liked the deck? Here you go:

More Related Content

What's hot

Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AGTechnical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Technical SEO vs. User Experience - Bastian Grimm, Peak Ace AG
Bastian Grimm
 
OK Google, Whats next? - OMT Wiesbaden 2018
OK Google, Whats next? - OMT Wiesbaden 2018OK Google, Whats next? - OMT Wiesbaden 2018
OK Google, Whats next? - OMT Wiesbaden 2018
Bastian Grimm
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
Bastian Grimm
 
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
Bastian Grimm
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
Bastian Grimm
 
Migration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on AirMigration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on Air
Bastian Grimm
 
Migration Best Practices - Search Y 2019, Paris
Migration Best Practices - Search Y 2019, ParisMigration Best Practices - Search Y 2019, Paris
Migration Best Practices - Search Y 2019, Paris
Bastian Grimm
 
Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018Migration Best Practices - SEOkomm 2018
Migration Best Practices - SEOkomm 2018
Bastian Grimm
 
Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014
Bastian Grimm
 
Rendering SEO (explained by Google's Martin Splitt)
Rendering SEO (explained by Google's Martin Splitt)Rendering SEO (explained by Google's Martin Splitt)
Rendering SEO (explained by Google's Martin Splitt)
Anton Shulke
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
Distilled
 
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Link-Assistant.Com
 
Implementing schema.org in the JSON-LD format with Google Tag Manager
Implementing schema.org in the JSON-LD format with Google Tag ManagerImplementing schema.org in the JSON-LD format with Google Tag Manager
Implementing schema.org in the JSON-LD format with Google Tag Manager
Eoghan Henn
 
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
Bastian Grimm
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
Onely
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
Bastian Grimm
 
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
Dynamic Rendering - is this really an SEO silver bullet? SMX WESTDynamic Rendering - is this really an SEO silver bullet? SMX WEST
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
Onely
 
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different marketsSabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann
 
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your LogsSearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
Distilled
 
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
Bastian Grimm
 

What's hot (20)

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
 
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
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
 
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
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
 
Migration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on AirMigration Best Practices - Peak Ace on Air
Migration Best Practices - Peak Ace on Air
 
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
 
Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014
 
Rendering SEO (explained by Google's Martin Splitt)
Rendering SEO (explained by Google's Martin Splitt)Rendering SEO (explained by Google's Martin Splitt)
Rendering SEO (explained by Google's Martin Splitt)
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
 
Implementing schema.org in the JSON-LD format with Google Tag Manager
Implementing schema.org in the JSON-LD format with Google Tag ManagerImplementing schema.org in the JSON-LD format with Google Tag Manager
Implementing schema.org in the JSON-LD format with Google Tag Manager
 
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
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
Dynamic Rendering - is this really an SEO silver bullet? SMX WESTDynamic Rendering - is this really an SEO silver bullet? SMX WEST
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
 
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different marketsSabine Langmann - Brighton SEO 2018 - How to expand to different markets
Sabine Langmann - Brighton SEO 2018 - How to expand to different markets
 
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your LogsSearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
 
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
 

Similar to AMP - SMX München 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
Anton Shulke
 
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
 
SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf
Sara Moccand-Sayegh
 
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
Dan Taylor
 
Accelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in MagentoAccelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in Magento
Magecom UK Limited
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
Manuel Garcia
 
Complete SEO Report with checklist required
Complete SEO Report with checklist requiredComplete SEO Report with checklist required
Complete SEO Report with checklist required
aaimannoor5
 
SEARCH Y - Bastian Grimm - Migrations Best Practices
SEARCH Y - Bastian Grimm -  Migrations Best PracticesSEARCH Y - Bastian Grimm -  Migrations Best Practices
SEARCH Y - Bastian Grimm - Migrations Best Practices
SEARCH Y - Philippe Yonnet Evénements
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
Web Client Performance
Web Client PerformanceWeb Client Performance
Web Client Performance
Herea Adrian
 
iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019
Nick Samuel
 
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick StoxSMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
patrickstox
 
7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services
Katy Slemon
 
Demystifying web performance tooling and metrics
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metrics
Anna Migas
 
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
CodeValue
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
Haribabu Nandyal Padmanaban
 
2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960
LightSpeed
 
JS Fest 2019/Autumn. Александр То��мач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstackJS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JSFestUA
 
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Nicholas Jansma
 
Myths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEOMyths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEO
Sara Moccand-Sayegh
 

Similar to AMP - SMX München 2018 (20)

The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
 
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...
 
SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf
 
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
 
Accelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in MagentoAccelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in Magento
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
 
Complete SEO Report with checklist required
Complete SEO Report with checklist requiredComplete SEO Report with checklist required
Complete SEO Report with checklist required
 
SEARCH Y - Bastian Grimm - Migrations Best Practices
SEARCH Y - Bastian Grimm -  Migrations Best PracticesSEARCH Y - Bastian Grimm -  Migrations Best Practices
SEARCH Y - Bastian Grimm - Migrations Best Practices
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
Web Client Performance
Web Client PerformanceWeb Client Performance
Web Client Performance
 
iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019
 
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick StoxSMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
 
7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services7 secrets of performance oriented front end development services
7 secrets of performance oriented front end development services
 
Demystifying web performance tooling and metrics
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metrics
 
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
 
Modelling Web Performance Optimization - FFSUx
Modelling  Web Performance Optimization - FFSUxModelling  Web Performance Optimization - FFSUx
Modelling Web Performance Optimization - FFSUx
 
2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960
 
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstackJS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
 
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
Check Yourself Before You Wreck Yourself: Auditing and Improving the Performa...
 
Myths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEOMyths & true stories about JavaScript for SEO
Myths & true stories about JavaScript for SEO
 

More from Bastian Grimm

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

More from Bastian Grimm (14)

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

Recently uploaded

Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 

Recently uploaded (20)

Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 

AMP - SMX München 2018

  • 1. Bastian Grimm, Peak Ace AG | @basgr Why web performance optimisation should be more than AMP! AMP ≠ Silver Bullet
  • 2. … and feel free to disagree, but please think about it for a minute. First things first…
  • 3. AMP certainly helps to push people to take the need for fast loading sites more seriously. #1 Drives discussion/innovation
  • 4. Suddenly, different teams/stakeholders (have to) care about performance and it becomes an “agenda topic”. #2 Enables collaboration
  • 5. Converting existing sites to AMP almost never works, you need to rebuild the entire HTML & CSS from scratch (which takes time & resources). #3 Additional effort
  • 6. Extending CMS capabilities to manage AMP content is expensive, additional maintenance (IT, editorial, etc.) increases costs further. #4 Maintenance & costs
  • 7. Currently, the lack of proper branding possibilities is killing brand recognition as well as decreasing customer loyalty. #5 Lack of branding
  • 8. 8 @peakaceag pa.ag Can you guess which newspaper is which? AMP versions of four major German newspapers, without their logo they essentially all look pretty much the same:
  • 9. 9 @peakaceag pa.ag Can you guess which newspaper is which? Due to massive limitations, their “look and feel” is totally different from regular branding; Complex monetisation & marketing automation is hampered due to JS restrictions.
  • 10. 10 @peakaceag pa.ag Also, the average user doesn’t understand what happens Everything they search for will be served to them on Google’s “portal”. Navigation behaviour changes as well; swiping is THE way to navigate on Google! #1 #2 #3 #4
  • 11. Seriously, just putting it on GitHub doesn’t make it less controlled! #6 Not really open source
  • 12. They “use” you to make it easy for them (same structure) and even hosted on Google. Also, consider changed crawl behaviour (another URL). #7 Crawling
  • 13. … because we are talking web performance! Maybe all this shouldn’t matter…
  • 14. Actually, AMP is not really *that* fast… #8 Google is cheating with speed
  • 15. 15 @peakaceag pa.ag 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 load time for a user is even greater.
  • 16. 16 @peakaceag pa.ag AMP vs. regular website: major German newspapers ZEIT Online as well as stern mostly outperform AMP with their regular sites (well done!) Source: Peak Ace AG research (March 2018) / @patrickstox found the same: http://pa.ag/2Iz6em7 Publisher Type Start Render (in s) Load Time (in s) First Interactive (in s) SpeedIndex ZEIT Online AMP 1.000 1.168 2.272 1151 ZEIT Online Responsive 0.400 1.985 2.177 1024 stern AMP 0.900 0.907 3.363 1058 stern m-Subdomain 0.300 2.243 2.087 909 Süddeutsche AMP 1.100 1.654 2.804 1817 Süddeutsche Responsive 2.200 4.935 4.988 2768 Spiegel Online AMP 1.100 1.138 2.089 1112 Spiegel Online m-Subdomain 1.500 3.921 5.101 2519
  • 17. 17 @peakaceag pa.ag We are taking what we learned from AMP, and are working on web standards that will allow instant loading for non-AMP web content. Pre-fetching & pre-rendering outside of AMP? If you‘ve been following the news, this shouldn‘t have come as a surprise: More: http://pa.ag/2FyeT6h
  • 18. Only if you go full PWAMP (Progressive Web App + AMP) secondary - and following – clicks/interactions will be fast as well. #9 Only the 1st request is fast
  • 19. 19 @peakaceag pa.ag Go full AMP? Sure, what could possibly go wrong!? Just visit bmw.com - they are full AMP but ignored important basics! ▪ Update your custom fonts (to WOFF2) (e.g. for “BMWTypeWebBoldAll” from 101 KB down to 72 KB) Proper compression (e.g. logo.png: 8.0 KB instead of 23.0 KB, ditto your favicon.ico) Better caching strategies (e.g. the logo or favicon.ico surely won’t change daily) Page load is not fast enough for 3G (First Interactive >10 seconds!)
  • 20. So, what should you do?
  • 21. 21 @peakaceag pa.ag Please take care of your website first: (no matter if you like AMP or not) Using AMP must NOT be an excuse for having a slow-loading website. Invest in your property to become best-in-class first, before even considering using AMP, if at all.”
  • 22. Because the PageSpeed Insights score is not enough! #1 Better measurement
  • 23. 23 @peakaceag pa.ag Translating experiences to performance metrics User experience ▪ Is it happening? › Did the navigation start successfully? Has the server responded? ▪ Is it useful? › Has enough content rendered for users to engage with it? ▪ Is it usable? › Can users interact with the page or is it still busy loading? ▪ Is it smooth/delightful? › Are the interactions smooth and natural, free of lag and jank? Corresponding metric First Paint (FP)/First Contentful Paint (FCP) First Meaningful Paint (FMP) -> Hero Element Timing Time to Interactive (TTI) Long tasks (technically the absence of those long tasks)
  • 24. 24 @peakaceag pa.ag Optimising and measuring for painting timings #1 #2 First Paint (FP) Time to First Paint – marks the point when the browser starts to render something, the first bit of content on the screen.
  • 25. 25 @peakaceag pa.ag Optimising and measuring for painting timings #1 #2 #3 #4 First Paint (FP) First Contentful Paint (FCP) Time to First Paint – marks the point when the browser starts to render something, the first bit of content on the screen. Time to First Contentful Paint – marks the point when the browser renders the first bit of content from the DOM, text, an image etc.
  • 26. 26 @peakaceag pa.ag Optimising and measuring for painting timings #1 #2 #3 #4 #5 #6 First Paint (FP) First Contentful Paint (FCP) First Meaningful Paint (FMP) / Hero! Time to Interactive (TTI) Time to First Paint – marks the point when the browser starts to render something, the first bit of content on the screen. First Meaningful Paint – the paint after which the biggest above-the-fold layout change has happened and your most important element is visible!
  • 27. 27 @peakaceag pa.ag Track paint timings with Google Analytics (in theory) Get the tracking code snippets: http://pa.ag/2viHQSz version 62 and up You must ensure your PerformanceObserver is registered in the <head> before any stylesheets, so it runs before FP/FCP happens. (a buffered flag TBD in v.2)
  • 28. 28 @peakaceag pa.ag The cool kids’ way of doing this (using GTM) #1 #3 #2 #4
  • 29. 29 @peakaceag pa.ag This is how it looks like in Google Analytics/Data Studio GA: Behaviour > events > pages: performance metrics [first-contentful-paint] Source: Google Analytics
  • 30. The code and resources required to render the initial view of a web page #2 Critical rendering path
  • 31. 31 @peakaceag pa.ag Critical rendering path optimisation Initial view (critical) Below the fold (not critical)
  • 33. 33 @peakaceag pa.ag CSSOM: the CSS Object Model ▪ The CSSOM is a “map” of the CSS styles found on a web page. ▪ It’s much like the DOM (Document Object Model), but for CSS rather than HTML. ▪ The CSSOM combined with the DOM is used by browsers to display web pages. body font-size:16px; h1 font-size:22px; p font-size:16px; p font-size:12px; a font-size:12px; img font-size:16px;
  • 34. 34 @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
  • 35. 35 @peakaceag pa.ag Google doesn’t make a single GET request for its CSS! Because requesting external CSS is more expensive than in-lining everything.
  • 36. 36 @peakaceag pa.ag How to know which CSS is critically required? “Critical” renders in multiple resolutions & builds a combined/compressed CRP CSS: Critical & criticalCSS on GitHub: http://pa.ag/2wJTZAu & http://pa.ag/2wT1ST9 ▪ Minimum: a snapshot of CSS rules to render a default desktop resolution (e.g. 1280x1024). ▪ Better: various snapshots for mobile phones, pad/s & desktop/s – manually that’d be a lot of work!
  • 37. 37 @peakaceag pa.ag <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CRP loading demo</title> <!-- critical CSS goes here --> <style> h1 { colour: green; } </style> <!-- use async preload // no IE, Edge & some other unimportant ones (http://caniuse.com/#search=preload) --> <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> <!--noscript for req. without JS --> <noscript><link rel="stylesheet" href="non-critical.css"></noscript> <!-- include polyfill for shitty browsers --> <script> *! loadCSS. [c]2017 Filament Group, Inc. MIT License */ (function(){ ... } ()); /*! loadCSS rel=preload polyfill. [c] 2017 Filament Group, Inc. MIT License */ (function(){ ... } ()); </script> </head> <body> </body> </html> <!-- use async preload // no IE, Edge & some other unimportant ones (http://caniuse.com/#search=preload) --> <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> <!-- critical CSS goes here --> <style> h1 { colour: green; } </style> <!-- use async preload // no IE, Edge & some other unimportant ones (http://caniuse.com/#search=preload) --> <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'" /> <!--noscript for req. without JS --> <noscript><link rel="stylesheet" href="non-critical.css"></noscript> *! loadCSS. [c]2017 Filament Group, Inc. MIT License */ (function(){ ... } ()); /*! loadCSS rel=preload polyfill. [c] 2017 Filament Group, Inc. MIT License */ (function(){ ... } ()); Putting it all together Fit the HTML, CSS & JS that’s necessary for “Start Render” into that first 14 kB round trip! Inline your critical CSS. 1 Loading non-critical CSS async using rel=“preload“. 2 Apply the CSS once it has finished loading via “onload“. 3 Fallback for non-JS requests. 4 Implement loadCSS script for older browsers. 5
  • 38. Highest quality, (more) efficient data compression & smaller files. #3 New image formats
  • 39. 39 @peakaceag pa.ag 62% of all web traffic is made up of images... … and 51% of all URLs load more than 40 images per request. Source: http://pa.ag/1SGDOEo Average bytes per page by content type Image requests per page
  • 40. 40 @peakaceag pa.ag WebP: Google’s alternative to JPEG, PNG, and GIF Lossy & lossless compression, transparency, metadata, colour profiles, animation, and much smaller files (30% vs. JPEG, 80% vs. PNG) – but only in Chrome, Opera & Android Everything about WebP: http://pa.ag/1EpFWeN / & WebP support: http://pa.ag/2FZK4XS
  • 41. 41 @peakaceag pa.ag You can still use WebP with on-the-fly replacement Swap PNG and JPEG images per re-write (i.e., using .htaccess) Check out cloudinary image optimisation: http://pa.ag/2IDOkP9 VS.
  • 42. 42 @peakaceag pa.ag There is more: FLIF, BPG, JPEG-XR, etc. If you’re “image-heavy”, go play with it! Further reading: http://pa.ag/1S5OQmX
  • 43. Pretty, varied, colourful, and slow! #3 Custom web fonts
  • 44. 44 @peakaceag pa.ag >70% of all websites use at least one non-standard font! Result: 114 kB additional data and on average 2.9 HTTP requests. Source: http://pa.ag/1BRUnbe Font transfer size & font requests Sites with custom fonts Font transfer size (kB) Font requests
  • 45. 45 @peakaceag pa.ag Classic scenario: using external CSS Easy to use with one big disadvantage: CSS is render-blocking!
  • 46. 46 @peakaceag pa.ag Asynchronous? Also not very successful and problematic FOUT (flash of unstyled text) = super annoying flickering Fighting the FOUT: http://pa.ag/1BRWMmu
  • 47. 47 @peakaceag pa.ag How I usually tackle this Credits: http://pa.ag/1GakitY & http://pa.ag/1NDXCVi
  • 48. 48 @peakaceag pa.ag New stuff to play around with: “font-display” strategies More: http://pa.ag/2eUwVob
  • 50. 50 pa.ag@peakaceag #1 Client-side/front-end optimisation tasks ▪ 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. All slides on SlideShare: http://pa.ag/iss17speed Use my checklist on SlideShare to double check:
  • 51. 51 pa.ag@peakaceag #2 Server-side/back-end optimisation tasks ▪ 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 optimisations (e.g. mem-caching) ▪ General code & runtime optimisations (e.g. CPU utilisation) All slides on SlideShare: http://pa.ag/iss17speed Use my checklist on SlideShare to double check:
  • 52. 52 pa.ag@peakaceag We’re hiring! 25+ Performance Marketing jobs in Berlin! Come and say “hello” or apply via jobs.pa.ag. Looking forward to speaking to you! Always looking for talent! Check out jobs.pa.ag
  • 53. 53 @peakaceag pa.ag http://pa.ag/smx18amp Always looking for talent! Check out jobs.pa.ag Bastian Grimm bg@pa.ag twitter.com/peakaceag facebook.com/peakaceag www.pa.ag Liked the deck? Here you go: