Create instant loading mobile web pages with AMP

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks

<!doctype html> <html > <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>/* boilerplate goes here */</style> <script async src="https://cdn.ampproject.org/v0.js"></script> <noscript><style amp-boilerplate>/* boilerplate goes here */</style></noscript> </head> <body>Hello World!</body> </html>

HTTP2 CDN Built-in Validator AMP Viewer

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

https://developers.google.com/web/fundamentals/performance/rail

preconnectCallback(opt_onLayout) { this.preconnect.url( 'https://cdn.embedly.com', opt_onLayout ); }

const preconnect = this.document_.createElement('link'); preconnect.setAttribute('rel', 'preconnect'); preconnect.setAttribute('href', origin); preconnect.setAttribute('referrerpolicy', 'origin');
this.head_.appendChild(preconnect);

</head> ... <style amp-custom> html { Font-family:sans-serif; } body {
background-color: white; } amp-img { border: 5px solid red; } </style> ... </head>

for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = box.offsetWidth + 'px'; }

const width = box.offsetWidth; for (let i = 0; i
< paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; }

window.requestAnimationFrame();

IFRAME document.write( '<script src="' + src + '" type="text/javascript"><\/script>' );
third-party-library.min.js

CSS3 transitions CSS3 3D transforms

Create instant loading mobile web pages with AMP

Create instant loading mobile web pages with AMP

Juan

More Decks by Juan

Other Decks in Programming

Featured

Transcript

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks

<!doctype html> <html > <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html">

<script></script> <base /> <img /> <video></video> <audio></audio> <iframe></iframe> <frame></frame> <frameset></frameset>

HTTP2 CDN Built-in Validator AMP Viewer

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

https://developers.google.com/web/fundamentals/performance/rail

<link rel="preconnect" href="//example.com"> https://www.w3.org/TR/resource-hints/#dfn-preconnect

preconnectCallback(opt_onLayout) { this.preconnect.url( 'https://cdn.embedly.com', opt_onLayout ); }

const preconnect = this.document_.createElement('link'); preconnect.setAttribute('rel', 'preconnect'); preconnect.setAttribute('href', origin); preconnect.setAttribute('referrerpolicy', 'origin');

<script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-embedly-card" src="https://cdn.ampproject.org/v0/amp-embedly-card-0.1.js"> </script>

</head> ... <style amp-custom> html { Font-family:sans-serif; } body {

for (let i = 0; i < paragraphs.length; i++) {

const width = box.offsetWidth; for (let i = 0; i

window.requestAnimationFrame();

IFRAME document.write( '<script src="' + src + '" type="text/javascript"><\/script>' );

CSS3 transitions CSS3 3D transforms