AMP

With the Accelerated Mobile Pages (AMP) integration, Brightspot delivers published websites to mobile devices much faster than with traditional HTML.

Overview of AMP

Web browsers, either on the desktop or on mobile devices, can suffer from latent loading of content, particularly with large media files. You can mitigate this effect by incorporating AMP into your site, which is an open-source library that provides the tools to deliver web pages almost instantaneously.

AMP accelerates the delivery of an entire web page by requiring code to include certain features and to exclude others. Using AMP, your web pages gain the following performance improvements:

Faster layout—Because AMP includes instructions for instantly laying out your web page, the text does not jump around after larger files arrive.
Image previews—AMP providers often make low-resolution previews of your images and deliver them first before delivering the final images. The preview gives visitors a cue that the final image is about to appear, and even provides some context for the text they started reading.
Pages appear in the search results carousel—Web pages implementing Google's version of AMP can appear in a carousel layout of search results along with a "quick view." Visitors see the product without being directed to your website, allowing for a shorter time-to-engagement.

Google search carousel
Content cached on Google servers—Google caches some of your AMP content, which can result in delivery faster than from your own server.

Not all of your web pages or websites need AMP, and some of Brightspot's standard features provide AMP-like effects. As a best practice, evaluate your content, target audience, and competition before integrating AMP into your Brightspot project. Regardless, once you configure the AMP integration and develop AMP-compliant templates, Brightspot uses those templates to deliver content almost instantaneously to your visitors.

Configuring AMP

To configure AMP:

Click menu > Admin > Sites & Settings.
In the Sites widget, click the site for which you want to enable AMP, or select Global to enable AMP for all sites.
Under Front-End, under AMP, do the following:
1. Mark Enabled.
2. From the Types drop-down list, select the content types to which AMP applies.
Click Save.

Building AMP Templates

The following steps are required to build and deploy AMP: create an AMP-compliant template, and provide a link from the native template to the AMP template.

After implementing these steps, the Brightspot server intercepts requests for native templates that have a corresponding AMP-compliant template, and delivers the latter to the visitor.

Step 1: Create an AMP-compliant template

After completing the standard (non-AMP) template, create a parallel AMP-compliant template in the same directory. The filename must end with the compound extension .amp.hbs. For examples and tools for developing AMP-compliant templates, see Create your first AMP page.

Step 2: Add a discovery link to an AMP template

In the native template’s tag, add a <link> tag to the AMP template.

<!-- Filename: MyTemplate.hbs --> 
<!DOCTYPE html>
<html>
    <head>
        <link rel="amphtml" href="http://domain.com/path/page?_amp=true"> 
    </head>
    <body> </body>
 </html>

Indicates that the template’s filename is MyTemplate.hbs. The associated AMP template’s filename is therefore MyTemplate.amp.hbs.
Adds a tag. This tag informs AMP providers that the native version of the template also has an AMP-compliant version. (For details about this form of the tag, see Make your page discoverable.)