Published: 18 May 2017

We at Sagittarius are thinking seriously about any new or existing technology that our clients can benefit from. When it comes to Google AMP (Accelerated Mobile Pages) there is a lot to offer here, it is worth every effort for this amazing technology that can allow us as developers to provide our web users an ''instant page loading'' so this can give them the best user experiences for any website we build here at Sagittarius.

What is Google AMP (Accelerated Mobile Pages)?

A quick overview:

AMP, in short, is a guideline and best practice for authoring web content pages which guarantees a certain level of performance, deliver the web pages faster on mobile devices almost instantly.

What are the Benefits of Google AMP?

Speed matters, instant page loading is ideal, especially for mobile devices as most of the time they are used to browse the web via slow internet, AMP will increase engagement and lower bounce rate.

“I have a dream? can we achieve 0% bouncing rate? Just be optimistic”

Technically, we talk and want to create and use pages that load instantly. Do ensure this process consider the following…

  • Allow only asynchronous scripts and prioritise resource loading.
  • Size all resources statically and keep all third-party JavaScript out of the critical path.
  • Network concurrency.
  • GPU-accelerated animations only.
  • Image/ ads optimisations.
  • Pre-rendering component.

 

But how does this magic happen? What challenges will we face?

Google AMP is relying on main 3 components in which is serving the web page (AMP HTML, AMP JS, AMP Cache). That’s what we need to focus on, and how to implement to our sites. However, my research and investigations over this technology opened the door to many questions and challenges in my day-to-day build. Some of these challenges I have listed below (when it comes to practice the list will be 10 times longer) …

  • The CSS must be inline and maximum size: needs to be = 50k! what! can you?
    It is a validation error if the author stylesheet is larger than 50,000 bytes
  • Comments: Conditional HTML comments are not allowed.
  • Links: Links must be relative, protocol relative or use the schemas HTTP or HTTPS.
  • AMP requires to learn some of the custom HTML and follow some of the best practice and guideline of Google AMP Specifications.
  • Mark-up needs to be valid via AMP validator, which you need to master Google guideline specifications which another to-do-task needs to be added at the top of the long list for any Client-Side Developer.
  • AMP HTML is a subset of custom HTML5 elements, which require more configuration to any CMS/Platform to work effectively.

Read more:
https://ampbyexample.com
https://www.ampproject.org

Tawfik Bakr

Client-Side Developer

READ MORE FROM TAWFIK BAKR

Page Name: {% PageName %}

Page Template: {% PageTemplate %}

CampaignID: {% AgentReferrer.ID %}

CampaignName: {% AgentReferrer.Name %}

CampaignPhone: {% AgentReferrer.Phone %}

Item Location: {% PageLocation %}

Search Session Exists: False