AMP

Creating Delightful User Experiences Using AMP On Adobe Experience Manager

Websites

Editor’s Note: the following guest post was written by Matthias Rohmer, Development Director at Jung von Matt

TL;DR: Jung von Matt helped BMW drive amazing user experiences using AMP on Adobe Experience Manager.

It’s fairly uncommon that you are free to choose which technology to use to implement for a client’s project. Clients that have chosen an enterprise solution usually seek products and services that complement those choices while allowing for future growth.

When BMW was searching for a company to partner with to rebuild the brand’s website www.bmw.com in 2017, they were looking for that complementary solution. As almost all of BMW’s websites were built using Adobe Experience Manager (AEM), they were looking for a team that was able to both deal with such a high-end system as well as use its capabilities to build an easy-to-maintain, high-performance website.

This was a goal BMW had missed with their already-existing sites. Despite sharing the same backend, they were based on a variety of frontend frameworks and libraries. Fairly early in the process, we decided to bring some fresh air to this stack. Therefore we wanted to introduce AMP as the governing frontend technology. That was where our heads began spinning: what would be the best way to integrate AMP with AEM, especially with a CMS that makes so many assumptions about your frontend development?

Problems to solve when integrating AMP with AEM

After some research it occurred to us that there were three main challenges that we would need to solve in order to render valid AMP pages from AEM: 

  • As AMP requires all of a document’s CSS to be inlined in the `<head>` we would need to find a way other than AEM’s built-in ClientLib functionalities to render our CSS
  • For all of our pages to be AMP valid we would need a mechanism to only render resource hints (`<script async custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.2.js“></script>`) for AMP components actually used on a page
  • To be able to progressively enhance the website for returning visitors, AEM would need to be able to render AMP and non-AMP pages at the same time

Inline CSS with AMP

AEM has a fairly streamlined approach of handling a page’s styles: the ClientLib mechanism will take care of combining all the CSS needed for a page based on so-called categories. Based on those categories you can then let AEM create `<link>` tags in your templates. These will point to built stylesheets containing all your styles.

With AEM’s built-in rewriter pipeline we can use those `<link>` elements to combine those stylesheets into a common `<style amp-custom>` tag. The following (highly compressed) code-snippet should give you an idea of how such a transformer might look:

StringBuilder styles = new StringBuilder();
boolean writeStyles = false;

public void startElement(String uri, String localName, String qName, Attributes atts) throws SAXException {
    if (localName.equalsIgnoreCase("link")) {
        // If the element currently in queue is a link tag inspect it
        String href = atts.getValue("href");
        String rel = atts.getValue("rel");

        if (rel.equalsIgnoreCase("stylesheet")) {
          String css = "";
          // TODO: Load the stylesheet from the JCR, store it with others loaded
          // so far and append to styles
        }

        return;
    }

    if (localName.equalsIgnoreCase("style")) {
        if (atts.getIndex("amp-custom")) {
          writeStyles = true;
          // TODO: Use this flag to emit all styles gathered in styles
          // in the transformer's characters method
        }

        return;
    }

    contentHandler.startElement(uri, localName, qName, atts);
}

Only add needed resource hints

Another challenge we needed to solve in order to ensure AMP validity was to only add those `<script>` elements to the page that are actually needed. We did so by introducing a custom node type to our project:

    <ampJS
        jcr:primaryType="bmw:ampJSResource"
        bmw:ampCustomElementTag="[amp-video]"/>

Each of our AEM components has a child of that type holding information about what AMP component it relies on (amp-video in the example above). The advantage of using a custom node type here is that we can safely and quickly query those nodes when a page gets rendered to determine the required AMP components. In code this looks similar to the following:

final PageManager pageManager = resource.getResourceResolver().adaptTo(PageManager.class);
final String currentPage = pageManager.getContainingPage(resource).getPath() + "/jcr:content";

final String query = String.format("SELECT * FROM [bmw:ampResourceHint] AS s WHERE ISDESCENDANTNODE(s,'%s')", currentPage);

final Iterator<Resource> result = resource.getResourceResolver().findResources(query, Query.JCR_SQL2);

while (result.hasNext()) {
  Resource queryResource = result.next();
  final String type = queryResource.getParent().getResourceType();
  ValueMap properties = queryResource.adaptTo(ValueMap.class);

  String[] usedComponents = properties.get("bmw:usedAmpComponents", String[].class);
  if (usedComponents != null && usedComponents.length != 0) {
    // TODO: Store all used components somewhere for later rendering
  }
}

This piece of logic can then be easily called in an HTML template by using a `data-sly-use` attribute in combination with `data-sly-repeat` to print all required resource hints to the head of the page.

Serve AMP alongside a PWA

For www.bmw.com we wanted to make sure that the site lands on the user’s screen as fast as possible. To achieve this every first-time visitor will receive the AMP version of our page. At the same time, we wanted to implement features that AMP alone could not offer but a PWA (which is still based on AMP!) could.

This means that our application would need to be able to serve two versions of the same document. Luckily for us this functionality is already available with AEM by using Sling selectors.

To establish a selector all you need to do is implement two templates alongside each other. The one the Sling engine should resolve to by default is simply called `html.html`. The other one is named after your selector. In our case it’s `pwa.html` which makes all of our articles either accessible in their pure AMP version via brooklyn-beckham-car-photography.html or brooklyn-beckham-car-photography.pwa.html with our PWA features.

Using this method, we had found a way to independently serve our valid AMP pages alongside our PWA. But how would a user ever end up on our Progressive Web App? That was where `amp-install-service-worker` had its shining debut. By using this AMP component, the www.bmw.com is installing a Service Worker as soon as the user visits one of its pages in any of the AMP caches. From that point on we were then able to rewrite all requests going to brooklyn-beckham-car-photography.html to brooklyn-beckham-car-photography.pwa.html instead in order to silently enhance the user’s experience.

For us, those three were the main challenges when we were building BMW’s new international marketing website. In the end, all of them were solvable without reinventing the wheel, by using functionalities that are already built into AEM and AMP in creative ways.

AMP and Adobe have teamed up with Bounteous to make it even easier to build AMP sites on Adobe Experience Manager. Learn more and get started here.

Written by Matthias Rohmer, Development Director at Jung von Matt

People Behind The Code: NDTV’s Rise To Global Heavyweight

Websites

New Delhi Television Limited (NDTV) is one the most-watched news networks in India. They were also pioneers in bringing their content online with an accessible, user-friendly design.  

As smartphones became more affordable and accessible, mobile usage exploded across India in 2015. However, mobile data speeds also varied wildly from region to region. NDTVs development team quickly honed in on fast loading times as a way to gain a competitive edge, so they became early adopters of AMP. 

Vikas Kumar, NDTV

We caught up with Vikas Kumar, the head of NDTVs technology team, to talk about the impact AMP had on their mobile-first approach. 

Could you give us a bit of background on your company, and what made you decide to use AMP? 

NDTV launched in 1988 as a production house for Doordashan, a state-run news channel. We eventually launched our own independent channel, with dedicated content across news, sports, entertainment, finance, tech, to name just a few. 

We launched NDTV.com in 1999, and in the last two decades have grown into one of the top 20 news websites in the world. Through a commitment to quality content, UX, and localisation (our content is available in English, Hindi, Tamil, and Bengali), we now average close to 200 million monthly active users. 

We always saw page loading time as key to growing our online audience. One of our team members read an article about AMP, which got the developers talking. Our Google Account Manager sent us an email about it the day after, so it seemed like fate was calling!

Overall, we felt that AMP’s faster load times, and optimizations like pre-caching on SERP, could help us deliver a superior user experience.

Did integrating AMP present any challenges?

No, not really. Our SEO had been moving away from desktop towards mobile for some time, and with mobile index first taking precedence over desktop search, we knew it was the right option. 

We had some initial doubts about integrating third-party widgets, and whether or not we could maintain the existing look and feel of the site, but we found easy workarounds for everything. For example, <amp-iframe> is very useful for rendering widgets or elements that use custom JavaScript.

How did AMP impact your business? 

For ad-supported sites like ours, more impressions means more revenue. The faster loading pages and better user experience helped us establish a regular audience and generate income that we could reinvest into site expansion.

In this industry – even a one second difference has a massive impact in reducing bounce rates and increasing average session duration. After implementing AMP, average First Meaningful Paint (FMP) went from three seconds to one. 

AMP also prevents render blocking JavaScript by making it Asynchronous, and it eliminates third-party JavaScript which drags on loading time. It made us fast and agile. 

Our competitive advantage has decreased over time, as most publishers in India have embraced AMP and also take advantage of the platform. However, AMP really helped establish the channel with our target audience from the get-go. 

What advice would you give to anyone considering AMP? 

Make sure you familiarize yourself with all of the available AMP components; it will help you build a strong initial site framework. 

You should also continuously assess whether or not your AMP pages are valid, and if they’re not, take the time to understand why. The AMP website has resources for everything you could hope for, so we visit all the time.  

Did you find any AMP components difficult to implement? Are there any components you’d like to try out? 

We found <amp-live-list> a bit tricky to begin with! We wanted to run graphics of real-time election results on our site, but the third party JavaScript in it caused a problem.

In the end, we just posted our problems to the community and it was great that we could find a solution with the help of fellow developers, because AMP is open sourced, it’s constantly evolving so it’s great to collaborate and help each other.

We’re really looking forward to testing <amp-web-push>, which just launched recently.

What excites you most about the future of AMP? 

News like AMP being part of the OpenJS foundation gives us confidence that it’s being built with publishers and developers in mind, and is an open platform. New components and experiences like AMP Stories just add to the excitement. AMP+ PWA with one line of code would be awesome to have!

Vikas and his team are excelling with AMP – and you could too. Check out the resources on amp.dev for everything you need to further your career with AMP. Grow your AMP skills.

Have you been using AMP as part of your strategy? Tell us your story! 

To stay up-to-date with the latest news, features, and tips about using AMP, sign up for our newsletter.

Posted by Alex Durán, AMP Project Marketing at Google

Skimlinks’ Pioneering AMP Extension Helps Maximize Commerce Content Revenues

Websites

Editor’s Note: the following article was originally posted on Skimlinks.com by Debbie Gainsford, Senior Product Marketing Manager at Skimlinks.

It’s tough to be a publisher in 2019. With advertising revenues falling, anything that can effectively and consistently monetize your content is a must, so it’s no surprise that uptake of Skimlinks’ innovative AMP extension has exploded since launch late last year.

The solution, which is the first of its kind, extends our core commerce content technology to AMP articles, enabling publishers to seamlessly monetize affiliate links to merchants.

To date, more than 100 publishers have installed the extension on over 500 domains, accounting for 10M+ affiliated clicks. Some of our publishers have seen an uplift of more than 400% in both sales volume and order value, compared to the same article on the desktop or standard mobile version.

Why is AMP so Important?

As readers and consumers become easier to reach on mobile devices, it has become critically important to give them a seamless experience when they are searching for and reading mobile content. For publishers, AMP has been an invaluable development, as it helps mobile pages load faster, providing an improved reading experience for users. Since its launch in 2015, AMP has grown to power billions of pages across the web, from tens of millions of domains.

The priority for publishers on the AMP platform is to ensure that they can make a profit from their mobile content. In a survey of 124 publisher executives by Digiday this May, 51 percent of publishers using AMP said it was “very significant” or “extremely significant” as a driver of revenues, compared to only 28 percent for Facebook and 25 percent for YouTube.

Our CEO, Sebastien Blanc says “ With the rapid growth of mobile for content and for commerce traffic, mobile monetization has been a top priority for almost every publisher we work with. With this solution we’re confident we can give commerce content a place on smartphones, where more and more readers engage with editorial publishers’ content.”

How leading publishers are monetizing their Commerce Content on AMP

Leading Publishers have installed the Skimlinks AMP script to meet several different business challenges and objectives.

New York Media: Extending to new merchants for uplifts of more than 140%

“We did monetize some AMP articles that linked to Amazon, but we were not monetizing our non-Amazon content, so that is why we installed the Skimlinks extension. Since then we’ve seen more revenue and increased search volume. We now publish all of our content on AMP.” Camilla Cho, GM eCommerce

Around 30% of The Strategist’s audience consume articles via AMP, and they’ve seen great success when monetizing these articles. Their top performing AMP article generated 146% more revenue than the desktop version.

VerticalScope: Monetizing more than just display ads on AMP articles

Kendal Clarke, General Manager of Commerce says “Before using Skimlinks we were just monetizing the AMP traffic with basic display ads, and we didn’t have any commerce links. We installed the Skimlinks AMP extension to capitalize on the revenue we were missing. We knew we generated commerce revenue on these pages via other channels and so it seemed like a no brainer to work with a partner who could help us access this incremental revenue.”

Group Nine Media: Creating a brand new revenue stream with Commerce Content

Group Nine Media have only recently begun their commerce content journey to build a new revenue stream for their business. Working with Skimlinks they have been able to monetize their content across all channels, including AMP. And AMP is a key channel; so far this year, 42% of the Thrilist traffic is via AMP and a staggering 61% of their search traffic is via AMP.

Sam Clanon, Director of Commerce Strategy says “We installed the Skimlinks extension to bring affiliate links to AMP articles for the first time at scale. Since installing the extension, we have captured affiliate commerce revenue using links that are already present in our content. If AMP comprises any meaningful portion of your traffic, Skimlinks is one of the quickest and easiest ways to start generating affiliate revenue from that content.”

Immediate Media: Saving time and resources by automating a manual process

“On radiotimes.com, 15-20 percent of all content is via AMP. AMP traffic is hugely important but monetizing it has always been a challenge. Before installing the Skimlinks AMP extension, we were manually creating and adding affiliate links using the Skimlinks link wrapper. It’s really streamlined the process – no more time spent creating manual links.” says Glenn Caldecott, Affiliate Manager

“If you’re looking to monetise mobile traffic through affiliate marketing, the Skimlinks AMP solution is a no-brainer. The integration is lightweight and easy to implement.”

Reach: Measuring the performance of AMP articles

Publishers know how important analytics are in developing the right content, for the right audience, to maximize revenues. You need detailed insights to understand the performance of your commerce content strategy and to continually improve this key revenue stream, which is why Reach chose to install the Skimlinks AMP script.

“Before installing the Skimlinks AMP extension, we had built a server side solution that adds the affiliate links on the backend, so they’re included on AMP pages. However, we weren’t able to track the impressions and clicks data. Since installing the Skimlinks AMP extension, we can now track impressions as well as clicks which means we can measure CTR on AMP pages, something we couldn’t do previously with our server side solution. We’ve seen a 9% increase in order value from AMP for a top article.” Jeremy Mundy, Senior Product Manager, Revenue

Advantages of Mobile for Commerce Content

Publishers sometimes believe that commerce content on mobile is only appropriate for low involvement, low cost items. However, for many consumers, purchasing on mobile has become second nature, and they are increasingly confident to buy higher ticket items, and those that involve more complex purchase decisions.

This is where affiliate links in mobile content offer consumers a valuable service, as they can go straight from advisory articles to purchase the items they are reading about. We’ve seen from our data that consumers are purchasing TVs worth over US$5,000 from commerce content.

Another area where mobile has an advantage for commerce is in personal items; mobile is a much more private medium than desktop, and when customers are researching intimate or sensitive purchases, they are likely to be more comfortable doing so on a smartphone than on a desktop.

A high-profile example of this comes from New York Media, who were winners of the recent 2019 Commerce Award for Publishers (The CAPS) for Best Mobile Article. The winning article, from The Strategist, was their roundup of the best vibrators available on the market. This was part of a series entitled Things We Don’t Talk About, which focused on finding and recommending the best hygiene, sex, and bodily function-related things we all need but might be too embarrassed to ask about.

Ready to monetize your AMP content?

Like the Skimlinks JavaScript, the Skimlinks AMP integration is a couple of lines of code that needs to be applied to AMP pages. You only need to install the code once, and then there is nothing else for you to do; links will automatically be affiliated and you will start generating revenue from your AMP articles. After installation, no maintenance or updates are needed.

“If you have AMP traffic that you are not currently monetizing then this is a simple and effective solution. One quick implementation, and then you don’t have to worry about it. The extension has given us an easy passive revenue stream, as we have been able to monetize all the different advertiser partners that we work with” Kendal Clarke, General Manager of Commerce, VerticalScope

To quote the winner of the best Mobile Article at The CAPS, “I cannot imagine why someone would not use the Skimlinks AMP extension for publishing their content.”

Skimlinks Publishers can access the AMP script in the Publisher Hub.

For Publishers not yet working with Skimlinks, sign up now.

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.