If you use Ghost as your blogging platform, there's exciting new functionality available in version 0.10.0 or higher. Ghost 0.10.0 has several new features and improvements outlined in their 0.10.0 Blog Post. However, arguably the most important addition is support for Accelerated Mobile Pages. After upgrading to this version, Ghost will automatically render AMP versions of your blog posts using its default AMP theme. Support for AMP will help your blog deliver optimized content to mobile devices, resulting in a better experience for your readers.

What is the Accelerated Mobile Pages Project

If you have never seen an AMP page before, you can view the AMP version of this blog posting here (The iPhone screenshot on this page looks skewed, but I haven't yet investigated whether it is an error on my part or an error in Ghost's default AMP page template).

The Accelerated Mobile Pages Project (AMP) is an open source initiative intended to improve the load performance of web pages on Mobile Devices. This project has the backing of several major publishers and tech giants including Google and Adobe. AMP pages are intended to load nearly instantly, improving the mobile web experience. While sites with poor performance characteristics are not enjoyable on any device type, performance issues are exacerbated by mobile devices. Mobile devices tend to run on potentially unreliable and slower cellular data connections. AMP currently focuses primarily on the user experience for mobile sites, where performance issues are most prevalent. However, most of the principles enforced by AMP are also applicable to other device types running on more performant networks.

AMP pages load faster due to restrictions outlined in the AMP HTML Specification Document. AMP HTML is a subset of HTML, and restrictions imposed by the AMP specification ensure that pages will load quickly on mobile devices. AMP pages also load faster because blogs and content providers that offer AMP pages make their content in AMP files cacheable by third parties, such as Google's AMP Cache. By offering AMP pages, content providers are implicitly allowing third parties to cache their content. While I do not personally have any concerns about my personal blog content being cached, it is important to make this clear to others who may have objections.

The AMP spec prohibits embedded elements or applets, discourages the use of excessive JavaScript, ad actions that can result in unnecessary layout resize calculations. Notable specifications include:

  • Several HTML tags you may be familiar with are not permitted including: script, base, frame, frameset, object, param, applet,embed, form (support coming in the future), and input. There are new tags and tags that replace some of the prohibited tags specified in the AMP spec such as amp-img, amp-video, amp-audio, and amp-iframe. The new tags are intended to support the lazy loading of resources while taking the viewport into consideration in order to prevent resize calculations.
  • All AMP page styling must be done with an inline style sheeting. AMP pages cannot link to external style sheets. Additionally, styles are limited to 50KB in size in order to keep page size to a minimum. Inline style sheets must have the amp-custom attribute according to the spec
  • No custom JavaScript is currently allowed
  • All media requires width and high attributes
Why should I care about AMP?

AMP pages will load faster on mobile devices. If your page takes several seconds to load, you will begin to lose viewers and engagement. Better site performance helps keep visitors engaged and improves their perception of your site. For content providers who subsidize their site using ad revenue, slow load times result in lowered revenue. Optimizing your site to render AMP pages is the right thing to do for your mobile users and for your site's survival.

Another reason to optimize your site to render AMP pages is to prepare for Google search result ranking changes. Gary Illyes, Webmaster Trends Analyst at Google, stated in a SEJ Summit opener in June 2016 that Google is not currently using AMP as a page ranking signal. While a Google representative has recently stated that the company does not currently use the availability of AMP pages as a ranking signal, many expect that it could begin to, considering Google's strong backing of the AMP project.

Google already gives gives AMP compatible pages special differentiation in search result listings. Below is an example search for "pokemon" on an iOS 9 device. In the image, you can see that AMP thunderbolt icon is visible on articles that are AMP compliant. Users will eventually associate this AMP differentiation as an indication of a well performing mobile page.

Google AMP Search Result Example

Considering that Google has been heavily backing the AMP project, and is already differentiating AMP results from others in search result listings, it's reasonable to assume that AMP could become a ranking signal in the near future.

How to enable AMP support in Ghost

Enabling AMP support is easy! If you upgrade to Ghost version 0.10.0 or higher, Ghost will automatically start offering AMP renderings of any of your posts. Simply append /amp to the end of a post's URL to see AMP version of the article. If the theme that you are using for your Ghost site includes an amp.hbs template file, Ghost will use that template to render the page. However, if it is unable to find a amp.hbs file, it will fall back to is own default amp template located at core/server/apps/amp/lib/views/amp.hbs. If you'd like to create your own custom AMP theme Ghost's AMP Documentation is a great starting place.

As of September 2016, my site is using the default Ghost AMP template. However, I may make my own template in the near future. If you are curious what the default AMP theme looks like, simply view the AMP version of this posting.