Speed Up Mobile Apps and Websites with AMP

  • More than half of the world’s population use smartphones.
  • Almost two-thirds of the world’s population have mobile phones.
  • More than half of the world’s web traffic originate from mobile phones.

New Approach to Reducing Page Load Time

Despite the rapid growth in mobile technologies, there was still an unresolved issue — page load time. With fancy UX & UI designs, webpages are loaded with lots of custom JavaScript, CSS and HTML codes to provide best user experience. However, this affects the page load time. A workaround for this problem is to cache these pages, but caching doesn’t help first-time access.

Faster Mobile Pages + Readable Content = Better User Experience

How does AMP provide faster and smoother page experience? In the simplest terms, AMP framework achieves this by placing restrictions while developing the mobile pages.
However, AMP is not for everyone. You should take note of the below limitations when considering AMP for your applications:

  • No JavaScript will be allowed other than an off-the-shelf AMP library.
  • Images will only load when you scroll down to them (lazy load functionality).
  • A streamlined version of your CSS will be required.

Benefits of AMP

Reduced Bounce Rate:

Basic Building Blocks of AMP

AMP framework is designed to be simple for webmasters & developers. There are just 3 High Level building blocks.

  • AMP HTML: A subset of HTML, this mark-up language has some custom tags and properties and many restrictions. But if you are familiar with regular HTML, you should not have difficulty adapting existing pages to AMP HTML. For more details on how it differs from basic HTML, check out AMP Project’s list of required mark-up that your AMP HTML page “must” have.
  • AMP JS: A JavaScript framework for mobile pages. For the most part, it manages resource handling and asynchronous loading. It should be noted that third-party JavaScript is not permitted with AMP.
  • AMP Cache: An optional Content Delivery Network, it will take your AMP-enabled pages, cache them and automatically make some performance optimizations.

How to Integrate AMP into Existing Sites

If you are using a CMS like WordPress, the AMP plugin does most of the work for you. But if you are using other CMS, or you have created a custom CMS for yourself, you will need to take care of creating the AMP pages by yourself.

Integrating AMP with Analytics

To prevent multiple analytics tracking from slowing down a site, AMP implemented the philosophy of “measure once, report to many.” There are two paths to enable analytics functionality with AMP for your website:

  • The Amp-Pixel Element: This is a simple tag that can be used to count page views as a typical tracking pixel would, using a GET request. There are a number of variables that can be passed through it, such as DOCUMENT_REFERRER and Title.
  • The Amp-Analytics Extended Component: This is a little bit more advanced than the amp-pixel. It is likely what you’ll use to implement analytics on your site because it allows for a greater level of configuration for analytics interactions.

Injecting/Referring Legacy Pages into AMP Pages

AMP provides a way to inject your Legacy pages (non-amp pages) into AMP Pages by using iframes, but you have to eye-out for the restrictions that come along the way. Iframes are given very low priority and should be presented towards the end of a page or at least after 75% of the page. The purpose of doing this is so that iframe will not slow down the page load speed, which will in turn affect the user experience.

Attractive UI and UX Options with AMP

Most people think with these restrictions, we need to compromise on the UI/UX Design. On the contrary, AMP HTML provides a lot of components that helps make your website attractive. The list is too long and I probably can’t go through every one of it, but all the components are classified into three types:

  • Built-In : Components that are included in the base library.
  • Extended : Extensions to the base library that must be explicitly included in the document as custom elements.
  • Experimental : Components that are released but are not yet ready for wide use.
  • Ads and analytics
  • Dynamic content
  • Layout
  • Media
  • Presentation
  • Social

Creating a Functional Mobile Website with AMP

Previously, we discussed that AMP is very good for static content since they do not involve any custom JavaScript. However, it turns out that this amazing technology can also be used for e-commerce websites to increase the speed of the website. Hopefully, this will translate into increased click through rate and sales.

1. Basic Building Blocks and UI Using AMP

In this section we will be discussing about creating the user interface of The E-Commerce store. We will be using AMP components to achieve this. Here we will be a deep diving in to the AMP HTML Components & AMP JS

2. Creating Backend with Alibaba Cloud ApsaraDB for MongoDB

We will be exploring the ApsaraDB for MongoDB product in depth. Offered by Alibaba Cloud, ApsaraDB for MongoDB will be the backend for our application. Due to certain limitations, we will be creating a small architectural solution to make the application work with Mongo DB. Creating an architectural solution is not as scary as it sounds, it is very easy if you can follow along with the article.

3. Integrating the Entire Application with Alibaba Cloud ApsaraDB for MongoDB

In this part, we will be integrating the UI along with the backend created on ApsaraDB for MongoDB. This section is very important as we are going to create the core functionality by integrating the application. We will also talk about the overall functionality of our application.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com