SlideShare a Scribd company logo
Accelerated Mobile Pages (AMP) in Magento:
capabilities
Speaker: Olga Burtyka
Today we will talk about:
❖ What is Google AMP?
❖ Why your project needs AMP?
❖ SEO benefits and problems of AMP
❖ How AMP speeds up page loading?
❖ Must-have code on the page
❖ Disallowed code on the page
❖ How to add custom AMP layout and templates to
Magento 2
2
Today we will talk about:
❖ AMP most used components in Magento
❖ How to add Google Analytics and
Google Tag Manager to AMP
❖ Ways to validate AMP pages
❖ How to update AMP Cache?
❖ Compare speed AMP pages and not-AMP on product page
❖ Progressive Web Application and AMP
❖ Useful resources to start applying AMP in your project
3
What is Google AMP?
“AMP - is a special project from
Google, executed in conjunction
with dozens of world-renowned IT
companies, web developers and
website owners. The goal of the
project is to increase the speed of
downloading sites on mobile
devices due to the introduction of
new technologies.”
4
Why your project needs AMP?
5
Using mobile on the first place in our live. By 2020, 80% of all traffic will come from smartphones
Why your project needs AMP?
○ Essential for good mobile SEO.
○ Makes Pages load faster.
○ Most Recommended by Google, Loved by
Google.
○ Designed to be heavily cached.
○ Progressive Web Apps and AMP pages work
great together.
6
SEO Benefits of AMP
AMP is fast and gives high conversion rate
7
SEO Benefits of AMP
❏ The increase of website’s ranking
(Google officially says that AMP is just one of many signals for rankings)
❏ Amp offers mobile friendliness
(https://search.google.com/test/mobile-friendly)
❏ Google switches to mobile-first indexing
❏ AMP Analytics supports Google Analytics, AdWords Conversion Tracking
❏ Google Tag Manager supports AMP containers
❏ Your HTML is flawless and 100% free of code errors
❏ Improved CTR(click-through rate)
8
SEO problem of AMP
9
SEO problem of AMP
“ Google announced that it had almost
solved the problem with displaying URLs
in AMP search results. Currently, they
show URLs to Google, not publishers, which
are taken from AMP Cache. However, later
this year the situation will change, and
AMP Cache will begin to provide
publishers' URLs. ”
post from 9.01.2018
10
How AMP speeds up page loading?
1) AMP HTML is HTML with some restrictions for reliable performance.
AMP HTML is basically HTML extended with custom AMP properties.
The simplest AMP HTML file looks like this:
11
How AMP speeds up page loading?
2) AMP JavaScript
● AMP JavaScript library guarantees fast rendering of AMP
pages as it executes a larger part of AMP’s markups.
● AMP pages can’t include any author-written JavaScript.
● Biggest optimizations is the fact that it makes everything that
comes from external resources asynchronous, so nothing in the
page can block anything from rendering.
12
How AMP speeds up page loading?
3) AMP CDN (AMP cache)
● CDN – Content Delivery Network plays a crucial role in running
seamlessly accelerated mobile pages as it expedites the delivery of
content to a mobile device.
● This is considered as one of the critical element of AMP
technology.
● It acts by storing the elements from the similar AMP pages available on
the server to ensure faster delivery.
13
How to report the availability of the AMP version of the page?
★ On the usual page, add the following code:
<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">
14
Must-have code on the AM Page
➔ Begin with the document type <! Doctype html>.
➔ Contain the <html ⚡> top level tag (also use <html amp>).
➔ Contain the <head> and <body> tags (optional in HTML markup).
➔ Contain the <link rel = "canonical" href = "SOME_URL"> tag inside the
header, which points to the usual HTML version of the HTML AMP
document or to the source document itself, if that version does not exist.
➔ Contain the <meta charset = "utf-8"> tag as the first child of the header tag.
➔ Keep the tag <meta name = "viewport" content = "width = device-width,
minimum-scale = 1"> in the title tag. It is also recommended to include the
value initial-scale = 1.
15
Must-have code on the page
➔ Contain the <script async src = "https://cdn.ampproject.org/v0.js"> </ script>
tag that points and loads the AMP JS library as the last header element.
➔ Contain the following code in the <head> tag:
<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: none}
</ style> </ noscript>
16
Disallowed code on the page
➢ include custom css (<link rel=”stylesheet”> ) or js files;
➢ the size of the built-in style sheet < 50 kilobytes;
➢ inline style attributes (All styles must be defined in the <head> of the
page, within a <style amp-custom> tag.);
➢ disallow use ‘!important’;
➢ -amp- class and i-amp- tag names (Class names, in author stylesheets,
may not start with the string -amp-. These are reserved for internal use by
the AMP runtime. It follows, that the user's stylesheet may not reference
CSS selectors for -amp- classes and i-amp tags.)
➢ <script> tag can be only type is application/ld+json or type is
application/json
➢ <img>,<video>, <audio>,<iframe> replaced with <amp-img>, <amp-video>,
<amp-audio> and <amp-iframe>
17
Disallowed code on the page
➢ <a> the href attribute value must not begin with javascript:. If set, the
target attribute value must be _blank
➢ Attribute names starting with on (such as onclick or onmouseover) are
disallowed in AMP HTML.
➢ <form> support only https://
➢ The special chars like '&ldquo; &rdquo;' - is disallowed.
18
How to add custom AMP layout and templates to Magento 2
open etc/frontend/events.xml and add:
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="layout_load_before">
<observer name=“amp_layout_load_before"
instance="MyModuleAmpObserverLayoutLoadBefore"/>
</event>
<event name="core_layout_render_element">
<observer name=“amp_core_layout_render_element"
instance="MyModuleAmpObserverCoreLayoutRenderElement"/>
</event>
</config>
19
How to add custom AMP layout and templates to Magento 2
20
How to add custom AMP layout and templates to Magento 2
<type name="MagentoFrameworkViewResultPage">
<plugin name="amp-layout-handles"
type="MyModuleAmpPluginHandles" sortOrder="10"/>
</type>
21
open etc/frontend/di.xml and add:
open MyModule/Amp/Plugin/Handles.php
public function afterAddPageLayoutHandles(Page $subject) {
if ($this->_dataHelper->isAmpRequest()) {
foreach ($subject->getHandles() as $handleName) {
$subject->addHandle('amp_' . $handleName);
}
}
return $subject;
}
How to add custom AMP layout and templates to Magento 2
22
23
How to add custom AMP layout and templates to Magento 2
<container name="amp.items.block" htmlTag="div" htmlClass="amp-product" after="-">
<referenceBlock name="catalog.product.related" remove="true"/>
<block class="MagentoCatalogBlockProductProductListRelated"
name="amp.product.related"
template="MyModule_Amp::catalog/product/list/items.phtml">
<arguments>
<argument name="type" xsi:type="string">related</argument>
</arguments>
</block>
<block class="MagentoCatalogBlockProductProductListUpsell"
name="amp.product.upsell"
template="MyModule_Amp::catalog/product/list/items.phtml">
<arguments>
<argument name="type" xsi:type="string">upsell</argument>
</arguments>
</block>
</container>
AMP most used components in Magento
1) amp-form component allows HTTP and XHR (XMLHttpRequest) form submissions.
24
<action method = "addJs">
<argument name = "src" xsi:type = "string">
https://cdn.ampproject.org/v0/amp-form-0.1.js
</argument>
<argument name = "type" xsi:type = "string">amp-form</argument>
</action>
2) amp-img replace usual <img> tag and provides a powerful replacement.
Is automatically imported via the AMP runtime.
<amp-img class = "logo" src = "<?php echo $category->getLogoSrc(); ?>"
width = "750" height = "250" alt = "Cool Image">
</amp-img>
AMP most used components in Magento
3) The amp-image-lightbox component allows the user to expand an
image to fill the viewport.
<script async custom-element="amp-image-lightbox"
src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js">
</script>
25
<amp-img on = "tap:lightbox1" role = "button" src = "/img/Table.jpg"
alt = "Cool Table" title = "Picture Table view in lightbox"
layout="responsive"
width="300" height="246">
</amp-img>
<amp-image-lightbox id = "lightbox1" layout = "nodisplay">
</amp-image-lightbox>
for example:
AMP most used components in Magento
4) The amp-carousel component allows displaying multiple similar
pieces of content along a horizontal axis.
<script async custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
26
<amp-carousel height="300" layout="fixed-height" type="carousel">
<amp-img src="/img/image1.jpg" width="400" height="300"
alt="another sample image">
</amp-img>
<amp-img src="/img/image2.jpg" width="400" height="300"
alt="and another sample image">
</amp-img>
</amp-carousel>
for example:
AMP most used components in Magento
5) Use amp-iframe for embedding content into AMP files via iframe. Useful
for displaying content otherwise not (yet) supported by AMP.
<script async custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
<amp-iframe title="Google mapCA"
frameborder="0" layout="responsive"
width = "600" height = "400"
sandbox = "allow-scripts
allow-same-origin allow-popups"
src = "https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6
j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848">
</amp-iframe>
27
AMP most used components in Magento
Responsive amp-iframe on live chat example:
28
<amp-iframe id="livechat-iframe" title="LiveChat"
src="https://chair.com/livechat.html"
height="450" layout="fixed-height"
sandbox="allow-scripts allow-same-origin">
<amp-img src="#" layout="fixed-height"
placeholder height="450" width="auto" >
</amp-img>
</amp-iframe>
function postSize(size) {
window.parent.postMessage({
sentinel : 'amp',
type : 'embed-size',
height : size
}, '*');
}
29
AMP most used components in Magento
6) amp-bind
Allows you to add custom interactivity to your pages beyond using
AMP's pre-built components.
It works by mutating elements in response to user actions via data
binding and JS-like expressions.
For example, amp-bind can be used to create an e-commerce product
page where the UI changes if the user's currently selected item is not
available, or user select many product options and need calculate price.
30
<script async custom-element = "amp-bind"
src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
AMP most used components in Magento: amp-bind example
<amp-state id="product" class="i-amphtml-element i-amphtml-layout-container"
aria-hidden="true" style="display: none;">
<script type="application/json">
{
"totalPrice" : 0,
"specialPrice" : 0.9386,
"203375": { "price" : 1580 }
"203376": { "price" : 1900 },
"203367": { "price" : 830 },
"203365": {" price" : 1740 },
"option-59866" : "203375",
"option-59867" : "203367",
"qty-59866" : 1,
"qty-59869" : 1,
}
</script>
</amp-state>
31
AMP most used components in Magento: amp-bind example
32
<input type = "radio" class = "bundle-option"
name = "bundle_option[<?php echo $_option->getId() ?>]"
value = "<?php echo $_selection->getSelectionId() ?>"
on="change:AMP.setState({
product: {
<?php echo "option" . $_option->getId(); ?>:
event.checked == true ? event.value : '',
selected: {
<?php echo "option" . $_option->getId(); ?>:
(product[event.value]['price']*product.qty<?php echo $_option->getId(); ?>)
}
}
})"
/>
<span class="product-price"
[text] = "'$'+((values(product.selected).reduce((x, y) => x + y))*product.sPrice).toFixed(2)">
</span>
How to add Google Analytics to AMP
Add the following line of code into the <head> of your document:
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
33
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "<?php echo $block->getGoogleAnalyticsId(); ?>"
},
"triggers": {
"trackPageviw": {
"on": "visible",
"request": "pageview”
}
}
}
</script>
</amp-analytics>
How to add Google Tag Manager to AMP
Google Tag Manager recently published support for AMP. This support comes
in the form of a new Container type in Google Tag Manager.
34
How to add Google Tag Manager to AMP
<amp-analytics config = https://www.googletagmanager.com/amp.json?id=<?php
echo $gtmID; ?>&gtm.url=SOURCE_URL" data-credentials = "include">
<?php echo $this->_getDataLayer(); ?>
</amp-analytics>
It example GTM variables on magento product page:
35
Ways to validate AMP pages
36
Ways to validate AMP pages. Not valid page:
37
Ways to validate AMP pages. Valid page:
38
Ways to validate AMP pages
https://validator.ampproject.org/
39
Ways to validate AMP pages
Google Search Console
40
Ways to validate AMP pages
Google Search Console run test pages with error
41
How to update AMP Cache? update-ping
42
What's the diff between update-cache and update-ping?
Number of update-ping requests you can make it limited but update-
cache allows for higher request rates because the requests are signed.
https://www.tvstands.com/mygel-10-queen-mattress.html?amp=1
https://www-tvstands-com.cdn.ampproject.org/c/s/www.tvstands.com/
mygel-10-queen-mattress.html?amp=1
https://cdn.ampproject.org/update-ping/c/s/www.tvstands.com/mygel-
10-queen-mattress.html?amp=1
OR
How to update AMP Cache? update-cache
You can flush any currently cached version of a document by issuing a signed
request to the AMP Cache. The update-cache request is called at this address:
https://www-tvxxxxxxx-com.cdn.ampproject.org/update-cache/c/s/
www.tvxxxxxxx.com/stanley-juniper-dell-media-chest-in-white-615-23-
11.html?amp=1&amp_action=flush&amp_ts=1512889699&amp_url_signature=p
wFqaT1BgqESIaKREyeIJP4QYY0ykl6W37YzGs9emEQjkpwY2juBuc7O9njF-
zFqSYTQezoP1RTZiorItOh0Qw14OPAJBqb49AumJAMPKgffcU_Z8d6FQWafOE5
WU8VFCk8JpW3s91AdYHbpNliLBERIYLMPpLW7taZywfnF8nd6Pjl7GLKYDSu8ml-
6DHeEy9E4MtlStVKbEguSswyWwZyK7opmkSq6xevdB_Am9YLfVGmd2SEypf4kPw
Q5on5c0kxbv5EIPADrSQz59T9MrhrDFIx4J4ibjYjKrH5wOjxFMVy5k1wN6CETYj9l
https://example-com.<cache.updateCacheApiDomainSuffix>/update-
cache/c/s/example.com/article?amp_action=flush&amp_ts=<ts_val>&amp_url
_signature=<sig_val>
43
Compare AMP pages and not-AMP on product page
44
Compare AMP pages and not-AMP on product page
45
Compare AMP pages and not-AMP on product page
46
Compare AMP pages and not-AMP on product page
47
Progressive Web AMP
What is Progressive Web Applications?
“You can perceive this as a site built using web technologies
(JS + HTML + CSS), but which interacts with the user as an
application. ”
48
The PWA applications are:
● Progressive
● Responsive
● Connectivity independent
● App-like
● Fresh
49
● Safe
● Discoverable
● Re-engageable
● Installable
● Linkable
Different PWAMP combinations:
50
You can combine PWA and AMP in several ways:
1) AMP as PWA ( When AMP restrictions are
uncritical for you. )
https://ampbyexample.com/
2) AMP goes to PWA ( When you need a
smooth transition from one to another.)
<amp-install-serviceworker>
3) AMP inside PWA ( When you want to use
existing AMP as data sources for PWA.)
Useful resources to start applying AMP in your project
- https://www.ampproject.org/docs/
- https://ampbyexample.com/
- https://ampbyexample.com/playground/
- https://github.com/ampproject
- https://validator.ampproject.org/
- https://codelabs.developers.google.com/codelabs/your-first-
pwapp-ru/index.html
51
Последн слайд

More Related Content

PPT
Setting up & Tracking AMP Pages in Google Analytics
Vivek Patel
 
PDF
Amp your site an intro to accelerated mobile pages
Robert McFrazier
 
PDF
Polytechnic 1.0 Granada
Israel Blancas
 
PPT
SiteMesh
guest9fefea
 
PDF
SEO for Angular - BrightonSEO 2018
Jamie Indigo
 
PPTX
Fast by Default
Abhay Kumar
 
PPT
Maven
ravireddy76
 
PDF
AMP with WordPress by Pradeep Sonawane @ Google AMP Roadshow Mumbai 2018
rtCamp
 
Setting up & Tracking AMP Pages in Google Analytics
Vivek Patel
 
Amp your site an intro to accelerated mobile pages
Robert McFrazier
 
Polytechnic 1.0 Granada
Israel Blancas
 
SiteMesh
guest9fefea
 
SEO for Angular - BrightonSEO 2018
Jamie Indigo
 
Fast by Default
Abhay Kumar
 
AMP with WordPress by Pradeep Sonawane @ Google AMP Roadshow Mumbai 2018
rtCamp
 

What's hot (18)

PPT
WordPress Standardized Loop API
Chris Jean
 
PPTX
Webinar: AngularJS and the WordPress REST API
WP Engine UK
 
PPTX
How to Issue and Activate Free SSL using Let's Encrypt
Mayeenul Islam
 
PDF
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
DOCX
Doctype html
Eddy_TKJ
 
PDF
Streamlining Your Applications with Web Frameworks
guestf7bc30
 
PPTX
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
Distilled
 
ODP
A Holistic View of Website Performance
Rene Churchill
 
PDF
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Devin Walker
 
ODP
Joomla Day UK 2009 Basic Templates
Chris Davenport
 
PPTX
SEO Basics & Beyond: Q1 2018 Edition
Pam Ann Marketing
 
PPS
Flash Templates- Joomla!Days NL 2009 #jd09nl
Joomla!Days Netherlands
 
PDF
Amp your site: An intro to accelerated mobile pages
Robert McFrazier
 
PDF
Website speed optimization guide for technically advanced webmasters
Aditya Singh
 
PPTX
Performace optimization (increase website speed)
clickramanm
 
PPT
Widget Summit 2008
Volkan Unsal
 
PPTX
WordPress SEO Site Optimization Strategies & Techniques
Jeff Kemp
 
PDF
2012 03 27_philly_jug_rewrite_static
Lincoln III
 
WordPress Standardized Loop API
Chris Jean
 
Webinar: AngularJS and the WordPress REST API
WP Engine UK
 
How to Issue and Activate Free SSL using Let's Encrypt
Mayeenul Islam
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
Doctype html
Eddy_TKJ
 
Streamlining Your Applications with Web Frameworks
guestf7bc30
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
Distilled
 
A Holistic View of Website Performance
Rene Churchill
 
Need for Speed: Website Edition – Website Optimization Tools and Techniques P...
Devin Walker
 
Joomla Day UK 2009 Basic Templates
Chris Davenport
 
SEO Basics & Beyond: Q1 2018 Edition
Pam Ann Marketing
 
Flash Templates- Joomla!Days NL 2009 #jd09nl
Joomla!Days Netherlands
 
Amp your site: An intro to accelerated mobile pages
Robert McFrazier
 
Website speed optimization guide for technically advanced webmasters
Aditya Singh
 
Performace optimization (increase website speed)
clickramanm
 
Widget Summit 2008
Volkan Unsal
 
WordPress SEO Site Optimization Strategies & Techniques
Jeff Kemp
 
2012 03 27_philly_jug_rewrite_static
Lincoln III
 
Ad

Similar to Accelerated Mobile Pages (AMP) in Magento (20)

PPTX
What is Amp (Accelerated Mobile Pages)?
KULZUJESHAI
 
PPTX
Google AMP (Accelerated Mobile Pages)
Chitpong Wuttanan
 
DOCX
Webwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies
 
PDF
Step by-step procedure to implement amp in website
Webwing Technologies
 
PPTX
Mobile First et AMP - Developers Meetup - May 2017
Jahia Solutions Group
 
PDF
Accelerated Mobile Pages (AMP)
ijtsrd
 
PPTX
Accelerated Mobile Pages (AMP) & How it will Impact your Business
Harshavardhan MP
 
PPTX
Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web Development
NotifyVisitors
 
PPTX
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
Mike Hale
 
PDF
AMP and the instant web - WebPerformance NYC MeetUp group
Michael Posso
 
PPTX
Amp up your Site with Accelerated Mobile Pages
Brian McKeiver
 
PPT
Accelerated Mobile Pages (AMP)
Sanjay Kumar
 
PDF
Accelerated Mobile Pages (AMP) to Win Search War in 2017
Digital Vidya
 
PDF
AMP - Accelerated Mobile Pages
Ido Green
 
PDF
Google AMP: High-Speed Pages in Higher Ed
Caroline Roberts
 
PPTX
Get AMP’ed for AMP!
Greenlane
 
PPTX
Accelerated Mobile Pages (AMP): Boosting Speed & Performance on Mobile
Muhammed Adhil
 
What is Amp (Accelerated Mobile Pages)?
KULZUJESHAI
 
Google AMP (Accelerated Mobile Pages)
Chitpong Wuttanan
 
Webwing Technologies - Procedure to Implement AMP in your Website
Webwing Technologies
 
Step by-step procedure to implement amp in website
Webwing Technologies
 
Mobile First et AMP - Developers Meetup - May 2017
Jahia Solutions Group
 
Accelerated Mobile Pages (AMP)
ijtsrd
 
Accelerated Mobile Pages (AMP) & How it will Impact your Business
Harshavardhan MP
 
Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web Development
NotifyVisitors
 
Amp it UP! Using Google Accelerated Mobile Pages with WordPress - WordCamp An...
Mike Hale
 
AMP and the instant web - WebPerformance NYC MeetUp group
Michael Posso
 
Amp up your Site with Accelerated Mobile Pages
Brian McKeiver
 
Accelerated Mobile Pages (AMP)
Sanjay Kumar
 
Accelerated Mobile Pages (AMP) to Win Search War in 2017
Digital Vidya
 
AMP - Accelerated Mobile Pages
Ido Green
 
Google AMP: High-Speed Pages in Higher Ed
Caroline Roberts
 
Get AMP’ed for AMP!
Greenlane
 
Accelerated Mobile Pages (AMP): Boosting Speed & Performance on Mobile
Muhammed Adhil
 
Ad

More from Magecom UK Limited (20)

PPTX
Magento Meetup #12. Alex Shkurko.pptx
Magecom UK Limited
 
PPTX
Magento Meetup #12 Anastasiia Bondar
Magecom UK Limited
 
PPTX
Magento Meetup #12 Vlad Opukhlyi
Magecom UK Limited
 
PPTX
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Magecom UK Limited
 
PPTX
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magecom UK Limited
 
PPTX
Magento enhanced media gallery - Alexander Shkurko
Magecom UK Limited
 
PPTX
7 ошибок одного Black Friday - Влад Опухлый
Magecom UK Limited
 
PPTX
Magento & Cloud - Korostelov Avexey
Magecom UK Limited
 
PDF
Making the Magento 2 Javascript Loading Great Again - Robin van Raan
Magecom UK Limited
 
PDF
Deep Dive in Magento DI
Magecom UK Limited
 
PDF
From Repositories to Commands - Alexander Shkurko
Magecom UK Limited
 
PPTX
Advanced GIT or How to Change the History
Magecom UK Limited
 
PPTX
MSI In-Store Pickup Функционал & сложности
Magecom UK Limited
 
PPTX
Adobe Stock Integration community project
Magecom UK Limited
 
PDF
Proof of Concept for Magento 2 Projects: Occamo’s Razor
Magecom UK Limited
 
PPTX
Что нужно знать девелоперу о SEO на этапе проектирования сайта
Magecom UK Limited
 
PPTX
Magento-сертификация: инструкция по применению и как это было
Magecom UK Limited
 
PPTX
Experience in Magento Community Projects
Magecom UK Limited
 
PPTX
UI components: synergy of backend and frontend
Magecom UK Limited
 
PPTX
MSI - Reservation Challenges with 3rd-party Systems
Magecom UK Limited
 
Magento Meetup #12. Alex Shkurko.pptx
Magecom UK Limited
 
Magento Meetup #12 Anastasiia Bondar
Magecom UK Limited
 
Magento Meetup #12 Vlad Opukhlyi
Magecom UK Limited
 
Google Page Insights and Magento 2 — Sergey Nezbritskiy | Magento Meetup Onli...
Magecom UK Limited
 
Magento NodeJS Microservices — Yegor Shytikov | Magento Meetup Online #11
Magecom UK Limited
 
Magento enhanced media gallery - Alexander Shkurko
Magecom UK Limited
 
7 ошибок одного Black Friday - Влад Опухлый
Magecom UK Limited
 
Magento & Cloud - Korostelov Avexey
Magecom UK Limited
 
Making the Magento 2 Javascript Loading Great Again - Robin van Raan
Magecom UK Limited
 
Deep Dive in Magento DI
Magecom UK Limited
 
From Repositories to Commands - Alexander Shkurko
Magecom UK Limited
 
Advanced GIT or How to Change the History
Magecom UK Limited
 
MSI In-Store Pickup Функционал & сложности
Magecom UK Limited
 
Adobe Stock Integration community project
Magecom UK Limited
 
Proof of Concept for Magento 2 Projects: Occamo’s Razor
Magecom UK Limited
 
Что нужно знать девелоперу о SEO на этапе проектирования сайта
Magecom UK Limited
 
Magento-сертификация: инструкция по применению и как это было
Magecom UK Limited
 
Experience in Magento Community Projects
Magecom UK Limited
 
UI components: synergy of backend and frontend
Magecom UK Limited
 
MSI - Reservation Challenges with 3rd-party Systems
Magecom UK Limited
 

Recently uploaded (20)

PDF
Software Development Company | KodekX
KodekX
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PDF
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PDF
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PDF
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
PDF
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
PDF
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PDF
Doc9.....................................
SofiaCollazos
 
PDF
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
PDF
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
PDF
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
Software Development Company | KodekX
KodekX
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
Doc9.....................................
SofiaCollazos
 
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 

Accelerated Mobile Pages (AMP) in Magento

  • 1. Accelerated Mobile Pages (AMP) in Magento: capabilities Speaker: Olga Burtyka
  • 2. Today we will talk about: ❖ What is Google AMP? ❖ Why your project needs AMP? ❖ SEO benefits and problems of AMP ❖ How AMP speeds up page loading? ❖ Must-have code on the page ❖ Disallowed code on the page ❖ How to add custom AMP layout and templates to Magento 2 2
  • 3. Today we will talk about: ❖ AMP most used components in Magento ❖ How to add Google Analytics and Google Tag Manager to AMP ❖ Ways to validate AMP pages ❖ How to update AMP Cache? ❖ Compare speed AMP pages and not-AMP on product page ❖ Progressive Web Application and AMP ❖ Useful resources to start applying AMP in your project 3
  • 4. What is Google AMP? “AMP - is a special project from Google, executed in conjunction with dozens of world-renowned IT companies, web developers and website owners. The goal of the project is to increase the speed of downloading sites on mobile devices due to the introduction of new technologies.” 4
  • 5. Why your project needs AMP? 5 Using mobile on the first place in our live. By 2020, 80% of all traffic will come from smartphones
  • 6. Why your project needs AMP? ○ Essential for good mobile SEO. ○ Makes Pages load faster. ○ Most Recommended by Google, Loved by Google. ○ Designed to be heavily cached. ○ Progressive Web Apps and AMP pages work great together. 6
  • 7. SEO Benefits of AMP AMP is fast and gives high conversion rate 7
  • 8. SEO Benefits of AMP ❏ The increase of website’s ranking (Google officially says that AMP is just one of many signals for rankings) ❏ Amp offers mobile friendliness (https://search.google.com/test/mobile-friendly) ❏ Google switches to mobile-first indexing ❏ AMP Analytics supports Google Analytics, AdWords Conversion Tracking ❏ Google Tag Manager supports AMP containers ❏ Your HTML is flawless and 100% free of code errors ❏ Improved CTR(click-through rate) 8
  • 10. SEO problem of AMP “ Google announced that it had almost solved the problem with displaying URLs in AMP search results. Currently, they show URLs to Google, not publishers, which are taken from AMP Cache. However, later this year the situation will change, and AMP Cache will begin to provide publishers' URLs. ” post from 9.01.2018 10
  • 11. How AMP speeds up page loading? 1) AMP HTML is HTML with some restrictions for reliable performance. AMP HTML is basically HTML extended with custom AMP properties. The simplest AMP HTML file looks like this: 11
  • 12. How AMP speeds up page loading? 2) AMP JavaScript ● AMP JavaScript library guarantees fast rendering of AMP pages as it executes a larger part of AMP’s markups. ● AMP pages can’t include any author-written JavaScript. ● Biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering. 12
  • 13. How AMP speeds up page loading? 3) AMP CDN (AMP cache) ● CDN – Content Delivery Network plays a crucial role in running seamlessly accelerated mobile pages as it expedites the delivery of content to a mobile device. ● This is considered as one of the critical element of AMP technology. ● It acts by storing the elements from the similar AMP pages available on the server to ensure faster delivery. 13
  • 14. How to report the availability of the AMP version of the page? ★ On the usual page, add the following code: <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"> 14
  • 15. Must-have code on the AM Page ➔ Begin with the document type <! Doctype html>. ➔ Contain the <html ⚡> top level tag (also use <html amp>). ➔ Contain the <head> and <body> tags (optional in HTML markup). ➔ Contain the <link rel = "canonical" href = "SOME_URL"> tag inside the header, which points to the usual HTML version of the HTML AMP document or to the source document itself, if that version does not exist. ➔ Contain the <meta charset = "utf-8"> tag as the first child of the header tag. ➔ Keep the tag <meta name = "viewport" content = "width = device-width, minimum-scale = 1"> in the title tag. It is also recommended to include the value initial-scale = 1. 15
  • 16. Must-have code on the page ➔ Contain the <script async src = "https://cdn.ampproject.org/v0.js"> </ script> tag that points and loads the AMP JS library as the last header element. ➔ Contain the following code in the <head> tag: <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: none} </ style> </ noscript> 16
  • 17. Disallowed code on the page ➢ include custom css (<link rel=”stylesheet”> ) or js files; ➢ the size of the built-in style sheet < 50 kilobytes; ➢ inline style attributes (All styles must be defined in the <head> of the page, within a <style amp-custom> tag.); ➢ disallow use ‘!important’; ➢ -amp- class and i-amp- tag names (Class names, in author stylesheets, may not start with the string -amp-. These are reserved for internal use by the AMP runtime. It follows, that the user's stylesheet may not reference CSS selectors for -amp- classes and i-amp tags.) ➢ <script> tag can be only type is application/ld+json or type is application/json ➢ <img>,<video>, <audio>,<iframe> replaced with <amp-img>, <amp-video>, <amp-audio> and <amp-iframe> 17
  • 18. Disallowed code on the page ➢ <a> the href attribute value must not begin with javascript:. If set, the target attribute value must be _blank ➢ Attribute names starting with on (such as onclick or onmouseover) are disallowed in AMP HTML. ➢ <form> support only https:// ➢ The special chars like '&ldquo; &rdquo;' - is disallowed. 18
  • 19. How to add custom AMP layout and templates to Magento 2 open etc/frontend/events.xml and add: <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd"> <event name="layout_load_before"> <observer name=“amp_layout_load_before" instance="MyModuleAmpObserverLayoutLoadBefore"/> </event> <event name="core_layout_render_element"> <observer name=“amp_core_layout_render_element" instance="MyModuleAmpObserverCoreLayoutRenderElement"/> </event> </config> 19
  • 20. How to add custom AMP layout and templates to Magento 2 20
  • 21. How to add custom AMP layout and templates to Magento 2 <type name="MagentoFrameworkViewResultPage"> <plugin name="amp-layout-handles" type="MyModuleAmpPluginHandles" sortOrder="10"/> </type> 21 open etc/frontend/di.xml and add: open MyModule/Amp/Plugin/Handles.php public function afterAddPageLayoutHandles(Page $subject) { if ($this->_dataHelper->isAmpRequest()) { foreach ($subject->getHandles() as $handleName) { $subject->addHandle('amp_' . $handleName); } } return $subject; }
  • 22. How to add custom AMP layout and templates to Magento 2 22
  • 23. 23 How to add custom AMP layout and templates to Magento 2 <container name="amp.items.block" htmlTag="div" htmlClass="amp-product" after="-"> <referenceBlock name="catalog.product.related" remove="true"/> <block class="MagentoCatalogBlockProductProductListRelated" name="amp.product.related" template="MyModule_Amp::catalog/product/list/items.phtml"> <arguments> <argument name="type" xsi:type="string">related</argument> </arguments> </block> <block class="MagentoCatalogBlockProductProductListUpsell" name="amp.product.upsell" template="MyModule_Amp::catalog/product/list/items.phtml"> <arguments> <argument name="type" xsi:type="string">upsell</argument> </arguments> </block> </container>
  • 24. AMP most used components in Magento 1) amp-form component allows HTTP and XHR (XMLHttpRequest) form submissions. 24 <action method = "addJs"> <argument name = "src" xsi:type = "string"> https://cdn.ampproject.org/v0/amp-form-0.1.js </argument> <argument name = "type" xsi:type = "string">amp-form</argument> </action> 2) amp-img replace usual <img> tag and provides a powerful replacement. Is automatically imported via the AMP runtime. <amp-img class = "logo" src = "<?php echo $category->getLogoSrc(); ?>" width = "750" height = "250" alt = "Cool Image"> </amp-img>
  • 25. AMP most used components in Magento 3) The amp-image-lightbox component allows the user to expand an image to fill the viewport. <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"> </script> 25 <amp-img on = "tap:lightbox1" role = "button" src = "/img/Table.jpg" alt = "Cool Table" title = "Picture Table view in lightbox" layout="responsive" width="300" height="246"> </amp-img> <amp-image-lightbox id = "lightbox1" layout = "nodisplay"> </amp-image-lightbox> for example:
  • 26. AMP most used components in Magento 4) The amp-carousel component allows displaying multiple similar pieces of content along a horizontal axis. <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"> </script> 26 <amp-carousel height="300" layout="fixed-height" type="carousel"> <amp-img src="/img/image1.jpg" width="400" height="300" alt="another sample image"> </amp-img> <amp-img src="/img/image2.jpg" width="400" height="300" alt="and another sample image"> </amp-img> </amp-carousel> for example:
  • 27. AMP most used components in Magento 5) Use amp-iframe for embedding content into AMP files via iframe. Useful for displaying content otherwise not (yet) supported by AMP. <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"> </script> <amp-iframe title="Google mapCA" frameborder="0" layout="responsive" width = "600" height = "400" sandbox = "allow-scripts allow-same-origin allow-popups" src = "https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6 j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848"> </amp-iframe> 27
  • 28. AMP most used components in Magento Responsive amp-iframe on live chat example: 28 <amp-iframe id="livechat-iframe" title="LiveChat" src="https://chair.com/livechat.html" height="450" layout="fixed-height" sandbox="allow-scripts allow-same-origin"> <amp-img src="#" layout="fixed-height" placeholder height="450" width="auto" > </amp-img> </amp-iframe> function postSize(size) { window.parent.postMessage({ sentinel : 'amp', type : 'embed-size', height : size }, '*'); }
  • 29. 29
  • 30. AMP most used components in Magento 6) amp-bind Allows you to add custom interactivity to your pages beyond using AMP's pre-built components. It works by mutating elements in response to user actions via data binding and JS-like expressions. For example, amp-bind can be used to create an e-commerce product page where the UI changes if the user's currently selected item is not available, or user select many product options and need calculate price. 30 <script async custom-element = "amp-bind" src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> </script>
  • 31. AMP most used components in Magento: amp-bind example <amp-state id="product" class="i-amphtml-element i-amphtml-layout-container" aria-hidden="true" style="display: none;"> <script type="application/json"> { "totalPrice" : 0, "specialPrice" : 0.9386, "203375": { "price" : 1580 } "203376": { "price" : 1900 }, "203367": { "price" : 830 }, "203365": {" price" : 1740 }, "option-59866" : "203375", "option-59867" : "203367", "qty-59866" : 1, "qty-59869" : 1, } </script> </amp-state> 31
  • 32. AMP most used components in Magento: amp-bind example 32 <input type = "radio" class = "bundle-option" name = "bundle_option[<?php echo $_option->getId() ?>]" value = "<?php echo $_selection->getSelectionId() ?>" on="change:AMP.setState({ product: { <?php echo "option" . $_option->getId(); ?>: event.checked == true ? event.value : '', selected: { <?php echo "option" . $_option->getId(); ?>: (product[event.value]['price']*product.qty<?php echo $_option->getId(); ?>) } } })" /> <span class="product-price" [text] = "'$'+((values(product.selected).reduce((x, y) => x + y))*product.sPrice).toFixed(2)"> </span>
  • 33. How to add Google Analytics to AMP Add the following line of code into the <head> of your document: <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"> </script> 33 <amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "<?php echo $block->getGoogleAnalyticsId(); ?>" }, "triggers": { "trackPageviw": { "on": "visible", "request": "pageview” } } } </script> </amp-analytics>
  • 34. How to add Google Tag Manager to AMP Google Tag Manager recently published support for AMP. This support comes in the form of a new Container type in Google Tag Manager. 34
  • 35. How to add Google Tag Manager to AMP <amp-analytics config = https://www.googletagmanager.com/amp.json?id=<?php echo $gtmID; ?>&gtm.url=SOURCE_URL" data-credentials = "include"> <?php echo $this->_getDataLayer(); ?> </amp-analytics> It example GTM variables on magento product page: 35
  • 36. Ways to validate AMP pages 36
  • 37. Ways to validate AMP pages. Not valid page: 37
  • 38. Ways to validate AMP pages. Valid page: 38
  • 39. Ways to validate AMP pages https://validator.ampproject.org/ 39
  • 40. Ways to validate AMP pages Google Search Console 40
  • 41. Ways to validate AMP pages Google Search Console run test pages with error 41
  • 42. How to update AMP Cache? update-ping 42 What's the diff between update-cache and update-ping? Number of update-ping requests you can make it limited but update- cache allows for higher request rates because the requests are signed. https://www.tvstands.com/mygel-10-queen-mattress.html?amp=1 https://www-tvstands-com.cdn.ampproject.org/c/s/www.tvstands.com/ mygel-10-queen-mattress.html?amp=1 https://cdn.ampproject.org/update-ping/c/s/www.tvstands.com/mygel- 10-queen-mattress.html?amp=1 OR
  • 43. How to update AMP Cache? update-cache You can flush any currently cached version of a document by issuing a signed request to the AMP Cache. The update-cache request is called at this address: https://www-tvxxxxxxx-com.cdn.ampproject.org/update-cache/c/s/ www.tvxxxxxxx.com/stanley-juniper-dell-media-chest-in-white-615-23- 11.html?amp=1&amp_action=flush&amp_ts=1512889699&amp_url_signature=p wFqaT1BgqESIaKREyeIJP4QYY0ykl6W37YzGs9emEQjkpwY2juBuc7O9njF- zFqSYTQezoP1RTZiorItOh0Qw14OPAJBqb49AumJAMPKgffcU_Z8d6FQWafOE5 WU8VFCk8JpW3s91AdYHbpNliLBERIYLMPpLW7taZywfnF8nd6Pjl7GLKYDSu8ml- 6DHeEy9E4MtlStVKbEguSswyWwZyK7opmkSq6xevdB_Am9YLfVGmd2SEypf4kPw Q5on5c0kxbv5EIPADrSQz59T9MrhrDFIx4J4ibjYjKrH5wOjxFMVy5k1wN6CETYj9l https://example-com.<cache.updateCacheApiDomainSuffix>/update- cache/c/s/example.com/article?amp_action=flush&amp_ts=<ts_val>&amp_url _signature=<sig_val> 43
  • 44. Compare AMP pages and not-AMP on product page 44
  • 45. Compare AMP pages and not-AMP on product page 45
  • 46. Compare AMP pages and not-AMP on product page 46
  • 47. Compare AMP pages and not-AMP on product page 47
  • 48. Progressive Web AMP What is Progressive Web Applications? “You can perceive this as a site built using web technologies (JS + HTML + CSS), but which interacts with the user as an application. ” 48
  • 49. The PWA applications are: ● Progressive ● Responsive ● Connectivity independent ● App-like ● Fresh 49 ● Safe ● Discoverable ● Re-engageable ● Installable ● Linkable
  • 50. Different PWAMP combinations: 50 You can combine PWA and AMP in several ways: 1) AMP as PWA ( When AMP restrictions are uncritical for you. ) https://ampbyexample.com/ 2) AMP goes to PWA ( When you need a smooth transition from one to another.) <amp-install-serviceworker> 3) AMP inside PWA ( When you want to use existing AMP as data sources for PWA.)
  • 51. Useful resources to start applying AMP in your project - https://www.ampproject.org/docs/ - https://ampbyexample.com/ - https://ampbyexample.com/playground/ - https://github.com/ampproject - https://validator.ampproject.org/ - https://codelabs.developers.google.com/codelabs/your-first- pwapp-ru/index.html 51