SlideShare a Scribd company logo
@bennimack // b13.com

Performance-driven websites with AMP
Performance-driven
websites with AMP
Benni Mack



@bennimack
b13.com
@bennimack // b13.com

Performance-driven websites with AMP
• What is AMP?
• AMP in Action
• Why do we need AMP?
• Why do we want AMP?
• Criticism
What we’ll cover
@bennimack // b13.com

Performance-driven websites with AMP
• AMP is short for "Accelerated Mobile Pages" (now it's just "AMP")
• Facebook announced Instant Articles in 2015 for their mobile app
• AMP is Google’s counter-part to Instant Articles started in 2016
• Originally started to add fast components for mobile devices
What is AMP?
@bennimack // b13.com

Performance-driven websites with AMP
I don’t get it
@bennimack // b13.com

Performance-driven websites with AMP
Structure of AMP
Browsers
? ?
HTML5
Web Components

Yay!
AMP HTML AMP JavaScript
AMP Cache
Optimized
CDN
@bennimack // b13.com

Performance-driven websites with AMP
But there are rules
@bennimack // b13.com

Performance-driven websites with AMP
• Only CSS allowed that is used on this current page
• Only limited amount of CSS allowed in <head> (no external CSS files)
• No (external) JavaScript other than AMP async JS
• schema.org JSON-LD
• Prohibited HTML elements, explicit width & height in HTML
• HTTPS required
But there are rules
@bennimack // b13.com

Performance-driven websites with AMP
I still

don’t get it
@bennimack // b13.com

Performance-driven websites with AMP
• Create a variant of your webpage built with AMP components (we have a
CMS!)
• Add a HTML meta tag to your default HTML page



• Boom!
The initial idea
<link rel="amphtml" href="https://b13.com/about-us/amp.html" />
@bennimack // b13.com

Performance-driven websites with AMP
• Google checks if your AMP variant is valid when indexing
• On mobile devices, AMP variant is linked and pre-loaded on google search
results
• Google’s AMP Cache allows for loading your AMP variant in less than 1sec
around the world
The initial idea
@bennimack // b13.com

Performance-driven websites with AMP
• Only suitable for publishers - news articles only
• Separate AMP page variant necessary
• UX & theming is a pain
• Components very limited
Back in 2016
@bennimack // b13.com

Performance-driven websites with AMP
AMP in Action
b13.com built five media website

for an UK-based publisher
in the medical sector

The Analytical Scientist.com is one of them
All sites feature a total of

10.000+ news / content articles
@bennimack // b13.com

Performance-driven websites with AMP
Desktop
version
@bennimack // b13.com

Performance-driven websites with AMP
AMP in Action
Non-AMP
AMP

version
@bennimack // b13.com

Performance-driven websites with AMP
• LOTS of Components got added, all open source
• AMP Cache is available from other CDN providers
• Twitter, LinkedIn, Bing search results link to AMP variants
• Usable for more than news pages
One step further
What if...
@bennimack // b13.com

Performance-driven websites with AMP
• No extra efforts for AMP variant
• Developers code better (more rules!)
• No JavaScript sliders / menus anymore
• Website is fast by default
... you go AMP-first?
b13.com is AMP-only
You won’t notice
except: it’s fast!
@bennimack // b13.com

Performance-driven websites with AMP
• 50% of the world population does not have access to the internet
• Mobile devices make more than 50% of the traffic
• On 3G, the average website takes 15,3sec to load
• After 15 sec, your visitor thinks your website is broken!

No, I’m wrong: After 3 sec!
• It’s an open standard. b13 contributes too!
Why do you need AMP?
@bennimack // b13.com

Performance-driven websites with AMP
• We get paid by our customers
• If they have more traffic or satisfied customers, they are happy, too!
• We see heavily increased search rankings
• People get information they need (faster)
• We don’t have to wait anymore
Why do you want AMP?
@bennimack // b13.com

Performance-driven websites with AMP
• Google’s taking over your content and traffic!
• Google’s building their own HTML variant!
• Google will be the next Facebook!
Criticism
@bennimack // b13.com

Performance-driven websites with AMP
• AMP is
• an open collection of web components, JS, rulesets + CDN / Cache
• easier to implement in 2019 than in 2016
• backed by Google, but not from Google
• perfect for a CMS with structured content
Summary
@bennimack // b13.com

Performance-driven websites with AMP
https://amp.dev
https://github.com/ampproject/amphtml
Resources
@bennimack // b13.com

Performance-driven websites with AMP
Go AMP! Go Now!
Thank you!


Follow me on Twitter @bennimack


https://amp.dev




https://b13.com/amp

More Related Content

What's hot

Great Lakes Area .Net UG: Optimize .Net Azure App Services
Great Lakes Area .Net UG: Optimize .Net Azure App ServicesGreat Lakes Area .Net UG: Optimize .Net Azure App Services
Great Lakes Area .Net UG: Optimize .Net Azure App Services
Brian McKeiver
 
AMP Accelerated Mobile Pages - Getting Started & Analytics
AMP Accelerated Mobile Pages - Getting Started & AnalyticsAMP Accelerated Mobile Pages - Getting Started & Analytics
AMP Accelerated Mobile Pages - Getting Started & Analytics
Vincent Koc
 
Google AMP - What is it and is it right for your website? SLCSEM, Oct 2016
Google AMP - What is it and is it right for your website? SLCSEM, Oct 2016Google AMP - What is it and is it right for your website? SLCSEM, Oct 2016
Google AMP - What is it and is it right for your website? SLCSEM, Oct 2016
Jesse Semchuck
 
Google AMP (Accelerated Mobile Pages)
Google AMP (Accelerated Mobile Pages)Google AMP (Accelerated Mobile Pages)
Google AMP (Accelerated Mobile Pages)
Chitpong Wuttanan
 
What Are Accelerated Mobile Pages (AMPs)?
What Are Accelerated Mobile Pages (AMPs)?What Are Accelerated Mobile Pages (AMPs)?
What Are Accelerated Mobile Pages (AMPs)?
MatchCraft
 
AMP - Accelerated Mobile Pages
AMP - Accelerated Mobile PagesAMP - Accelerated Mobile Pages
AMP - Accelerated Mobile Pages
Ido Green
 
AMP and PWA
AMP and PWAAMP and PWA
AMP and PWA
Eun Cho
 
Why AMP for WordPress?
Why AMP for WordPress? Why AMP for WordPress?
Why AMP for WordPress?
TAC Marketing Group
 
Google's AMP project for web users
Google's AMP project for web usersGoogle's AMP project for web users
Google's AMP project for web users
Peter Knight
 
AMP up Your WordPress Site
AMP up Your WordPress SiteAMP up Your WordPress Site
AMP up Your WordPress Site
Prem Tiwari
 
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
Mike Hale
 
Accelerated Mobile Pages - WordCamp Kansas City
Accelerated Mobile Pages - WordCamp Kansas CityAccelerated Mobile Pages - WordCamp Kansas City
Accelerated Mobile Pages - WordCamp Kansas City
Jeremy Green
 
Joomla! final project
Joomla! final projectJoomla! final project
Joomla! final projectLeonardoo Leo
 
Joomla! final project
Joomla! final projectJoomla! final project
Joomla! final project
Leonardoo Leo
 
AMP and WordPress
AMP and WordPressAMP and WordPress
AMP and WordPress
billerickson
 
Application Performance Monitoring for WordPress
Application Performance Monitoring for WordPressApplication Performance Monitoring for WordPress
Application Performance Monitoring for WordPress
WP Engine
 
WTF is AMP?
WTF is AMP?WTF is AMP?
WTF is AMP?
Carl V. Lewis
 
AMPifying your Drupal 8 Site : higher performance and higher engagement - Par...
AMPifying your Drupal 8 Site : higher performance and higher engagement - Par...AMPifying your Drupal 8 Site : higher performance and higher engagement - Par...
AMPifying your Drupal 8 Site : higher performance and higher engagement - Par...
DrupalMumbai
 

What's hot (19)

Great Lakes Area .Net UG: Optimize .Net Azure App Services
Great Lakes Area .Net UG: Optimize .Net Azure App ServicesGreat Lakes Area .Net UG: Optimize .Net Azure App Services
Great Lakes Area .Net UG: Optimize .Net Azure App Services
 
AMP Accelerated Mobile Pages - Getting Started & Analytics
AMP Accelerated Mobile Pages - Getting Started & AnalyticsAMP Accelerated Mobile Pages - Getting Started & Analytics
AMP Accelerated Mobile Pages - Getting Started & Analytics
 
Google AMP - What is it and is it right for your website? SLCSEM, Oct 2016
Google AMP - What is it and is it right for your website? SLCSEM, Oct 2016Google AMP - What is it and is it right for your website? SLCSEM, Oct 2016
Google AMP - What is it and is it right for your website? SLCSEM, Oct 2016
 
Google AMP (Accelerated Mobile Pages)
Google AMP (Accelerated Mobile Pages)Google AMP (Accelerated Mobile Pages)
Google AMP (Accelerated Mobile Pages)
 
What Are Accelerated Mobile Pages (AMPs)?
What Are Accelerated Mobile Pages (AMPs)?What Are Accelerated Mobile Pages (AMPs)?
What Are Accelerated Mobile Pages (AMPs)?
 
AMP - Accelerated Mobile Pages
AMP - Accelerated Mobile PagesAMP - Accelerated Mobile Pages
AMP - Accelerated Mobile Pages
 
AMP and PWA
AMP and PWAAMP and PWA
AMP and PWA
 
Why AMP for WordPress?
Why AMP for WordPress? Why AMP for WordPress?
Why AMP for WordPress?
 
Google's AMP project for web users
Google's AMP project for web usersGoogle's AMP project for web users
Google's AMP project for web users
 
AMP up Your WordPress Site
AMP up Your WordPress SiteAMP up Your WordPress Site
AMP up Your WordPress Site
 
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
 
Accelerated Mobile Pages - WordCamp Kansas City
Accelerated Mobile Pages - WordCamp Kansas CityAccelerated Mobile Pages - WordCamp Kansas City
Accelerated Mobile Pages - WordCamp Kansas City
 
Joomla! final project
Joomla! final projectJoomla! final project
Joomla! final project
 
Joomla! final project
Joomla! final projectJoomla! final project
Joomla! final project
 
AMP and WordPress
AMP and WordPressAMP and WordPress
AMP and WordPress
 
Application Performance Monitoring for WordPress
Application Performance Monitoring for WordPressApplication Performance Monitoring for WordPress
Application Performance Monitoring for WordPress
 
WTF is AMP?
WTF is AMP?WTF is AMP?
WTF is AMP?
 
AMP K.S.
AMP K.S.AMP K.S.
AMP K.S.
 
AMPifying your Drupal 8 Site : higher performance and higher engagement - Par...
AMPifying your Drupal 8 Site : higher performance and higher engagement - Par...AMPifying your Drupal 8 Site : higher performance and higher engagement - Par...
AMPifying your Drupal 8 Site : higher performance and higher engagement - Par...
 

Similar to Performance-driven websites with AMP - NeosCon May 2019

Accelerated Mobile Pages (AMP) to Win Search War in 2017
Accelerated Mobile Pages (AMP) to Win Search War in 2017Accelerated Mobile Pages (AMP) to Win Search War in 2017
Accelerated Mobile Pages (AMP) to Win Search War in 2017
Digital Vidya
 
AMP Up Your WordPress
AMP Up Your WordPressAMP Up Your WordPress
AMP Up Your WordPress
TAC Marketing Group
 
Amp your site an intro to accelerated mobile pages
Amp your site  an intro to accelerated mobile pagesAmp your site  an intro to accelerated mobile pages
Amp your site an intro to accelerated mobile pages
Robert McFrazier
 
Webwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies - Procedure to Implement AMP in your WebsiteWebwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies
 
Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)
Sanjay Kumar
 
Step by-step procedure to implement amp in website
Step by-step procedure to implement amp in websiteStep by-step procedure to implement amp in website
Step by-step procedure to implement amp in website
Webwing Technologies
 
Google AMP: High-Speed Pages in Higher Ed
Google AMP: High-Speed Pages in Higher EdGoogle AMP: High-Speed Pages in Higher Ed
Google AMP: High-Speed Pages in Higher Ed
Caroline Roberts
 
Website performance and an introduction to AMP
Website performance and an introduction to AMPWebsite performance and an introduction to AMP
Website performance and an introduction to AMP
Michael Gearon
 
AMP and the instant web - WebPerformance NYC MeetUp group
AMP and the instant web - WebPerformance NYC MeetUp groupAMP and the instant web - WebPerformance NYC MeetUp group
AMP and the instant web - WebPerformance NYC MeetUp group
Michael Posso
 
What is Amp (Accelerated Mobile Pages)?
What is Amp (Accelerated Mobile Pages)?What is Amp (Accelerated Mobile Pages)?
What is Amp (Accelerated Mobile Pages)?
KULZUJESHAI
 
Get AMP’ed for AMP!
Get AMP’ed for AMP!Get AMP’ed for AMP!
Get AMP’ed for AMP!
Greenlane
 
google amp pages
google amp pagesgoogle amp pages
Integrating Accelerated Mobile Pages (AMP) In Drupal Websites
Integrating Accelerated Mobile Pages (AMP) In Drupal WebsitesIntegrating Accelerated Mobile Pages (AMP) In Drupal Websites
Integrating Accelerated Mobile Pages (AMP) In Drupal Websites
Excellent Webworld
 
Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)
ijtsrd
 
Accelerated-Mobile-Pages
Accelerated-Mobile-PagesAccelerated-Mobile-Pages
Accelerated-Mobile-Pages
shivantGupta1
 
Setting up & Tracking AMP Pages in Google Analytics
Setting up & Tracking AMP Pages in Google AnalyticsSetting up & Tracking AMP Pages in Google Analytics
Setting up & Tracking AMP Pages in Google AnalyticsVivek Patel
 
Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul Shapiro
Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul ShapiroAdvanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul Shapiro
Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul Shapiro
Search Marketing Expo - SMX
 
Bliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWABliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWA
Irfan Maulana
 
SEO site architecture best practices
SEO site architecture best practicesSEO site architecture best practices
SEO site architecture best practices
MM Rahman Bappi
 
CS-Cart Accelerated Mobile Pages V1.2
CS-Cart Accelerated Mobile Pages V1.2CS-Cart Accelerated Mobile Pages V1.2
CS-Cart Accelerated Mobile Pages V1.2
Webkul Software Pvt. Ltd.
 

Similar to Performance-driven websites with AMP - NeosCon May 2019 (20)

Accelerated Mobile Pages (AMP) to Win Search War in 2017
Accelerated Mobile Pages (AMP) to Win Search War in 2017Accelerated Mobile Pages (AMP) to Win Search War in 2017
Accelerated Mobile Pages (AMP) to Win Search War in 2017
 
AMP Up Your WordPress
AMP Up Your WordPressAMP Up Your WordPress
AMP Up Your WordPress
 
Amp your site an intro to accelerated mobile pages
Amp your site  an intro to accelerated mobile pagesAmp your site  an intro to accelerated mobile pages
Amp your site an intro to accelerated mobile pages
 
Webwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies - Procedure to Implement AMP in your WebsiteWebwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies - Procedure to Implement AMP in your Website
 
Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)
 
Step by-step procedure to implement amp in website
Step by-step procedure to implement amp in websiteStep by-step procedure to implement amp in website
Step by-step procedure to implement amp in website
 
Google AMP: High-Speed Pages in Higher Ed
Google AMP: High-Speed Pages in Higher EdGoogle AMP: High-Speed Pages in Higher Ed
Google AMP: High-Speed Pages in Higher Ed
 
Website performance and an introduction to AMP
Website performance and an introduction to AMPWebsite performance and an introduction to AMP
Website performance and an introduction to AMP
 
AMP and the instant web - WebPerformance NYC MeetUp group
AMP and the instant web - WebPerformance NYC MeetUp groupAMP and the instant web - WebPerformance NYC MeetUp group
AMP and the instant web - WebPerformance NYC MeetUp group
 
What is Amp (Accelerated Mobile Pages)?
What is Amp (Accelerated Mobile Pages)?What is Amp (Accelerated Mobile Pages)?
What is Amp (Accelerated Mobile Pages)?
 
Get AMP’ed for AMP!
Get AMP’ed for AMP!Get AMP’ed for AMP!
Get AMP’ed for AMP!
 
google amp pages
google amp pagesgoogle amp pages
google amp pages
 
Integrating Accelerated Mobile Pages (AMP) In Drupal Websites
Integrating Accelerated Mobile Pages (AMP) In Drupal WebsitesIntegrating Accelerated Mobile Pages (AMP) In Drupal Websites
Integrating Accelerated Mobile Pages (AMP) In Drupal Websites
 
Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP)
 
Accelerated-Mobile-Pages
Accelerated-Mobile-PagesAccelerated-Mobile-Pages
Accelerated-Mobile-Pages
 
Setting up & Tracking AMP Pages in Google Analytics
Setting up & Tracking AMP Pages in Google AnalyticsSetting up & Tracking AMP Pages in Google Analytics
Setting up & Tracking AMP Pages in Google Analytics
 
Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul Shapiro
Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul ShapiroAdvanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul Shapiro
Advanced Tips, Tricks, & Tools for Conquering AMP Problems Today By Paul Shapiro
 
Bliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWABliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWA
 
SEO site architecture best practices
SEO site architecture best practicesSEO site architecture best practices
SEO site architecture best practices
 
CS-Cart Accelerated Mobile Pages V1.2
CS-Cart Accelerated Mobile Pages V1.2CS-Cart Accelerated Mobile Pages V1.2
CS-Cart Accelerated Mobile Pages V1.2
 

Recently uploaded

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 

Recently uploaded (20)

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 

Performance-driven websites with AMP - NeosCon May 2019

  • 1. @bennimack // b13.com
 Performance-driven websites with AMP Performance-driven websites with AMP Benni Mack
 
 @bennimack b13.com
  • 2. @bennimack // b13.com
 Performance-driven websites with AMP • What is AMP? • AMP in Action • Why do we need AMP? • Why do we want AMP? • Criticism What we’ll cover
  • 3. @bennimack // b13.com
 Performance-driven websites with AMP • AMP is short for "Accelerated Mobile Pages" (now it's just "AMP") • Facebook announced Instant Articles in 2015 for their mobile app • AMP is Google’s counter-part to Instant Articles started in 2016 • Originally started to add fast components for mobile devices What is AMP?
  • 4. @bennimack // b13.com
 Performance-driven websites with AMP I don’t get it
  • 5. @bennimack // b13.com
 Performance-driven websites with AMP Structure of AMP Browsers ? ? HTML5 Web Components
 Yay! AMP HTML AMP JavaScript AMP Cache Optimized CDN
  • 6. @bennimack // b13.com
 Performance-driven websites with AMP But there are rules
  • 7. @bennimack // b13.com
 Performance-driven websites with AMP • Only CSS allowed that is used on this current page • Only limited amount of CSS allowed in <head> (no external CSS files) • No (external) JavaScript other than AMP async JS • schema.org JSON-LD • Prohibited HTML elements, explicit width & height in HTML • HTTPS required But there are rules
  • 8. @bennimack // b13.com
 Performance-driven websites with AMP I still
 don’t get it
  • 9. @bennimack // b13.com
 Performance-driven websites with AMP • Create a variant of your webpage built with AMP components (we have a CMS!) • Add a HTML meta tag to your default HTML page
 
 • Boom! The initial idea <link rel="amphtml" href="https://b13.com/about-us/amp.html" />
  • 10. @bennimack // b13.com
 Performance-driven websites with AMP • Google checks if your AMP variant is valid when indexing • On mobile devices, AMP variant is linked and pre-loaded on google search results • Google’s AMP Cache allows for loading your AMP variant in less than 1sec around the world The initial idea
  • 11. @bennimack // b13.com
 Performance-driven websites with AMP • Only suitable for publishers - news articles only • Separate AMP page variant necessary • UX & theming is a pain • Components very limited Back in 2016
  • 12. @bennimack // b13.com
 Performance-driven websites with AMP AMP in Action b13.com built five media website
 for an UK-based publisher in the medical sector
 The Analytical Scientist.com is one of them All sites feature a total of
 10.000+ news / content articles
  • 13. @bennimack // b13.com
 Performance-driven websites with AMP Desktop version
  • 14. @bennimack // b13.com
 Performance-driven websites with AMP AMP in Action Non-AMP AMP
 version
  • 15. @bennimack // b13.com
 Performance-driven websites with AMP • LOTS of Components got added, all open source • AMP Cache is available from other CDN providers • Twitter, LinkedIn, Bing search results link to AMP variants • Usable for more than news pages One step further
  • 17. @bennimack // b13.com
 Performance-driven websites with AMP • No extra efforts for AMP variant • Developers code better (more rules!) • No JavaScript sliders / menus anymore • Website is fast by default ... you go AMP-first? b13.com is AMP-only You won’t notice except: it’s fast!
  • 18. @bennimack // b13.com
 Performance-driven websites with AMP • 50% of the world population does not have access to the internet • Mobile devices make more than 50% of the traffic • On 3G, the average website takes 15,3sec to load • After 15 sec, your visitor thinks your website is broken!
 No, I’m wrong: After 3 sec! • It’s an open standard. b13 contributes too! Why do you need AMP?
  • 19. @bennimack // b13.com
 Performance-driven websites with AMP • We get paid by our customers • If they have more traffic or satisfied customers, they are happy, too! • We see heavily increased search rankings • People get information they need (faster) • We don’t have to wait anymore Why do you want AMP?
  • 20. @bennimack // b13.com
 Performance-driven websites with AMP • Google’s taking over your content and traffic! • Google’s building their own HTML variant! • Google will be the next Facebook! Criticism
  • 21. @bennimack // b13.com
 Performance-driven websites with AMP • AMP is • an open collection of web components, JS, rulesets + CDN / Cache • easier to implement in 2019 than in 2016 • backed by Google, but not from Google • perfect for a CMS with structured content Summary
  • 22. @bennimack // b13.com
 Performance-driven websites with AMP https://amp.dev https://github.com/ampproject/amphtml Resources
  • 23. @bennimack // b13.com
 Performance-driven websites with AMP Go AMP! Go Now! Thank you! 
 Follow me on Twitter @bennimack 
 https://amp.dev 
 
 https://b13.com/amp