AMP

Making Your Wait a Little More Great: New Loading Indicators in AMP

Websites

This post is from the AMP Design Team. We’re product designers and researchers responsible for making sure AMP’s components and overall experience are usable, accessible, and elegant. You can find us hanging out with the UI and Accessibility Working Group on GitHub or in the Contributor Slack.

One of the biggest ways that AMP improves web users’ daily experience is by helping developers make sites that are fast. A unique advantage of AMP is that it’s always improving behind the scenes – we can roll out speed improvements to sites that use AMP without developers needing to do anything.

Performance best practices have always been baked into every corner of AMP, but actual speed is only half the story. While engineers continue to sweat the technical details, on the design team we set out to improve perceived speed. Waiting will always be a part of life – there are some parts of AMP pages our engineers can’t make faster because they come from a service we don’t control (like a Facebook post or YouTube video) or just because they’re large. But there’s plenty of evidence that the environment you’re in affects how you feel about having to wait.

If you’ve used more than a few AMP pages, you may be familiar with the loading indicator we’ve used since AMP launched in 2015:

Today we’re beginning to roll out a new one:

Let’s look at how we got here. We started with three goals:

  1. Make loading feel faster.
  2. Let readers know what’s coming. Since 2016, we’ve used a different loading indicator for ads on AMP pages so people could immediately tell them apart from the main content. We wanted to extend that to more types of content – videos, tweets, Facebook posts, and more – so you don’t have to wait for a video to load only to realize you’re not in a situation where you can watch one, for example.
  3. Modernize the design. We can’t put numbers on this, but many folks on the AMP team felt our loaders could be more visually elegant.

We also needed to keep the design elegant, but neutral. UI that ships with AMP needs to fit in well with the design of any AMP page – that means no dramatic colors or noticeable styling.

We did some prototyping and asked a panel of 2500 web users to look at one of ten different loading indicator designs that “loaded” content after a set amount of time and predict how long it took. The accuracy of the predictions wasn’t important—humans aren’t good at estimating very short durations—but the trends were. Participants estimated that they were waiting nearly a second less with some of our new designs compared to traditional options like the existing AMP loading indicator or a basic spinner. Based on this data and some observations we got excited about during the design process, we chose a design.

We landed on three principles:

  1. Sometimes no loader is better. Showing a loader before you’ve even noticed you’re waiting can be distracting and make the site seem slower.
  2. Keep it interesting. Having to wait isn’t helped by seeing the same repetitive spinner you’ve seen a million times.
  3. Keep it consistent. Having multiple things loading on one page, each with its own loader design and timing, is distracting and sloppy.

To satisfy the last principle, we made sure our design could be adapted to different sizes, content-type icons, and backgrounds. To satisfy the first two, our loader animated in several stages: first we would show nothing, then we’d show an intermediate animation, then finally we’d finish on a spinner that looped until the content was loaded. People wouldn’t see a loader at all if the content took less than a half second to load, and they wouldn’t see a repetitive spinner unless the content took a full 3.5 seconds.

Our design met all three of our goals: we had encouraging data on its perceived speed, we felt strongly that it was more elegant, and it did a good job letting readers know what was coming.

There were some additional details to figure out to maintain AMP’s flexibility for developers. We didn’t want the new design to conflict with AMP’s ability to show a placeholder image, message, or even a custom loading indicator before content has loaded. For content with a simple placeholder image, we still want to indicate to readers that something more is coming, so we’ll show a special version of the loading indicator that will stand out on any color image. For any placeholders more complex than that – messages or custom loading indicators, we won’t show the default loader at all to make sure our design doesn’t clash with yours.

The final proof will be in the live experiment we’ll be running in the upcoming weeks: launching our new loading indicators to a small percentage of AMP pages and keeping a close eye on site performance metrics as well as community feedback. Based on this feedback, our aim is to roll out our new loaders to all components on all AMP pages.

We hope you enjoy the new design and support us in making the user experience of the web better, one small detail at a time.

Posted by Andrew Watterson, Product Designer for the AMP Project at Google

amp-script: AMP JS

Websites

Earlier this year at AMP Conf, we introduced the developer preview of <amp-script>. Now we are announcing the general availability of <amp-script>. It’s an AMP component that runs your own JavaScript in a separate Worker thread. This lets you to add custom JavaScript to your AMP page while still retaining its lightning-fast speed!

<amp-script> lets you cover use cases that you couldn’t with existing AMP components. It also lets you share code across your AMP and non-AMP pages. You can even use a JavaScript framework. Here are some of the examples that the team working on <amp-script> has built:

Example of multi-page form with validation between sections

If the above examples interest you, do give <amp-script> a try. Do keep in mind that, in order to preserve AMP’s performance guarantee, there are some constraints:

  • Content jumping: To avoid unexpected content jumping, <amp-script> generally requires user gestures to change page content. 
  • Page load: Since <amp-script> doesn’t change page content without user interaction, it doesn’t modify content on page load either.
  • Script size: The script used in a single <amp-script> must be smaller than 150kB. Please note that you’re welcome to use your favorite JS framework, but it must fit within that 150K limit.
  • API support: Not all APIs are supported inside a Web Worker and WorkerDOM has a list of allowed APIs. In addition, some DOM methods and properties are not yet implemented. The full list is available publicly in WorkerDOM compatibility. Please file an issue if there is an API that you want to see added.

<amp-script> is compatible with frameworks you may already be using such as React, Preact, Angular, Vue.js, jQuery and D3.js.

This was one of the most important requests from developers using AMP. AMP Project is excited that we could help address this while still retaining AMP’s value proposition of speed. You can learn more about how <amp-script> works under the hood here and try out <amp-script> by following this guide. It’s a great way of unlocking a large number of use cases that weren’t possible before!

Please let us know if you have any issues or feature requests, when using <amp-script>.

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

Announcing AMP Toolbox 1.0

Developer Experience, Websites

AMP Toolbox has been around for a while now, but I thought it’s a good idea to make a proper introduction now that we’ve reached the 1.0 milestone. In short, AMP Toolbox is a collection of command line tools and JS APIs to make it easier to successfully publish AMP pages. Each tool can be downloaded and used separately.

The 1.0 release includes two big updates:

  1. 1. A linter for AMP documents: AMP Linter reports errors and suspicious constructions such as missing or incorrectly sized images, missing CORS headers, or invalid metadata.
  2. Valid optimized AMP Support: the AMP Optimizer will now produce valid AMP, making it a lot easier to host optimized AMP pages. See the previous blog post on this for more details.

But there’s more cool stuff! Let’s take a closer look at what else is in AMP Toolbox.

AMP CLI

First of all, there’s a command line interface available for most features included in AMP Toolbox. You can install it globally via NPM:

$ npm install @ampproject/toolbox-cli
$ amp help

or you can run a one off command using NPM’s built-in `npx` tool:

$ npx @ampproject/toolbox-cli help

AMP Linter

The brand-new toolbox-linter checks your AMP documents for common mistakes and best practices:

$ amp lint https://amp.dev

PASS 1x1 images are specified by <amp-pixel>
WARN All <amp-img> have reasonable width and height
> [https://blog.amp.dev/wp-content/uploads/2019/06/cf_hero.png]: actual ratio [1999/1140 = 1.75] does not match specified [16/9 = 1.77]
> [https://blog.amp.dev/wp-content/uploads/2018/10/img_20180926_163001-01.jpeg]: actual ratio [3680/2314 = 1.59] does not match specified [16/9 = 1.77]
PASS Videos are under 4MB
PASS <amp-video><source/></amp-video> syntax is used for video
PASS Endpoints are accessible from cache
PASS Endpoints are accessible from origin
FAIL <meta charset> is the first <meta> tag
> <meta charset> not the first <meta> tag
PASS Runtime is preloaded

Or without installation:

$ npx @ampproject/toolbox-cli lint https://amp.dev

AMP Linter’s SXG mode is invaluable when adding SXG support to your site:

$ amp lint -f sxg https://amp.dev

PASS /amppkg/ is forwarded correctly
PASS application/signed-exchange content negotiation is correct
PASS dump-signedexchange -verify does not report errors
PASS vary header is correct

AMP Optimizer

AMP Optimizer is a tool to server-side enhance the rendering performance of AMP pages. AMP Optimizer implements AMP performance best practices and supports AMP server-side-rendering. These optimizations can result in up to 50% faster FCP times. 

You can play around with it via the CLI:

$ amp optimize https://amp.dev
$ amp optimize file.html

However, for production, it’s better to integrate toolbox-optimizer as part of your build or rendering chain. There’s also an Express middleware available: amp-optimizer-express that will apply AMP server-side-rendering on the fly.

AMP Cache URLs

For testing, it’s a good idea to check whether an AMP page works on all AMP caches. Use toolbox-cache-url for translating origin URLs to the AMP Cache URL format.

$ amp curls https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev
https://amp-dev.amp.cloudflare.com/c/s/amp.dev
https://amp-dev.bing-amp.com/c/s/amp.dev

Or for a specific cache:

$ amp curls --cache=google https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev

AMP Cache List

There’s also an API available to get a list of all official AMP Caches. This can be useful when implementing CORS in your backend:

const Caches = require('@ampproject/toolbox-cache-list');

Caches.list().then(console.log);

Sometimes it’s necessary to quickly update or remove AMP documents from an AMP Cache. Using the CLI version of the AMP Update Cache API this becomes very easy: 

$ amp update-cache https://www.example.com/ --privateKey /path/to/private-key.pem

Of course, there’s also an API version available as part of the toolbox-update-cache package.

AMP CORS

Speaking of CORS, many AMP components, such as amp-list or amp-state, take advantage of remote endpoints by using CORS requests. Part of AMP toolbox is a connect/express middleware which will automatically add all CORS headers required by your AMP pages. Simply add the toolbox-cors middleware to your express application and you can forget about CORS when serving your AMP pages:

const express = require('express');
const ampCors = require('@ampproject/toolbox-cors');

const app = express();

// That's it!
app.use(ampCors())

AMP Validation Rules

In case you want to implement AMP specific code completion for your favorite text editor, take a look at amp-validator-rules: a javascript library for querying AMP validator rules. Here is a sample that will list all valid attributes for the amp-img element:

import validatorRules from '@ampproject/toolbox-validator-rules';
 
validatorRules.fetch().then(rules => {
  // Get all website specific tag rules ...
  const tags = rules.getTagsForFormat('AMP');
  // ...find the definition of the amp-img tag...
  const ampImg = tags.find(e => e.tagName === 'AMP-IMG');
 
  const ampImgAttrs = ampImg.attrs
    // ...filter global, layout and amp-bind attributes...
    .filter(e => !e.name.startsWith('[') && !e.global && !e.layout)
    // ...extract the name...
    .map(e => e.name)
    // ...sort alphabetically...
    .sort();
 
  // ...and display result in the console.
  console.log(ampImgAttrs);
});

Summary

AMP Toolbox aims to simplify common tasks either via command line or APIs. If you think there’s a piece of functionality missing please let us know!

Posted by Sebastian Benz, Developer Advocate, Google

Learn web development with AMP!

Developer Experience, Websites

We’re excited to announce the release of our new courses that teach AMP. Appropriately, they’re called Web Development with AMP!

We think AMP is an excellent starting point for aspiring web developers. After all, AMP lets you create interactive websites without having to use JavaScript. If you know a bit of HTML and CSS, but haven’t yet learned JavaScript, you can use AMP to create interactive websites.

On the other hand, if you’re an experienced web developer, and you’re seeking a simpler way to build performant, well-behaved websites, these courses are for you too.

Finally, if you teach web development, these courses are free to use. For beginners, these AMP courses bridge the gap in a curriculum between HTML/CSS and JavaScript. Others can use the courses to pick up the principles of AMP quickly.

Web Development with AMP is divided into beginning, intermediate, and advanced courses. These are available in many forms:

What’s coming next?

  • Videos for the other two courses will appear later this summer.
  • We’ll also be providing compressed versions of these courses for developers who are either more experienced or impatient.

Enjoy!

Posted by Ben Morss, Developer Advocate at Google

Debunking Common AMP Myths

Ecommerce, Websites

AMP is a great and easy way to build very fast sites. Since its launch in 2015, AMP has grown to power billions of pages across the web from tens of millions of domains. We’ve seen many examples of businesses in both the publishing and e-commerce spaces see success with implementing AMP on their websites. As the AMP project has grown, we have noticed a number of misconceptions & myths have arisen — so we thought we would take this opportunity to bust some of the most common myths about AMP.



MYTH: AMP is exclusively a Google project.
FACT: AMP is an open source initiative led by Google along with other companies and members of the web community.

AMP developers, companies and individual contributors participate in the development of this project: Over the last 3 years, AMP received contributions from 850+ contributors, 78% of whom were employed by companies other than Google, such as Twitter, Pinterest, Yahoo, Bing, and eBay. AMP moved to a new governance model that explicitly gives a voice to all constituents of the community, including those who cannot contribute code themselves, such as end-users, and representation from companies such as Twitter, Microsoft, Pinterest, The NY Times, Washington Post, AliExpress and many others.

MYTH: AMP only works from Google.com.
FACT: AMP pages are accessible across the web including any distribution platform and device.

Users can access AMP pages via links on distribution platforms (e.g., search engines) or sites. Some platforms (e.g., Google, Bing, LinkedIn, Twitter, Yahoo JP, Baidu and more ) will always serve AMP pages by default on mobile, when available. Some platforms (e.g., google.com, bing.com) take an extra step to cache your content for a much faster user experience.

MYTH: AMP is only for mobile.
FACT: AMP is designed with responsiveness in mind, to work across all screen sizes.

AMP is now just AMP, and does not stand for Accelerated Mobile Pages anymore. AMP isn’t just for mobile, it not only works across many device types including desktop and tablet but comes with super handy responsive design features. AMP is designed to be mobile friendly, and with slow hardware and high latency connections, the boost you get with AMP on smartphones is going to be felt a lot stronger than on desktops. It should also be understood that some features for third-party platforms (e.g., Google’s Top Stories carousel) may only be designed for the mobile experience. For more information, see this article.

MYTH: Every AMP page has to also have a non-AMP version.
FACT: An AMP page can be associated with a non-AMP version, but it’s not a requirement.

In some cases, you might want to have both a non-AMP and an AMP version of the same page, especially during the early phases of your AMP migration when you might want to also support testing AMP and non-AMP. But this is not a requirement and you don’t need to maintain two versions of the same content if you think AMP is the right solution for your business. You can choose to have one page, and that page could be an AMP page. This means lower maintenance costs to build, maintain, and monitor a single version of each document (as opposed to building both a non-AMP and paired AMP page). More details here.

MYTH: AMP landing pages are usually difficult to build.
FACT: It typically takes less than a week to build AMP landing pages for the majority of page types and use cases.

80% of development teams we contacted said they built AMP Landing Pages in less than a week. Having said that, AMP development effort varies on the page type. Some AMP pages can be built within a day, others take longer. Check out amp.dev for some free AMP templates to reduce your development time even further.

MYTH: AMP is only for publishers or static websites.
FACT: More than 60% of Google Search clicks to AMP pages go to non-news sites.

AMP is built thanks to a deep collaboration with thousands of developers, publishers and websites, distribution platforms and tech companies. When AMP first launched, it was initially adopted by publishers but now advertisers and e-commerce companies are also leveraging AMP to gain speed benefits. Read some of the success stories on our site.

MYTH: AMP doesn’t support interactive experiences.
FACT: AMP components now enable design customization and interactive experiences.

When AMP first launched, it had limitations to visual design. As the AMP project has grown thanks to the collaboration of the open source community, new components have been built that allow companies to do design customization and create interactivity. Today, most interactive experiences are supported:

  • Rich Media: there are ever increasing AMP components and anyone can contribute if something is missing.
  • Third-Party (3P) integrations: there are many available now and growing.

Companies such as BMWAliExpress and Rep from La Repubblica have been able to build great interactive experiences on AMP, with some using AMP for the majority of their site pages.

MYTH: AMP is not capable of supporting e-commerce websites.
FACT: AMP is a natural fit for e-commerce because AMP makes web pages fast, and fast pages help with purchase conversions.

When AMP first launched, it was initially adopted by publishers. As the AMP project has grown, new components have been built that allow brands to create interactive experiences. We are excited by the speed with which the internet is adopting and extending the AMP platform, and AMP can be used to build a fast, beautiful e-commerce experiences. For more details, check “Getting started with AMP for e-commerce” and “E-commerce At The Speed of AMP” blog posts.  

MYTH: It’s not possible to serve fresh content on AMP Pages.
FACT: There are many options to keep content on AMP pages up to date.

You can serve fresh content on AMP either relying on the default AMP Cache mechanism (stale-while-revalidate), using the update cache functionality, or using dynamic components (like amp-list). Many big e-commerce companies have demonstrated great success when implementation is planned properly.

MYTH: AMP is not secure/private enough.
FACT: The AMP framework is built to preserve privacy and ensure data security.

AMP landing pages are often served from the Google AMP Cache, which simply caches a version of your AMP landing page for purposes of validating AMP documents and for providing reliable, fast delivery. The Google AMP Cache as well as AMP JavaScript are served from cookieless domains that do not track users in any way. Additionally, AMP has a security review process that is routinely used when launching new AMP components. For further reading we recommend this blog post “Privacy and user choice in AMP’s software architecture”.

MYTH: AMP pages don’t convert as well as non-AMP pages.
FACT: Properly optimized AMP pages often perform better than their non-AMP equivalents.

Many advertisers and publishers have seen success with AMP as documented on amp.dev. A study from Forrester found that a site implementing AMP could expect 20% increase in sales conversion rate on AMP pages, 10% year-over-year increase in AMP site traffic, and 60% increase in pages per visit. There are a few reasons why an AMP page might appear to perform less well than an non-AMP page. If you are seeing poor performance, these are a few areas to explore:

  • Measurement and tracking issues: Make sure you’ve setup analytics on your AMP page using the following two setup guides.
  • Inconsistent landing pages: If AMP page looks different from non-AMP page, it can affect conversion rates. Landing pages should be identical both in appearance and in function in order to accurately assess AMP performance. Also make sure you offer user-friendly landing pages.

You can check this blog post for the things to keep in mind when testing and evaluating AMP.

Posted by Cemal Buyukgokcesu, Global Product Lead, Mobile Web, Google

AMPproject.org moves to amp.dev!

Websites

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

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

The all new amp.dev homepage

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

Documentation across websites, stories, ads and emails

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

The Use Cases section of amp.dev

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

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

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

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

Jung von Matt’s road to the world’s fastest* automotive content marketing website

Websites

Posted by Thomas Feldhaus, Managing Director, Jung von Matt/NEXT ALSTER

Read more about BMW.com in the AMP case study on AMPproject.org or on Jung von Matt’s page here.

“What a nice challenge!” That’s what we thought when we won the job to relaunch the digital home of BMW, BMW.com, and to excite users by transforming the website from only a web showroom to a data driven, entertaining and helpful  state of the art automotive content marketing platform.

Our creatives, strategists and consultants discussed every little detail of the task: digital strategies, content strategies, media strategies, social media strategies, KPIs and so on: everything needed to reach the long-term goal of getting car enthusiasts and those generally interested in mobility excited about the beauty of the BMW brand.

As an agency well-known for creative excellence, our friends in the creative department wanted users to plunge into a digital adventure that would totally ‘wow’ them – with everything an ultramodern user experience has to provide: inspiring articles with high-res images, smooth full-screen videos and a state-of-the-art user interaction design. By setting up this seamless experience, we knew we could meet our goals of reaching users when they were interested in our content.

Let the code experts take the lead and performance will follow

There is a known cliche cliché that developers are just seen as the “code monkeys” who put a stop to any creative concept. Not in our case, because we all agreed that the critical  success factor would be: PERFORMANCE!!!

Our simple formula was “No performance, no fun. Mo’ performance, mo’ fun!” Because what’s the value of super-fancy content if it takes you ages to load on your mobile device.

By using a technical strategy that allowed performance and visual and engaging content to coexist via the combination of AMP and PWA (Progressive Web Apps), we hardly had to make any compromises. Not to mention the fact that we liked that AMP pages are linked and load quickly from all platforms, like Google Search and Twitter.

So in close collaboration with UX, designers and editors we started working on the new BMW.com, with our focus turned 100% to delivering the best-ever mobile user experience.

Close collaborations and requirements for fast, engaging user experiences

Every creative wish brought to our attention was checked for its feasibility with AMP. With the limitation of 50 KB in CSS, we started to research, develop and test whether a desired feature was realisable with the PWA technology. For example, we were able to implement the feature of swiping smoothly from one article to the next whilst remain super-fast – an experience users would normally only expect from a native app.

If the team said, “There’s no chance to implement the feature without a loss of speed”, the whole agency backed our decision, because we were all committed to one divine command: performance.

It also certainly helped that during our development journey, the AMP team was friendly and helpful via Slack, GitHub and in person at conferences.

The world’s fastest* automotive content marketing website

Working with AMP not only demonstrated  to us what a great technology it is, but also what is possible if the development and creative teams agree on a plan from the very first line of code.

The result of all the work: a website that loads unbelievably fast. The all-new BMW.com – possibly the world’s fastest automotive content marketing website. Read more about our results in the recent AMP case study.

Challenge us

Are you up for a challenge? Which major car brand has the fastest automotive website? See how we score on the Visually Complete Index on webpagetest.org. #automotivespeedindex

*Possibly the world’s fastest automotive content marketing website. Please take a look at our challenge for further details.

Read more about BMW.com in the AMP case study on AMPproject.org or on Jung von Matt’s page here.