AMP-ify Your MODX Site

Enable Accelerated Mobile Pages ("AMPs") on Your MODX Site

Sep 21, 2016

AMPIFY, Dude

The Internet is all about appending "ify" to an acronym, registering a dot-io domain, and starting a SaaS with it. The good news is, you don't have to subscribe to a new service to benefit from Google's Accelerated Mobile Pages (aka "AMPs"). MODX has you covered.

According to the project's website, AMP is "an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere."

Create once and load instantly everywhere. Gotta love that!

How does something like AMP, which is essentially a lean and specialized front-end framework, help you load your content instantly everywhere?

Google, of course ;) The Google AMP Cache "can be used by anyone at no cost, and all AMPs will be cached by the Google AMP Cache."

In other words, if you present your content the AMP-way (in addition to any other way you want) Google will globally distribute those pages for free, and link to them from Google search results pages.

var Mind = {
  "owner": "me",
  "status": "blown"
};

MODX CMS is your friend

While no one is stopping you from using your AMP Template as the primary way to present your content, it's more than likely you'll have a "normal, desktop" experience for your website, and an alternate, AMP view as well.

Google won't mind the duplicate content, if you simply add a canonical link tag to your AMP Template, referencing the "regular HTML version" of that page. The AMP HTML documentation shows you exactly how to do this.

When a MODX Resource (page) is served, it will either use the normal Template, or switch on-the-fly to the AMP Template. The Ampify Extra does this for you in one of two ways:

I. Context Mode

In "Context Mode", you have total control over which Resources will have an "AMP view". Using a MODX Context, the AMPs can be served from a sub-folder, subdomain, or even an alternate primary domain.

Examples for the canonical URL "http://example.com/page.html":

  • http://example.com/amp/page.html
  • http://amp.example.com/page.html
  • http://example-amp.com/page.html

All the MODX features you've come to know and love, including TVs, Chunks, Snippets and built-in partial-page caching, can be used in the AMP Template exactly as you would in a regular Template. The goal is performance, so it's especially important to use MODX's features in a performant way.

There's only one drawback to the "Context Mode": the fact that it gives you control over which Resources will have an AMP view, means you need to manage that.

II. Param Mode

"Param Mode" is the set-it-and-forget-it mode. You specify an AMP Template to use, and a GET param. Then whenever the param is set for a given request, it will switch the Template.

It's very simple, but it comes with one potentially critical drawback: the AMP view cannot be cached in the standard MODX way.

This is because in "Param Mode", the only difference between the AMP view's URL and that of the normal view, is the query parameter. The standard MODX cache wouldn't be able to cache two different versions of a page based solely on a query parameter. Instead, whichever version is requested first, will be cached.

To avoid this contention, the Ampify Plugin disables caching on the AMP view. This isn't as bad as it could be, because Google's AMP Cache will act as a proxy for these pages. The load on your site shouldn't increase all that much. However, any server-side processing in your AMP Template could be leveraged by a malicious user to add load to your server.

There are workarounds for this, using tools like getCache, but we recommend using Context Mode, wherever possible.

How to Get Ampified

Head over to the Extras Installer in your MODX site, or the Extras Repo, and download the brand new Ampify package. Optionally, install an Extra that handles Context routing—I recommend ContextGateway.

The Ampify readme on Github provides an example implementation using MODX Contexts, with screenshots and step-by-step instructions.