Embed Size (px)
Citation preview
GOOGLE AMPPRIMER
MOBILE IS SLOOOOW…
WHY?
HOUSTON WORDPRESS MEETUP - MARCH 2, 2016
THE BROKEN MOBILE WEB
▸ Big Images
▸ Complex Plugins
▸ Slow Hosting
▸ Marketing and Tracking Delays
THE BOUNCE RATE CAN BE AS HIGH AS 58% FOR WEB PAGES THAT TAKE NEARLY 10-SECONDS TO LOAD.
Tammy Everts, SOASTA
HOUSTON WORDPRESS MEETUP - MARCH 2, 2016
HOUSTON WORDPRESS MEETUP - MARCH 2, 2016
WHAT IS AMP’S APPROACH?
▸ AMP HTML (Limited HTML Tags)
▸ AMP cached to Google Servers (and others…)
▸ Static Element Sizing (Height x Width)
▸ Non-Blocking JavaScript in <iframe> tags
▸ Non-Blocking HTTP
HOUSTON WORDPRESS MEETUP - MARCH 2, 2016
WHAT IS AMP’S APPROACH?
▸ Inline CSS
▸ Only GPU based CSS animations
▸ Lazy Loading with Prefetch
▸ Instant Loading
HOUSTON WORDPRESS MEETUP - MARCH 2, 2016
FAQ
▸ Q: Okay Google… Can I display a 3rd party ad?
▸ A: Yes. Use <amp-ad>.
▸ Q: What about embedding stuff?
▸ A: Use <amp-embed>. Restricted…
▸ Q: How about my images?
▸ A: Use <amp-img>. Be sure to specify size!
HOUSTON WORDPRESS MEETUP - MARCH 2, 2016
FAQ
▸ Q: What about tracking pixels?
▸ A: Try <amp-pixel>. No styling required…
▸ Q: I'd like to include a HTML5 video? How do I do that?
▸ A: Try <amp-video>. Has placeholder and fallback.
▸ Check out the AMP HTML Spec.
HOUSTON WORDPRESS MEETUP - MARCH 2, 2016
RESOURCES
▸ Accelerated Mobile Pages Project. Retrieved 2 March 2016.
▸ Case study: Mobile pages that are 1 second faster experience up to 27% increase in conversion rate. 1 September 2015. Retrieved 2 March 2016.
