introduction to google amp - accelerated mobile pages #pubcon

#pubcon@badams

Google AMP

Presented by:Barry Adams

Polemic Digital

#pubcon@badams

About Barry Adams• Dutchman in Northern Ireland• Founder of Polemic Digital• Co-Chief Editor for StateofDigital.com• Twitter ranter: @badams• Lecturer & educator

#pubcon@badams

What is AMP

https://www.ampproject.org/

#pubcon@badams

Accelerated Mobile Pages• Alternative versions of your web pages

– Built specifically for speed & mobile• Mobile first

– Mobile only!• New standard

– Severely restrictive• All or nothing

– It either validates or it doesn’t

#pubcon@badams

#pubcon@badams

HTML AMP declaration

#pubcon@badams

Integrated structured data

#pubcon@badams

In-line CSS

#pubcon@badams

AMP-specific JavaScript files

#pubcon@badams

AMP-analytics

#pubcon@badams

Key elements of AMP• Uses standard HTML

– Will render in most browsers

• Limited external dependencies– Inline CSS, limited async JS

• Integrated Structured Data

#pubcon@badams

Caching & Pre-rendering

Website A.. …. …. …. .. …. …. …. ..

Website B.. …. …. …. .. …. …. …. ..

Website C.. …. …. …. .. …. …. …. ..

Google AMP Cache Pre-render

Defeats Ad Blockers!

#pubcon@badams

AMP in SERPs

#pubcon@badams

“Expanded Exposure”“Later this year, all types of sites that create AMP pages will have expanded exposure across the entire Google Mobile Search results page, like e-commerce, entertainment, travel, recipe sites and many more. ”

Source: https://webmasters.googleblog.com/2016/09/what-is-amp.html

#pubcon@badams

Implementing AMP• WordPress;

– AMP & PageFrog plugins

• Other platforms:– Forthcoming plugins/extensions– Manual effort

#pubcon@badams

AMP by Example

https://ampbyexample.com/

#pubcon@badams

#pubcon@badams

AMP Validator

https://validator.ampproject.org/

#pubcon@badams

AMP Validator Plugin

#pubcon@badams

What works in AMP now:• Analytics• Ads (limited)• Videos• GIF & WebP

animations• Carousels• Basic Forms

• Basic paywalls• iframes• Sidebar• Notifications• Live updates• A/B Testing

#pubcon@badams

What doesn’t work (yet)• Full end-to-end ecommerce• Most JS-based interactivity

#pubcon@badams

Further Reading…• https://www.ampproject.org/• https://twitter.com/amphtml• https://ampbyexample.com/• https://github.com/ampproject/amphtml• https://groups.google.com/forum/#!forum/amphtml-

discuss• https://stackoverflow.com/questions/tagged/amp-html

#pubcon@badams

Thank You

Follow me on Twitter:@badams

Email me your questions: barry@polemicdigital.com