What’s new in AMP, Q4 2018

A new, open governance model for AMP

In a separate blog post, we discussed our intent to move to a new governance model for the AMP Project.

AMP Linker

For browsers that restrict third-party cookie access, AMP Linker is a new way to keep user sessions in sync. See our announcement blog post for details and how to implement them on your webpages.

“Infinite scroll” with amp-next-page

<amp-next-page> (now available as an experiment) supports what some call “infinite scroll” of articles. Developers can specify up to three URLs to load when the user gets to a specified scroll-depth in the page, and those documents will load seamlessly inline.

image1

 

Tilt-bound animations with amp-orientation-observer

<amp-orientation-observer>, which supports low-level syncing between the orientation of a user’s device and frames in a given animation, is now launched. With this you can create a range of effects, like subtly shifting the background of your page, panning images, or advancing an animation on tilt. You can even create a layered 3D space by shifting multiple overlaid components of a scene at different rates.

image4

 

Compare images with amp-image-slider

<amp-image-slider> gives users the ability to compare two images as overlays. This can be especially useful for “before & after” photos. Read more about that component in our recent blog post.

image2

 

AMP Story Ads support with Google Ad Manager (Beta)

Google Ad Manager now supports delivering direct sold advertising by publishers to the AMP Stories they produce. You can read more about it here.

image3
Look for the Google Pixel 2 ad as one of the story pages

The best of the rest

  • We launched several new components:
    • <amp-pan-zoom>, supports panning and zooming of inline interactive content. This helps users with a range of use cases, such as checking out details on a product image, or picking seats in an interactive seat map.
    • <amp-date-picker>, supports inputting dates and date ranges into forms. This was previously launched as an experiment, and is now generally available. More details here.
    • <amp-date-countdown>, displays a dynamic countdown to a given date and time.
    • <amp-google-document-embed> displays document files like Word documents, Excel spreadsheets, and PDFs inline in AMP pages.
  • Developers can now customize transitions in and out of the existing <amp-lightbox> component.
  • MOAT has launched beta support for instrumentation of viewability and spam detection for AMPHTML ads. Please reach out to MOAT to participate in the beta.
  • Email providers can integrate with AMP for Email using the instructions here.

Upcoming features worth a shout

  • Ever want to continue watching a video while reading an article about it, or read the directions for a recipe while watching someone actually make it? The “dock” attribute on <amp-video> will soon support minimizing video to the corner of the viewport when the user scrolls. Developers will be able to customize where and how the video docks.
  • <amp-video-iframe> will soon support a set of features available to amp-video and other third-party video components (the above minimizing video feature, for instance) for videos embedded inside of an iframe.
  • Just as AMP now has <amp-next-page> for“infinite scroll” documents, coming soon is the same behavior for page elements in a list. This will be useful for endlessly scrolling list elements like search results and product cards.
  • Input masking will soon help users fill out forms more efficiently by automatically adding formatting like spaces and interstitial characters specified by developers.
  • Support for the IAB transparency and consent framework is coming soon as part of <amp-consent> along with the ability to integrate 3rd party CMPs. If you are a CMP or publisher who’d like integrate with the IAB consent framework on AMP pages, please reach out to us on GitHub.
  • The <amp-ima-video> player is being enhanced with new features and bug fixes including adding missing mute/unmute buttons, fixing hidden controls while playing and ability to loop the video.
  • Support for sticky ads in desktop when fixed position on the left or right rail of the page

* * *

Thanks to the AMP development community for your work and feedback. As always, please let us know if you have any issues or feature requests.

Posted by Eric Lindley, Product Manager, AMP Project at Google

What’s new in AMP, Q4 2018

AMP Contributor Summit: Learnings & Takeaways

We held the first ever AMP Contributor Summit late last month, bringing together more than 80 developers from the open source community to meet each other face-to-face, talk about the latest developments in AMP and discuss where AMP should head into the future.

IMG_20180924_150010-01

The summit kicked off with a New Contributor Day for people who were new to contributing to AMP.  After a series of talks covering the basics of AMP extensions and how to get code reviewed and merged, we spent the afternoon writing code.  We had 46 pull requests created on New Contributor Day alone, including many from people who had never contributed to an open source project before!  If you’re interested in contributing to AMP but weren’t able to make it to the summit, check out the New Contributor Day talks and maybe even try the beginner or advanced codelabs!

IMG_20180925_133247

On the second day of the summit members of the community gave talks to bring everyone up to speed on the latest in AMP and to get the attendees thinking about AMP’s future.  Malte Ubl kicked off the day with an overview, and then a range of topics were covered throughout the day, including JS in AMP the proposal to change AMP’s governance model and fixing AMP URLs.  All of these talks are now available on an AMP Channel playlist.

For the last day of the summit the attendees split up into a wide variety of discussion groups.  These discussions were primarily forward-looking, focused on deep technical topics, “what’s next” for specific areas and how to make AMP better for end-users and developers using AMP.  Some examples of the topics discussed are the future of AMP Stories, improving interactivity in AMP, using AMP components outside of AMP pages and how to increase contributor diversity.  A complete list of topics with notes from most of them is available and more.

IMG_20180926_163001-01

We were happy to see positive feedback from the summit attendees regarding the overall experience, the content and the sense of community that resulted from the summit.  We’re planning on having more summits like this in the future and hope to see you at one of them!

Posted by Joey Rozier, AMP Engineering Manager at Google

AMP Contributor Summit: Learnings & Takeaways

The latest results with AMP

In 2016, Australian car insurance comparison service Greenslips.com.au, embarked on a website redesign. After looking at possible web frameworks to meet their needs, they chose to rebuild their website with AMP. This allowed their developer team to maintain a single code base which ensured great and fast experiences on both desktop and mobile. Since launching their entirely “AMP-first” site earlier this year, Greenslips.com.au has seen a 12-15% (device dependent) increase in conversion rates on top of the expected speed gains of 15%.

greenslips_graphic
Greenslips.com.au saw a 12-15% increase in conversion rates

Greenslips.com.au isn’t alone. We’ve seen many recent examples of businesses in both the publishing and e-commerce space see success with implementing AMP on their websites. In the last month we’ve published 5 new case studies on AMPproject.org — with more on the way. While each of these cases is unique, we hope that by sharing them, both businesses and developers can better understand how embracing AMP might benefit their own websites.

Indian publishers like The Tribune and Jagran New Media have seen revenue increases on their AMP pages, which are paired with their traditional site. In particular, Jagran New Media saw a 4.5x increase in revenue from mobile, along with an increase in traffic. Readwhere, the CMS provider used by The Tribune, is seeing both higher mobile revenue and ad viewability on their AMP pages.

jagran_graphic
Jagran New Media saw a 4.5X increase in mobile revenue

We also have seen e-commerce websites benefit from the speed and user advantages AMP can provide. Indonesian e-retailer Tokopedia has seen a 5X increase in conversions and a decrease in bounce rate from their AMP implementation. And when AMP is used with advertising solutions like AdWords, businesses often see gains from their campaigns. DiscoverCarHire.com in particular saw a 22% increase in mobile visits and 29% more conversions from mobile devices through its Google Ads.

tokopedia_graphic
Tokopedia saw 5X higher mobile conversion rates

Check out the new AMP case studies below and subscribe to our newsletter to get the latest AMP Project updates in your inbox.

Have you seen success with AMP? Let us know by reaching out on Twitter or by dropping us a note in this form!

Posted by Matt Ludwig, AMP Project marketing lead at Google

The latest results with AMP

How to make AMP even faster

We’ve just published a new guide on ampproject.org: “Optimizing your hosted AMP pages” explaining how you can optimize AMP documents so that they load even faster.

You may be thinking: wait – isn’t AMP supposed to be fast out-of-the-box? And you would be right: the AMP runtime is optimized for speed and all valid AMP pages load fast. However, there are additional performance optimizations you can implement to help the browser load AMP pages even faster. These changes are trivial, but can significantly improve loading performance without breaking AMP validity.

For example, the AMP WordPress plugin, which is being developed by XWP, already implements some of the techniques described in the guide. This resulted in the loading time for xwp.co improving by 12.6%.

Another example is Evening Standard, they go one step further and publish optimized AMP with server-side-rendering (SSR). This resulted in their FCP improving by 69% over their valid AMP version.

 

Why should you care?

Let’s take a step back. Is this even necessary? Aren’t AMP documents always served by an AMP cache that automatically performs all these optimizations? That’s true for some cases, such as when AMP documents are surfaced in Google or Bing search results. But there are other cases were AMP documents are served from the origin:

  1. When your canonical or mobile web pages are built with AMP, such as https://tasty.co.
  2. Other platforms link to AMP documents on the origin. For example, Twitter started linking to AMP pages instead of delivering the standard mobile version. This means that if a user clicks a link in one of Twitter’s mobile apps, the link goes to the AMP version of your page on your own server.

For these cases, where you are serving AMP pages from your own servers, it is important to make sure that your AMP pages offer the optimal loading performance.

 

How to help the browser load AMP pages faster?

Let’s take a quick look at how optimizing AMP’s loading performance works. The AMP runtime needs to be loaded for AMP specific elements such as amp-img or amp-video to work. This means an amp-img will only start downloading an image once the AMP runtime has been loaded.

This gives us two opportunities to make AMP pages load faster:

  1. Make sure that the browser downloads the AMP runtime as quickly as possible.
  2. Tell the browser to start downloading important assets such as images even before the AMP runtime is available.

The key to achieving this is using resource hints such as rel=preload to prioritize the download of critical resources. The AMP optimization guide describes different ways how you can use resource hints to optimize AMP pages. It’s also a good idea to take a look at the AMP Boilerplate Generator which allows you to quickly generate optimized AMP templates.

 

How to improve first-contentful-paint?

It’s also possible to take performance optimization one step further. The AMP runtime implements a static page layout system to reduce rendering and scrolling junk. The way it works is that the AMP Boilerplate code initially hides the document until the AMP runtime is loaded. Once it’s loaded, the runtime calculates the layout and shows the content. The downside of this approach causes the user to see an empty page until the AMP runtime is loaded and it does not support progressive rendering.

To offset the negatives, first-contentful-paint (FCP) times can be improved by using AMP server-side-rendering. This way it’s possible to remove the AMP boilerplate so that the AMP document can be painted without running the AMP runtime JavaScript. For example, the server-side rendered version of the AMP Boilerplate Generator renders twice as fast as the normal AMP version:

blog-how-to-make-amp-faster-filmstrip
Check out AMP Optimizer to learn how to optimize AMP documents on your server.

What are the performance gains?

To find out how optimizing affects loading performance I’ve created three different versions of the AMP Start Bike Shop template’s landing page:

    1. No Images: to simulate the best case scenario where no visual content depends on the AMP runtime being loaded.
    2. Images: to show loading times when content depends on the AMP runtime being loaded.
    3. Self-hosted Font: to demonstrate the impact loading custom fonts.

For each page, I tested four different variants:

  1. Original: the original valid AMP version.
  2. Optimized: an optimized valid AMP version, which implements the following optimizations:
    1. optimizes runtime loading
    2. preloads the hero image (when applicable)
    3. optimizes custom fonts (when applicable).
  3. Optimized + SSR: implements the same optimizations as the previous version, but additionally uses server-side-rendering via AMP Optimizer. Note: this version is not valid AMP.
  4. Cache: as a reference the version served by the Google AMP Cache.

All tests are run three times by Webpagetest in Chrome on a Motorola G (gen 4) on a 1.6 Mbps 3G connection with 300ms of latency. You can find the full results including links to Webpagetest in this doc. As tests are run on a real device, execution times might vary.

Now, let’s take a look at the results:

 

No Images

Load Time (s) Start Render (s) First Interactive (s)
Original 4.569 4.569 4.424
Optimized 4.564 -0.11% 4.564 -0.11% 4.423 -0.02%
Optimized + SSR 2.233 -51.13% 2.233 -51.13% 4.48 1.27%
AMP Cache 2.039 -55.37% 2.039 -55.37% 3.508 -20.71%

The >50% faster load times for the server-side rendered version clearly demonstrates the advantages of server-side rendering AMPs. However, time to interactive is unchanged as it still depends on the AMP runtime being loaded.

 

Images 

Load Time (s) Start Render (s) First Interactive (s)
Original 5.435 4.591 5.367
Optimized 4.591 -15.53% 4.566 -0.54% 5.094 -5.09%
Optimized + SSR 4.095 -24.66% 1.892 -58.79% 4.818 -10.23%
AMP Cache 3.827 -29.59% 1.834 -60.05% 4.13 -23.05%

Here we can see that preloading images significantly improves load times. The valid optimized AMP version loads 15% faster, whereas the Optimized + SSR version “only” loads 24% faster. This is because image rendering depends on the AMP runtime being loaded.

 

Self-hosted Font

Load Time (s) Start Render (s) First Interactive (s)
Original 5.509 4.609 5.424
Optimized 4.55 -17.41% 4.53 -1.71% 5.112 -5.75%
Optimized + SSR 4.478 -18.71% 1.989 -56.85% 5.203 -4.07%
AMP Cache 3.978 -27.79% 1.847 -59.93% 4.317 -20.41%

In this case, the overall load time difference between Optimized and Optimized + SSR becomes very small as the server-side rendered version is delayed by the additional font download. However, rendering still starts much faster with server-side-rendering.

Note: the AMP Cache is faster in all cases. There are two main reasons:

  1. it performs additional image optimizations
  2. it does not need to establish a second https connection to download the AMP runtimes as the runtime is served from the same domain.

 

Conclusion

We’ve seen that it’s possible to make AMP pages load even faster on your own server. The key takeaways for everyone publishing AMP pages are:

  1. Websites hosting paired AMPs should implement the recommendations in the AMP optimization guide to ensure best loading performance from Twitter and other platforms linking to non-cached AMP documents. A few trivial changes can already mean that an AMP page loads 1 second faster.
  2. Websites built with AMP should consider using AMP Optimizer as it enables progressive rendering and greatly improve FCP times.

We’re actively working on discovering new optimizations and improving the AMP loading experience.

Posted by Sebastian Benz, Partner Developer Advocate, Google

How to make AMP even faster

Setka provides beautiful post design with AMP

Editor’s note: The following was originally posted on Setka’s blog.

amp-post-3.png

Setka has integrated its WordPress plugin with the AMP WP plugin

Technology company Setka creates products that help publishers and brands easily make beautiful and engaging content. Setka is a WordPress VIP Technical partner. One of those products, Setka Editor, is a WYSIWYG editor that allows users to put together well-designed article pages without having to code. Its team is distributed and based in San Francisco, New York, Berlin, Minsk, and Moscow.

Now, Setka has integrated its WordPress plugin with the AMP WP plugin. When installed on the same website they automatically increase the loading speed for mobile pages while retaining stylistic and branding elements.

Read on to learn more about this improvement, and to see how it worked on RealtimeBoard’s corporate blog.

The challenges of AMP integration

Setka saw several advantages in integrating with AMP clients who use editorial content as one of their key marketing pillars for brand building, lead generation and lead nurturing: pages load faster, caching happens on Google servers, and clients can create beautiful, customizable designs that work well on mobile devices.

“We wanted to make the editorial content created by the users of our WordPress plugin 100% AMP-ready, while having any design elements, including interactive and animated ones, be in the AMP format.”

Katya Bazilevskaya, the co-founder and CEO of Setka

To ensure speed and usability on all devices, Setka had to implement all the requirements for AMP format: proprietary HTML tags, the restrictions of adding external scripts that aren’t part of AMP libraries, and the maximum size for inline styles up to 50 kb.

In addition, Setka wanted to make sure it worked with all three modes in the AMP WP plugin:

  • ‘Classic’ offers a ready-made template for the theme and allows Googlebot to index the pages of the site as soon as the plugin is installed.
  • ‘Paired’ assumes that the owner of the website or the creator of the theme has created separate templates for AMP and other versions of the website.
  • ‘Native’ is seamless integration, where the website is created specifically for AMP, and there is no need to create separate links, templates, and so on.

The Setka Editor plugin retains functionality in all three modes and allows users to convert separate elements into an AMP notation.

Setka’s solutions

As part of the integration, Setka developers wrote four sanitizers for elements that weren’t compatible with AMP notations and created smaller files for styling elements that are in line with the design demands.

  1. The animation sanitizer converts Setka Editor animations into AMP animations while keeping any interactive features like activation on a specific user action or elements that change state.
  2. The embed element sanitizer transforms a responsive embed into relevant AMP elements and correctly integrates them into the page.
  3. The gallery sanitizer transforms the component for displaying a series of images into the relevant AMP element.
  4. The image sanitizer displays the srcset attribute with all available resolutions, allowing the browser to decide which size is best for the user. This makes loading images faster and allows content to adapt to a device’s screen size.

So that clients can set up themes for displaying content, Setka created the Style manager. In it, the user can configure styles for different elements on their pages. For integration with the AMP plugin, the developers changed the process of generating styles and managed to fit into the 50 kb limit, leaving some space in size for adding external styles from plugins.

Thanks to the tree shaking technology that XWP created, the AMP WP plugin only chooses the styles actually used on the page, removing extra ones from the final version. This allows various plugins to add styles without the risk of the page not passing the AMP validation.

Even clients of the WordPress VIP platform can use the plugin because it considers the specific infrastructure of the platform, including its file system.

amp-post-1.jpg

Increasing page load speed for RealtimeBoard

The first project that Setka tested this solution on was for RealtimeBoard, a software company working on a visual collaboration platform for distributed teams.

RealtimeBoard’s company blog is an important part of their marketing strategy. The team wanted it to stand out among similar solutions in the technology space, which involved careful consideration of its corporate identity. That’s why the design for articles, interviews and case studies is created with the Setka Editor.

amp-post-2.png

At the same time the RealtimeBoard team was interested in the capabilities of AMP for  increasing the speed of mobile page loading while retaining the diversity of design elements.

Setka developers helped adapt the WordPress theme of the RealtimeBoard blog in paired mode. Thanks to the release of the Style Manager, the styles used on the website were ready for AMP content. After implementing AMP, average First Meaningful Paint time of the blog pages was reduced from 7,2 to 1,9 sec.

First Meaningful Paint and Time to Interaction metrics are measured using Lighthouse 3.0.3 in Chrome DevTools with enabled network throttling (fast 3G, 4X CPU Slowdown) for a particular page loading from Google AMP Cache. Time in the video is shown in seconds

“We strive to create content with attractive and unusual design. At the same time we want it to be convenient for our users to load our articles on mobile devices. It took several easy steps to generate AMP pages, which gave us the opportunity meet our users a little quicker.”

Yegor Korobeynikov, Head of Brand Experience at RealtimeBoard

Setka provides beautiful post design with AMP

Optimize your AMP pages for high ad viewability rate or high ads served

Editor’s note: The following was originally posted on Medium by Vamsee Jasti, AMP Product Manager at Google. This post is part of a larger AMP monetization series.

I’m endlessly fascinated that an advertiser would pay for an ad impression that a user never saw. Yet, that’s how most default ad contracts are written. Many brands are changing how they negotiate contracts or redefining what they’d consider viewable. Plus the terminology itself can be confusing.

Balancing page viewability rate with ad served

Viewability rate (also known as viewability %) is defined as (number of ads viewed / total number of ads served) X 100. Depending on the advertisers it works with, a publisher uniquely configures its site for higher viewability rate or for increasing the number of ads served since they are inversely correlated.

In AMP, tweaking your pages to drive higher viewability rate or views is easy for publishers using the ‘data-loading-strategy’ attribute on the `amp-ad` component.

Data Loading Strategy on amp-ad

The data loading strategy attribute takes a float value between [0,3]. The value represents the number of viewports between the user and the ad on the page. The smaller the number, the longer the runtime will wait to make the ad request and vice versa. If you are a publisher that wants to increase viewability rate, then you’d keep this value to be as small as possible and if you set this to a larger value (e.g. 3), you are instructing the runtime to start loading the ad as long as it’s within 3 viewports of the user’s location on the page.

<amp-ad width="300"
  height="250"
  type="a9"
  data-loading-strategy=1
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

If a publisher doesn’t configure this value or the value is set to ‘prefer-viewability-over-views’, then the runtime sets the float value to a default value of 1.25, which is the tried and tested value to deliver a high viewability rate without drastically impacting the total ads served.

data-loading-strategy="prefer-viewability-over-views"

Effect of Render on Idle

Last year, the DoubleClick Fast Fetch extension introduced a mechanism called ‘Render on Idle’ where the runtime would start to request ads that were very far below the viewport if the runtime detected that it was done loading all other components on the page and was idle. As a result, this would lead to a drop in viewability rate but would increase the number of ads served improving the chances of an loading in time for the user to view it. Therefore, note that if you configure ‘data-load-strategy’, then render on idle would be disabled on the page.

As the industry makes its shift towards compensating for viewability vs views, publishers can easily configure and test different strategies for ad loading by changing a single line of code on AMP pages.

Publishers can even consider configuration at the CMS level for additional flexibility.

Thanks to Rudy Galfi and Maggie Shiels for this post.

Optimize your AMP pages for high ad viewability rate or high ads served

The Action Network goes “All In” on AMP

Editor’s Note: This post is a summary of an article from The Action Network by André Bandarra, Developer Advocate at Google.

I’ve been working for a few months with The Action Network, a publisher focused on covering legalized sports betting in the U.S., to help them implement and serve AMP pages across their site.

The new experience was rolled out throughout August and it is not only fast, improving the time to first-paint by 66% and the time to fully load the article by 64%, but also rich and responsive, with the new pages being served to users both mobile and desktop.

I used the Chrome User Experience Report to verify the impact of this change for users and, even though the released happened during August, it’s already possible to see that the number of users having an experience considered fast (First Contentful Paint below 1.5s) on their phones jumped from 35% to 61%, with further improvement expected on next month’s report.

 

image1
CrUX report for https://www.actionnetwork.com – First Contentful Paint / Phone

 

The Action Network recently published an article highlighting both the user experience and developer benefits of using AMP, such as a robust component library that enables best practices such as lazy-loading blocking resources and the availability of tools such as the AMP Project website, AMP By Example, and the Search Console reporting tool.

Read the full article on The Action Network.

Posted by André Bandarra, Developer Advocate at Google

The Action Network goes “All In” on AMP