Google AMP Experience So Far ⚡

Google Accelerated Mobile Pages (AMP) is a product by Google aimed at publishers with the intention of speeding up the delivery of their articles. For the last couple of weeks we’ve been working on numerous improvements to the Alaska Dispatch News website to eliminate roadblocks in an effort to make it AMP compliant.

AMP uses AMP-HTML which is regular HTML with a few differences. Certain elements require <amp-*> tags, and there are restrictions on author written JavaScript. There are several ways to approach building an AMP site, but due to the way the Alaska Dispatch News site is built, creating a separate front-end and serving both in parallel was the most logical approach.

SASS and AMP

In a previous post I discussed how we took some steps to re-arrange the sites CSS so it was better organized with a reduced footprint. With the introduction of AMP it was necessary to make further changes. AMP has a number of CSS restrictions such as the use of !important , * (Universal Selectors) and :not() which opposed some issues for us as we occasionally use these declarations. The easiest solution we found to this problem was to use CSS partials.

In most cases each site feature has its own style.scss file. For AMP compliant features we created a partials folder and placed all critical styles within their own contextual scss file, for example partials/_base.scss. We deemed critical styles to be things such as colors, typography and anything that gives that specific element its overall look and feel. The revised component structure looks something like this:

article-lede/
|
|-- amp-items/              # AMP Version: JSP Imports
|   |-- artwork.jsp         # Includes AMP compliant markup
|   |-- headline.jsp        # Includes AMP compliant markup
|   ...
|
|-- items/                  # Regular: JSP Imports
|   |-- artwork.jsp         # Includes non-AMP compliant markup
|   |-- headline.jsp        # Includes non-AMP compliant markup
|   ...
|
|-- partials/               # CSS Partials (Must be AMP compliant)
|   |-- _base.scss
|   |-- _headline.scss
|   ...
|
|-- amp.scss                # AMP Specific CSS
|-- render.js               # Javascript (Not usable with AMP)
|-- style.scss              # Regular CSS (Can include *, !important, etc)

You’ll notice we also created a second SASS file called amp.scss. In here we import partials/_base.scss and partials/_headline.scss with any supporting AMP specific styles within it. These are sometimes necessary as the AMP site doesn’t use a framework.

@import
  'partials/base'
  'partials/headline'
;

 // Article Lede: 'AMP'.

.article-lede {
  font-size: 32px;
  font-weight: 700;
}

We also extended this process site-wide for our global styles. This setup easily gives us the ability to maintain two front-ends while keeping our CSS file size within the 50KB limit that AMP places.

Components

Seeing as Alaska Dispatch News serves advertisements we needed something that would allow us to serve them with AMP. Fortunately the amp-ad component exists. AMP components are pre-built site elements which are designed to fill in the void in places that you need Javascript. For example they offer things like image slider, forms, and in this case, adverts.

The amp-ad component requires you to specify a few small details regarding the unit you want to serve and your DFP account, and in return it will display the advert. We were already using a jQuery API wrapper for DFP built by Matt Cooper which does something very similar to this already. So in our case we went from this for our regular page:

<div class="adunit-0161"
  data-adunit="alaskadispatch" data-dimensions="300x250"
  data-targeting='{"pos":"top"}' data-desktop-display="true"
  data-mobile-display="false" data-outofpage="false">
</div>

To something like this using amp-ad:

<amp-ad width=300 height=250
  type="doubleclick"
  data-slot="/123/alaskadispatch"
  json='{"targeting":{"pos":["top"]}}'>
</amp-ad>

Google has already extended this library so it’s not just for AMP. This is something we’ll be looking into possibly utilizing after the new year.

QA Testing

Now that the AMP compliant version of Alaska Dispatch News is nearing completion it needs some heavy QA testing before it goes live. Seeing as the reporters upload many different types of articles it’s important to check for more obscure content to see how it handles AMP. There’s many ways to debug AMP including an online validator tool, or by appending #development=1 and using the developer console. If you’re using something like Gulp you can also extend your setup to use the command line tools.

AMP Validation

Going forward into the future we’ve discussed utilizing a process called “Amping Up” which is explained in the following video that allows you to seamlessly move a user from your AMP site to a Progressive Web App. Although we’re going to take one step at a time and see how this works first.

If you have any questions or comments please feel free to reach out on Twitter or via email.

If you’re interested in some more reading you can check out an article by Ryan Collins regarding a React/Redux project I contributed to for the Udacity Alumni.

Happy New Year

I just wanted to take this opportunity to wish everyone a Happy New Year. I’ve been spending the Christmas season with my family in the UK and it has been wonderful.