SlideShare a Scribd company logo
AMP your site: An Intro to
Accelerated Mobile Pages
Presented By
Robert McFrazier
Robert McFrazier
@rmcfrazier
http://blog.robert.mcfrazier.com
● Why speed is important?
● What are the problems AMP
addresses?
● What is in AMP?
Will abandon a site
that takes >3 seconds
to load
40%
Expect a page to
load in <2 seconds
47%
Say fast load time
speed is important
to site loyalty
52%
Slow and steady doesn’t win the race
What are user expectations for mobile sites?

Recommended for you

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

Google is pushing Accelerated Mobile Pages (AMP) in a big way. AMP pages restrict what you can do all for the sake of performance on mobile devices. In this talk we’ll cover the basics of AMP, how it’s different than mobile-ready and responsive design, and the plugins you’ll need to take advantage of AMP on your WordPress site.

wordpresswordcamp#wca2
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

Check out more on my blog at: https://www.mcbeev.com/ Azure App Services are basically the de facto standard as the best possible way to deploy and host a .Net Framework or .Net Core application, period. You can argue with me until you are blue in the face about other hosting methods or platforms, but you would still be wrong. However, utilizing an Azure App Service as your hosting method is not the same as utilizing standard IIS, especially when it comes to optimization. During the session we will deploy a .Net Core MVC application to Azure, determine an initial baseline for performance, and then walk through how to configure various properties and server-side configurations that make that site blazing fast.

azureazureappserviceskontent
google amp pages
google amp pagesgoogle amp pages
google amp pages

Creating Google AMP Pages allows websites to load faster on mobile and desktop. AMP (Accelerated Mobile Pages) requires rewriting pages in HTML, CSS, and JavaScript to meet speed requirements. Websites create AMP versions of pages that are validated and cached by Google. When users search on mobile, AMP versions may load up to 10x faster than regular pages. AMP works best for static content like news articles and blogs but may not be needed if pages already load quickly. Websites must maintain original and AMP versions of pages and add metadata to link between them.

google ampamp pages
Amp your site: An intro to accelerated mobile pages
How fast is fast enough.
Mobile pages should render in < 1s
3Gnetwork
connection
600ms to 1s
is consumed by mandatory 3G network
overhead which can’t be avoided
(average 750 Kbps to 1 Mbps)
Source: "The Search Agency, Optimization Strategies for the Mobile Web"
Mobile pages that load 1s faster see up to +27% CvR
180,000
160,000
140,000
120,000
100,000
80,000
60,000
40,000
20,000
0
1.7
1.6
1.4
1.2
1.0
0.8
0.6
0.4
0.2
0.0
1.2 1.5 1.8 2.1 2.4 2.7 3.0 3.3 3.6 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
Load time (seconds)
Conversionrate(%)
Sessions Conversion rate (%) Bounce rate (%)
1.9% conversion rate
1.5% conversion rate
Note: Some of pages with
load times faster than 2.4
seconds experienced lower
conversion rates.
Those numbers may be
influenced by faster
response/page load times for
404s and other errors.
Source: "Mobile performance conversion rate"
12.8% bounce rate
20% bounce rate
58
51
45
39
32
26
19
13
6
0
Bouncerate(%)

Recommended for you

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, or Accelerated Mobile Pages, is Google’s framework for fast-loading mobile pages. This enables publishers to hit two birds with one stone: increase page load times and improve user experience. And we’re not just talking about Google’s “Top Search” results; Google will display AMP’s anytime it’s detected.

mobile webdigital marketingmarketing online
Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16
Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16
Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16

All about AMP, Google's Accelerated Mobile Pages project - at SEO Grail Philadelphia on January 20th, 2016.

digital marketingsearch engine marketingsearch engine optimization
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

A brief guide to how Google's new Accelerated Mobile Pages (aka AMP) are displayed and navigated. Includes details on the fundamental change to how Google AMP pages differ to ‘normal’ search results.

googleseomobile marketing
< 1sec
Median load Time
for AMP on Search
19sec
Avg Load Time
for Non-AMP
AMP is fast
● Why speed is important?
● What are the problems AMP
addresses?
● What is in AMP?
Accelerated Mobile Pages
Fast content + distribution on the web
2 Poor consumer perceptions of mobile web experiences
1 Evolving ecosystems of closed distribution models
3 Monetization at the content level is hard
4 Technology updates are outpacing development cycles
5 Ad Blockers are a challenge to the industry
We are faced with new challenges
With a common objective: an open ecosystem of knowledge

Recommended for you

Accelerated Mobile Pages - WordCamp Kansas City
Accelerated Mobile Pages - WordCamp Kansas CityAccelerated Mobile Pages - WordCamp Kansas City
Accelerated Mobile Pages - WordCamp Kansas City

AMP is an open spec for lightweight, mobile-friendly pages. You can use it as the mobile view on your site, and having it enabled actually allows the AMP version of your page to be used by Google for search previews and in other places on their platform. In addition, many SEO experts recommend adopting AMP as Google is likely to reward those who do in terms of rankings. You will learn why AMP is important, how to easily add it to your WordPress site, and different techniques you can use to customize it to your specific needs.

google ampkansas citygoogle
AMP up Your WordPress Site
AMP up Your WordPress SiteAMP up Your WordPress Site
AMP up Your WordPress Site

1. What is AMP 2. Why should you care about AMP 3. The AMP way of doing things 4. How to get started with AMP 5. Additional resources

wordpressampgoogle
Performance-driven websites with AMP - NeosCon May 2019
Performance-driven websites with AMP - NeosCon May 2019Performance-driven websites with AMP - NeosCon May 2019
Performance-driven websites with AMP - NeosCon May 2019

Principles of AMPhtml within TYPO3 CMS built by an example of b13.com. From NeosCon 2019 on May 11th, 2019 by @bennimack

amphtmltypo3neos
So we need something...
Fast Easy to
implement
Mobile
Friendly
Embrace the
open web
Gives strong
Incentives
✔⚡
How to make fast web pages
1. Simplify the pages
a. Less Javascript
2. Optimize the bandwidth
a. Get the best content for your device (image resolution etc.)
b. Parallelize the loading (asynchronous load)
3. Cache the pages
a. Use Content Delivery Networks to store a local copy of the
pages
⚡
How to make fast web pages
Use HTTP/2 whenever possible.
You get that for free if you use the Google AMP Cache.
⚡
Easy to implement
What is required
● Start with the doctype <!doctype html>.
● Contain a top-level <html ⚡> tag (<html amp> is accepted as well).
● Contain <head> and <body> tags.
● Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to
the regular HTML version of the AMP HTML document or to itself if no such HTML
version exists.
● Contain a <meta charset="utf-8"> tag as the first child of their head tag.
● Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag
inside their head tag. It’s also recommended to include initial-scale=1.
● Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last
element in their head (this includes and loads the AMP JS library).

Recommended for you

Amp Overview #YGLF 2016
Amp Overview #YGLF 2016Amp Overview #YGLF 2016
Amp Overview #YGLF 2016

An overview of Accelerated Mobile Pages Project. See how you can leverage this important open source project today in production and improve your sites' performance and the happiness of your users.

mobile webweb developmentamp
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

Accelerated Mobile Pages (AMP) is a framework for building web pages that are optimized for mobile devices. It addresses issues like slow load times and poor user experiences on mobile by simplifying pages and parallelizing resource loading. AMP pages use HTML, CSS and JavaScript to load quickly. They are cached globally through Google's AMP Cache for fast delivery. Publishers can easily implement AMP pages and monetize them while embracing an open web.

amp mobile
Why AMP for WordPress?
Why AMP for WordPress? Why AMP for WordPress?
Why AMP for WordPress?

What is AMP and why should you care about it? This presentation will give an overview of the AMP specifications and what are its benefits. This will include case study examples. Next, I’ll discuss the challenges of implementing AMP, AMP and Gutenberg, and AMP themes/plugins.

wordpressampweb design
Easy to implement
Simple AMP webpage
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal
both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:non
e}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
Mobile Friendly
“Just like all web pages, Accelerated Mobile Pages will load in any modern
browser or app webview. AMP files take advantage of various technical and
architectural approaches that prioritize speed to provide a faster experience
for users.”
Not just mobile friendly but browser friendly.
✔
Embrace the open web
“The initial companies involved in this early preview of the project want to
make the mobile web work better for all – not just for one platform, one set
of technologies, or one set of publishers.”
Unlike other mobile friendly solutions, AMP is open
source and does not require you to be locked into a
publishing platform (Facebook Instant Articles) or be an
approved publisher (Apple News Format).
Embrace the open web
“A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the
mobile web while embracing a user-centric approach. With that context, the objective is to
provide support for a comprehensive range of ad formats, ad networks and technologies in
Accelerated Mobile Pages. ”
Will publishers be able to sell their own ad inventory?
Yes, as with their existing websites, publishers control their ad inventory and how they sell it.

Recommended for you

Web vitals are vitals - Aymen Loukil
Web vitals are vitals  - Aymen LoukilWeb vitals are vitals  - Aymen Loukil
Web vitals are vitals - Aymen Loukil

The document discusses Google's Core Web Vitals metrics for measuring website performance. It covers the three metrics - Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. For each metric, it explains what the metric measures, how to measure it using lab and field tools, and provides optimizations to improve the metric such as reducing page size, prioritizing critical resources, and specifying element sizes. It also addresses frequently asked questions about the metrics and their impact on SEO and user experience. The overall message is that optimizing the Core Web Vitals will improve users' experience of a website which is important for both users and SEO.

web vitalswebperformanceux
Choosing WordPress Plugins (WordCamp Raleigh 2016)
Choosing WordPress Plugins (WordCamp Raleigh 2016)Choosing WordPress Plugins (WordCamp Raleigh 2016)
Choosing WordPress Plugins (WordCamp Raleigh 2016)

Practical tips on choosing WordPress plugins: compatibility, updates, support, installs, authorship, and review

wordpressplugins
SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018

Guys. Don't be scared. Javascript can be wonderful. Angular is a powerful framework. The devil is in the execution.

angularjavascriptseo
Select publisher and platform partners on AMP initiative
● Why speed is important?
● What are the problems AMP
addresses?
● What is in AMP?
What is AMP?
HTML5
(AMP HTML)
JavaScript
(AMP JS)
CSS3
(Custom styling)
Global Proxy
Cache
(AMP Cache)
AMP JS
The library managing:
➔ Resource loading
➔ Core web components
➔ Performance
optimizations
https://github.com/ampproject/amphtml
<script async src="https://cdn.ampproject.org/v0.js"></script>

Recommended for you

Engineer - Mastering the Art of Software
Engineer - Mastering the Art of SoftwareEngineer - Mastering the Art of Software
Engineer - Mastering the Art of Software

With the evolution of software, starts an evolution of the software developer and how things are approached. A different and more responsible mindset is now required and with that comes the use of the Engineering Cycle that will provide not only the basic skill set but also the core base for a Software Engineer to handle any type of project.

sunphp17mindsetcycle
Dip Your Toes in the Sea of Security
Dip Your Toes in the Sea of SecurityDip Your Toes in the Sea of Security
Dip Your Toes in the Sea of Security

Security is an enormous topic, and it’s really, really complicated. If you’re not careful, you’ll find yourself vulnerable to any number of attacks which you definitely don’t want to be on the receiving end of. This talk will give you just a taster of the vast array of things there is to know about security in modern web applications, such as writing secure PHP web applications and securing a Linux server. Whether you are writing anything beyond a basic brochure website, or even developing a complicated business web application, this talk will give you insights to some of the things you need to be aware of.

applicationdevelopmentsecurity
SunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQLSunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQL

The new JSON fields are some of the most talking about new features in MySQL 5.7. But they are by no means the only awesome things this version has to offer. MySQL 5.7 is a year old, so this talk won't be an introduction to this version. We will be digging into 5.7 to see how to make the most of the tools available in it. Want to tackle important practical problem solving for your data, make your query performance analysis more efficient or look at how virtual columns can help you index data? This talk is for you!

mysql 5.7sunshinephpdatabase
Google AMP
Cache
➔ Cache of valid AMP
documents available for
anyone to use
➔ HTTP/2 with same
origin for all resources
➔ Google products all
serve via the AMP
cache
➔ API available to query
AMP documents
Google AMP
Cache
➔ Cache of validated
AMP documents
available for anyone to
use
➔ HTTP/2 with same
origin for all resources
➔ Google products all
serve via the AMP
cache
➔ API available to query
AMP documents
Request
POST https://acceleratedmobilepageurl.googleapis.com/v1/ampUrls:batchGet
{
"lookupStrategy": "IN_INDEX_DOC",
"urls": [
"http://www.bbc.co.uk/news/science-environment-37547103"
]
}
Response
200
- Show headers -
{
"ampUrls": [
{
"originalUrl": "http://www.bbc.co.uk/news/science-environment-37547103",
"ampUrl": "http://www.bbc.co.uk/news/amp/37547103",
"cdnAmpUrl": "https://cdn.ampproject.org/c/www.bbc.co.uk/news/amp/37547103"
}
]
}
AMP Validation Rules Enforced
● All script tags have async attributes.
● Only inline CSS
● Only 50KB of CSS
● Only AMP’s own JavaScript (support for variety of
extensions/custom-elements)
● 3rd party JS is only allowed in iframes.
● Resources must have static-responsive size declared in markup.
● Resource resizing is controlled by AMP Runtime.
Optimizations include:
● Only the first viewport is prerendered
— because AMP knows where each
page element is positioned
● No 3rd party JavaScript is executed
at this stage
Prerendering by Platforms Can Make Loading Instant?

Recommended for you

Debugging Effectively - SunshinePHP 2017
Debugging Effectively - SunshinePHP 2017Debugging Effectively - SunshinePHP 2017
Debugging Effectively - SunshinePHP 2017

Software bugs are inevitable; some are especially difficult to track down, causing you to waste countless hours before throwing your hands up in defeat. It doesn't have to be this way! The mental fatigue and wasted time can be avoided by using strategies like identifying the most-appropriate tool, taking a logical & objective approach, challenging assumptions, listening to variables, isolating the code path, and reinforcing code with automated tests. Attendees will learn how to combine these techniques with the right mindset and attitude in order to debug their code quickly and effectively.

debuggingtestingphp
A World Without PHP
A World Without PHPA World Without PHP
A World Without PHP

Imagine a world in which your career, the careers of your friends and coworkers, and the businesses and industries built on PHP vanished overnight, or never existed at all. No Facebook. No Wordpress. Billions of dollars in online commerce, all gone. Flickr, Tumblr, MailChimp: poof! This talk presents a dystopian world in which we are stuck updating each other via SMS or (gasp!) MySpace, reading content on corporate portals, and buying everything from just a handful of online marketplaces.

php
Learn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshopLearn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshop

This document discusses test-driven development (TDD) and unit testing. It introduces common unit testing tools and techniques like assertions, data providers, test doubles, and code katas. It emphasizes that TDD encourages building applications in a modular way using loosely coupled units like Legos. The document also covers dependency injection and different types of test doubles like stubs and mocks. Overall, it provides guidance on best practices for writing unit tests and using TDD to design code in an iterative way.

testingphp
Linking pages with <link>
Add information about the AMP page to the non-AMP page and vice versa, in the form of
<link> tags in the <head>.
Add the following to the non-AMP page:
<link rel="amphtml"
href="https://www.example.com/url/to/amp/document.html">
And this to the AMP page:
<link rel="canonical"
href="https://www.example.com/url/to/full/document.html">
Make Your Page Discoverable
Amp your site: An intro to accelerated mobile pages
AMP Validator
AMP in action.

Recommended for you

Code Coverage for Total Security in Application Migrations
Code Coverage for Total Security in Application MigrationsCode Coverage for Total Security in Application Migrations
Code Coverage for Total Security in Application Migrations

So the time has come to take the leap and upgrade your application to a new major version of the underlying framework, or, perhaps, to an entirely different framework... how do you ensure that none of your functionality or usability is impacted by a potentially drastic rewrite of the underlying systems? How can you move forward with 100% confidence in your migrated codebase? Testing, testing and more testing. Using a combination of unit, functional and acceptance tests can give you the certainty you need. In this talk, we will go over key strategies for ensuring that you begin with full code coverage and move forward with confidence.

codeceptioncode coverage
My app is secure... I think
My app is secure... I thinkMy app is secure... I think
My app is secure... I think

With more and more sites falling victim to data theft, you've probably read the list of things (not) to do to write secure code. But what else should you do to make sure your code and the rest of your web stack is secure ? In this tutorial we'll go through the basic and more advanced techniques of securing your web and database servers, securing your backend PHP code and your frontend javascript code. We'll also look at how you can build code that detects and blocks intrusion attempts and a bunch of other tips and tricks to make sure your customer data stays secure.

phpleuvenrecoverysystem security
JWT - To authentication and beyond!
JWT - To authentication and beyond!JWT - To authentication and beyond!
JWT - To authentication and beyond!

We use tokens to identify resources and try to ensure data security in insecure environments, however the management of these tokens can get quite complex. When we have distributed environments things are harder to deal with. Come to the magical world of JSON Web Tokens and make your life simpler!

jwtjwsjose
● EXPLORE
ampproject.org/docs to learn more and read documentation
github.com/ampproject/amphtml to connect with the development team
ampbyexample.com Look at working AMP examples
● DEVELOP & TEST
Start developing AMP pages and validate them
● LAUNCH
Point to AMP pages from canonical articles to make them discoverable and
eligible to appear in content platforms
Join the AMP initiative
Questions
Questions ?
Thank You
Robert McFrazier
Email: robert@mcfrazier.com
Blog: http://blog.robert.mcfrazier.com
Twitter: @rmcfrazier
Slides: https://joind.in/talk/97afc

More Related Content

What's hot

AMP and PWA
AMP and PWAAMP and PWA
AMP and PWA
Eun Cho
 
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
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile Pages
Jeremy Green
 
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
 
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
 
google amp pages
google amp pagesgoogle amp 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)?
MatchCraft
 
Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16
Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16
Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16
Sean Malseed
 
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
 
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
 
AMP up Your WordPress Site
AMP up Your WordPress SiteAMP up Your WordPress Site
AMP up Your WordPress Site
Prem Tiwari
 
Performance-driven websites with AMP - NeosCon May 2019
Performance-driven websites with AMP - NeosCon May 2019Performance-driven websites with AMP - NeosCon May 2019
Performance-driven websites with AMP - NeosCon May 2019
Benni Mack
 
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016Amp Overview #YGLF 2016
Amp Overview #YGLF 2016
Ido Green
 
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
 
Why AMP for WordPress?
Why AMP for WordPress? Why AMP for WordPress?
Why AMP for WordPress?
TAC Marketing Group
 
Web vitals are vitals - Aymen Loukil
Web vitals are vitals  - Aymen LoukilWeb vitals are vitals  - Aymen Loukil
Web vitals are vitals - Aymen Loukil
Aymen Loukil
 
Choosing WordPress Plugins (WordCamp Raleigh 2016)
Choosing WordPress Plugins (WordCamp Raleigh 2016)Choosing WordPress Plugins (WordCamp Raleigh 2016)
Choosing WordPress Plugins (WordCamp Raleigh 2016)
andisites
 
SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018
Jamie Indigo
 

What's hot (18)

AMP and PWA
AMP and PWAAMP and PWA
AMP and PWA
 
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
 
Accelerated Mobile Pages
Accelerated Mobile PagesAccelerated Mobile Pages
Accelerated Mobile Pages
 
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...
 
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
 
google amp pages
google amp pagesgoogle amp pages
google amp 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)?
 
Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16
Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16
Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16
 
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
 
Accelerated Mobile Pages - WordCamp Kansas City
Accelerated Mobile Pages - WordCamp Kansas CityAccelerated Mobile Pages - WordCamp Kansas City
Accelerated Mobile Pages - WordCamp Kansas City
 
AMP up Your WordPress Site
AMP up Your WordPress SiteAMP up Your WordPress Site
AMP up Your WordPress Site
 
Performance-driven websites with AMP - NeosCon May 2019
Performance-driven websites with AMP - NeosCon May 2019Performance-driven websites with AMP - NeosCon May 2019
Performance-driven websites with AMP - NeosCon May 2019
 
Amp Overview #YGLF 2016
Amp Overview #YGLF 2016Amp Overview #YGLF 2016
Amp Overview #YGLF 2016
 
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
 
Why AMP for WordPress?
Why AMP for WordPress? Why AMP for WordPress?
Why AMP for WordPress?
 
Web vitals are vitals - Aymen Loukil
Web vitals are vitals  - Aymen LoukilWeb vitals are vitals  - Aymen Loukil
Web vitals are vitals - Aymen Loukil
 
Choosing WordPress Plugins (WordCamp Raleigh 2016)
Choosing WordPress Plugins (WordCamp Raleigh 2016)Choosing WordPress Plugins (WordCamp Raleigh 2016)
Choosing WordPress Plugins (WordCamp Raleigh 2016)
 
SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018SEO for Angular - BrightonSEO 2018
SEO for Angular - BrightonSEO 2018
 

Viewers also liked

Engineer - Mastering the Art of Software
Engineer - Mastering the Art of SoftwareEngineer - Mastering the Art of Software
Engineer - Mastering the Art of Software
Cristiano Diniz da Silva
 
Dip Your Toes in the Sea of Security
Dip Your Toes in the Sea of SecurityDip Your Toes in the Sea of Security
Dip Your Toes in the Sea of Security
James Titcumb
 
SunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQLSunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQL
Gabriela Ferrara
 
Debugging Effectively - SunshinePHP 2017
Debugging Effectively - SunshinePHP 2017Debugging Effectively - SunshinePHP 2017
Debugging Effectively - SunshinePHP 2017
Colin O'Dell
 
A World Without PHP
A World Without PHPA World Without PHP
A World Without PHP
Ben Marks
 
Learn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshopLearn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshop
chartjes
 
Code Coverage for Total Security in Application Migrations
Code Coverage for Total Security in Application MigrationsCode Coverage for Total Security in Application Migrations
Code Coverage for Total Security in Application Migrations
Dana Luther
 
My app is secure... I think
My app is secure... I thinkMy app is secure... I think
My app is secure... I think
Wim Godden
 
JWT - To authentication and beyond!
JWT - To authentication and beyond!JWT - To authentication and beyond!
JWT - To authentication and beyond!
Luís Cobucci
 
Taming the resource tiger
Taming the resource tigerTaming the resource tiger
Taming the resource tiger
Elizabeth Smith
 
From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017
Chris Tankersley
 
PHP UK 2017 - Don't Lose Sleep - Secure Your REST
PHP UK 2017 - Don't Lose Sleep - Secure Your RESTPHP UK 2017 - Don't Lose Sleep - Secure Your REST
PHP UK 2017 - Don't Lose Sleep - Secure Your REST
Adam Englander
 
Docker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHPDocker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHP
Chris Tankersley
 
WordPress for the modern PHP developer
WordPress for the modern PHP developerWordPress for the modern PHP developer
WordPress for the modern PHP developer
Chris Sherry
 
Mobile Web Performance Optimization 1-7-14
Mobile Web Performance Optimization 1-7-14Mobile Web Performance Optimization 1-7-14
Mobile Web Performance Optimization 1-7-14
XBOSoft
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
Sven Wolfermann
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Doris Chen
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
Sven Wolfermann
 
AMP | Accelerated Mobile Pages sur Google
AMP | Accelerated Mobile Pages sur GoogleAMP | Accelerated Mobile Pages sur Google
AMP | Accelerated Mobile Pages sur Google
Olivier Perbet
 
WTF is AMP?
WTF is AMP?WTF is AMP?
WTF is AMP?
Carl V. Lewis
 

Viewers also liked (20)

Engineer - Mastering the Art of Software
Engineer - Mastering the Art of SoftwareEngineer - Mastering the Art of Software
Engineer - Mastering the Art of Software
 
Dip Your Toes in the Sea of Security
Dip Your Toes in the Sea of SecurityDip Your Toes in the Sea of Security
Dip Your Toes in the Sea of Security
 
SunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQLSunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQL
 
Debugging Effectively - SunshinePHP 2017
Debugging Effectively - SunshinePHP 2017Debugging Effectively - SunshinePHP 2017
Debugging Effectively - SunshinePHP 2017
 
A World Without PHP
A World Without PHPA World Without PHP
A World Without PHP
 
Learn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshopLearn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshop
 
Code Coverage for Total Security in Application Migrations
Code Coverage for Total Security in Application MigrationsCode Coverage for Total Security in Application Migrations
Code Coverage for Total Security in Application Migrations
 
My app is secure... I think
My app is secure... I thinkMy app is secure... I think
My app is secure... I think
 
JWT - To authentication and beyond!
JWT - To authentication and beyond!JWT - To authentication and beyond!
JWT - To authentication and beyond!
 
Taming the resource tiger
Taming the resource tigerTaming the resource tiger
Taming the resource tiger
 
From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017
 
PHP UK 2017 - Don't Lose Sleep - Secure Your REST
PHP UK 2017 - Don't Lose Sleep - Secure Your RESTPHP UK 2017 - Don't Lose Sleep - Secure Your REST
PHP UK 2017 - Don't Lose Sleep - Secure Your REST
 
Docker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHPDocker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHP
 
WordPress for the modern PHP developer
WordPress for the modern PHP developerWordPress for the modern PHP developer
WordPress for the modern PHP developer
 
Mobile Web Performance Optimization 1-7-14
Mobile Web Performance Optimization 1-7-14Mobile Web Performance Optimization 1-7-14
Mobile Web Performance Optimization 1-7-14
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
AMP | Accelerated Mobile Pages sur Google
AMP | Accelerated Mobile Pages sur GoogleAMP | Accelerated Mobile Pages sur Google
AMP | Accelerated Mobile Pages sur Google
 
WTF is AMP?
WTF is AMP?WTF is AMP?
WTF is AMP?
 

Similar to Amp your site: An intro to accelerated mobile pages

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
 
The Expanding Nature of SEO (MarTech 2016)
The Expanding Nature of SEO (MarTech 2016)The Expanding Nature of SEO (MarTech 2016)
The Expanding Nature of SEO (MarTech 2016)
Micah Fisher-Kirshner
 
Get AMP’ed for AMP!
Get AMP’ed for AMP!Get AMP’ed for AMP!
Get AMP’ed for AMP!
Greenlane
 
Building for, perceiving and measuring performance for mobile web
Building for, perceiving and measuring performance for mobile webBuilding for, perceiving and measuring performance for mobile web
Building for, perceiving and measuring performance for mobile web
Robin Glen
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
WordPress
 
AMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress WayAMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress Way
Alberto Medina
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
guestb1b95b
 
2017 Silicon Valley Code Camp: Instant Mobile Web
2017 Silicon Valley Code Camp: Instant Mobile Web2017 Silicon Valley Code Camp: Instant Mobile Web
2017 Silicon Valley Code Camp: Instant Mobile Web
Lisa Huang
 
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScaleGDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
Patrick Chanezon
 
AMP K.S.
AMP K.S.AMP K.S.
AMP K.S.
Jacob Lial
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
areyouok
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
topgeek
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
Parham
 
Oscon 20080724
Oscon 20080724Oscon 20080724
Oscon 20080724
linkedin_resptest2
 
Offline of web applications
Offline of web applicationsOffline of web applications
Offline of web applications
FDConf
 
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014
Jan Jongboom
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Steve Souders
 
Desenvolvimento Mobile Híbrido
Desenvolvimento Mobile HíbridoDesenvolvimento Mobile Híbrido
Desenvolvimento Mobile Híbrido
Juliano Martins
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
Chris Love
 

Similar to Amp your site: An intro to accelerated mobile pages (20)

Accelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in MagentoAccelerated Mobile Pages (AMP) in Magento
Accelerated Mobile Pages (AMP) in Magento
 
The Expanding Nature of SEO (MarTech 2016)
The Expanding Nature of SEO (MarTech 2016)The Expanding Nature of SEO (MarTech 2016)
The Expanding Nature of SEO (MarTech 2016)
 
Get AMP’ed for AMP!
Get AMP’ed for AMP!Get AMP’ed for AMP!
Get AMP’ed for AMP!
 
Building for, perceiving and measuring performance for mobile web
Building for, perceiving and measuring performance for mobile webBuilding for, perceiving and measuring performance for mobile web
Building for, perceiving and measuring performance for mobile web
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
AMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress WayAMP in WordPress, the WordPress Way
AMP in WordPress, the WordPress Way
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
2017 Silicon Valley Code Camp: Instant Mobile Web
2017 Silicon Valley Code Camp: Instant Mobile Web2017 Silicon Valley Code Camp: Instant Mobile Web
2017 Silicon Valley Code Camp: Instant Mobile Web
 
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScaleGDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
 
AMP K.S.
AMP K.S.AMP K.S.
AMP K.S.
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
 
Oscon 20080724
Oscon 20080724Oscon 20080724
Oscon 20080724
 
Offline of web applications
Offline of web applicationsOffline of web applications
Offline of web applications
 
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
 
Desenvolvimento Mobile Híbrido
Desenvolvimento Mobile HíbridoDesenvolvimento Mobile Híbrido
Desenvolvimento Mobile Híbrido
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
 

Recently uploaded

Founders Of Digital World Social Media..
Founders Of Digital World Social Media..Founders Of Digital World Social Media..
Founders Of Digital World Social Media..
jom pom
 
Future Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on WebsitesFuture Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on Websites
Serva AppLabs
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99
 
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
taqyea
 
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
taqyea
 
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
taqyea
 
About Alibaba company and brief general information regarding how to trade on...
About Alibaba company and brief general information regarding how to trade on...About Alibaba company and brief general information regarding how to trade on...
About Alibaba company and brief general information regarding how to trade on...
Erkinjon Erkinov
 
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
taqyea
 
Cyber Security Course & Guide. X.GI. pdf
Cyber Security Course & Guide. X.GI. pdfCyber Security Course & Guide. X.GI. pdf
Cyber Security Course & Guide. X.GI. pdf
RohitRoshanBengROHIT
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
taqyea
 
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptxSlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
NandakumarP24
 
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
taqyea
 
Massey University degree offer diploma Transcript
Massey University degree offer diploma TranscriptMassey University degree offer diploma Transcript
Massey University degree offer diploma Transcript
ubufe
 
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
ffg01100
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur
 
Carrington degree offer diploma Transcript
Carrington degree offer diploma TranscriptCarrington degree offer diploma Transcript
Carrington degree offer diploma Transcript
ubufe
 
10th International Conference on Networks, Mobile Communications and Telema...
10th International Conference on Networks, Mobile Communications and   Telema...10th International Conference on Networks, Mobile Communications and   Telema...
10th International Conference on Networks, Mobile Communications and Telema...
ijp2p
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
byubyu7
 
一比一原版(oregon毕业证书)俄勒冈大学毕业证如何办理
一比一原版(oregon毕业证书)俄勒冈大学毕业证如何办理一比一原版(oregon毕业证书)俄勒冈大学毕业证如何办理
一比一原版(oregon毕业证书)俄勒冈大学毕业证如何办理
taqyea
 
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
taqyea
 

Recently uploaded (20)

Founders Of Digital World Social Media..
Founders Of Digital World Social Media..Founders Of Digital World Social Media..
Founders Of Digital World Social Media..
 
Future Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on WebsitesFuture Trends What's Next for UI UX Design on Websites
Future Trends What's Next for UI UX Design on Websites
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
 
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
一比一原版(uom毕业证)曼彻斯特大学毕业证如何办理
 
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
 
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
一比一原版(hull毕业证书)英国赫尔大学毕业证如何办理
 
About Alibaba company and brief general information regarding how to trade on...
About Alibaba company and brief general information regarding how to trade on...About Alibaba company and brief general information regarding how to trade on...
About Alibaba company and brief general information regarding how to trade on...
 
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
 
Cyber Security Course & Guide. X.GI. pdf
Cyber Security Course & Guide. X.GI. pdfCyber Security Course & Guide. X.GI. pdf
Cyber Security Course & Guide. X.GI. pdf
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptxSlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
 
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
一比一原版(爱大毕业证书)英国爱丁堡大学毕业证如何办理
 
Massey University degree offer diploma Transcript
Massey University degree offer diploma TranscriptMassey University degree offer diploma Transcript
Massey University degree offer diploma Transcript
 
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
202254.com免费观看《长相思第二季》免费观看高清,长相思第二季线上看,《长相思第二季》最新电视剧在线观看,杨紫最新电视剧
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
 
Carrington degree offer diploma Transcript
Carrington degree offer diploma TranscriptCarrington degree offer diploma Transcript
Carrington degree offer diploma Transcript
 
10th International Conference on Networks, Mobile Communications and Telema...
10th International Conference on Networks, Mobile Communications and   Telema...10th International Conference on Networks, Mobile Communications and   Telema...
10th International Conference on Networks, Mobile Communications and Telema...
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
 
一比一原版(oregon毕业证书)俄勒冈大学毕业证如何办理
一比一原版(oregon毕业证书)俄勒冈大学毕业证如何办理一比一原版(oregon毕业证书)俄勒冈大学毕业证如何办理
一比一原版(oregon毕业证书)俄勒冈大学毕业证如何办理
 
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
 

Amp your site: An intro to accelerated mobile pages

  • 1. AMP your site: An Intro to Accelerated Mobile Pages Presented By Robert McFrazier
  • 3. ● Why speed is important? ● What are the problems AMP addresses? ● What is in AMP?
  • 4. Will abandon a site that takes >3 seconds to load 40% Expect a page to load in <2 seconds 47% Say fast load time speed is important to site loyalty 52% Slow and steady doesn’t win the race What are user expectations for mobile sites?
  • 6. How fast is fast enough.
  • 7. Mobile pages should render in < 1s 3Gnetwork connection 600ms to 1s is consumed by mandatory 3G network overhead which can’t be avoided (average 750 Kbps to 1 Mbps) Source: "The Search Agency, Optimization Strategies for the Mobile Web"
  • 8. Mobile pages that load 1s faster see up to +27% CvR 180,000 160,000 140,000 120,000 100,000 80,000 60,000 40,000 20,000 0 1.7 1.6 1.4 1.2 1.0 0.8 0.6 0.4 0.2 0.0 1.2 1.5 1.8 2.1 2.4 2.7 3.0 3.3 3.6 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9 Load time (seconds) Conversionrate(%) Sessions Conversion rate (%) Bounce rate (%) 1.9% conversion rate 1.5% conversion rate Note: Some of pages with load times faster than 2.4 seconds experienced lower conversion rates. Those numbers may be influenced by faster response/page load times for 404s and other errors. Source: "Mobile performance conversion rate" 12.8% bounce rate 20% bounce rate 58 51 45 39 32 26 19 13 6 0 Bouncerate(%)
  • 9. < 1sec Median load Time for AMP on Search 19sec Avg Load Time for Non-AMP AMP is fast
  • 10. ● Why speed is important? ● What are the problems AMP addresses? ● What is in AMP?
  • 11. Accelerated Mobile Pages Fast content + distribution on the web
  • 12. 2 Poor consumer perceptions of mobile web experiences 1 Evolving ecosystems of closed distribution models 3 Monetization at the content level is hard 4 Technology updates are outpacing development cycles 5 Ad Blockers are a challenge to the industry We are faced with new challenges With a common objective: an open ecosystem of knowledge
  • 13. So we need something... Fast Easy to implement Mobile Friendly Embrace the open web Gives strong Incentives ✔⚡
  • 14. How to make fast web pages 1. Simplify the pages a. Less Javascript 2. Optimize the bandwidth a. Get the best content for your device (image resolution etc.) b. Parallelize the loading (asynchronous load) 3. Cache the pages a. Use Content Delivery Networks to store a local copy of the pages ⚡
  • 15. How to make fast web pages Use HTTP/2 whenever possible. You get that for free if you use the Google AMP Cache. ⚡
  • 16. Easy to implement What is required ● Start with the doctype <!doctype html>. ● Contain a top-level <html ⚡> tag (<html amp> is accepted as well). ● Contain <head> and <body> tags. ● Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. ● Contain a <meta charset="utf-8"> tag as the first child of their head tag. ● Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It’s also recommended to include initial-scale=1. ● Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last element in their head (this includes and loads the AMP JS library).
  • 17. Easy to implement Simple AMP webpage <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:non e}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Welcome to the mobile web</h1> </body> </html>
  • 18. Mobile Friendly “Just like all web pages, Accelerated Mobile Pages will load in any modern browser or app webview. AMP files take advantage of various technical and architectural approaches that prioritize speed to provide a faster experience for users.” Not just mobile friendly but browser friendly. ✔
  • 19. Embrace the open web “The initial companies involved in this early preview of the project want to make the mobile web work better for all – not just for one platform, one set of technologies, or one set of publishers.” Unlike other mobile friendly solutions, AMP is open source and does not require you to be locked into a publishing platform (Facebook Instant Articles) or be an approved publisher (Apple News Format).
  • 20. Embrace the open web “A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the mobile web while embracing a user-centric approach. With that context, the objective is to provide support for a comprehensive range of ad formats, ad networks and technologies in Accelerated Mobile Pages. ” Will publishers be able to sell their own ad inventory? Yes, as with their existing websites, publishers control their ad inventory and how they sell it.
  • 21. Select publisher and platform partners on AMP initiative
  • 22. ● Why speed is important? ● What are the problems AMP addresses? ● What is in AMP?
  • 23. What is AMP? HTML5 (AMP HTML) JavaScript (AMP JS) CSS3 (Custom styling) Global Proxy Cache (AMP Cache)
  • 24. AMP JS The library managing: ➔ Resource loading ➔ Core web components ➔ Performance optimizations https://github.com/ampproject/amphtml <script async src="https://cdn.ampproject.org/v0.js"></script>
  • 25. Google AMP Cache ➔ Cache of valid AMP documents available for anyone to use ➔ HTTP/2 with same origin for all resources ➔ Google products all serve via the AMP cache ➔ API available to query AMP documents
  • 26. Google AMP Cache ➔ Cache of validated AMP documents available for anyone to use ➔ HTTP/2 with same origin for all resources ➔ Google products all serve via the AMP cache ➔ API available to query AMP documents Request POST https://acceleratedmobilepageurl.googleapis.com/v1/ampUrls:batchGet { "lookupStrategy": "IN_INDEX_DOC", "urls": [ "http://www.bbc.co.uk/news/science-environment-37547103" ] } Response 200 - Show headers - { "ampUrls": [ { "originalUrl": "http://www.bbc.co.uk/news/science-environment-37547103", "ampUrl": "http://www.bbc.co.uk/news/amp/37547103", "cdnAmpUrl": "https://cdn.ampproject.org/c/www.bbc.co.uk/news/amp/37547103" } ] }
  • 27. AMP Validation Rules Enforced ● All script tags have async attributes. ● Only inline CSS ● Only 50KB of CSS ● Only AMP’s own JavaScript (support for variety of extensions/custom-elements) ● 3rd party JS is only allowed in iframes. ● Resources must have static-responsive size declared in markup. ● Resource resizing is controlled by AMP Runtime.
  • 28. Optimizations include: ● Only the first viewport is prerendered — because AMP knows where each page element is positioned ● No 3rd party JavaScript is executed at this stage Prerendering by Platforms Can Make Loading Instant?
  • 29. Linking pages with <link> Add information about the AMP page to the non-AMP page and vice versa, in the form of <link> tags in the <head>. Add the following to the non-AMP page: <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html"> And this to the AMP page: <link rel="canonical" href="https://www.example.com/url/to/full/document.html"> Make Your Page Discoverable
  • 33. ● EXPLORE ampproject.org/docs to learn more and read documentation github.com/ampproject/amphtml to connect with the development team ampbyexample.com Look at working AMP examples ● DEVELOP & TEST Start developing AMP pages and validate them ● LAUNCH Point to AMP pages from canonical articles to make them discoverable and eligible to appear in content platforms Join the AMP initiative
  • 35. Thank You Robert McFrazier Email: robert@mcfrazier.com Blog: http://blog.robert.mcfrazier.com Twitter: @rmcfrazier Slides: https://joind.in/talk/97afc