AMP Conf 2019. April 17/18. Tokyo.
AMP

Signed-Exchange: Solving the AMP URLs Display Problem

Signed Exchanges

Editor’s note: the below was originally posted on Medium by Sarang Khanna, Software Engineer, OYO

For an AMP Page at URL example.com/awesome-amp-page, your SEO users are probably seeing this — google.com/amp/s/example.com/awesome-amp-page. At OYO, we solved the much dreaded AMP-Cache URL display problem for good, without losing any AMP benefits!

As a fast and responsive web pattern, AMP has taken over the web. But a major concern about AMP pages is that whenever users land on the page from a Google search, the displayed URL is never the publisher’s original URL. This has been a topic of both discussion and concern till now. Signed-Exchange is something which can help you show your own domain in AMP page URLs, with all the AMP-Cache capabilities intact.

AMP URLs can now be the page’s original domain (notice the address-bar)

TLDR; 🔍

Prelude AMP enjoys caching benefits on Google’s Search pages. Opening an AMP page from Google Search Results (the ones with the ⚡ symbol) shows a “pre-fetched” version of the page coming from Google’s own cache. Hence, it opens with lightning-fast speed, as there is absolutelyno document-fetch done over the network upon clicking. (Read: OYO’s starting steps with AMP)

The issue However, since the content is fetched from Google’s Cache Server rather than the Publisher’s actual server, the URL shown to the users for that page starts with something like google.com/amp/s/,and is not the page’s actual URL.

Before the Fix: An AMP page opened from Google Search Results

This leaves chances of doubt about the authenticity of the page’s content for the end-user. However, now there is a way to solve this issue and show the page’s actual URL, even when it’s served from Google Cache.

The solution 

The solution resides in implementing Signed Exchange — which basically lets you “allow” third-parties (like AMP-Cache) to be able to serve your page’s content from their servers but the browser can show your domain and URL in the address bar.

What is Signed Exchange and how can it help? 💡

Signed Exchange (or “SXG”) is an emerging technology which provides a way to prove the authenticity of a web document. This can be used to determine a page’s original publisher, no matter where the document is served from.

A publisher can “sign” an HTTP request-response pair with their domain’s certificate. Thus generated signed-exchange can be served to browsers, similar to web pages! With it, the browser can safely show the publisher’s URL in the address bar because the signature proves that the content originally came from the publisher’s origin.

Simply put,

Signed-Exchange = A Web Page + Certificate of its Origin

This can allow us to improve AMP URLs. The idea here is to serve a signed-exchange for Google’s AMP crawler to cache, instead of a web document, when your AMP page is crawled.

Subsequently, now when a user will select your page from Google Search, the cached signed-exchange will be served from the AMP-Cache to the client’s browser . It will allow the browser to show the actual page URL (even though the page came from a Google Cache server).

(How HTTP Signed Exchange works to deliver better AMP URLs)

See it in action. 🎬

Google has announced the support for Signed Exchanges in Chrome and has adopted it for the benefit of AMP on it’s search result pages. The current browser support is Chrome 73 and above.

So go ahead on Google, search an OYO city and look for the lighting-symboled AMP pages. Keep an eye on the address bar to see the magic of SXGs.

The following section explains how we enabled Signed-Exchange to have actual URLs displayed for the AMP pages being served from Google…

Implementing Signed-Exchange to show your own domain in AMP URLs. 🏆

  1. Get a Digital Certificate for your domain
  2. Set-up a packager (signer) for your AMP pages (See deploy-amppackager-aws for help!)
  3. Proxy your AMP pages through the packager before serving them
  4. Profit! 🎉

1. Get a Digital Certificate for your domain

For signing the HTTP request-responses for AMP pages, you need to get a Digital Certificate issued for your domain.
Note: The private key must be ECDSA, curve secp256r1. And the certificate should have the CanSignHttpExchanges extension enabled for production use.

Psst! For testing purposes, you can use free certificates or self-signed certificates. For production use, DigiCert issues the certificate with the needed extension.

For reference, here is how to generate an EC P-256 key and a Certificate Signing Request (CSR) which you can submit to CA for signing:

## To generate a new EC P-256 private key
openssl ecparam -genkey -name secp256r1 | openssl ec -out privkey.pem
## Generate a CSR using the key:
openssl req -new -sha256 -key privkey.pem -nodes -out ec.csr -outform pem

Give the CSR to a CA who will issue you a new certificate for the private key. For SXGs, you will need the privkey.pem and the issued Certificate Chain, fullchain.pem.

2. Set-up a packager (signer) for your AMP pages

Next, you need to run a “Packager” server, something which will sign (or, “package”) the required pages using your certificate and it’s private key.

Thankfully, the AMP team has come-up with the amppackager tool, a Golang server for this purpose which anybody can use with minimal configurations (GitHub repo).

All you need to do is fetch the tool, provide your configurations (the path to your certificate, your domain name and the URLs to sign) and run it. On local machine, you can try it out with a demo request and it should serve a signed-exchange for your page!

AMPPackager Basics: By default, amppackager listens on port 8080. Suppose it is running on localhost:8080, it serves the signed-exchanges on URLs of this format:

localhost:8080/priv/doc/<Document's URL>

For example, the signed-exchange for https://www.oyorooms.com/hotels-in-delhi/ (AMP Page) will be served at: 
localhost:8080/priv/doc/https://www.oyorooms.com/hotels-in-delhi/

It serves other resources like certificate information on the URLs of this format:

localhost:8080/amppkg/<Path to Resource>

Note: Productionising the amppackager tool is still very vague.
We have open-sourced a boilerplate deployer (GitHub: deploy-amppackager-aws), which can be used to deploy amppackager on AWS Elastic Beanstalk! Use it for reference on how we streamlined the flow and put it to good use on OYO production.

3. Proxy your AMP pages through the packager before serving them

Upto this point, we have an amppackager server running to sign our AMP page requests. Time to look into which pages need to go through the packager and under what conditions.

Let’s address the exact requirements here (for the amppackager tool):

  • All requests starting with /amppkg/ path should be forwarded to the amppackager server unmodified.
  • For AMP page requests having the AMP-Cache-Transform header present (Google Crawler will have it, to indicate that it accepts SXGs), rewrite the URL to prepend /priv/doc and forward the request to the amppackager.
  • While serving AMP pages, set the Vary response-header to AMP-Cache-Transform, Accept. (Google Crawler will look for this header before asking an SXG from you)

Here is an example for a frontend Nginx proxy with the amppackager running on an upstream server amp_pkgr:

###
### AMP Packager resources:


location /amppkg {
# to amppackager, unmodified
proxy_pass https://amp_pkgr;
}



###
### Pages which are AMP:


location ~* ^/(.*)/amp {


# check for the "AMP-Cache-Transform" header
# (which Google crawler requests will have)
# to selectively pass this request to amppacakger or
# your usual web server
if ( $http_AMP_Cache_Transform ) {
rewrite /(.*) /priv/doc/https://$host/$1 break;
proxy_pass
https://amp_pkgr;
break;
}



# add "Vary" response-header for normally served AMP pages
# (responses from amppackager will already have the header)
add_header Vary 'AMP-Cache-Transform, Accept';


# proxy pass to your usual AMP pages' server
proxy_pass https://website_server;


}

Troubleshooting 💣

  • It may take Google’s Crawler some days to cache your AMP pages as Signed-Exchanges.
  • Avoid proxying non-AMP pages to amppackager.
  • Don’t expose amp_pkg to the outside world; keep it within your internal network.
  • Set up your amppackager server to be scalable as well as secure. It is a machine that will probably hold your certificate and private key too.

Links to infinity and beyond 🎯

Hope you’ll enjoy the journey from google.com/amp/s to yourdomain.com as much as we did. Thanks for reading… Have a cookie! 🍪

AMP as your web framework

Developer Experience

Update (5/2/2019): Added a paragraph to clarify compatibility with other frameworks (to not suggest a zero-sum game), and removed some language on how AMP was misunderstood that wasn’t needed to get the point across.

Read a blog post comparing popular frameworks lately? Participated in a frontend tooling survey? I can almost guarantee that AMP was not on the list. Which strikes me as odd, considering the millions and millions of domains running it. So, how come?

Here’s the content of this blog post in super over-produced video form. You should watch this. Trust me. It’ll be worth it.

How we got here: HTML vs. JS Frameworks, perception as distribution format, and paired AMP

The first reason why AMP isn’t perceived as a framework is that AMP isn’t a JavaScript framework. It’s a framework written in JS, but the authoring language for you is HTML, so technically it’s an HTML framework. The idea of HTML Frameworks isn’t new but they’re still fairly rare, so they are often not considered a serious alternative.

The second reason is that many compare AMP to RSS, and the media positioned it as competitor to certain other big companies’ walled garden media formats. That narrative certainly didn’t help, and for what it’s worth, we, the AMP team, never loved that comparison (but we also did our part we did confuse people with complicated words such as runtime and AMPHTML format). Web pages are already a great distribution format, and AMP just improves upon it by accelerating delivery via AMP caches and by bundling the main content further, for instance by inlining CSS.

And third, most AMP sites today use Paired AMP, a technique we allow to connect an existing non-AMP webpage to an AMP equivalent. Look, Paired AMP can be useful because the initial investment is much lower: If I packed my bag and later realize I want to pack more stuff, I can just pack another one and travel with two, but it gets really annoying. The same is true for Paired AMP. It’s super hard to maintain both versions over time, and Paired AMP was never meant to be the end state. (That’s why we’re now calling it Transitional mode in AMP for WordPress).

From Accelerated Mobile Pages to AMP

Even our name has been a cause for confusion. I’ve been struggling to properly explain what AMP is for a while now, especially to those who are familiar with its long form: Accelerated Mobile Pages. The reality is that we’ve outlived our own name long ago:

  • AMP isn’t just accelerated, it comes with all sorts of built-in UX advantages (e.g. disallowing interstitials, enforcing a free main thread for smooth interactions).
  • AMP isn’t just for mobile, it not only works across many device types including Desktop and tablet but comes with super handy responsive design features
  • And AMP doesn’t just power pages anymore – you can now build ads, emails and stories with it.

So, what’s the solution? Easy: As announced by AMP’s tech lead Malte at AMP Conf, AMP is now just AMP, and does not stand for Accelerated Mobile Pages anymore (if you must have an expanded form, how about Awesome Magical Power).

From page to site: Going AMP First and using AMP as a service

We, the AMP team, want AMP to become a natural choice for modern web development of content websites, and for you to choose AMP as a framework because it genuinely makes you more productive. This represents our core mission this year, and we’ve rolled out our new site at amp.dev (along with plenty of new content and beginner-friendly courses) to help you do it. So what do you get when you embrace AMP as your development framework (besides the obvious, like speed, UX, easy to use components)?

For starters, you’ll focus more on layout, style and content, and less on boilerplate code. Web development has gotten too hard, and it’s more important than ever to choose the right level of abstraction, with just the right amount of flexibility for your use case. We’ll worry about maintaining the JS for all components, and will ship backward compatible updates every two weeks. We call this way of lowering your maintenance burden “AMP as a Service” (watch Naina’s excellent talk on the topic).

You’ll now only maintain one version of each page by making your AMP canonical, or so-called “AMP first“, and that means your pages benefit from AMP’s performance and UX optimizations across Desktop, mobile and beyond.

Bento: Mix and match AMP components on non-AMP pages, interop with other frameworks

Watch the Bento announcement in What’s next in AMP from AMP Conf ’19.

AMP First doesn’t mean that strictly all pages of your site must be AMP – sometimes you might want maximum flexibility and distribution is not a big concern, like with a member-only area or complex shopping cart. In that case you could use vanilla JavaScript or another framework to power that part of the experience.

To then make it possible to re-use existing templates you’ve built with AMP components, we’re working on what we call Bento AMP, the ability to use AMP components in an “un-managed” way, without loading AMP’s main JS file (v0.js), and coexisting with other web components and frameworks on the same page.

This, along with frameworks like Next.js adding support to server side render AMP and amp-script, the ability to run custom JavaScript in a web worker, means AMP and other frameworks can co-exist peacefully and can make each other stronger, which we’re really excited about.

Accelerated development with support for JS and running AMP components outside AMP

Of course, it might not make sense for you to drop everything and reimplement your site in AMP today, and that’s OK! I just want you to know that we’ve grown up quite a bit, and when you set out to redesign or create something new, AMP is here to help you succeed.

With the dynamic state binding capabilities of amp-bind, the dynamic data fetching of amp-list and the ability to use custom JavaScript via amp-script, the possibilities for content sites are now endless. And with new open project governance in place, the future of AMP is open for everyone to shape – everyone who wants the web to continue to flourish.

Posted by Paul Bakaus, Developer Avocado, AMP

AMP Conf 2019: Successful web experiences for everyone

AMP Conf

Konnichiwa from Tokyo and our third annual AMP Conf! More than 500 developers are joining us over the next 2 days to hear from 50 speakers about how they’ve used AMP, what they’ve learned, and what’s coming next. With over 850 code contributors to the project and billions of AMP websites, the AMP team is more motivated than ever to build towards our vision of a strong user-first open web forever. And with a new governance model announced last year, leading voices across the web will ensure the project aims to meet the needs of both developers and users.

See all the announcements in the AMP Conf Keynote

AMP means great user experiences on the web

What’s in a name? When AMP started more than 3 years ago, Accelerated Mobile Pages fit pretty well. But AMP isn’t just accelerating webpage experiences anymore – it’s drives an overall superior user experience across the web. And mobile phones are just one of a myriad of supported devices AMP runs on, including desktop and tablets. Plus with immersive stories, dynamic emails, and better ads we are well beyond our original pages name.

Moving forward, The AMP Project will just be known as AMP – no acronym necessary, just a word that signifies speed and a great user experience across the web. You’ll see this reflected in our newly launched home for all things AMP, amp.dev, where you’ll learn all there is to know about the types of experiences developers are using AMP to build.

The new home for all things AMP: amp.dev

With documentation sections for websites, stories, emails and ads, developers can find what they need quickly. And we’ve strengthened the site’s resources as well, both importing the templates and examples that previously lived on ampbyexample.com and ampstart.com, and providing new assets like a use cases section with downloadable demos showcasing what’s possible with AMP.

Making AMP more capable

At its core, the web is comprised of 3 main elements: HTML, CSS and JavaScript. Since AMPs creation, developing with AMP only gave you access to HTML and CSS to ensure pages remained performant and secure. That’s changing now due to a technology called WorkerDOM, which brings full JavaScript integration to AMP.  The new amp-script component gives you the ability to run JavaScript from within an AMP document, all while ensuring that the experience remains safe and fast.

But JavaScript is now used in more ways than the client: One of the most popular ways to create AMP pages is through React server-side rendering. To support this use-case, we’re thrilled to share that Next.js, one of the most popular frameworks for React, is gaining first-class support for AMP. In fact nextjs.org is built entirely with AMP!

Additionally, AMP is now taking advantage of another web technology called web packaging that allows publishers to get the instant loading of AMP from their own domain. We’ve heard the feedback that AMP URLs from Google Search can be confusing or problematic, and last year began working on using signed exchanges to address this issue. We’re now excited to announce that Signed Exchange support is launching in Google Search, available to all users of browsers that support the new technology (currently Chromium-based browsers) and all websites that serve signed exchanges. This means you can now get instant loading for AMP on your own domain! See more details in this Google Webmaster Blog post or visit Cloudflare who recently announced that they are offering signed exchanges to all of its customers free of charge via a new product called AMP Real URL.

AMP as a Service

One of the differentiating features of AMP is that every day hundreds of open source contributors and dozens of full time engineers are working on making AMP better. In fact, because the AMP team and the open source community are constantly working on improvements that are shipped to all AMP pages via a CDN multiple times a month, you can think of “AMP as a Service”, modeled after the concept of software as a service.

This includes ways in which AMP is always improving your site directly with elements like image lightbox with swipe dismissal as default for many images, as well as a blurry image placeholder as an upgraded experience for images that take longer to load. Additionally AMP provides best-in-class and easy-to-integrate features like input masking, video docking or infinite scrolling for lists. And finally, we’re introducing a one-line ServiceWorker, an auto-configuring ServiceWorker that turns any AMP page into a PWA. It is preconfigured for AMP, so that it does all the right things for network resilience and improved speed out of the box, and like everything in AMP will become better over time.

Blurry image placeholder example

Driving ROI with Speed

We realize AMP’s vision is rooted in supporting the long term success of publishers and advertisers across the web. To this end we’ve seen strong recent success with AMPHTML ads, ads that are built with the underlying technology used on AMP pages. In particular, So-net, a Japanese DSP, has seen huge decreases in Ad Load time which resulted in major ad metrics improvements, such as a 34% CTR improvement. And leading Spanish newspaper EL PAÍS in partnership with Volkswagen ran an experiment combining AMP pages, AMPHTML ads and AMP landing pages, resulting in a sizable 76% conversion uplift. In other words, when AMP ensured the user-experience was great, each acquisition was 43% cheaper!

Online merchants are critical to the health and success of the web. Shopify, a platform that powers over 800,000 online businesses, supports AMP with their apps platform. Six of these apps, installed by more than 20.000 stores to date, provide great AMP versions of the Shopify storefront. Check out the full review of these Shopify apps in a recent blogpost.

Stories

We announced a developer preview for AMP Stories at last year’s AMP Conf. Stories are a new medium that was truly born on mobile, allowing users to have a visual content experience that feels native to their phone. And while many users experience story content within apps, we’ve spent much of the last year building out the capabilities of the AMP Stories format to take advantage of what is unique about a story product for the open web.  With AMP stories, publishers own their content, completely control the monetization, and design and distribute the content exactly as they like. Over the last year, we’ve seen many publishers create engaging content in the format. This week Washington Post contributor Lorenzo Tugnoli was awarded the Pulitzer Prize for Feature Photography for his rich and riveting photographs capturing the human toll of war in Yemen, which appeared in the paper as an AMP Story. The AMP Story presentation was so visually striking that it was submitted to the Pulitzer committee as the official document showcasing the photographs.

Over the past year, we’ve added many new features like page attachments, sidebars, and more robust support for a desktop experience. And story ads, with upcoming programmatic support as well as support for affiliate links provide greater monetization flexibility.

Sidebar menu in AMP stories


We also recognize that most creators of AMP Stories will prefer to use tools to create their stories rather than hand code them. We’re excited by the set of robust tools that are emerging. This includes MakeStories, an end-to-end WYSIWYG editor for making stories, that is now live to everyone at makestories.io for free this week. Additionally Unfold, one of the top story creation tools with 17M downloads is integrating AMP Stories support as part of a new premium version of their product that will launch in June. And a new AMP plugin for WordPress is launching today in beta with a built-in WYSIWYG editor for AMP Stories. In the near future the stable version will enable all users of the AMP plugin to create their own stories with no additional plugin installation.

Ensuring great stories are visible and accessible is also a high priority for platforms like Google, which announced today that it is creating a dedicated block for Visual Stories on search result pages. Google is starting with story content in the travel space and plans to launch additional blocks for gaming, movies, TV, fashion, and more.

AMP story travel block on Google Search

Emails

Finally, we announced AMP for email at AMP Conf last year to bring the power of interactivity to email, and the format is now live and ready for business. AMP for email enables email senders to create dynamic, interactive content within an email, opening up a new world of possibilities without a user needing to leave their inbox. Dynamic mail was made available to Gmail and G Suite users recently, and we are excited to share that Mail.ru is exiting their beta and launching to all users this week. In addition, the AMP for email spec has engagement from other major email providers around the world including Yahoo Mail and Outlook.com.  As each of these providers launches support, senders will scale the reach of their AMP emails to users.  And early adopters of AMP for email like OYO, India’s largest hospitality company, saw a 60% conversion lift for visitors coming via AMP emails since launch.

Onwards!

AMP has evolved well beyond its first step to help publishers speed up their content sites. With major improvements to make the library capable across websites, stories, ads and emails, AMP aims to empower developers to create great experiences across the web. The AMP team is as excited as we were on day one and remain committed to working towards our vision of a user-first open web forever.

Posted by Malte Ubl, Technical Steering Committee, AMP

Shopify Apps make AMP easy and effective for eCommerce

Ecommerce

Online retailers are always looking for ways to exceed their customers’ expectations. With most online shopping now happening on mobile devices, it’s important for merchants to deliver fast, engaging experiences optimized for mobile. Because AMP guarantees consistently fast webpages, it’s becoming an increasingly popular framework for eCommerce.

Shopify Apps add functionality or features to Shopify stores, like plugins or extensions do to other platforms. Apps built to support AMP provide an easy way to launch a lightning fast, mobile optimized AMP version of a store that users love.

The best AMP Apps for Shopify are able to easily create many page types, including product, collection, home, and blog pages. They’re free or low cost, and come with reliable support. Some integrate with third party apps, meaning AMP versions of stores will not lose critical functionality such as product reviews. These Apps generate pages can be cached and served nearly instantly when accessed through Google Search.

The most popular AMP Apps have been installed thousands of times and have received 5 stars in 87% of user reviews. AMP by Shop Sheriff has great user reviews, and has been able to grow quickly because of their focus on user experience. “Merchants using our app, as well as their customers who get to experience the AMP pages, all love the experience,” said Shop Sheriff founder Stephen Gardner. “We’re extremely proud to have 98% 5-star reviews, and maintain a 5.0 average star rating on Shopify.”  

Out-of-the-box, top Shopify AMP apps provide beautiful eCommerce templates for product, category, home, blog pages, and more, which merchants can further customize. Above is a GIF of a user seamlessly customizing their AMP pages using the AMP App by AMPify Me.

Testing the AMP versions of these stores using PageSpeed Insights show industry-leading performance scores over 90, with pages being fully interactive in just seconds. Data show that users are more likely to bounce from a page that takes longer to load, and users view more pages on fast loading websites, leading to more engagement and higher conversion rates.

For the app creators, it’s all about using technology to improve retail experiences online. “We’re committed to building technology that makes it easy for retailers to succeed online,” said Jana Filipovic from AMPify Me, a leading AMP App. “Our customers, and even users of our free products, are able to drive increased engagement and conversion rates using AMP.” Their focus on great product and user experiences have enabled AMP by AMPifyMe to grow very quickly. Over 13,000 stores have installed their App since launch in May 2018!

Shopify noted in a recent blog post that AMP by Shop Sheriff and AMPifyMe were leaders in the category of successful apps that improve mobile performance. “By helping merchants take advantage of this mobile-first opportunity, these apps were able to find success on our app store.”

Top Shopify AMP apps have a WYSIWYG editor that enables merchants to customize the look and feel of AMP pages to deliver feature rich, lightning fast user experiences. Above is the editor from Shop Sheriff.

Google recently conducted a detailed review of the most popular AMP Apps for Shopify, analyzing the apps across 5 critical characteristics. If you’re a Shopify client considering AMP, consider these when choosing a provider:

  1. Price & Support – How much will the app cost at the service level that’s appropriate for you, and will you get quality support for that investment?
  2. Ease of Use – How much work is required to set up the AMP version of your shop? How intuitive is the app’s user interface?
  3. Quality of AMP pages – How good is the user experience on the AMP version of your shop?
  4. Integration with Google tools – How easy will it be to ensure the AMP versions of your pages are cached by Google and any issues are surfaced?
  5. Third party integrations – Which of your other apps can be integrated out-of-the-box? Which can be integrated with a little more work?

Apps provide an easy path for merchants to adopt AMP on Shopify, creating a lightning fast, mobile optimized version of their pages that can help meet users’ rising expectations. Check out our review on amp.dev to see which AMP App might be best for your Shopify store.

Posted by Chris Sater, Web Product Partnerships, Google

AMP on the Times of India

WordPress

Editor’s Note: The below post was originally posted on the AMP WordPress Plugin site by the Times of India.

Site performance and user experience matter to the Times of India, and therefore we keep tabs on new solutions and advanced technologies that allow us to make our website faster, more engaging, and more user-friendly. This is why we decided to evaluate the official AMP plugin for WordPress to leverage the performance and usability advantages that AMP enables. Our goal was to evaluate the plugin on some sections of our web presence, and then scaling it across other Times of India sites.

We started this project with Timesofindia.indiatimes.com/blogs.  At the beginning of the evaluation we faced some expected challenges having to do with the need to make changes to the site to align it with AMP principles, such as CSS size constraints and the removal of 3P JS.  Some of the aspects that were tackled included the refactoring of certain components and widgets, such as the Social Share widget to implement them using AMP components,  replacing pop-ups with the AMP-lightbox component, implement tab panels using the amp-selector component, and other similar changes required to make the site compatible with AMP.  One important change was the replacement of all the Google Ad Manager/CTN ads on the site with AMP ads.

During the implementation process we took advantage of the available documentation on both AMP in general, and the AMP plugin in particular, and we interacted with AMP team to get their support in answering our questions and guiding us towards fixing all of the issues we encountered. Although the entire evaluation process took about two months, the actual implementation effort took us only about two weeks. And we are happy to report that the results were fantastic!

We are currently using version 1.0.2 of the official AMP plugin 1.0.2, since this and later versions allow us to make our entire site fully AMP compatible (i.e. AMP First). The impact on key metrics we are seeing after rolling out the new implementation was quite amazing:  a 59% improvement in page load time (11.40 secs before vs. 4.35 secs after), and early measurement data indicates the number of page views  increased by 4% . We expect this to go substantially higher as we continue to improve the experience.

The technical investment we made for evaluating a fine-tuned AMP implementation of our site setup was well worth it as it has made our pages much more user-friendly and faster. Furthermore, we are planning to scale it up across other websites in Times Internet wherever it is applicable.

Although making our site AMP compatible was a learning experience for us, the end results are rewarding and impressive, enabling a reduction in load time from 11.4 secs to 4.35 secs.

Puneet Walia: Technology head – TOI, GadgetsNow, eTimes & Mirror

Quick, Easy & Fast: 
Launching our first fully AMP WordPress site has yielded excellent results not only in terms of performance but also on ranking and revenue; we observed a spike in revenue traffic of about 4% during the first week.

Rudra Kasturi: Vice President, Organic Growth Head for Times Group Sites

AMPproject.org moves to amp.dev!

website

It’s been over 2 years since the current version of ampproject.org launched, just before the very first AMP Conf in early 2017. Since then the AMP Project has grown a lot and launched entirely new applications of AMP on the web like emails and stories. Additionally AMP resources were scattered across multiple websites like ampbyexample.com and ampstart.com. So we decided to bring everything together into something new, better organized and easier to use.

To bring all of AMP under a new home, we’re thrilled to announce amp.dev! The all new amp.dev will replace ampproject.org in order to provide developers (and their business counterparts) everything they need to know about AMP across all its various forms. And of course, it’s built entirely with AMP, using AMP optimizer to make the site load even faster when not served from a cache.

The all new amp.dev homepage

On amp.dev you’ll find information for all the applications of AMP- sorted by color across websites, stories, ads and email. Overall the documentation section was designed to make navigation as straightforward as possible. Guides and tutorials are sectioned by stages in the AMP developer workflow. This will give you the resources and confidence to build successful AMP sites at each step in your process!

Documentation across websites, stories, ads and emails

All of the existing ampbyexample.com resources, as well as the templates on ampstart.com have been migrated and integrated into various sections of amp.dev. We also have new sections like Use Cases, where you can find a gallery of different possibilities of creating with AMP. While this section only as a few items at the moment, it will continue to grow in the coming months.

The Use Cases section of amp.dev

For a brief time we’ll be leaving AMPproject.org up to allow for a smooth transition to the new site. However, in the near future we’ll be setting up redirects as we begin to turn down AMPproject.org. For now, we have banners on each site to indicate the upcoming change. The blog (what you’re reading now) has already moved to blog.amp.dev.

Finally, just as the AMP Project is a community effort, we invite you to share your feedback on the site so we can make it the best it can be. We’ve created a feedback form linked from the bottom banner of every page so we can ensure to get your thoughts and issues if something needs fixing. As with before, amp.dev is maintained on the docs repo of the AMP Project on Github, so everything is publicly viewable. You’re able to file Github issues there as well.

A big thanks to our friends at Jung von Matt TECH who have been working on this for many months. We’re excited to continue to evolve amp.dev alongside the AMP Project and to show you bits of how we did it at AMP Conf in Tokyo next month.

Posted by the core maintainers of amp.dev: Paul Bakaus, Sebastian Benz, Crystal Lambert, Matt Ludwig

Guest Post: AMP Email

Email

Editor’s note: The below was originally posted on gregable.com by Greg Grothaus, Software Engineer, Google

Google just officially launched AMP Email, with support from other webmail providers. I work for Google on AMP and worked on some aspects of this project. I thought I’d add my own thoughts on the announcement. My opinions are my own and not those of my employer.

The press has focused on the user experiences in AMP Email. This makes total sense, given the audience. My take, however, is that the more interesting development is the step towards standardizing of HTML Email. Let me explain.

Let’s take a step back and consider non-amp HTML email. The basic idea is that the sender provides two variants of each email using MIME type encoding. Here’s a simplified example:

From: "Senders Name" <sender@gregable.com>
To: "Recipient Name" <recipient@gregable.com>
Content-Type: multipart/alternative; boundary="bdac7942f697eecfbdac7942f697eecf"

--bdac7942f697eecfbdac7942f697eecf
Content-type: text/plain;

Some text content.

--bdac7942f697eecfbdac7942f697eecf
Content-type: text/html;


Some bolded html content.




--bdac7942f697eecfbdac7942f697eecf

An email client is free to choose which of these 2 alternatives to display and more importantly how to render the bytes.

An email client is not itself a web browser, even if it runs within one. Allowing arbitrary HTML email to run with the full API of a web browser simply fails. The first thing most marketers would do is add a redirect to their own site the moment the email loads.

Simply mitigating redirects and similar is insufficient. The privacy of the user reading the email must be protected. In the case of Gmail and many other webmail clients, the client actively prevents the sender from learning the user’s IP or browser fingerprint. This is fundamentally different from how web browsing works, so browsers fail to provide protection. When browsing, your browser sends your IP address, browser name, and capabilities along to every page that you visit.

A webmail client must then contort it’s presentation of HTML, a language not designed with email in mind. Webmail clients only have two ways of doing so:

  1. Show only the text version of an email.
  2. Modify the HTML before delivery such that the resulting document is safe.

Webmail clients do both. In some cases, the client falls back to text. In most cases, it modifies the HTML.

This is typically called “HTML sanitization”. For some examples:

  • <script> tags removed completely.
  • Image URLs are rewritten to load the images from the webmail provider.
  • Some or all CSS is removed completely.

In many cases, the HTML gets horribly mangled and then shown to the user completely broken, but at least it does not violate the user’s privacy expectations.

A sender must ensure that the email sent will not arrive completely broken.

Each webmail provider sanitizes HTML emails slightly differently. In some cases, not so slightly. The rules for the sanitization are necessarily complex, as HTML is complex. As a result, the documentation describing these rules is often poor or even missing. It’s almost never the case that two email providers will treat the same email the same way.

Some references to support my point:

Webmail Rendering Explained: Why Preprocessors are the enemy:

“Most preprocessors err on the side of being overly restrictive and remove anything with even the slightest potential to affect the layout of their email client.”

Developing HTML Emails for Gmail: 12 Things You Must Know:

“Many email developers know how tricky it is to develop HTML emails for Gmail – it’s one of the more temperamental clients out there (although it’s no Outlook).”

Mailchimp: Testing Emails:

“If you’re a web designer, you’re probably used to testing web pages in a few different browsers, like Internet Explorer, Mozilla Firefox, and Safari. And you’re probably familiar with a few annoying inconsistencies between all the browsers, and you have a couple hacks to make things look right. For email design, multiply all that by ten. There are tons of email applications out there that you need to test on, and they all render HTML email in their own annoying ways.”

See Mailchimp’s Email Client CSS support matrix to get an idea of the mess you can expect if you want to write an HTML email.

Beyond documentation, none of the major webmail companies provide testing tools. This has resulted in a small industry of services that exist simply to help you test whether or not an HTML email will render correctly.  Try this query to get an idea: [html email testing tool]. These services work by maintaining accounts on major mail providers, automating test emails, reverse engineering the sanitization layers, and staying on top of changes.

AMP improves on some of these problems.

With AMP Email, there is a specification for an email sender to develop against. That specification is complicated and evolving, like the others. The documentation is incomplete, like the others.

What’s different about the AMP Email spec?

There is a single specification which multiple webmail companies are implementing. The announcement lists Gmail, Yahoo Mail, Outlook.com, and Mail.Ru. The list is incomplete, but is a solid start.

Open source tooling can validate an AMP Email. Developers get detailed error codes including line numbers and documentation links. The tooling can be run locally as an NPM library or online:

A screenshot of the AMP Validator showing an example AMP Email error.

If a developer meets the specification, the promise is that the email will be correctly rendered in every supporting html mail client using every modern browser. The spec and the web mail implementations continue to guarantee the privacy of the user reading the email.

That’s the punchline as I see it: AMP Email is a consistent format that “just works” for developers trying to send HTML email.

There are a few other concerns that have been raised, but I feel some of them are uninformed, while others may be valid:

This is a proprietary format

The specification is open-source and is just a subset of HTML, but it is managed by the governance of the AMP Project. Also note that in effect HTML Email is a set of proprietary formats. No web mail provider supports arbitrary HTML.

Email should be plain text

Perhaps. There is certainly an argument to be made here. I personally suspect that users may be making the wrong dichotomy here: not that HTML email is bad, but junk email is bad and junk email tends to use HTML formatting.

Furthermore, AMP HTML Email does not change the story. No mail provider that currently does not support HTML email also does support AMP HTML email.

HTML email usage seems to be increasing. Simply bolding text or adding an image to an email makes it HTML email, which can be a better experience for most users.

AMP HTML Email still includes a text fallback mime type for users who prefer it.

Yet another format

The concern here is that since not all email clients support AMP HTML email, this effectively added 1 new mime format in each email, rather than simplified anything. This is a valid concern. However, any proposal that requires all email providers to make a simultaneous change is doomed to fail. In the long run, hopefully this simplifies and improves the state of email.

Posted by by Greg Grothaus, Software Engineer, Google

App like animation experiences in AMP

UI

The AMP UI Working Group is responsible for AMP’s visual components & interactions and AMP’s overall accessibility and experience. This means we often work on visual polish for existing components in an effort to improve a website user’s experience. As a result, existing AMP pages on the web automatically get the improved user experience with zero effort on the side of the engineering teams that deployed them. Sepand Parhami, an engineer on the core AMP team, recently worked on creating more like app animation experiences for <amp-lightbox-gallery>, showing this idea in action.

App like swipe to dismiss in <amp-lightbox-gallery>

When dismissing an image while exiting lightbox mode, the transition back to the inline image is sudden as you can see below:

Inspired by apps such as Google Photos and Apple News, Sepand worked on making this interaction more intuitive and delightful for users. While transitioning out of lightbox mode, we wanted the user to:

  • Know when they have crossed the threshold of interaction after which they are dismissing the lightboxed image.
  • Identify the position of the image inlined into the original page they were viewing.

This information is provided by the size of the image and the lightbox background changing as the image moves from lightboxed state to it’s inline position. You can see the improved experience below:

Improved transitions for entering and exiting lightbox states

Another bit of visual polish we’ve added to <amp-lightbox-gallery> is the improved transitions for all images going to and from lightbox mode. Often the inline image is cropped or scaled to focus on the important part of the image, while the lightbox view shows the entire image. This has been a hard problem to solve, as it involves interpolating between two images of different positions and sizes.

As you can see above the inlined assets are cropped to focus on the important aspects of the image worth calling out in the article. However, you can see the full image when it is in lightbox mode. You can play with this demo here.

Creating a new animation library

To create the experiences stated above Sepand open sourced an animation library which helps you transform an image from one position/size to another. In addition to scaling up, this also supports changing the ‘crop’ of the image as defined by the object-fit CSS property. He shares his learnings in creating this library here. The blog post highlights the difficulties he came across while generating keyframes, catering for CSS properties like object-fit and object-position and testing his code.

Check out the library (code, documentation, demos) to see how to deploy the library on your own page. It is also available via npm.

Continued adoption of best-practices

To ensure we are providing site users a great experience by default, the AMP team has also been ramping up another experiment that automatically lightboxes <amp-img>s on a page that meet a certain criteria. The criteria includes factors like image size and whether or not it has an action associated with it or it’s ancestors. This allows end users to better explore the images on a page without developer teams having to make extensive changes to their codebase.

Improvements like the ones highlighted above are great examples of how engineering teams who use AMP get the benefits of all of the lessons learned by other teams that contribute to the AMP Project (e.g. Google, Pinterest and AliExpress). As the AMP Project finds incremental ways of improving the end-user experience through research and experimentation, we can upgrade extensions to provide improvements to end users without the involvement of the engineers working on deploying AMP sites.

Posted by Naina Raisinghani, Product Manager, AMP Project at Google

Building the future of email with AMP

Email

The AMP Project’s mission is to enable more user-first experiences on the web, including web-based technology like email. For most of us, not much has changed in email functionality since the first time we were introduced to email. Because AMP is inherently fast and secure, we brought AMP technology to email in order to give users an interactive, real-time experience that also keeps inboxes safe.

AMP now enables all-new email experiences like being able to submit RSVPs to events, fill out questionnaires, browse catalogs, or respond to comments right within the email. Emails can also stay up to date, displaying the freshest content from comment threads or the latest recommendations.


Dynamic email built using AMP by Ecwid

Bringing AMP emails to major email providers

The AMP for email spec has engagement from major email providers around the world including Gmail, Yahoo Mail, Outlook.com, and Mail.Ru. As each of these providers launches support, senders will scale the reach of their AMP emails to users.

After a developer preview with top email senders, Gmail is launching general availability of AMP for Email today. You can head to the Gmail blog to see some illustrative examples of the email recipient experience. You can also check out these provider specific pages for additional information:

We aim to provide the highest quality email experiences for our consumers and we are excited to be one of the first providers to participate in the AMP for email spec. This allows us to enable fast, responsive, and high-performing experiences right within email.

Marcel Becker, Director Product Management for Yahoo Mail

If you develop an email provider and would like to consider adding AMP for email support, you can find more information here.

Start creating AMP emails today

Email senders can begin creating AMP emails by using the playground which allows you to edit markup and see real-time changes to your email. For more information about the supported features and syntax, head over to amp.dev. It’s important to note that some providers may have sender whitelists that limit who is eligible to send AMP emails, so be sure to register with providers if that’s the case.

If you rely on a third party for your emails, please ensure they have AMP support. The following email products already support the AMP spec or in the process of launching support soon:

  • SparkPost, an email delivery and analytics platform
  • Litmus, an email design and marketing tools suite
  • Twilio SendGrid, an email platform for transactional and marketing emails that is used by over 80,000 companies.
  • Amazon SES and Amazon Pinpoint, cloud-based email sending and analytics services for transactional and marketing emails
  • More are in progress, so contact your email service providers to find out if they support AMP email

AMP emails are designed to be compatible in the current email ecosystem with the introduction of a new MIME part. This design allows emails to fall back to HTML if a provider or email client doesn’t support AMP emails yet—learn more about the spec and recommended guidelines.

New AMP email working group

To make AMP the best user-friendly email experience, we need your help to contribute to its direction. This is why we created the AMP for email working group under AMP’s governance model, a way to channel feedback from senders and providers to support ongoing spec improvements.

The two goals of this group are to:

  1. Increase email provider knowledge sharing to promote higher cross-provider compatibility of sender emails
  2. Channel community feedback to senders and providers to support ongoing innovation of the spec

If you are an email provider, sender or would simply like to get involved in the AMP for Email working group, you can file discussion issues on the ampproject/wg-amp4email repository or come chat with us at #wg-amp4email on Slack.

With the email spec being open source, strong multi-vendor support, a gradual migration strategy, and an open working group to have everyone’s voice heard, we’re looking forward to building a better email experience for everyone.

We look forward to your involvement!

Posted by Vamsee Jasti, Product Manager, AMP Project


Encouraging More Voices in AMP

Governance

Last year we implemented changes in AMP’s governance model to encourage a wider variety of voices in the AMP community and to make it more clear how people can have a voice.  I’m happy to provide some updates on our progress towards these goals.

AMP’s Technical Steering Committee and Advisory Committee have started meeting

As part of AMP’s new governance model the Technical Steering Committee (TSC) sets AMP’s product and technical direction and the Advisory Committee (AC) provides advice to the TSC.  With these two groups we have representatives from nearly 20 companies & open web advocates helping to guide the AMP community towards our vision of “a strong, user-first open web forever.”

The TSC has now had several meetings, covering a range of topics from GitHub repository best practices to what AMP’s first set of Working Groups should be.  The AC also had their first meeting where they kicked off a conversation regarding horizontal reviews, a topic on which the TSC has asked for input.

If you have something you’d like to raise with one of these committees, you’ll find out how to do this in their “working mode” documents (TSCAC).

Working Groups are ready for you to get involved

One of the TSC’s first acts was to establish the initial set of AMP Working Groups (WGs).

Working Groups are where the day-to-day work in AMP gets done.  A Working Group is responsible for a certain part of AMP, such as the Stories WG, which is responsible for AMP’s story format.

The Working Groups are intended to make it easier for people to keep track of different parts of AMP and to get involved.  To help with this, each Working Group has a GitHub repository that documents how to get updates on the Working Group’s work and how to get involved–from participating in discussions on issues and Slack to contributing bug fixes, features or other improvements.

I encourage you to find the Working Groups responsible for the areas you’re passionate about and to get involved!

We’ve made our process for making changes to AMP more clear

Although we’ve always said we strongly encourage contributions to AMP, we’ve heard it can be challenging to figure out the process for proposing and making changes and even to know where to get help.

Due to this feedback we’ve been working to improve and clarify the process for making changes in AMP, inspired by Chromium’s process for launching features.

Some of the highlights of these updates:

  • We’ve made it more clear that small changes are easy to make without a lot of process overhead.
  • We’ve added a slightly more formal launch process for significant changes, including the use of Intent-to-implement (I2I) and Intent-to-ship (I2S) issues and a more well-defined way of getting approval for making significant changes.
  • We’ve made it easier to find a reviewer who can help you through the process of getting your change built and launched.

With AMP’s new governance model and contribution process updates in place we hope it’s easier than ever for you to stay up-to-date on what’s happening in AMP and to get involved! 

Posted by Joey Rozier, AMP Engineering Manager at Google