Improve mobile performance with Accelerated Mobile Pages

In the current digital era, most businesses rely on the Internet to provide services. The cyberspace, with all the interconnected systems and advanced architecture, continues to grow in complexity, which plays a crucial role in digital end-user experience.

Every user on the Internet expects a seamless and fast end-user experience irrespective of their geo-location and the service provider they use. So, there is a constant need to optimize applications, including every component in the application delivery chain, to maintain the end-user experience.

With the increase in smartphones and other mobile devices, more and more users access applications from their phones. The range of devices available, coupled with the volatility of networks on mobile devices, makes it difficult to maintain uniform application performance. Accelerated Mobile Pages (or AMP) is a framework introduced to facilitate seamless end-user experiences—irrespective of the user’s device.

In this blog, we cover:

• Pros and cons of AMP framework for web design.
• Impact on webpages performance (AMP vs Non-AMP)
• Monitoring AMP webpages with Catchpoint

Advantages of AMP

AMP improves end-user experience by altering the way the page is rendered. Implementing AMP cuts down page overhead and streamlines page load processes by:

Optimizing DOM construction

AMP optimizes the time taken to construct DOM (Document Object Model). The framework is designed to tune the page HTML and CSS for maximum performance. The page structure is rendered before any image or script requests are made.

Optimizing render-blocking content

To improve browser execution time, AMP prioritizes the scripts and content necessary for user interaction. JavaScript code size is minimized while third-party tag requests and analytics are restricted.

Optimizing network load time

AMP restricts most JavaScript code, and all the JavaScript content necessary for the render process is deployed on Google servers. This helps optimize the network load time.

Evaluating AMP Performance

To evaluate the performance of an AMP website versus a traditional mobile website, we compared the top three ecommerce websites. We analyzed various aspects of the AMP and Non-AMP websites and made some interesting observations.

1. Optimizing page content reduces the overall page content load time.

The graph above highlights the following:

• AMP pages performed better; HTML and JavaScript content on the page loaded faster.
• AMP has no CSS requests on the wire; this helps construct the DOM faster when compared to a non-AMP page.
• JavaScript requests are cached and packaged on Google AMP servers. This reduces page bottlenecks caused by JavaScript requests. Only high-priority JS are packaged and cached on Google servers

2. AMP improves browser DOM Construction Time (HTML) and JavaScript browser parse time.

The graph above highlights the following key point that AMP pages were faster when:

• Constructing the DOM tree for AMP page 1 and 3.
• Parsing the JavaScript content for AMP page 1.

3. AMP improves overall page load time.

The table above lists performance data for all the websites we analyzed in this exercise. We observed that AMP webpages are faster than non-AMP pages.

AMP pages are lighter and loaded fewer requests on the page which improved the overall page load time for AMP pages.

4. AMP Limitations

AMP provides several advantages and greatly optimizes content delivery, but there is also a downside to implementing AMP. Below are some of the limitations of implementing AMP web applications.

You must adapt to new web design technology

• AMP has its own HTML syntax for page structure and design
• Restrictions on CSS styling

All JavaScript content needs to be deployed on Google servers

• Creates a dependency when deploying new code

There are restrictions on directly loading third-party JavaScript in the page HTML like:

• Advertisements
• Analytics
• Third-party JS frameworks

It can be difficult to implement dynamic requests on the page like:

• AJAX requests to load dynamic content from the server
• HTML requests to dynamically bind

Is AMP recommended for all types of websites?

Web applications are dynamic, with page content that’s updated constantly. These applications also use multiple third-party tags and ad providers to drive business revenue.

There are certain pre-requisites to implementing AMP webpages. You cannot migrate all applications to AMP. It is best suited for applications using:

• Static webpages that don’t need dynamic AJAX requests to load certain page content.
• Webpages that don’t include ads or other third-party tags.

Should we monitor AMP webpages?

We have seen that AMP framework does have an advantage over traditional content delivery. Page content loads much faster when the webpage design/structure is optimized. AMP makes the application lightweight with fewer JS and fewer overhead requests.

However, JS optimization comes at a cost. This creates additional dependency in the web content delivery chain. The JS and third-party services must be hosted on Google Cloud, which is not under your control and can become a major monitoring blindspot.

It’s always important to have visibility when your content is hosted on third party servers like Google Cloud. These services must be monitored to check availability and to detect issues before end-users are impacted.

How does Catchpoint help?

Catchpoint Synthetic monitoring provides the ability to monitor web applications and various components in the delivery chain to detect issues before they impact users. The wide variety of monitors we offer allows you to measure the performance of each component, making it easier to identify the areas that require performance tuning.

If you are considering implementing AMP on your website, Catchpoint can help evaluate website performance with and without AMP. Setting up a simple web test in the Catchpoint platform will give you performance data for metrics critical in the page load process. You can measure how well each script and third-party tag performs. This helps determine the performance impact of moving to AMP.

You can also use various test monitors available to keep track of availability issues on the servers hosting critical scripts and get alerts of any errors or performance degradation on your AMP site.

Summary

Mobile devices have redefined the digital landscape; it has quickly become the preferred device for users on the Internet. The complexity of different network providers and varying network speeds make it nearly impossible to ensure excellent end-user experience.

Excellent end-user experience is possible only when uniform performance is delivered irrespective of the device type. Accelerated Mobile Pages is a framework that aims to maintain performance across different device types. AMP restructures webpage load processes to optimize performance and deliver a seamless user experience.

Catchpoint gives you visibility into the application delivery chain so you can evaluate the performance of AMP websites and monitor dependencies created as a result of implementing AMP.

Click here to start a Catchpoint trial today.