Ads and AMP: Year in Review and Looking Ahead

In the world of online advertising, the saying “time equals money” seems more pertinent than ever. Consumer attention is a scarce commodity, meaning ads need to be not only relevant and engaging, but also fast.

Since the Accelerated Mobile Pages (AMP) Project launched in October 2015, over 31M domains have embraced AMP to grow their business with faster and better mobile web experiences. In the past year alone, we’ve seen publishers on AMP reach several milestones: they’re generating up to $6 million per week from ads using Google AdSense and Doubleclick Ad Exchange, earning 3X more revenue per day, and leveraging over 100 ad tech platforms supporting the open source AMP Project.1

hero_image_2

Publishers like MailOnline Advertising are implementing optimized strategies to maximize revenue on their AMP pages. After adjusting their AMP monetization strategy to include a server-side unified auction using Prebid, they saw a 6X increase in AMP revenue on their site Metro.

Another AMP partner, India Today, is seeing 23% more revenue on their AMP pages compared to non-AMP pages, despite having fewer ads on their AMP pages. Like MailOnline and India Today, all publishers should approach monetizing their AMP pages with the same optimizations as their non-AMP pages to ensure they are capitalizing on this growing revenue opportunity.

But we know there is still progress to be made. Today at AMP Conf, we announced several new partnerships and technologies to help the entire ecosystem continue growing their businesses with AMP in more flexible and open ways.

Greater flexibility and performance with regular ads on AMP

When the AMP Project was launched, a top priority was ensuring ads did not get in the way of the AMP experience. Since then, the AMP Project has worked hard to bring better performance and capabilities to ads on AMP.

A key step along the way was the release of Fast Fetch, a faster mechanism for loading ads on AMP pages. Fast Fetch renders ads up to 2.7 seconds faster compared to the legacy mechanism. A lot can get done in 2.7 seconds. In fact, in 2.7 seconds, there are over 130,000 Google searches made, 140,000 YouTube videos viewed, and 5,000,000 emails sent.2 Since announcing Fast Fetch in August 2017, we’ve shifted our focus to making sure all AMP partners can apply the speed and performance of Fast Fetch to their own businesses.

2.7seconds

Today we announced Real-Time Config, a new component enabling publishers to implement third-party technology partners while also leveraging the speed and performance of Fast Fetch. Real-Time Config allows publishers to leverage the benefits of Fast Fetch without compromising their monetization strategy. For example, publishers can now leverage their data management platforms or server-side demand aggregators such as Prebid Server on their AMP pages.

Expanding AMPHTML ads with new tools and partnerships

While ad serving is one component that impacts AMP monetization—the ad creatives themselves are another. We recently rebranded AMP Ads as “AMPHTML ads” with the goal of accelerating awareness and support for these faster and more secure ads.

AMPHTML ads load up to five seconds faster than traditional ads and prevent the spread of malware, ensuring a brand’s experience is both viewable and secure. AMPHTML ads also work across both AMP and non-AMP pages, so creative developers can build once and serve their ads anywhere.

A number of technology partners already support AMPHTML ads, including Triplelift, Celtra, and DoubleClick. Today at AMP Conf, we moved closer to the goal of making all ad experiences on the web faster and more secure, with AdZerk, Logicad, and Google Web Designer  announcing support for AMPHTML ads. After building support for AMPHTML ads, Japanese marketing technology platform So-net Media Networks (Logicad) saw a 33% decrease in ad load time and 30% increase in CTR.

To start delivering faster, more secure, and better performing ad creatives with AMPHTML ads, leverage one of the open-source AMPHTML ad templates on AMPbyExample or reach out to a supporting platform to help you get started.

AMPHTML Ads Demo Gif

The AMP Project was launched with the goal of making the open web better and faster for all. We look forward to continuing our work with the entire ecosystem to help our partners build growing and sustainable businesses with AMP.

Posted by Gabe Bender, Product Marketing Manager, AMP Project, Google

1 Internal Data, Google, February 2018
2 Internet Live Stats, February 2018

Ads and AMP: Year in Review and Looking Ahead

AMP’s New Horizons

Hallo uit Amsterdam! We’re kicking off the second AMP Conf today in Europe, celebrating the global reach of the AMP community. This year we have over 400 developers joining the AMP team in Amsterdam for two days and thousands more watching the livestream, marking our biggest event yet. Since last year’s AMP Conf, we’ve seen AMP continue to grow globally as more websites adopt and experiment with the format, with strong results. Europe is home to many AMP websites like Spiegel Daily, which was built with AMP, that demonstrate the strength of the format across devices. And Russian web design studio Eski.Mobi are using AMP for their ecommerce clients, seeing double digit conversion rate increases across many sites.
As a result, there are now over 31 million domains that have created more than 5 billion AMP pages across  publishing, ecommerce and travel. We’re excited and encouraged by the progress, but there is much left to do to continue improving the web user experience. The AMP team is focused on expanding AMP’s horizons, taking its benefits to more websites and platforms across the web.

Telling visual stories

Content consumption on the web continues to evolve, especially on mobile. And while some stories are told best through text, the AMP Project wanted to ensure publishers can invest in new ways of storytelling and engaging readers on the open web. That’s why we’ve been working on the AMP story format.

image2

AMP stories use the technical infrastructure of AMP to provide a reliably fast, beautiful experience on the web. And AMP stories live on the web, being hosted on a publisher’s site and can be easily shared or linked. Check out some of the latest examples of AMP stories on ampproject.org/stories. Today AMP stories are available for everyone to try on their websites. As part of the AMP Project, the AMP story format is free and open for anyone to use.

Empowering commerce

Ecommerce websites have also seen progress with AMP as the format matures to support greater interactivity. Like US Xpress which is projecting to save over $1M a year using AMP pages to recruit truck drivers, or Event Tickets Center which has seen a 20% lift in conversion rates compared to their responsive site. The AMP team is committed to providing e-commerce websites with new functionalities like the datepicker and payment methods to make AMP sites even more useful. And we’re excited to highlight AliExpress in particular, which just launched their new AMP mobile site, decreasing load time by >40% and increasing conversion rates for new users by >4.3%.

image3

The AMP ecosystem

The growth of AMP is also a result of strong support across the web ecosystem. Platforms and services across the globe such as Baidu, Sogou, VK (Russia), 360 Search and Twitter link out to AMP pages. Twitter in particular has seen positive results with their AMP support, seeing a 10% reduction in page load abandonment on AMP pages compared to non-AMP. Many publishers and businesses have websites that rely on a CMS platform. Sites on platforms such as Drupal, BigCommerce and Squarespace are able to publish AMP pages. And today, Google, together with XWP and Automattic, released the 0.7 version of the WordPress AMP plugin to better support an all-AMP experience in WordPress. We’re committed to ensuring the web ecosystem allows for the creation of AMP pages.

New surfaces for AMP

Last year, we looked at everything AMP was capable of and saw a huge opportunity for AMP to modernize one of the most popular and widely used communication channels: email. Today we announced AMP for Email — a new way to include AMP components in email messages across all platforms. Many people rely on email for information about flights, events, news, purchases and more— over 270 billion emails are sent each day! With AMP for Email, information in email messages can be dynamic, kept up-to-date and made actionable. We’re really excited about the possibilities — developers and businesses will be able to send more expressive and interactive email messages than ever before.

Companies like Pinterest, Booking.com and Doodle have already built new experiences using AMP for Email, and we’re excited to see what others will do soon. The AMP for Email spec is available today and Gmail is planning to support it later this year. In the meantime, developers can access a developer preview for Gmail, here.

image1

Community

Ultimately the success of an open source project like AMP is dependent on the contributions and support across the web. I speak for the entire AMP team when I say that we are extremely grateful for all the input, contributions, and support we’ve seen over the past several years. We have over 560 contributors on Github, with the majority (88%!) outside the core AMP team at Google. And as always, we sincerely would love for more of you to get involved and build the project with us. Our weekly design reviews, now at global-friendly times, are a great way to get started.

image4

While there is still more to be done, we’re excited by the enthusiasm for making the web a place where users and websites can thrive, and I hope I’ve conveyed the energy in the room here in Amsterdam. Be sure to watch all of the talks from this year’s AMP Conf on AMPproject.org/amp-conf and follow us on Twitter using the #ampconf hashtag. Proost!

Posted by Malte Ubl, Engineering Lead, AMP Project, Google

AMP’s New Horizons

New in AMP: Date picker, easier CSS development, and more AMP By Example content

We’re back with another post to highlight the most notable changes to AMP in the past few months.

amp-date-picker experimental beta

date-picker.png

Our new date picker is now available for experimenting with. To get started, make sure that you enable the Dev Channel and run the following command in the devtools console:

AMP.toggleExperiment(‘amp-date-picker’)

Full details for opting into experimental features can be found here. While we don’t have our documentation for this component live yet, basic details can be found on the Github issue and you can check out our example implementations (generic example, travel example).

Since this component is still experimental, you won’t be able to launch with it yet. Instead please try it out and let us know any feedback on the Github issue.  

replace-important npm package

important-npm.png

Developers using AMP will already be familiar with some of its CSS restrictions. After hearing feedback that a few of these in particular have been stumbling blocks in the wild, we started thinking about how to make styling AMP pages a little easier. One of the first resources we’re rolling out is an npm package that replaces “!important” styles (which are disallowed in AMP) with equivalent rules that validate.

AMP by Example updates

We recently held a short sprint to get some new samples in AMP by Example—check out some of the results here:

As part of building our checkout flow sample, we also tested integrations with different payment providers. We were able to successfully build form submissions integrating with Authorize.net, Vantiv, WorldPay, and Card Connect. But don’t just take our word for it – try it out and let us know if you have trouble with your implementation.

spinner.gif

A fidget spinner example built during our recent AMP By Example sprint

The best of the rest

  • We’ve launched implementations for the Media session API, for both amp-audio and amp-video.
  • AMP Showcase on AMPproject.org highlights websites using key features of AMP.
  • makes it possible to apply AMP’s layout system to arbitrary containers.
  • now automatically loads the scripts for AMP extensions that appear inside of updates.
  • A new error trigger for use with amp-analytics that can capture and report problems attributable to the author of the page or to software that is used in publishing the page.
  • We’ve launched the ability to serve video ads with a built-in video player to AMP pages from Doubleclick and other vendors that support the IMA SDK.
  • Publishers can now schedule their ads to refresh after a set time interval.

The roadmap ahead

See more in the full roadmap.

* * *

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 on GitHub.

Posted by Rudy Galfi, Product Manager, AMP Project

New in AMP: Date picker, easier CSS development, and more AMP By Example content

Making it easier for the global AMP community to participate in design reviews

The AMP Project community is global–with over 400 developers from around the world contributing to AMP–yet the design reviews have thus far been held at a time that was generally convenient only for people in the Americas.  We’ve heard the feedback from members of the global AMP community and we are happy to announce that the weekly AMP design reviews will now rotate between times that are more convenient for different regions of the world (Americas, Africa/Europe/western Asia and the rest of Asia/Oceania).

IMG_20170809_134203.jpg

Each GitHub issue that tracks a design review indicates the time of the design review and which region’s population will likely find it convenient.  Upcoming design reviews with the times for a few example cities are:

  • January 31 at 16:30 UTC (17:30 Berlin & Lagos, 18:30 Tel Aviv)
  • February 7 at 21:00 UTC (13:00 Seattle, 15:00 Mexico City, 18:00 São Paulo)
  • February 22 at 01:00 UTC (09:00 Beijing, 10:00 Tokyo, 12:00 Sydney)

All members of the AMP Project community are encouraged to participate in the weekly design reviews.  If you are facing a design challenge in a contribution you are making to AMP please also consider bringing it to a design review.

We hope that these new times will make it possible for more people to participate in this important part of the AMP Project’s engineering culture.   

 

Posted by Joey Rozier, Engineer on the AMP Project

Making it easier for the global AMP community to participate in design reviews

Kicking off 2018 with new AMP case studies

Over the past two years, the Accelerated Mobile Pages (AMP) Project has helped users have a fast and seamless experience on the web. In the weeks leading up to AMP Conf, we wanted to share four new AMP case studies to highlight how AMP implementation has unlocked further potential and has provided businesses the opportunity to maximize their ROI and web presence.

Highlights

These case studies provide concrete examples of how advertisers and developers used AMP to grow their business. For instance US Xpress, the largest independent truckload carrier in the country, was facing one of the most sizable driver shortages in US history. When revisions to recruiting and media strategy failed to generate substantial hiring gains, the U.S. Xpress recruiting team decided to implement AMP in hopes of improving conversion rates and cost-per-application. As a result, the company witnessed a 5X improvement in page load speed which led to a rise in completed applications, and a projected cost savings of more than $1M per year.

usx

Event Tickets Center is another example of how AMP has helped boost the bottom line. CEO Adam M. Young strongly believes that investing in a mobile-first, secure, and easy-to-use website is key to business success, and as such, the company became one of the early adopters of AMP. With AMP pages being faster and more secure pages to drive ads traffic to, Events Tickets Center saw a 20% increase in conversion rate, 10% lower bounce rate and 13% longer time on site.

etc

Check out the new case studies listed below:

To learn about how you can implement AMP on your site, visit our documentation on ampproject.org or register for the upcoming AMP Conference in Amsterdam in February. All content will also be live streamed on our YouTube channel if you’re unable to make it in person.

Posted by David Li, Marketing Manager, Google
& Matt Ludwig, AMP Project Marketing Lead, Google

Kicking off 2018 with new AMP case studies

AMP’ing Up The AMP Framework

Editor’s note: The following was posted on Medium by Konstantin Sokhan, Design Director & David Tapp, Client Partner, MetaLab. Checkout all the AMP templates on ampstart.com.

TL;DR — We Journeyed Into the World of AMP and Learned Some Stuff

We teamed up with Google to focus on The AMP Project and received a dream brief: create anything your heart desires, so long as it helps push the boundaries of what’s possible in AMP’s codebase and component library. As we share what we built and learned along the way, we’ll also give our take on AMP’s importance, who it’s for and where it’s going.

What is AMP?

AMP is an open-source framework for building efficient, high performance web pages. It’s currently used primarily for editorial content on mobile but is growing beyond this for wider usage across different markets (and screen sizes).

metalab1

Seeing Both Sides

Before we go any further on our own experience, we’d like to acknowledge that we are well aware of the criticisms and aren’t going to pretend AMP doesn’t come with any; it does. We simply took this project as an opportunity to chart down our own path and make our own impressions. From our experience, there are some misconceptions we’d like to help clear up.

AMP allows site authors to host a static mobile-optimized version of any of their site pages which distribution platforms like Google cache and serve to users. Much of the AMP criticism is targeted at Google’s approach to caching the serving AMP pages from the google.com domain. What is worth clarifying is that the AMP page cache and the AMP HTML mobile optimization framework are separate products. A page built using AMP HTML can be privately hosted on any server, you can take advantage of all of the framework’s features without having Google host your content.

Don’t Let the Name Fool You

AMP stands for “Accelerated Mobile Pages”. In the simplest of terms, it blocks most of the elements which causes the web to load slower on mobile, like large amounts of JavaScript, third-party tracking scripts and bloated CSS. It allows content to almost instantly load. AMP was designed for cached pages, but it is now growing into a broader toolset to fix the mobile web (as the majority of users are mobile today, some site loads still can take minutes). Although the M stands for Mobile, AMP can absolutely help improve loading speeds on any device or browser type.

The Brief

In July, The AMP Project team came to us to push the limits of what’s possible in the framework, showcase its capabilities and help content creators realize how they could better use it to bring the web to life. We were essentially given free reign to use all of the tools provided by AMP to combine and implement them as we saw fit with the goal of creating an entirely new experience that had yet to be built with the framework. The sites we were to create are intended to be reused in the real world and be made accessible as free, open-source web templates at ampstart.com.

What We Built & Why

While we still had to work within strict guidelines to ensure the code was valid AMP, we aimed to come up with the craziest possible concepts within those defined boundaries.

After some brainstorming, we landed on the idea that online art galleries and museums are typically fun, abstract and don’t play by the rules when it comes to following conventional gridded web layouts. With that idea in mind we created a faux art gallery as proving grounds for redefining what was possible in AMP. We built a site that used the best of the initiative and built on its foundations. Our teams relied on the power of AMP to ensure the site was incredibly performant, while introducing new features and components into the framework including custom parallax experiences, hover states and more. We even had a little fun with the possibility of an immersive VR version done in AMP for consideration. Try our proof of concept in your phone here.

metalab2
Design for Art Gallery AMP Site

Next, we thought about more commonly used experiences on the web that could benefit from AMP’s capabilities. We ended up exploring what was possible in a travel booking app, allowing users to search destinations, filter by activities, and find things dynamically; all while maintaining the speed and performance AMP is commonly known for. We sweat the details on this one in delight — pushing the AMP framework as far as we could with micro-animations and hits of personality.

metalab3
Design for Travel Booking AMP Site

Who is AMP For?

Today, AMP is geared towards people on the go who are heavy into editorial style content (news and blogs on their phones) and e-commerce. Where we imagine strong adoption will take place is with sites that strive to be beyond performant or have a wide range of international audiences. Currently, the average mobile web page on a 3G connection takes roughly 19 seconds to load and almost half of the world is still running on it — this obviously needs to be improved and AMP can help. As the web continues to lean predominantly mobile, creating efficiencies here is both logical and essential. AMP can potentially provide a blueprint for improving access to information in developing countries.

Are We Living in The Future?

metalab4

Not quite, but making progress daily! AMP sites found online today are still primarily media, news & editorial content (for now). The benefits are obvious, as being built on AMP provides a serious performance and discoverability boost. Is AMP and its aspirations the future of all web? Maybe. Maybe not. One thing’s for sure, the learnings and best practices the framework is helping establish are definitely here to stay. AMP is also building atop of the latest and greatest in the web in real time with rollout of its features. Its development community is constantly striving to keep up to date with new trends; proactively pulling in the web’s upcoming functionality and giving it to you today.

Development lessons based on our learnings from AMP

As it relates to developing within AMP, we learned some things along the way we thought would be valuable to share. Notable insights below:

  1. AMP forbids custom JavaScript outside of an iframe, forcing you to rely on its library of optimized code. This is done to ensure that no poorly-optimized or nefarious code has the opportunity to hinder the user experience. We notice many, otherwise well-built sites, can become slow from the inclusion of megabytes of advertising and tracking scripts. The importance of optimization and careful vetting of any JavaScript code included on your site is a very important takeaway from AMP.
  2. AMP prioritizes the content that is visible to the user. It knows what content is below the fold and defers loading or rendering it until necessary. Visitors to AMP pages will never have to wait as all of the loading images and ads block their access to the page. Additionally, if a visitor never decides to scroll down, none of their mobile data is wasted loading content that would never be seen.
  3. AMP has solved “loading jank.” On an AMP page, every element must have a deterministic known height, whether it be an ad, an image or video, or a paragraph of text. You will never experience content shifting on your screen as elements above load in.
  4. Ad performance: AMP sets the new bar for ad integration on sites. Ads must behave properly on the page and should comply with optimal user experience. Goodbye full screen takeovers and other obnoxious content you don’t want on the page. AMP enforces that ads behave like good citizens.

In Closing

This opportunity was challenging, fun and provided some fresh perspective. We were given a lot of flexibility, while at the same time had to find unconventional ways to adhere to set conditions within the AMP framework. We learned a lot more than what we thought we knew going in about AMP and uncovered some previous misconceptions. In working within the framework, we came away with an even stronger understanding of where the web is going and how it can learn from AMP. If you’re interested in building your next site within it, make sure to check our templates, which are completely open-source, free to use and downloadable at ampstart.com.

The following was posted on Medium by Konstantin Sokhan, Design Director & David Tapp, Client Partner, MetaLab. Checkout all the AMP templates on ampstart.com.

AMP’ing Up The AMP Framework

Measuring AMP Performance

Editor’s note: The following was posted on Medium by Martin Schierle, Mobile Solutions Consultant, Google.

TL;DR: Whenever performance testing AMP, keep in mind that a test from origin will include potentially suboptimal server settings like bad cache headers or missing image optimizations. Also the biggest speed gain (near instant load through prerendering) will not be reflected in commonly used performance tools and metrics.

Developers implementing AMP are looking to get blazingly fast loading speeds, and are therefore often curious to see how much their site improved with AMP. However, a naive run of one of the many available performance tools (e.g. PageSpeed Insights or Lighthouse) does sometimes yield surprising and seemingly suboptimal results.

To understand why this is happening, it is important to be aware that AMP speeds up a website on three different levels:

  1. AMP itself is already very fast, as custom JS is forbidden, critical path is unblocked, CSS is inlined and many other optimizations. However, there may still be bottlenecks from the server-side, e.g. unoptimized images or insufficient cache headers, which can’t easily be fixed by the client side AMP library.
  2. The second level of speed-up is then achieved through the caching by the AMP Caches (e.g. the Google AMP Cache), which will reoptimize images, add prefetch hints, minify html, serve via HTTP/2, along with many other optimizations. Keep in mind that the bulk of those optimizations can also be done on origin.
  3. The third (and potentially most impactful) level of speed improvement is based on the fact that AMP can be prerendered in a safe and secure way, by prerendering only assets in the first viewport, and not executing third-party scripts. This is described in far more detail here.

So if a performance check is done on AMP on origin, the speed scores (while normally much faster than the canonical) are not yet representative. A better way to test is to run the performance test on the same site served from one of the AMP Caches (you can use this tool to get a cache URL for the Google AMP cache). This will include optimizations through the cache into the measurement. This score will already be much better, and basically shows what you could achieve on your own host as well by applying optimizations like the ones described previously.

Let’s see what this might look like for an actual page, here one of our example pages from ampbyexample.com:

measure1

Detailed results can be found here. The chart nicely shows how the performance improves if measured from an AMP Cache instead of origin across most metrics. First meaningful paint is, for example, 0.9s faster from cache.

Unfortunately the third and most important case (near instant load through prerendering) can’t be measured easily with the regular tools, as it would need to be measured in the flow coming from an earlier visited site or app. It should however be obvious that a page can be shown near instantly, as long as all visible content was already prerendered beforehand. Webpagetest.org allows to test flows like this via the scripting option, but it is cumbersome and error-prone to setup and maintain. A script could look like this:

// don’t log data for first navigation step

logData 0 

// navigate to the first page (e.g. Google SRP) which prerenders AMP

navigate INSERT_URL_CALLED_BEFORE_AMP

// sleep a bit to give prerendering time,
// a user normally also doesn’t click through immediately

sleep 10

// start logging now for clickthrough to AMP

logData 1

// click through, insert correct query expression
// to find the right link to click for your doc

execAndWait document.querySelector(‘[…]’).click();

When adding this in, the complete comparison of all three modes looks like this (with detailed results being here):

measure2.png

This shows the advantage of prerendering, which makes it possible to start render pretty much instantaneously (66ms) and to be visually complete and interactive after approximately 1s.

So, whenever performance testing AMP, keep in mind that not all speed advantages are directly obvious, as some will come in through caching and especially prerendering.

Posted on Medium by Martin Schierle, Mobile Solutions Consultant, Google

Measuring AMP Performance