1. AMP Up Your Website
uWestFest 2017

2. What is AMP?

3. Replace this with image.
What is AMP?
“AMP, or Accelerated Mobile Pages, are lightweight webpages consisting of stripped down HTML (AMP HTML), a streamlined version of CSS, and AMP JS which, though limited, allows pages to load asynchronously”
Replace this with image.
Open Source Initiative
Trying to solve
Mobile usability
Increase use of mobile in search
Slow loading pages frustrating the user experience
Improve the entire mobile content ecosystem for everyone -- publishers, consumer platforms, creators, and users
Relies on existing web technologies in collaboration with many different partners
Ad services
Analytics
Content Platforms / CMSs
Audio / Video for embed
No complicated build process
AMP HTML = Normal HTML (with a couple of restrictions and extras)
AMP loads in any modern browser or app webview
Dramatically improves the performance of mobile site on the web
Load appears to be instant

4. AMP HTML HTML with some restrictions for reliable performance
Stripped down HTML
AMP specific extensions for building rich content beyond basic HTML
Some tags replaced with AMP specific versions (Ex: img -> amp-img)
Resources require static sizing
Normal HTML with some restrictions which promote reliable performance
AMP specific extensions for building rich content beyond basic HTML
Normal elements like the img tag are replaced with AMP versions to allow the page to load asynchronously.
Custom tags keep AMP in control of the layout and loading of resources to give the best experience to the user
These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way.
AMP requires that resources like images, ads, or iframes be statically sized
Uncouples document layout from the resource layout
Only one HTTP request is needed to layout the entire document
AMP is optimized to avoid expensive style recalculations and layouts in the browser, so there won’t be a need to re-layout the page once the resource is loaded

5. AMP CSS CSS on portion control
No external CSS resources (except fonts)
CSS placed inline in the head of the webpage
CSS cannot be more than 50kb
Streamlined version of CSS
CSS from external sources can block all rendering of a document
Problem from slower connections that can result in a flash and unstyled content
Tends to get bloated with all the unrelated styles from other pages
Web font optimization is critical for performance
Typical pages may have CSS and script resources to download before getting to the font
AMP system makes no HTTP request until the fonts start downloading
All scripts are async and CSS is inline
Only inline styles are allowed
Strategy removes the one to many HTTP requests which are on the critical rendering path compared to most pages
CSS cannot be more that 50kb
Limited inline style size allows for the author of the page to make a sophisticated page, forces them to use CSS hygiene

6. AMP JS Ensures the fast rendering of AMP HTML pages
Manages the resource loading of the page
Provides the custom AMP tags
Pre-calculates the page layout
Execute all javascript asynchronously
Ability to prioritize some resources over others to create best user experience
AMP controls all resource downloads
Optimized to resources currently in view
Downloads ads with lower priority and when user is idle
AMP also prefetches lazy-loaded resources.
Resources are loaded as late as possible, but prefetched as early as possible.
That way things load very fast but CPU is only used when resources are actually shown to users
Provides the custom tags for images, iframes, and other components
Makes it so layout know ahead of time, things aren't jumping around while things load into the page.
Minimal style recalulations
AMP knows when things resize, minimizes need to measure
AMP uses fastfdom-like batching of DOM access
AMP triggers only 2 style recalculations during a typical page load
Among the 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.

7. Design Principles
Don’t design for a hypothetical faster future browser
Don’t break the web
Solve problems on the right layer
Only do things if they can be made fast
Prioritise things that improve the user experience - but compromise when needed
No whitelists
Don’t design for a hypothetical faster future browser
Fix the web of today, not tomorrow
Don’t break the web
Allow for graceful degradation if amp fails
Solve problems on the right layer
Don’t integrate things on the client side if it's easier when it would be better with server side integration
Only do things if they can be made fast
Don’t introduce components or features if they can’t run reliably or hinder instant load
Prioritise things that improve the user experience - but compromise when needed
Only compromise when lack of support for something would stop AMP form being widely used and deployed
No whitelists
Don't give any special treatment to specific sites, domains or origins except where needed for security or performance reasons.

8. Why should I care?

9. Why Should I Care?
More Google searches take place on mobile devices that on computers in 10 countries including US and Japan
40% of people will abandon a website that takes more than 3 seconds to load
Fast Content -> Faster Reading -> More Consumption
AMP pages might be used as ranking factor for Google Search
Provides an opportunity to appear in the search result carousel
AMP Cache
With AMP, content is king and the user experience is queen
Decrease the bounce rate on mobile
Fast content, leads to faster reading, leads to more consumption. More content shown to a user allows for greater opportunities to convert those users to your ultimate goals
Allows for instant loading by leveraging the prefetch
Pre renders only the 1st viewport executes no 3rd party js
This way in search results, you can pre-render first 4 results instead of just the top
Humans perceive it as instant
Google is pushing developers to use AMP pages in a similar fashion as they propelled creating mobile friendly pages
AMP pages might actually be used as a ranking factor when conducting searches on mobile devices
Google sees mobile as being the future of search, and this is one initiative that will push to improve the user experience of their results and hopefully decrease bounce rates for the publisher as a result
Using AMP HTML pages, you will also be able to leverage the Google AMP Cache
Google AMP Cache is a proxy based content delivery network, which will deliver your pages and resources closer to the user geographically.
Google AMP Cache will automatically go and fetch your document, JS files, and images to be cached, thus improving the performance and speed of delivery to the end user
Even being adopted by ecommerice
Ebay listings showing up as AMP results

10. Replace this with image.
If you’re a HTML wizard and have poured your life into making your website the most sleekest streamlined one out there, then AMP probably isn’t for you
For the rest of us, AMP provides a strict guideline to create mobile experiences that can load quickly on any device no matter what the connection
The built in AMP validation ensures that developers stay in the fast lane when creating AMP pages and provides instant feedback to what is wrong
Why Should I Care?

11. If you’re a HTML wizard and have poured your life into making your website the most sleekest streamlined one out there, then AMP probably isn’t for you
For the rest of us, AMP provides a strict guideline to create mobile experiences that can load quickly on any device no matter what the connection
The built in AMP validation ensures that developers stay in the fast lane when creating AMP pages and provides instant feedback to what is wrong
Match Made in Heaven

12. AMP Boilerplate Barrier to entry is low
AMP HTML is merely HTML with some restrictions and extras
Does not require any complicated build processes to create AMP pages
Can be easily mixed in with view engines like Razor which Umbraco leverages
AMP Boilerplate

13. AMP Razor Layout Barrier to entry is low
AMP HTML is merely HTML with some restrictions and extras
Does not require any complicated build processes to create AMP pages
Can be easily mixed in with view engines like Razor which Umbraco leverages
AMP Razor Layout

14. Demo Time!

15. Resources Umbraco AMP Nuget Package Presentation Demo Project
MarcelDigital.Umbraco.Amp
Presentation Demo Project
marceldigital/Umbraco-AMP-Demo
If you’re a HTML wizard and have poured your life into making your website the most sleekest streamlined one out there, then AMP probably isn’t for you
For the rest of us, AMP provides a strict guideline to create mobile experiences that can load quickly on any device no matter what the connection
The built in AMP validation ensures that developers stay in the fast lane when creating AMP pages and provides instant feedback to what is wrong
Resources

16. THANK YOU Alex Vilmur Kyle Brigham alex@marceldigital.com
/marceldigital
@marceldigital
/company/marcel-digital