Accelerated Mobile Pages: The good, the bad and the ugly

The good, the bad and the ugly AMP

Vitor Talaia Developer at Code Miner 42 @vitortalaia

Sorocaba - São Paulo - Brasil

What is AMP anyway?

Accelerated Mobile Pages

The problems that AMP is trying to solve

19s to load 53% of users will abandon the page
after 3s https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed- how-mobile-latency-impacts-publisher-revenue/

Frozen navigation/scrolling

Flash of unstyled content

How it works?

AMP HTML Spec HTML that includes custom AMP features through
web components. AMP JS Library A script to implement AMP’s performance best practices and provide the custom elements from the AMP HTML Spec. AMP Cache Servers that deliver AMP content. They fetch the AMP pages, cache, optimize and validate them.

http://www.sagmart.com/news/Technology/google-announced-expansion-of-accelerated-mobile-pages-programme

<!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async
src="https://cdn.ampproject.org/v0.js"></script> <link rel="canonical" href="https://news.com/sports/brazil-7-1-germany-wc-final"> <title>...</title> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>...</style> <noscript> <style amp-boilerplate>...</style> </noscript> <style amp-custom>...</style> </head> <body>...</body> </html>

<amp-img> src="brazil-2018-world-cup-champions.jpg" width="800" height="600" alt="Brazilian squad celebrating the 2018 WC
title" > <noscript> <img src="brazil-2018-world-cup-champions.jpg" width="800" height="600" alt="Brazilian squad celebrating the 2018 WC title" /> </noscript> </amp-img>

http://.../amp-page.html#development=1.

In the non-AMP version In the AMP version <link rel="canonical"
href="https://news.com/sports/brazil-7-1-germany-wc-final"> <link rel="amphtml" href="https://news.com/sports/brazil-7-1-germany-wc-final/amp">

AMP Non AMP

THE GOOD

3rd party JS runs in a sandbox (an iframe)

Prioritize the content of the first viewport

Static layout sizing

Add more functionality as you need it <head> <script async
custom-element="amp-audio" src="https://cdn.ampproject.org/../amp-audio.js"></script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/../amp-carousel.js"></script> </head> <body> <amp-audio>...</amp-audio> <amp-carousel>...</amp-carousel> </body>

Asynchronously download scripts Without “async” With “async” https://bitsofco.de/async-vs-defer/

Not AMP-only

“ It’s not so much about what AMP does; it’s
more about what it doesn’t allow. Jeremy Keith https://medium.com/clear-left-thinking/in-amp-we-trust-527b0bb309e1

THE BAD

Where's my page being served from? google.com… What?

One more rendering target

Less control of the design

Google seems to be more worried about chasing Facebook/Instagram features
than speed things up

Centralization of AMP-components

THE UGLY

Even more centralization of content on huge companies like Google
and Facebook

Google kept saying that AMP wouldn’t affect search rankings

AMP is the only way to appear on the carousel
and receive the lightning bolt sign

http://ampletter.org

Fake news can get away without branding

THE “SEEMS TO BE” GOOD

https://amphtml.wordpress.com/2018/01/09/improving-urls-for-amp-pages/amp/

https://amphtml.wordpress.com/2018/03/08/standardizing-lessons-learned-from-amp/amp/

AMP is a wake-up call, not a solution

“ Let’s incentivize the goal, not the tool. Tim Kadlec
https://timkadlec.com/remembers/2018-02-14-the-two-faces-of-amp/

Thanks!

Accelerated Mobile Pages: The good, the bad and the ugly

Accelerated Mobile Pages: The good, the bad and the ugly

More Decks by Vitor Talaia

Other Decks in Programming

Featured

Transcript