AMP

Cumulative Layout Shift (CLS) in AMP

Websites

Content jumps in web pages can be very detrimental for the user experience. As a result of them users might end up clicking the wrong elements or losing their reading position – thereby causing lower engagement rates, higher bounce rates and ultimately lost business.

In this post we’ll analyze how AMP mitigates these content shifts, allowing us to create user-friendly experiences on the web with little effort, thanks to its internal layout system.

We’ll also review different ways you can measure shifts in AMP and non-AMP pages, by using different tools.

Overview

Many times when visiting web pages, users notice that the page content jumps.

News sites, for example, tend to suffer from layout shifts: it’s not uncommon to be reading an article and noticing that the text moves down to make space for some resource like a video, an image or an ad.

AMP however was designed to be different, and AMP components and design principles make it near impossible to trigger layout shifts. This happens thanks to the AMPHTML Layout System, which lets AMP size the page elements before any remote resources, like images, are completed. As a result, rendering and scrolling jank is reduced, which contributes to a much better user experience.

Up until recently, it was hard to measure the exact impact of layout shifts in sites. Now thanks to a new metric: Cumulative Layout Shift (CLS), we can have a more exact idea of how meaningful this is.

The Analysis

The CLS score is based on the layout instability API, which detects when an element that is visible in the viewport changes its start position between two frames. A single shift is bound between 0-1, where 1 means that all of the visible content has shifted. The overall CLS score is the cumulated value of all layout shifts happening on page load.

To see how AMP performs with respect to CLS in the wild, we used a puppeteer based script to analyze a random set of 560 URLs from 450 different domains. The pages selected are largely from different domains, spanning different categories and have a paired AMP version, which we checked for validity first. As AMP is historically mostly implemented for mobile, we restricted the analysis to mobile viewports and connections, but be aware that CLS as a metric is obviously also very important for desktop, and should be measured and tracked there as well. Within our test set we found that CLS in AMP frequently outperformed the non-AMP version.

In 71% of cases the AMP version has a smaller CLS score than the canonical, and in fact in 86% of cases CLS for AMP is zero, as expected due to its design paradigms of keeping layout stable. 

There are use cases where layout-shifts are impossible to avoid, for instance when user-consent is needed and AMP team is currently investigating to minimize the effect on CLS even more. 

In the following section, we’ll analyze different ways to calculate CLS in AMP, including the method we used to arrive at the previous conclusions.

Calculating Layout Shifts in AMP Pages

In HTML pages you can measure CLS by executing a snippet of JS code. In AMP you can’t run custom JS code outside AMP components, or <amp-script>, but here are some easy ways of obtaining this score through different tools:

1. CLS Calculator tool:

The CLS Calculator tool lets you input a URL and easily obtain its CLS score. 

Here are some steps of how to run this, by using a site completely built on AMP: amp.dev:

1. Go to https://layoutstability.rocks/

2. Enter a URL. In this case, amp.dev.

3. Run “Get CLS”.

The test returns the CLS value associated with the page:

In this case, the value of CLS is zero, which means that elements in the page haven’t shifted. As said before, this is one of the benefits of AMP, which leads to a better user experience.

The tool has another great feature: if you have a site that uses AMP in “Paired Mode”, meaning that you are publishing AMP and non-AMP versions of your pages, you can enter the canonical URL and will return a comparison between AMP and non-AMP pages.

Feel free to use this tool on your own site.

2. Lighthouse:

Lighthouse, another popular web performance tool, has recently incorporated CLS as a metric (currently in beta).

Here are the steps to obtain a report for an AMP-First site: amp.dev:

1. Open the command line tool.

2. Run: npm install -g lighthouse@next to install the cli tool.

3. Run: lighthouse https://amp.dev to generate a report.

This will generate an HTML file in the current directory. 

Opening the file in the browser shows the CLS value of the site (in the case of amp.dev, zero):

3. Webpagetest:

Webpagetest is one of the most popular web performance tools. It lets you obtain the main performance metrics for a website, simulating different devices and locations.

The tool currently provides CLS as a metric, inside one of the internal options. This could change in the future, making the metric available in the main results page.

To obtain the CLS for amp.dev:

1. Go to https://www.webpagetest.org/

2. Enter https://amp.dev as URL.

3. Click “Start Test”.

4. Once the results are received, click on “View JSON result” in the top left corner:

This will return a JSON file with the results of the test.

Searching for the first occurrence of “CumulativeLayoutShift”, will show the value of this metric, which is zero as in the previous tests.

4. Puppeteer:

Puppeteer can also be a great option for automatic retrieval of CLS for a given website, or to even batch process many websites. Integration through puppeteer makes also sense for testing and QA purposes. 

A (truncated) example snippet on how to get CLS with Puppeteer can look like this (full code here):

const page = await browser.newPage(); const client = await page.target().createCDPSession(); // throttle network and CPU as needed, see e.g. here: // https://michaljanaszek.com/blog/test-website-performance-with-puppeteer await client.send('Network.enable'); await client.send('ServiceWorker.enable'); await client.send('Network.emulateNetworkConditions', Good3G); await client.send('Emulation.setCPUThrottlingRate', { rate: 4 }); await page.emulate(phone); // inject a function with the cls measurement code code from : // https://web.dev/cls/#measure-cls-in-javascript await page.evaluateOnNewDocument(calcJank); await page.goto(url, { waitUntil: 'load', timeout: 60000}); await page.evaluate(calcJank); let cls = await page.evaluate( () => window.cumulativeLayoutShiftScore );

Conclusion

Visual stability is a very important aspect of the user experience. AMP’s architecture is intentionally designed to avoid layout shifts and make it easier to create user-friendly experiences on the web.

In this post we have explored different ways of calculating Cumulative Layout Shift for AMP pages. 

  • For sites that use AMP as their primary framework, evaluating this metric can help them understand better the benefits that AMP can bring to users.
  • For those using the “Paired AMP” approach, comparing  the value of CLS on their AMP vs. non-AMP versions of the pages, can help them understand which performs better and guide future technical decisions.
  • For those that are not yet using AMP, running the previous tests in AMP pages from popular sites (for example, news publishers) can give a better understanding of the benefits AMP could potentially bring to their own sites.

Written by Demián Renzulli, Martin Schierle, and Gilberto Cocchi, Web Ecosystem Consultants, Google

Adobe Experience Cloud Extends AMP Support

Websites

Adobe has been working to seamlessly integrate AMP support into Adobe Experience Cloud applications for its customers, from publishers to advertisers; below is a summary of some recent integrations across Adobe Experience Manager, Adobe Campaign, and Adobe Analytics.

Adobe Experience Manager (AEM)

To create new ways for their customers to deliver seamless, user-first mobile experiences, Adobe recently announced AMP support for Adobe Experience Manager core components. AMP-enabled sites built with Adobe Experience Manager can deliver more efficient, discoverable, and optimized experiences for mobile users – check out the PR on Github.

With the new compatibility, developers are able to create a single set of code to deliver both HTML and mobile optimized instances without the need to write separate content or code. Additionally, because AMP’s open source code is available to the Adobe Experience Manager community, developers can build custom components to meet the needs of their individual sites.

By enabling Adobe Experience Manager components to output AMP, the two open source initiatives came together to strengthen the mobile content ecosystem and create unmatched mobile experiences. To learn more about the great work by Adobe Experience Manager partner, Bounteous to make this happen, check out this article. 

Adobe Campaign

As another demonstration of its commitment to innovation, Adobe announced AMP for Email compatibility with Adobe Campaign Classic, part of Adobe Experience Cloud. This functionality allows the use of AMP components inside dynamic, engaging emails sent from Adobe Campaign Classic. 

Compatibility with AMP for Email allows marketers to innovate and engage with users directly within emails. With the new functionality, customers can leave feedback, make reservations, take polls, and more without ever leaving an email.    

With consumers spending so much time in their inbox, Adobe gives its customers a way to stand out among the over 290 billion emails that are sent every day. For more information about AMP for Email compatibility within Adobe Campaign Classic, check out the Adobe blog.  

Adobe Analytics 

Adobe Analytics brings a seamless integration to AMP pages by integrating AMP linker into Adobe Analytics. AMP Linker is a new capability in AMP that helps keep user sessions in sync by decorating outgoing links from AMP cache with params such as AMP Client ID in a URL parameter. Adobe Analytics consumes the parameter and writes it down as a first-party cookie.

By integrating AMP linker and Adobe Analytics, organizations will be able to keep user sessions in sync between AMP and Non-AMP pages. Learn more about Adobe Analytics’ AMP support here

For more information and to learn the latest from Adobe, check out Adobe’s first-ever digital Adobe Summit that took place March 31st, 2020.

Posted by Jeffrey Jose, Product Manager, The AMP Project, Google

People behind the code: The Axios ascent

Websites
Digital media company Axios has stepped onto the scene with a quick, smart, audience-first experience. Sound familiar?

Fast, audience-first and efficient – talk about mission alignment. Marissa Halpert, a front end engineer working out of Washington, D.C., and Rick Terrill, leading the front end engineers out of Texas, couldn’t ignore the connection! Together, they led Axios’ shift to AMP-first. We invited the duo for a chat to discover how a beta test in 2019 escalated into a full migration.

Marissa and Rick

Thanks for joining us! To kick us off – could you share a bit about your background? 

Rick: I got into tech through a love of video games, and dreamed of becoming a game developer. That quickly turned into a love of Flash (which, I assure you, was super cool back then). A front end nerd was born. 

Marissa: I was introduced to programming in high school before going on to study computer science at James Madison University. Since then, I have done full-stack development at a Fortune 500 company and led front-end web projects at a digital agency, before joining Axios in April of 2019. 

Can you tell us a bit about Axios, and what attracted you to AMP? 

Marissa: Axios launched in 2017 with a mission to make people smarter, faster. We share breaking news across politics, tech, science, media, business, and the world.

Rick: At Axios, we’re all about being audience-first. We want our site to be fast and easy to use, with content that’s worthy of the reader’s time. We figured going AMP-first was the best choice to help us achieve that, and it’s really worked out.

How did you approach making the switch to an AMP-first website?

Rick: It was a two-phase approach. We created a beta in 2019, using an ADR to work through the challenges and agree on details. We implemented our single-story page as a separate application, which was responsible for rendering two or three years of content and a few ad units. 

Marissa: Rick’s team wrote most of the beta code before I joined Axios. Wanting to understand more about AMP I attended the Roadshow in Atlanta and began advocating for going AMP-first. After getting the thumbs-up, we kicked off a full discovery process. We chose Next.js 9.1 because of its built-in AMP integration and our team’s existing React knowledge. 

What drove that decision?

Rick: The beta test was something quick and easy that we could observe  – but our dev team had to maintain two separate code bases (axios.com and amp.axios.com). They were both React.js, but they were also completely different ways of thinking. We wanted to make sure everyone was working in the same way together, using React.js and Next.js. 

Marissa: AMP had come a long way since our AMP beta debuted. Ultimately, the lightning-fast speed that AMP is known for (along with the vast component library and community outreach) convinced us to go AMP-first. 

Were there any challenges you had to overcome?  

Rick: All of our ads at Axios are native ads that we build in-house, and our existing creatives varied in size and dimensions. So the biggest challenge by far was adjusting to the fixed-height world of AMP. This could be a challenge for other businesses with digital ads when building with AMP.

How has AMP helped you improve speed?  

Rick: There was a symbiotic relationship between Axios and AMP straight away, because our mission is to help people get smarter, faster on the news and information that matters. AMP forced us to examine every feature, down to the byte, and make sure that it’s worthy of the reader’s time. It also pushed us to remove a lot of complex, client-side logic, which increased Lighthouse scores several-fold. 

How has AMP changed your perspective as a team of developers?  

Marissa: Being AMP-first means constantly flexing your creative muscles. We needed to re-evaluate how we wrote inline JavaScript. We need to be more mindful of the CSS that we are writing to stay under the 75kb limit. The AMP validator reminds us to always be thinking about the user’s experience. 

Rick: Exactly. If you only have one of each color in your pencil case, you start drawing a lot quicker instead of worrying about shades. 

Interested in learning more about AMP? 

Then sign up for our email newsletter to get the latest updates, event announcements, community discussions, and advanced tutorials straight to your inbox. 

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

The AMP Camp build process

Websites

What’s AMP Camp?

It’s one thing to work as a Developer Advocate and talk about how AMP can be used to create quick, interactive sites. It’s quite another to actually build one! So a few of us decided to create a simple but fully functional e-commerce website, covering everything until the checkout. We hoped to learn the subtleties involved in creating these interactions, to create guidance for others, and to make some nice feature requests.

And, thus, the AMP CAMP demo site was born!

https://blog.amp.dev/wp-content/uploads/2020/03/AMP-Camp-blog-post-video-compressed-by-Paul-1-2.mp4

We learned a whole lot making this site, and we want to share this with you. In this series of articles, we’ll explain how we built the site and created its interactions. You can also watch the talk at the end of this post.

First things first: let’s start with an article about the AMP Camp build process.

Why did we use a build process?

It’s common to compile software from a set of source files into the files that are used in production. This is called a build process. Sometimes it’s convenient to do this with HTML – to create resources in a more convenient form, then automatically compile that down to the HTML that gets served to browsers.

A build process is especially convenient with AMP. After all, the information required to render an AMP webpage lives in a single file. Its CSS is included inside the HTML in <style> tags. And if you’re not using <amp-script>, you won’t even be providing separate JavaScript resources. In contrast, almost all non-AMP webpages refer to many other CSS and JS files. AMP is simpler!

Nonetheless, while you’re creating your AMP pages, you probably won’t want to create each page within a single file unless your site is very simple. At the very least, unless you’re using you’re combining CSS and HTML intentionally in JSX or web components, it’s messy to work with source files that contain both CSS and HTML. You’ll likely at least want to create CSS and HTML in separate files, then use a build process to combine them.

Thinking about this further, your webpages will usually share much of the same HTML. For example, they may have the same navigation menu, or similar footers. It’s simply not a best practice to copy identical HTML from page to page. What if you want to change that menu? You’d have to copy and paste the new HTML across your site! That menu should live in its own file instead. More generally, you want to build pages from HTML partials. Since AMP is an HTML framework, in which HTML describes user interactions and can even contain logic, this holds doubly true.

Similarly, it’s rarely best to write all your CSS in one jumbo-size file and make every page load it. You might argue that, once this large file loads, it will likely be cached, so as the user progresses through your site, they won’t experience that 200K render-blocking hit on each page. But if that first page loads slowly, the user may never get to that second page! You really want each page to load a smaller CSS file, containing mostly only the styles used on that page.

You can’t use more than 75K of CSS if you want your AMP page to pass validation. Plus, that CSS must be contained inside the HTML to save a render-blocking network call! Hence, it’s best to only add the CSS to a page that is needed. All this is much easier if you use a build process to assemble your CSS from partials, then merge that into each HTML file.

So, just as it’s often easier and more convenient to assemble webpages from smaller parts with a build process, it’s easier and more convenient for AMP web pages. As a bonus, plenty of build tools have been created specifically for AMP, either to make AMP pages easier to create, or to make them faster for users! To learn more, let’s take a look at the build process used in the AMP Camp demo site.

The AMP Camp site is built with node.js and gulp. Throughout this article, we’ll refer to the code on github, especially the gulpfile. We’ll also refer to ways in which you can make your build process better than ours!

Building our HTML

const fileinclude = require('gulp-file-include');

AMP Camp builds its HTML from partials, in much the way discussed above. Since our site is relatively simple, we used fileinclude. That said, if we expand the project just a little, we’ll probably want to migrate to a more powerful tool.

To see this in action, check out the start of index.html, which includes separate partials for the <head>, the page header, the navigation menu, and some other things:

<!doctype html> %%include('../partials/copyright.html') <html ="" lang="en"> <head> %%include('../partials/head.html', { "pageType": "index" }) </head> <body> %%include('../partials/header.html', { "pageType": "index" }) %%include('../partials/menu.html')

Some of these partials contain other partials. Notably, we decided to put our analytics in its own partial, analytics.html, which header.html then imports.

Building our CSS

AMP Camp’s head.html partial is built from subpartials as well. These subpartials are not HTML files, but CSS files. head.html includes CSS files that are common to each page:

<style amp-custom> %%include('../../css/global.css') %%include('../../css/header.css') %%include('../../css/menu.css') %%include('../../css/footer.css') %%include('../../css/social.css')

as well as CSS that’s specific to each page:

%%if (context.pageType == 'index') { %%include('../../css/index.css') }

To build more efficient CSS, you can divide your HTML into smaller partials and subpartials and associate the appropriate CSS with each. This way, each page of the site truly only contains the CSS it needs. For example, amp.dev organizes its CSS with atomic design, a system in which larger UI design elements contain progressively smaller ones, all the way down to “atoms”. Check it out here! Another option is to use a framework like Next.js, which lets you do a React-style CSS/HTML association. (We encourage you to learn about Next.js’ AMP support here – or try this tutorial.)

const sass = require('gulp-sass');

AMP Camp builds its CSS from SASS, a popular higher-level language that compiles down to CSS. This works with AMP pages just as it does with non-AMP pages!

However, if your SASS happens to contain extended characters, the SASS processor will automatically output a rule to specify the character encoding:

@charset "UTF-8";

Unfortunately, such rules aren’t standard for CSS that lives inside a <style> tag. Thus this rule inspires the AMP validator (see below) to throw an error!

Our solution isn’t pretty, but it’s simple and robust: after SASS does its work, we postprocess the resulting CSS to remove any such rules:

gulp.task('styles', function buildStyles() { const cssEncodingDirective = '@charset "UTF-8";'; return gulp.src(paths.css.src) .pipe(plumber()) .pipe(sass(options.env === 'dist' ? { outputStyle: 'compressed' } : {})) .pipe(options.env === 'dev' ? replace(cssEncodingDirective, '') : noop()) .pipe(autoprefixer('last 10 versions')) .pipe(mergeMediaQuery({log: true})) .pipe(gulp.dest(paths.css.dest)); });

AMP-specific tools

const gulpAmpValidator = require('gulp-amphtml-validator');

Speaking of AMP validation, we want to ensure that our pages are always meeting AMP’s standards, so that they’ll be eligible for AMP caches, and so we’ll avoid errors, but also because we want to serve fast, accessible pages. Consequently, our build process includes the AMP Validator. We’ve set it up so that when any page isn’t valid AMP, the build breaks.

gulp.task('validate', function validate() { return gulp.src(paths.html.dest + '/**/*.html') .pipe(gulpAmpValidator.validate()) .pipe(gulpAmpValidator.format()) .pipe(gulpAmpValidator.failAfterError()); });

If we didn’t want any invalid page to break the build, we could omit the failAfterError() step above.

Note that some of AMP Camp’s pages are rendered from templates on the server. We don’t want to run the validator in the server! Fortunately, since what we substitute into those templates is simple and highly predictable, we feel confident running the validation on these templates. In a larger project, it would be safer to render some sample pages during the build process and test those for validity.

const ampOptimizer = require('@ampproject/toolbox-optimizer');

Finally, we use the AMP Optimizer for a number of purposes!

  • Many AMP components require their own small script to function. The developer needs to keep track of these for each page and ensure each is included in the <head>. That’s why, for this project, we developed the amphtml-autoscript gulp module, which detects which components a page uses and automatically inserts the necessary scripts! This functionality has now been incorporated into the AMP Optimizer.
  • AMP pages contain boilerplate that hides the page until the AMP runtime loads, gets parsed, and executes. When it starts up, the AMP runtime performs various transformations on the DOM, then unhides the page. AMP caches perform these transformations in advance, serving the modified HTML right to your browser and speeding things up substantially. The AMP Optimizer does this right on your origin! This can make AMP pages twice as fast on your origin, so we think it’s invaluable.
  • Finally, it automatically inserts mandatory AMP tags so we don’t have to.

AMP Camp runs the AMP Optimizer during the build process on our compiled templates. This means our template delimiters can’t contain angle brackets, like <% and %>, because the Optimizer would parse these as HTML. We use square brackets ([% and %]) instead.

AMP Optimizer can be used in your server as well, at runtime. If you do this, you should cache optimized pages to avoid excess server load.

And there you have it

We’re hoping the build process we used for AMP Camp helps make your own AMP project easier! Again, to see a build process for a larger site, check out the way amp.dev is built. Or, to see an interesting React-based approach, check out the Concert sample or Article sample.

Stay tuned for the next article in the AMP CAMP series – how we used templates on the client and on the server.

Happy building!

Written by Ben Morss, Developer Advocate

How to Combine AMP with Dynamic, Personalized Content

Ecommerce

Note: the following guest post was written by Madison Miner, CEO and founder, WompMobile

AMP is well known as a comprehensive solution for speed. A common misconception, however, is that because AMP pages may be served from a cache, AMP is best suited for static content like news articles and blog pages, and not ideal for dynamic, personalized experiences. As an open-source initiative, AMP has steadily evolved and matured. Today, AMP delivers rich, dynamic content with guaranteed speed – making the framework perfect for e-commerce, retail and other industries that rely on delivering targeted, personalized experiences. 

This post describes how dynamic data – commonly required for e-commerce websites – can be used within the AMP framework.

Three Types of Dynamic Data

1. Time-sensitive data: Data that’s the same for all users and changes frequently, such as product pricing and availability. Example AMP pages that exhibit time-sensitive data:

2. User profile or personal data: Data that changes based on what you know – or can guess – about a user. This is often used to display relevant products based on a user’s browsing history and their location, or to serve highly targeted, personalized experiences. Examples:

3. User-account data: Data that’s tied to a specific-user account, which often includes authentication, currency, number of items in the cart, or a wish list. Examples:

  • George remembers your Cookie settings, and only prompts new users to select cookies on AMP 

A Deeper Dive into How AMP Works

AMP requires the adoption of performance guardrails and best practices while ensuring content can be consumed from a cache. To implement each of the dynamic features outlined above, two things are required: the <amp-list> component and an AMP-compatible API. Let’s see how each of these features work.

Time-sensitive data is the simplest type of dynamic data, only requiring an amp-list and an API that returns pure JSON with the correct CORS headers.  Since the price and availability data is the same for all users, the API doesn’t need to concern itself with cookies or credentials. 

To return meaningful user account data, an API will typically use cookies to identify users. To include cookies in requests made by <amp-list>, the credentials=”include” attribute is required. This requires a more sophisticated API that accepts cookies, identifies users, potentially sets cookies, responds with personalized content, and also responds with an access-control-allow-credentials header. 

When using AMP pages on your own domain, there are no unusual cookie restrictions. However, when pages are served from the AMP cache, it’s important to remember that your domain is recognized as a third party. Some browsers, like Safari, may block third-party cookies. It is recommended to understand Safari cookie management before committing to a final strategy.

There are several workarounds for this problem, such as using the AMP client ID to recognize users instead of cookies. When AMP pages are served from your own domain, cookies work as expected, allowing AMP to deliver user-specific data for all browsers.

Creating a personalized experience based on a user profile or persona can be done in several ways. 

  • Deliver an experience based on location
    • IP-geolocation can be used on the server to approximate a user’s location. A database of IP addresses, like those offered by MaxMind, is required. IP-geolocation won’t provide GPS-like accuracy; however, it returns accurate city-level results. Once the user’s approximate location is determined, the server returns localized results via an API response. This can be used to display nearby stores sales, the closest services available location, or the local currency and language. George.com, Providence Health Services and Zales.com are examples of brands that utilize IP-geolocation to approximate location and return personalized results. 
  • Deliver an experience based on user history
    • Show related products or services based on the customer’s previous browsing history on your site. 
  • Deliver an experience based on persona 
    • Use data and algorithms to guess which of your products the customer will be most likely to buy. This technique may require working with third-party data and creating AMP-specific APIs.

A key component of this type of customization is tracking user behavior. The amp-analytics component can be used in several ways to report user journey steps, such as product views and user interactions. The AMP Client ID is the most straightforward and consistent way to unify session management.  The Linker feature of amp-analytics can also be used to link amp sessions between 3rd party amp caches and your own domain. 

Final Thoughts

The AMP framework is unapologetic about the importance of speed, and sets rules and best practices to guarantee a fast experience.  But achieving speed can’t come at the expense of functionality. You need both. As you’ve learned, AMP provides a framework to do just that.

By using components and APIs, AMP eliminates bloated JavaScript and historic bad practices, while retaining all the features and logic that are critical to any business. AMP is a great way to build for the web that provides a balanced approach, promotes speed and helps your customers. 

More room for more style

Websites

Increasing the AMP CSS limit

Whether your style is a professional journalist website or bohemian ecommerce emails, AMP now gives you more room to show it. The AMP maximum allowable CSS limit has been raised to 75kB – a 50% increase! This is the biggest, and, well, only change to the CSS cap in the near half-decade lifespan on the AMP project, and affects both AMP powered websites and AMP for Email.

Why

AMP had the 50kB limit with the best intentions – a forcing function to encourage strong CSS hygiene. Over the years, we’ve received a lot of feedback on the CSS allotment, and we hear you! Fitting experiences that meet higher-than-ever user expectations within a maintainable 50kB limit is difficult. 

This was no hasty change – we investigated many different possibilities, including automatic AMP cache level minification, migrating to a percentage-of-used-selector based limit, or even a dynamic limit based on document complexity. Ultimately, raising the limit was the option that best fit AMP developer’s needs.

What’s next

So the good news is that you now have 75kB of CSS available on each AMP powered webpage and AMP email. Even better news: you don’t have to change a thing on your existing AMP experiences! Since the AMP library is evergreen, this limit will automatically roll out to any and every AMP powered site soon. 

The AMP team is thrilled to see what new possibilities this change will open up for all developers, and can’t wait to see what’s dreamed up. You can join the community to share what you make, or just follow along with all AMP updates, on the Slack channel, twitter, or by sign up for our newsletter.

Crystal Lambert, Technically a Writer, Google, AMP Project

Patrick Kettner, Developer Cheerleader, Google, AMP Project

Easier AMP development with the new AMP Optimizer

Websites

Creating AMP pages has just gotten a lot simpler with the new AMP Optimizer 2.0. 

The primary goal of AMP Optimizer is to make AMP pages load even faster by applying additional server-side optimizations. With this release, AMP Optimizer also makes it a lot simpler to integrate AMP into frameworks and CMSs! For example, we’ve just released an AMP plugin for the wonderful static site generator Eleventy that makes use of all these new features. 

But first let’s take a quick look at what’s new in AMP Optimizer 2.0:

  1. Auto AMP component script import. 
  2. Auto add any missing mandatory AMP tags.
  3. New Markdown support via <img> tag to <amp-img> conversion.
  4. CSP tag generation for inline amp-scripts.
  5. Built-in HTML minification removing unneeded whitespace (this includes AMP specific optimizations such as removing whitespace from inline JSON and minifying inline amp-scripts using terser).
  6. AMP server-side-rendering now supports the intrinsic layout. This means AMP Optimizer can remove the AMP boilerplate for pages using the intrinsic layout resulting in much faster load times.
  7. Transformations run 40% faster by switching from parse5 to htmlparser2!

Now, let’s talk about the first three features and how they simplify building AMP pages and integrating AMP into Frameworks and CMSs.

Auto AMP component extension import

Auto AMP component import means that AMP Optimizer will analyze the DOM for any used AMP components and will automatically inject all needed scripts imports into the head.

For example, if it encounters the following tag:

<amp-video src="video.mp4" width="300" height="200"></amp-video>

It will automatically add the amp-video script extension import:

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

This works also for AMP components which don’t require a specific tag:

<div amp-fx="fade-in">I will fade in</div>

In this case, the presence of the amp-fx attribute will trigger the import of the amp-fx-collection script:

<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>

This is pretty awesome, because many AMP features are now super straightforward to use and no longer require you to go to the AMP docs and copy/paste the script import. We’re expecting to see a significant drop in amp.dev traffic once this feature has been widely adopted!

Auto add any missing mandatory AMP tags.

The other piece of the puzzle for how AMP Optimizer improves developer experience is the ability to add any missing mandatory AMP tags. For example, given the following HTML fragment:

<html> <head> <title>My Page</title> <link rel="canonical" href="/mypage.html" /> </head> <body> <h1>Hello World!</h1> </body>

AMP Optimizer will automatically add all the mandatory tags and attributes needed to turn this into a valid AMP page:

<!doctype html> <html > <head> <meta charset="utf-8"> <title>My Page</title> <link rel="canonical" href="/mypage.html" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>...</noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Hello World!</h1> </body> </html>

This means, you don’t need to include any AMP specific markup in your layout templates when using AMP Optimizer. Together with auto component import, creating AMP pages becomes as easy as using built in HTML tags.

Working towards improved AMP support for Frameworks and CMSs 

This AMP Optimizer release is the first stepping stone in offering better AMP support in frameworks and CMS platforms. 

Next.js already offers great AMP support and has AMP Optimizer already built in. This means that with this AMP Optimizer release (available in Next.js v9.2.2), creating AMP pages in Next.js has become even easier. You can now directly use AMP components (in this case amp-fx-collection):

export const config = {amp: true}; export default () => ( <div amp-fx='fade-in'>I will fade-in</div> );

Without having to explicitly import the amp-fx-collection-.0.1.js component script via the <Head>:

import Head from 'next/head' export const config = {amp: true}; export default () => ( <> <Head> <script async key="amp-fx-collection" custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" /> </Head> <div amp-fx='fade-in'>I will fade-in</div> </> );

Markdown Support

This AMP Optimizer release adds a new markdown mode, which will convert <img> tags into <amp-img> or <amp-anim> tags (all other Markdown features are already supported by AMP).

This enables the following conversion flow:

README.md => HTML => AMP Optimizer => valid AMP

Combined with automatically AMP component script import and automatically adding missing mandatory AMP tags it’s now possible to directly convert markdown into valid AMP:

const AmpOptimizer = require('@ampproject/toolbox-optimizer'); const md = require('markdown-it')({ // don't sanitize html if you want to support AMP components in Markdown html: true, }); // enable markdown mode const ampOptimizer = AmpOptimizer.create({ markdown: true, }); const markdown = ` # Markdown Here is an image declared in Markdown syntax: ![A random image](https://unsplash.it/800/600). You can directly declare AMP components: <amp-twitter width="375" height="472" layout="responsive" data-tweetid="1182321926473162752"> </amp-twitter> Any missing extensions will be automatically imported. `; const html = md.render(markdown); // valid AMP! const amphtml = await ampOptimizer.transformHtml(html, { canonical: filePath, });

Summary

Every website publishing AMP pages should use AMP Optimizer to benefit from the performance improvements of up to 50% faster rendering times. The best part: performance will automatically get better over time with every new server-side optimization that is released. 
The new features introduced with this release greatly improve the AMP developer experience. Using AMP components becomes as straightforward as using any other HTML tag. But this is only the first step and we plan to build upon this in the future and bring AMP support to more frameworks and CMS Stay tuned to the AMP Blog and follow @AMPhtml on Twitter for any future news on the AMP Optimizer.

Written by Sebastian Benz, Developer Programs Engineer, AMP Project, Google

An update on AMP Conf

AMP Conf

Thanks for your interest in AMP Conf 2020. With event registration approaching quickly and growing concern around the coronavirus (COVID-19), and in alignment with the best practices laid out by the CDC, WHO, and other relevant entities, we wanted to share an important update. Based on our most up-to-date assessment, the potential difficulties around travel, and in consideration of general public health and safety, we have decided to postpone the event. 

If you have any questions, feel free to email the AMP Conf planning team at: ampconf@google.com. 

We’re very sorry to delay the opportunity to connect in person, but we feel strongly that the safety and health of all attendees, especially those who are traveling, is the priority at this time.

We will aim to share an updated date for the event in the future when we have a better sense of a time that will work for everyone. 

Stay tuned!

Posted by Alex Durán, AMP Project Marketing Lead at Google on behalf of the AMP Conf planning team

Learn how to use the Search Console AMP status report

Websites

The following guest post was written by Daniel Waisberg, Search Advocate, Google

Search Console is a free tool provided by Google to webmasters and developers to help optimize sites for search. In addition to data about search performance, index coverage and structured data markup, the tool can also help improve your AMP implementation. It shows AMP issues Google discovered in your website, provides information on how to fix them, and allows you to ask Google to validate your fixes. 

We’ve released a new episode of our Search Console Training YouTube series that shows you how to use the AMP status report in the tool.

In a nutshell, the AMP status report top level view shows crawled AMP pages with any issues found by Google. You’ll find a table with all issues sorted by a combination of severity, validation state, and number of pages affected. Click a specific issue to see more details and   a link to learn more about how to fix it and a process to notify Google about your fixes. You’ll also find a list of example URLs affected by this issue – you can click a specific URL to find the HTML and exact location of the offending code. 

It might also be a good idea to use the AMP Test tool, where in addition to testing a specific page, you can also upload a piece of code to check for issues – this can be helpful to debug issues for new pages. This tool will check your general AMP implementation, without specific information about Google indexing, so there is no need to verify your website to use it.

We hope you enjoy the videos and it helps you improve your AMP implementation! If you’re not using Search Console, check out the options available to verify your site ownership. For questions or comments, reach out via the Webmasters Help Community or our Twitter account

How RebelMouse Makes Rich AMP Simple And Powerful And Why It Matters So Much

CMS

Editor’s note: the following guest post was written by Andrea Breanna, Founder/CEO of RebelMouse

RebelMouse is a next-generation CMS for media companies and brands that are genuine about their content. The RebelCMS is a developer-friendly, cloud-based solution that is obsessed with maximizing content distribution across the web. This obsession is built on the foundational tenet that to create continuous organic growth from content, the distribution of that content must be automatic and optimized for new channels. We enable smart developers to be hyper-efficient and give their companies more, anywhere, and at any time. Whether you’re on mobile or desktop, you get the same streamlined functionality, key insights, and content distribution to grow your business.

Why We’ve Invested Heavily in AMP Features

AMP pages are built to be fast and load almost instantly when clicked from Google Search, increasing user engagement and dropping bounce rates. Our team at RebelMouse has  found that these increases in organic traffic happen regardless of the traffic source — because readers really do like faster, cleaner pages.

AMP is a rich environment and implementing it properly can be time-consuming. AMP pages, in order to be fast, are highly structured, and companies need efficient tools to take full advantage of the opportunities that AMP provides. When implemented correctly, the impact for a digital business is remarkable:

RebelMouse AMP features helped these sites to quickly adopt AMP and see huge traffic increases in Q4 2019, showing improvement even with non-AMP traffic.

We’ve seen that time and time again, as AMP traffic increases, so does non-AMP traffic. Because of this correlation, we dedicate significant development resources to integrating AMP technology into our CMS. Every RebelMouse-powered site is continuously updated for performance and features that keep our clients hypermodern, while allowing total creative freedom. AMP is no exception.

Below are some of the ways we’re pushing the envelope with AMP to make it a seamless part of the publishing workflow, decrease the friction of implementation, and maximize the traffic benefits.

Structured Data for High Performance on Search

AMP pages should have the same structured data that open web pages do. RebelMouse makes this simple to implement and the results can be game-changing.

The RebelCMS is built to maximize performance on search by adding structured data to AMP pages, which helps position your content within rich search results. Structured data gives platforms like Google the ability to better display information about your page, making it easier for users to understand what your site is about.

Rapid Development of Rich AMP Environments

https://blog.amp.dev/wp-content/uploads/2020/02/ezgif.com-gif-to-mp4-2.mp4
RebelMouse’s Entry Editor allows content creators to easily enable AMP, AMP stories, and choose to enable AMP on mobile and/or desktop.

Quickly design AMP pages that outperform industry standards with an average of five pages per user. With the RebelCMS, you can choose to enable AMP by default, or implement it across articles individually with one click in our Entry Editor. Because rich functionality is supported out of the box, developer implementations and customizations take a fraction of the time compared to industry standards.

Simplified AMP Layout Creation and Management

Our Layout & Design tool allows you to easily implement dynamic AMP layouts, either through the default canonical usage, or when forcing AMP on mobile and/or desktop. Using this tool, it’s possible to create complex, multi-column layouts with ease that will be served as lightning-fast AMP pages to your visitors.

The RebelCMS intelligently serves the proper layout depending on the device that a visitor is using to view your site’s content. You might have different layout templates for news articles, sponsored content, recipes, etc.

These templates can be enabled directly from the editing interface so that every article will be presented in the best possible way for optimal user engagement.

AMP-First Experiences for Mobile and Desktop

To maximize the speed benefits of AMP, RebelMouse also provides a way to enable AMP for mobile and desktop traffic on a per-article basis. Developers can easily configure sites to run all articles as AMP first. When enabled, traffic for the article will be redirected to the AMP version of the page for better performance.

AMP-first experiences lead to faster load times which may enable clients to be ranked higher. Readers really do like faster, cleaner pages, and the positive impact on stats is overwhelmingly clear.

What makes RebelMouse’s implementation of native AMP options so powerful is that they can be controlled on a per-article basis, so that posts which may need an embed that’s not supported by AMP can exist as exceptions.

Add Conversion Units to Maximize Audience Retention

Interstitial conversion units can be placed within your content so you can build a mailing list, get leads, or just highlight a new feature to your audience.

Integrate Ad Blocks for AMP Monetization

Got ads? With the RebelCMS, you can easily add your ad blocks to your AMP pages for maximum monetization of your audience.

Next-Gen Content Authoring for AMP

All of the best features of the RebelCMS’s Entry Editor have been included for AMP, so you can rest assured that you will not be missing anything critical by expanding your usage of AMP within your organization.

Full Support for the RebelMouse Particle Assembler

When using AMP on the RebelCMS, the benefits of our Particle Assembler are maintained in full. Every particle is still sharable and the same pageview methodology is active by default. Particle Assembler is a core feature of our platform that makes it incredibly easy to author rich content for your site, including listicles, slideshows, and more. Now you can bring the power of our creation tools to your AMP pages as well.

Native Stats and Data Integrations

RebelMouse tracks AMP performance directly from within the CMS and offers connections to all major analytics platforms so you can get the data you need to make the best decisions for your business.

Multivariate Testing With Rich Data Insights

Try multiple AMP layouts and compare them to determine the best performing layout for your content.

Stay on Top of Data With AMP Linkers

RebelMouse fully supports AMP Linker functionality, allowing you to remember your users’ settings and preferences by appending relevant parameters to your URLs. This ensures that their sessions remain in sync when they move between your domain and AMP’s cache domain, maintaining the integrity of the user journey so you don’t lose important analytical insights.

Learn More About RebelMouse