What is Shopify AMP and How to Create AMP pages?

You are browsing a page on the phone, and it takes really long to load, what would you want to do? Directly bounce, right?

Now imagine the same for your prospects who are viewing(or trying to) your site. Wouldn’t it be concerning if they quickly leave and you risk losing sales every day? 

Worse still, they are more likely to bounce when using a mobile phone. 

But, the good news is that with Shopify AMP, you can start delivering lightning-fast and smooth browsing experiences to your mobile customers. Let’s get right into it!

What is AMP in Shopify?

AMP, standing for Accelerated Mobile Pages, is an open-source project developed by Google to improve the performance of web pages on mobile devices. It works by stripping down all the extra code from your web page and loads just the essentials.

You can consider it as an optimized lightweight version (while retaining the old) of the original web page. According to Google Canada, AMP pages generally load 4 times faster than non-AMP pages, using 10 times less data.  That’s why many top websites, such as geeksforgeeks.org, freecodecamp.org, g1.globo.com, Dailymail.co.uk, etc., have adopted AMP, demonstrating its widespread adoption and effectiveness.

AMP pages typically include the “amp” reference in the URLs, for example “www.example.com/page.amp.html“. Meanwhile the original page still exists and can be accessed through its standard URL “www.example.com/page.html“.

You can also easily recognize an AMP page by the lightning bolt icon that appears alongside the link in the search results. This icon boosts click-through rates by catching the eye and driving more traffic to your AMP pages. Have a look at the example below:

AMP pages can sometimes be featured as a rich result in Google Search, and in the Google Discover feed. The rich results can draw more attention and drive more organic traffic to the website, leading to increased brand awareness and potential sales.

Benefits of adding AMP pages on Shopify?

Today, speed is a crucial factor in visibility and user engagement, especially considering Google’s mobile-first indexing. While AMP is no longer a direct ranking factor, it can still provide Shopify stores with a better UX for their mobile customers, improve their website speed, and potentially improve their search engine visibility. Here are some other specific benefits: 

1. Faster page load times

AMP pages follow strict technical guidelines to ensure the quick rendering of pages for faster loading on mobile devices. Here is how it achieves this:.

• HTML restrictions: A subset of HTML called AMP HTML, has restrictions on certain HTML tags and attributes. This reduces the size of the HTML code to be loaded and speeds up the parsing and rendering of the page.
• JavaScript restrictions: The amount of JavaScript that can be used on an AMP page is restricted to 50 KB. This ensures that the page remains fast and interactive.
• File size restrictions: AMP pages are kept under a certain size, with images, videos, and other assets optimized for fast loading. For example, they’re  restricted to using images that are no larger than 1 MB in size.
• Third-party plugins restrictions: Third-party embeds like social media widgets, video players, and other integrations are loaded asynchronously. That is, they’re loaded in the background, after the main content of the page has loaded. This ensures that they do not drag down the page’s speed. 
• Lazy-loading: AMP pages defer the loading of images and other resources until they are needed. This reduces the amount of data that needs to be downloaded up front.
• Prerendering via a CDN: They’re pre-rendered in search results, meaning that the content of the page is fetched and stored by Google ahead of time. This allows the page to load instantly when a user clicks on it in the search results. The pre-rendering process is handled by the AMP cache, which acts as a content delivery network for AMP pages.

2. Increased Mobile Conversion Rates

AMP prioritizes the content that is most important to display the page correctly, such as text and layout, so the user does not have to wait for the page to become ‘stable’. AMP’s ability to preload content is also key for mobile users with limited data plans and slower network speeds. This instant loading leads to a reduction in bounce rates, as users are less likely to leave the page. 

How to enable AMP on Shopify?

You can’t just enable AMP on your Shopify store at the snap of a finger. Instead, you can utilize the help of a professional AMP app. Take the SEO & Image Optimizer of SEOAnt by example. Here is how you can easily create and publish AMP pages with it:

1. Install the SEO & Image Optimizer app on your store.
2. Go to dashboard, and select AMP.
3. Choose the page that you want to “Amplify”. Start customizing the theme, header, body, footer, meta, and other details for the AMP page. 
4. Preview the changes. Once done, click Save. 

Limitations of AMP Pages

AMP can speed up page loading time, reducing bounce rates and increasing conversions. However, it may not be suitable for pages with complex functionalities because it does the following:

• Limits functionality of certain elements: Elements such as animations, videos, customization, and dynamic features might not work properly as they require more complex coding and functionality, which AMP does not support.
• Requires additional development time and resources: The process of converting HTML pages to AMP pages involves reducing the code, making it more streamlined. You need to keep it up-to-date and ensure that all your page code is properly formatted and optimized. Pages that do not follow AMP specifications may not render correctly on mobile devices.  If your company is already stretched thin on resources, it can be quite a challenge. 
• Lack of flexibility: AMP pages are made to be lightweight, with limited functionality and streamlined code. This can make it difficult to add new features or make changes to the existing design.

Given the limitations of AMP pages, it’s important to carefully consider which pages to enable AMP on. Hence the following guidelines.

What Pages Should I Enable AMP on?

Generally speaking, AMP works best for content-rich pages such as blogs, news articles, and product reviews, where speed and simplicity are the main priorities. For complex pages such as e-commerce checkout or user profiles, it may not be suitable due to its restrictions on custom HTML and CSS. Check below to know what pages you should consider AMPlifying. 

1. Blog Posts: Blog posts can drive organic traffic to your Shopify store, while showcasing your brand’s expertise. They provide valuable information to potential buyers, and are often shared on social media. It’s important that they load quickly to serve your mobile customers. 
2. Product Pages: Product pages matter the most to your business as your main source for traffic and conversions. In case of a simple page design, enabling AMP can be beneficial. 

However, if your product pages are quite interactive, say, with loads of dynamic product images, product zoom, etc., enabling AMP might be a bad idea because it will limit their functionalities. Ultimately, it is up to you to decide whether the benefits of AMP outweigh the limitations .

3. Collection Pages: Enabling AMP on collection pages will encourage buyers to stay longer and explore more products. However, if there are complex customizations on your collection pages, the AMP version may not appear appealing, which could even lower your user engagement. 
4. Homepage: Your homepage is like a virtual storefront, and it’s critical that it makes a strong first impression. With AMP, your homepage will load quickly on mobile devices, providing a smooth and seamless browsing experience 

But remember AMP’s limitations on interactive elements. Consider enabling AMP on your homepage only if  it has a minimalistic design with few plugins.

5. Landing pages: These are designed to convert visitors into customers. If yours loads slowly, you risk losing potential customers before they even see your offer. But with AMP, they will load quickly and provide a smooth user experience. This can increase conversion rates and sales.

In summary, the pages that you should enable AMP on will depend on your store’s unique needs. However, a good rule of thumb is to enable AMP on any page that is accessed frequently from search engines and social media. Those pages are critical for conversion. 

How to Test if my AMP Pages are Working

Testing AMP pages is important because it ensures that the pages are able to deliver the desired fast and optimized mobile experience to users. Testing also helps you identify any issues with page functionality, broken links, and missing tags that could affect the AMP page’s performance. Here are simple ways to go about this:

To Test if your AMP pages are working properly:

1. Use the AMP validator: The AMP validator checks AMP pages for errors like AMP HTML tag and attribute errors, style and layout errors, templating errors, etc. The validator ensures they’re valid AMP pages. Simply enter the URL of your AMP page into the validator, and it will tell you if there are any issues that need to be fixed.
2. Check Google Search Console: You can check the Search Console to see if Google has discovered any AMP errors on your site. If there are any issues, you will see them listed in the “Search Appearance” section of the console.
3. Test the page speed on mobile devices: You can use tools like Google’s PageSpeed Insights or the Lighthouse browser extension to test the speed of your AMP pages on mobile devices. This will tell how quickly your pages are loading and if there are any issues to be addressed.

To Test if Your AMP Pages are Working Well

1. Check browser’s developer console: AMP pages have special tags and schema that make them different from regular pages. Examples of such tags are: 

• A top-level <html ⚡> or <html amp> tag. 
• <amp-img> tag for images
• <amp-video> tag for videos
• <amp-accordion> tag for accordions, among others. 

2. Test click-through rate: Once you have implemented AMP, you can also test its effectiveness by measuring your click-through rate. You can do this by dividing your clicks by impressions (the times people view your page) and multiplying the result by 100. For example, if you had 350 clicks and 4,000 impressions, then your clickthrough rate is 8.75% 

With AMP, it’s expected that the click-through rate will get higher. That’s what the lightning bolt icon indicating the AMP version of the page means.

3. Test with Google’s Mobile-Friendly Test: Google’s Mobile-Friendly Test can quickly tell if your page is mobile-friendly and also test if it’s AMP pages. It checks if the page is properly structured and if it meets the requirements for AMP.

4. Test with Google Analytics: You can track and see the performance of your AMP pages in terms of bounce rate, session duration etc compared to non-AMP pages.

5. Test with A/B testing: This is the comparison between two versions of a page to see which one performs better in terms of user engagement and conversion rate. A/B testing with AMP will determine how effective your switch to AMP has been. This information can then be used to further optimize your website and maybe lead to an increase in sales.

What’s not Allowed in AMP?

Before migrating your page to AMP, it’s important to check that it’s still aligned with your business goals and strategy. This is because AMP limits some key functionalities on a website like some 3rd-party Java scripts, interactive elements, analytics tracking, etc. Here are some:

1. Restrictions on HTML and JavaScript

AMP has some restrictions on the types of HTML and javascript elements that can be used on a page. Some elements like forms and 3rd party scripts are not allowed in AMP, because they can slow down your page loading times and affect the user experience.

Some other examples of elements not allowed in AMP include:

• Scripts that block rendering
• Video and audio embeds that require non-AMP plugins
• Custom fonts
• Custom javascript
• Styling that is not done in AMP-compliant ways, such as using CSS styles
• Some types of forms, like those that use post actions, file uploads and input types like date pickers, etc

2. Custom JavaScript

AMP does not allow custom JavaScript because it makes pages load sluggishly. Instead, AMP provides a set of custom JavaScript components that can be used to add functionality to your pages.

    3.  Cross-origin resource sharing (CORS)

AMP requires that all resources on the page, such as images and scripts, come from the same origin. This means that resources cannot be served from a different domain, even if the domain is trusted.

    4. Styling

When using AMP, there are rules we have to follow for how the page looks. For example, we can’t mix different styles together, and instead need to put all the styles in one place. Doing it the other way around might make it load slowly.

   5. Ads and tracking

AMPs are restricted on certain ads and tracking. For example, ads can only be put in certain spots and tracking has to be done in a specific way.

FAQ

• Do I still need AMP if my Shopify website is fast enough? 

Even if your website is already fast, AMP provides additional benefits like improved visibility and optimized mobile user experience.

• Does Google care about AMP? 

According to Google Search Central, speed is a ranking factor, not AMP. So pages that load faster, regardless of whether they use AMP technology or not, will have an advantage in search results. However, AMP pages are designed to load quickly, so implementing AMP can improve website speed and potentially improve search rankings.

• Can I track the performance of my AMP pages? 

To view your AMP performance, go to the Google Search Console and access the Performance report. To see your AMP data, click on the “+ New” filter and choose “Search appearance’. This will show you how your search traffic changes over time, which queries are made on mobile devices, and which pages have the highest (and lowest) click-through rate.

• Does AMP affect the user experience? 

Yes and no.

AMP is designed to improve mobile user experience by making web pages load faster on mobile devices. But there are some limitations that come with it like AMP restricting third-party scripts, interactive elements, ad features, custom fonts, etc .

Conclusion

Implementing AMP on your Shopify store is a valuable investment that can have a significant impact on your online presence. The lightning-fast loading and improved mobile experience can increase your conversion rates, putting you ahead of your competitors. So if you’re a Shopify store owner looking to improve your mobile experience, consider making the switch to AMP today.