Test amp-bind on your site with an origin trial

All features in AMP need to be tested (that’s why we build things using experiments). However, particularly large, complex, and flexible features need a bit more attention. In particular, they need to be implemented end-to-end in real-world applications, for real users. That way, we can be sure that these features work well when they’re launched.

We recently announced amp-bind, an experimental data binding system that provides a more flexible, expansive way of supporting interactivity in AMP. Along with that flexibility comes a lot of complexity, unknowns, and the necessity to thoroughly test in order to make sure it works right from the start. For that reason, amp-bind stands to gain a lot from the ability to run in production, on websites where developers can implement with a real-world purpose. That’s why we’re setting up origin trials for amp-bind.

 

What is amp-bind?

In short, amp-bind fundamentally changes the model for interactivity in AMP, while retaining AMP’s essential performance and UX assurances. amp-bind works more like a coding layer on top of AMP—going beyond the AMP Project’s historical approach of limiting interactivity to scoped, use-case-driven components like amp-carousel and amp-accordion. amp-bind links user actions with triggers for different document states, giving developers much more freedom in the types of interactions they can define.

product-detail-bind.gif

To get an idea of what amp-bind can support on your AMP pages, check out some of its basic behaviors, such as how it can work together with an image carousel. You can also see how it can be integrated into a basic product detail page.

 

What are origin trials?

Origin trials (inspired by the Google Chrome team) are useful when a feature is far enough along that it’s ready to be tested with real users, but some changes are still expected based on developer feedback.

Traditionally, a feature at this stage is put into experimental mode, where developers can try it in development, but it won’t work in production yet. This can be useful, but developers won’t necessarily try something out unless they see immediate benefit, so it’s hard for them to justify putting work into something that won’t work in production.

Enter origin trials: interested developers can opt-in to a test where they can use a new feature in production, with the expectations a) that the test is for a limited time, and b) that the feature will likely undergo some changes after origin trials. Unlike Chrome origin trials, which restrict the experiment to a small percentage of users, amp-bind origin trials will enable the feature for every visitor visiting a whitelisted domain.

Origin trials are a great opportunity to try out a new feature before it’s fully live: you get to benefit immediately from the work you put into a feature (because the feature will be live on your site, rather than still guarded by an experiment), and your feedback can directly influence the direction of the feature.

 

How to whitelist your site for origin trials with amp-bind

Sign up here to let us know you’re interested origin trials for amp-bind on your site, and we’ll get back to you with next steps. Note that we can whitelist only a limited number of domains for the feature, given the AMP team’s limited bandwidth for developer support.

As always, we want your feedback for amp-bind—whether your site is whitelisted for origin trials, or if you’ve just checked out the documentation and samples. Once we have enough input from the AMP community, and have made any necessary changes, we’ll release the feature to production for all sites, regardless of their status with respect to origin trials. We’re looking forward to hearing from you, and to seeing a lot more interactivity in AMP!

Posted by Eric Lindley, Product Manager, AMP Project

Test amp-bind on your site with an origin trial

From AMP to Progressive Web App

PWA_AMP1If you’ve invested in AMP and are also getting ready to upgrade your mobile website to a next-generation Progressive Web App, I have good news for you: AMP and Progressive Web Apps can be combined and used together to create a fantastic user journey. And we have a new set of docs on AMPproject.org to help with just that.

AMP makes for an ideal entry point into your site due to the almost-instant prerendered load, and the <amp-install-serviceworker> component allows you to warm up and preload a Progressive Web App while your users are reading an AMP page. Users clicking on links to your origin will now instantly upgrade to the full-featured Progressive Web App. This means you can start fast with AMP and stay fast with your Progressive Web App experience.

In addition, you can now reuse the entire content library you already have in the form of AMP pages and use them as a centerpiece in your Progressive Web App, saving engineering resources and complexity.

To learn more about how to combine AMP and Progressive Web Apps, head to one of the following resources:

  1. Our brand new set of docs discussing AMP and Progressive Web Apps, deep diving into how to enable Progressive Web App features for your AMP pages, how to preload your Progressive Web App from your AMP Pages and embed & use AMP as a data source
  2. The primer released in Smashing Mag
  3. The conference talk by Alex Russell from the AMP Conf 2017

Get in touch via our developer support channels if you have questions or feedback. We can’t wait to see what you will build!

Posted by Paul Bakaus, Developer Advocate, AMP Project

From AMP to Progressive Web App

AMP Conf 2017 Recap (and videos!)

Last month we held our first AMP Conf, and it was a blast. Over 300 of you showed up in-person, and thousands tuned into the live stream.

Over two days, 19 talks, panels and workshops – with over half from outside the AMP team – covered topics including building interactive AMP pages and using AMP pages for e-commerce.

If you couldn’t make it to AMP Conf, you can relive and watch all the talks on the AMP Channel:

We had many community announcements, such as Baidu, Sogou, and Yahoo Japan linking to AMP pages. The core AMP team had lots to share as well– among the announcements at AMP Conf:

And dear to my heart were the thoughtful discussions many of us had with people at the conference looking at the AMP Project’s direction. A lot of the conversations were captured in detail during the AMP & the web and The roles platform play panels.

We might not have all the right solutions yet, but with your help we can get there. It’s clear that we still have much to do, but AMP Conf opened the door for more open collaboration and conversation with the web community. So get involved and come help us! Creating a long-term, healthy mobile web ecosystem is complex and needs the voices of many.

See you soon at another conference!

Posted by Paul Bakaus, Developer Advocate, AMP Project

AMP Conf 2017 Recap (and videos!)

AMP Roadmap update to close out Q1

We’ve updated the AMP Roadmap to reflect some of the progress made in the first quarter of 2017. You can read more about some of the highlights below.

Format

We continue to place a big focus on making the AMP format conducive to more interactive and engaging user experiences. We’ve made amp-bind, a flexible event binding system that enables vastly more interactivity in AMP, available in an experimental beta release. This means you can test out some of the basic behaviors of amp-bind, such as how it can work together with an image carousel—but amp-bind won’t yet be valid for use in production AMP pages until its launch, which is targeted for later this quarter.

We’re also working on scroll-dependent interactions. We’ve started by directly addressing two concrete use cases: parallax scrolling and contextually-displayed headers. In addition, we’re working on a general, flexible framework for scroll-bound animations.

Finally, earlier this month we launched AMP Start, a collection of quick-start code templates and components, intended to give developers and designers the tools to create great-looking AMP sites quickly and easily. In the coming weeks we’ll be working on ways to make it easier to use and configure these pages without having to edit the code directly.

 

Ads

We’ve made an update to sticky ads by removing the restriction to load the ad only after the first viewport – this should boost viewability. We’re hopeful this change can also drive greater monetization due to the viewability increase for your sticky ads implementation. We’ve also updated the sticky ad to collapse when there are no ad fills instead of displaying an empty container.

In addition, this quarter we reached the milestone of 100 ad networks supporting AMP. To help these ad networks serve AMP ads, Cloudflare has launched an ad network implementation that makes it easy for any ad network to serve them. In addition, Cloudflare launched Firebolt, a suite of services that makes it easy for publishers and ad networks to serve AMP ads.

We’ve launched support for dynamic call tracking, which is typically used in ad landing pages for identifying ad attribution.

In the next quarter, we’re working on performance improvements to non-AMP ads being served to AMP pages. In addition, we’ll also be working on serving AMP ads to non-AMP pages.

 

Analytics

We expanded support for variable substitutions, notably Client ID, to links and forms. The former can be used to manage user state involving multi-page sessions. The latter is useful to build add-to-cart flows for e-commerce.

We also completed a migration to Intersection Observer to support visibility features. You’ll hopefully notice no changes as a result of this migration. It does, however, shift AMP analytics toward a highly respected approach for measuring element viewability. We also introduced a new trigger, “ini-load”, which is triggered when the initial contents of an AMP element or an AMP document have been loaded. In contrast to the document-level “visible” trigger that has long been available, “ini-load” used at the document level will not fire until all of the content elements visible in the viewport are also loaded. This is helpful to support AMP Ad–related features and offers a different way to measure engagement based on actual content visibility.

Finally, we’ve started a project that will enable extensions to take advantage of amp-analytics to report data to extension authors so that extension authors have greater visibility into how their extensions are performing.

* * *

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 Rudy Galfi, Product Manager, AMP Project

AMP Roadmap update to close out Q1

Learn the AMP basics in your language!

To celebrate the new AMP Project YouTube channel and follow up on AMP Conf, we’re rolling out a fresh series of Local Language AMP office hours.

Sessions will include beginner introductions to AMP for a non-technical audience in Italian, French, German, Spanish, Indonesian, Korean, Japanese and English. Native language speaking AMP experts will be on hand to answer your questions as we run through the basics.

Add your questions to the comments on the event pages below, and we will answer them during the office hours. You can also watch the hangouts on demand, on the AMP YouTube page after the event.

Check out the lineup below and join the discussion.

  • Italian
  • French
  • Japanese
    • Introduction to AMP – Mar. 21 @ 0930 JST with Sachiyo Sugimoto and Miki Toda, Google Technology Managers
  • German
  • Spanish
  • Korean
  • Indonesian
  • English

Learn more about AMP by checking out recent talks from AMP Conf.  The Keynote and What’s next in AMP in particular cover The AMP Project’s recent progress and plans for the future.

Posted by Tomo Taylor, AMP Community Manager

Learn the AMP basics in your language!

AMP grows its footprint

The AMP family is set to grow its international footprint with news today that the biggest search engines in Asia Pacific will start to distribute AMP pages to a new audience of more than 1 billion people.  

Baidu and Sogou, which account for around 90% of the search market in China, made the announcement on the opening day of the first AMP developer conference which is taking place in New York. They were joined by Yahoo Japan which said it will connect to AMP pages from their Search results, bringing all the goodness of AMP to their 58m daily users in Japan.

The addition of these key distribution platforms represents a major step for the open source project which launched in October 2015 alongside a handful of publishers and technology companies all united by a common cause:  make the mobile web work better for everyone.

Baidu, Sogou and Yahoo Japan join a growing roster of companies already supporting AMP from Bing to Pinterest and from Google to LinkedIn, which said it sees a 10% increase in time spent in an AMP article vs non-AMP, the most critical metric for their news feed.  The expansion underlines the value of AMP for publishers and websites who don’t have to customize anything for each of these platforms –  develop AMP pages once and they just work on all supported platforms.

Of course it’s never been easier to build AMP pages with all the major CMS systems actively supporting AMP.  Over the next two days we will hear from some technology integrators — companies like Relay Media and Postlight — which help build solutions from scratch and even convert existing web archives in a matter of days or weeks.

This whole ecosystem makes developing and publishing AMP pages easy and accessible to smaller publishers and websites that may not have the necessary in-house technology resources readily available.  Take Tumblr, which has already turned on AMP on for a number of sites but is planning to ramp things up for all their 300m+ blogs over the coming weeks.  

While we continue to see many news publishers building new AMP pages, we also see increased adoption from e-commerce, travel, recipes and other diverse websites around the world, with new ones joining every day.  eBay was one of the first eCommerce companies to launch AMP in production and will tell developers at the conference why they bet on AMP as well as share some tips and tricks and new metrics along the way.  Likewise, one of India’s biggest retailers SnapDeal has gone all-in on AMP, and is seeing a 52% improvement in average daily orders

AMP also offers a number of monetization options for publishers and websites, from native advertising, to analytics tracking and even the latest launch from Cloudflare of an AMP ad verification and optimization service.

Additionally we are applying the AMP framework to ads to make them faster, lighter and more secure.  With AMP Ads, native ad exchange Triplelift – one of the newest members of the AMP family — delivered ads that are 3x lighter and load 6x faster than their traditional counterparts. The ads also saw a strong uplift in viewability and corresponding improvements of 13%  in CTRs and eCPMs. You can see more case studies here.

At the heart of this first AMP conference is community.  We had almost 10,000 engaged developers on Github, hundreds of people reporting bugs and 300 code contributors from many companies.  Everyone has played a part in making AMP better, underlining that it is by working together that we can succeed in making the mobile web live up to its full potential.

We hope this event is the first of many.  But don’t worry if you can’t make it in person because you can follow along on a live stream here

Posted by David Besbris, VP Google Search, AMP Project Lead at Google

AMP grows its footprint

New Industry Benchmarks for Mobile Page Speed

The following is an excerpt from a Think with Google article by Daniel An, Global Product Lead, Mobile, Google.

The average time it takes to fully load a mobile landing page is 22 seconds, according to a new analysis. Yet 53% of mobile site visitors leave a page that takes longer than three seconds to load. That’s a big problem.

It’s no secret that shoppers expect a fast mobile experience. If there’s too much friction, they’ll abandon their cart and move on. Today, it’s critical that marketers design fast web experiences across all industry sectors. Consumers want to quickly pay bills on finance sites, get rapid results when they’re browsing vacation reviews, and view an article immediately when they click through.

Despite the fact that more than half of overall web traffic comes from mobile, our data shows that mobile conversion rates are lower than desktop. In short, speed equals revenue.

Our research has been eye-opening. For 70% of the pages we analyzed, it took nearly seven seconds for the visual content above the fold to display on the screen, and it took more than 10 seconds to fully load all visual content above and below the fold.

Recently, we trained a deep neural network—a computer system modeled on the human brain and nervous system—with a large set of bounce rate and conversions data. The neural net, which had a 90% prediction accuracy, found that as page load time goes from one second to seven seconds, the probability of a mobile site visitor bouncing increases 113%. Similarly, as the number of elements—text, titles, images—on a page goes from 400 to 6,000, the probability of conversion drops 95%.

think-w-google

Source: Google/SOASTA Research, 2017.

Learn more about this research, by checking out the full article on Think with Google.

To help improve these benchmarks, the AMP Project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms. Learn more at AMPproject.org.

New Industry Benchmarks for Mobile Page Speed