Turbocharging AMP

Improving speed and user experience on the web is core to the AMP Project’s mission. Today at Google’s I/O developer conference we announced that AMP pages load twice as fast from Google Search, as we’ve cut the time it takes to render content in half from last year. Additionally, new platforms and websites have joined the AMP ecosystem, giving hundreds of millions more users the lightning-fast AMP experience.

AMP’s new speed gains in Google Search are due to several key optimizations that we made to the Google AMP Cache, such as server-side rendering of AMP components, and reducing bandwidth usage from images by 50% without affecting the perceived quality. We also used a compression algorithm called Brotli that Google launched a couple years ago, resulting in a reduced document size by an additional 10% in supported browsers.

Globally AMP continues to grow its footprint, with the news that China’s largest social network Tencent Qzone and the country’s third largest, Weibo will show AMP pages to hundreds of millions of users. This follows an announcement at the first AMP conference in March when Baidu, Sogou and Yahoo Japan said they are linking to AMP pages from their Search results, joining Bing and Google.

Other social platforms also made announcements, with Tumblr telling developers at Google I/O it is publishing 340M blogs across 500K domains in AMP. And Twitter shared that they are linking to AMP pages from their new mobile web app, and are in the process of launching AMP support in their Android and iOS apps. The global reach of these platforms further extends the availability of the 2B+ AMP pages and 900K domains with AMP on the web.

Finally, e-commerce sites are benefiting from AMP’s speed and user experience. At AMP Conf, WompMobile and Wego shared their initial success seeing 95% and 105% increase in conversion rates with AMP respectively. In the months since then, new e-commerce websites have joined the AMP ecosystem, including eBay announcing their plan to use AMP across all their product pages, Zalando implementing AMP for 250K product pages, and Myntra taking advantage of the powerful new amp-bind component. Additionally, AliExpress, one of China’s biggest online marketplaces, is having success with AMP pages, seeing a 4% uplift in conversions.

ecomm_AMP_logosSome of the e-commerce websites using AMP

Many of AMP’s e-commerce capabilities were previewed at the AMP Conf and the amp-bind component is now available for origin trials, creating a new interaction model for elements on AMP pages. To learn more, watch the interactive AMP pages talk on Friday at I/O. Additionally AMPbyExample.com has demos for amp-bind, and ampstart.com will soon have e-commerce page templates and elements.

abe_screens

AMPbyExample.com and templates

As always, there’s room to take AMP even further. Please reach out, share your feedback and join us during I/O! And if you’re attending I/O, be sure to stop by the mobile web sandbox booth to say hello. Finally, look out for our latest roadmap update next week which will share all of the AMP Project’s plans for the upcoming quarter.

Posted by Matt Ludwig, AMP Project Marketing Lead at Google

Turbocharging AMP

Google Analytics is Enhancing Support for AMP

The following was posted on the Google Analytics blog by the Google Analytics team

Over the past year, developers have adopted the Accelerated Mobile Pages (AMP) technology to build faster-loading pages for all types of sites, ranging from news to recipes to e-commerce. Billions of AMP pages have been published to date and Google Analytics continues its commitment to supporting our customers who have adopted AMP.

However, we have heard feedback from Google Analytics customers around challenges in understanding the full customer journey due to site visitors being identified inconsistently across AMP and non-AMP pages. So we’re announcing today that we are rolling out an enhancement that will give you an even more accurate understanding of how people are engaging with your business across AMP and non-AMP pages of your website.

How will this work?

This change brings consistency to users across AMP and non-AMP pages served from your domain. It will have the effect of improving user analysis going forward by unifying your users across the two page formats. It does not affect AMP pages served from the Google AMP Cache or any other AMP cache.

When will this happen?

We expect these improvements to be complete, across all Google Analytics accounts, over the next few weeks.

Are there any other implications of this change?

As we unify your AMP and non-AMP users when they visit your site in the future, you may see changes in your user and session counts, including changes to related metrics. User and session counts will go down over time as we recognize that two formerly distinct IDs are in fact the same user; however, at the time this change commences, the metric New Users may rise temporarily as IDs are reset.

In addition, metrics like time on site, page views per session, and bounce rate will rise consistent with sessions with AMP and non-AMP pageviews no longer being treated as multiple sessions. This is a one-time effect that will continue until all your users who have viewed AMP pages in the past are unified (this can take a short or long period of time depending on how quickly your users return to your site/app).

Is there anything I need to do to get this update?

There is no action required on your part, these changes will be automatically rolled out.

Will there be changes to unify users who view my pages both on my domain and in other contexts?

Some AMP pages are not visited directly on the domain where the content is originally hosted but instead via AMP caches or in platform experiences. However we decided to focus on fixing the publisher domain case first as this was the fastest way we could add value for our clients.  

We are committed to ensuring the best quality data for user journey analysis across AMP and non-AMP pages alike and this change makes that easy for AMP pages served on your domain. We hope you enjoy these improvements – and as always, happy analyzing!

Sincerely,
The Google Analytics Team

Google Analytics is Enhancing Support for AMP

See AMP live at I/O 2017!

We’re just days away from the start of Google I/O 2017, Google’s annual developer conference. And with lots of AMP contributors working at Google, we’ll naturally use the opportunity to connect to developers worldwide.

This year there’ll be 4 big talks about the latest and greatest in the world of AMP, a bigger developer sandbox booth for those who join us in person, and plenty of office hours.

Best of all, all of this year’s AMP sessions are being live streamed. Here’s the agenda:

  1. The AMP Keynote, Wed. May 17, 6PM – 7PM PDT
  2. AMP Ads: Better Advertising on a Faster Web, Thu. May 18, 8:30AM – 9:30AM PDT
  3. From AMP to PWA: Progressive Web AMPs, Thu. May 18, 9:30AM – 10:30AM PDT
  4. Building beautiful, interactive AMP pages for e-commerce & beyond, Fri. May 19, 3:30PM – 4:30PM PDT

Finally, if you’re tuning it from a different timezone or need to feed your baby sloth during one of our talks, rest assured that we’ll upload all session videos to our YouTube Channel (subscribe to be notified!). We’re all looking forward to connecting with you all at I/O 2017 or across the web!

See AMP live at I/O 2017!

What’s new in AMP by Example

The following was posted on Medium by Sebastian Benz, Developer Advocate, Google.

A lot has happened since I last wrote about AMP by Example. This post gives you a quick overview about new samples and what’s new on the site itself.

A new Design

We completely re-designed www.ampbyexample.com using the brand-new AMPStart template and component library. The other big change: samples no longer use a three column layout. Instead, code snippets and live previews are embedded into the documentation.

ampbyexample1The new design

Interactive AMP Playground

If you want to play around with the sample code: all samples can now be opened in an interactive playground. At the moment it’s limited to only editing existing samples, but we plan to make this even more useful by making it possible to share samples with others.

ampbyexample2Open any sample in the playground

AMP Component Updates

There have been quite a few updates to the AMP component samples:

 

ampbyexample3amp-fx-parallax

  • amp-gist: developers rejoice, finally it’s possible to embed Github Gists into AMPs.
  • amp-iframe: update to the existing sample demonstrating how amp-iframes can resize themselves. This can be very useful when embedding third-party content via iframe.

ampbyexample4resizesable amp-iframe

More AMP Use Cases

New samples demonstrating how to combine AMP components to solve complex use cases:

  • Tab Panels in AMP: eBay contributed a sample demonstrating how to implement tabs in AMP. One thing to note: while creating the sample, eBay discovered that the current implementation doesn’t fulfill their accessibility requirements yet. This is the issue tracking what needs to be done to fix this.

ampbyexample5Tab Panels with AMP

  • Poll Sample: how to implement a single page poll in AMP making sure that users can only vote once.

ampbyexample6Single-page poll in AMP

AMP Ads galore!

Big update to the AMP Ads section demonstrating how to build AMP ads:

  • AMP Ad sample previews are now served as real AMP ads via DFP. Previously, AMP ad previews were embedded using iframes which didn’t make use of the optimized AMP ad rendering performance.
  • Hello World Sample: learn how to create an AMP Ad.
  • Video Ad Sample: a sample ad really showing off what is possible with AMP.
  • Speed comparison: see how fast an AMP Ad loads in comparison to a regular ad. Best viewed on a 3G connection.

ampbyexample7AMP ads load almost instantly

What’s next?

We’ll continue providing samples for new AMP components, but also plan to focus more on how complex use cases can be solved by combining existing AMP components. Please let us know if there any specific use cases where you would like to see samples.

Posted by Sebastian Benz, Developer Advocate, Google.

What’s new in AMP by Example

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