What is AMP? How We Can Create AMP Page's?

Ravi Joshi
Written by Ravi Joshi on
What is AMP? How We Can Create AMP Page's?

What is AMP? How We Can Create AMP Page’s?

What Is AMP ?

AMP Stands For Accelerated Mobile Pages, Its An Open Source Html Framework Developed By AMP Open Source Project To Improve And Increase The Page Speed By Applying Server Side Optimization. We Have Seen Many Website’s Which Takes Less Than A Sec To Load A Page Just Because Of AMP. So today I Will Show You How You Can Make Your Website AMP Enabled Although It Has Some Disadvantages But It’s Best Suited For Static Pages Like News Articles And Articles And Not Best Suited With Dynamic Page Contents. So Lets Start:

How We Can Configure Our Webpage AMP Enabled?

Create your first AMP Page Or step To Step Guide How You Can Enable AMP Enabled Website. First Sign In Into-

  • Google Analytics page.
  • After Linking Google Analytics page Click on Admin.
  • Next Step Is Create Property, For This You Need To Have Edit Permission Otherwise You won’t see Create Property Option.

  • Click On Web.
  • Click With Continue Button It Will Redirect You To Property Setup Page Fill Your Website Name,Industry,Category And Time Zone And Press Create.

  • It Will Give You Global Site Tag (gtag.js) Copy and Paste This Code To <head> Section

  • Now Open Your Wordpress Dashboard Install AMP Plugin And Copy And Paste That Code To AMP Analytics Option You Only Need Your Global Id which is 10 Digit Code (eg. “UA-xxxxxxxxx-x”)

Now Get a Amp Plugin From Wordpress Plugin. Then Go To AMP Setting And Enable Standard Layout And Enable Webpages,Post Etc Amp Enable.

According To Google and SOASTA Slow Pages Can Increase Bounces. For bounce rate, Which Measures The Percentage Of People That Leave Your Mobile Site Without Exploring Beyond The First Page, Speed Has The Most Impact. But In The World Of Site Performance, Speed Has Many Faces. Let’s Look At The Top Two Site Attributes That Impact Bounce Rates: DOM Ready Time (we’ll explain in a moment) and full-page load time.

What Are The benefits To Enable AMP?

  • Improves the consistently page speed across all devices and enhance user experiences.
  • AMP is an open sourch enriched with customized Library definitely deliver’s great optimized performance.
  • It can reduce the complexity in code Structure definitely will help developers.
  • Unique user experience will give business growth.
  • It reduces the bounce rate and give faster page loading experiences.
  • All css must be inlined and size bound, Now CSS limit has been increased to 75kb of CSS available on each webpage and email, before it had the limit of 50kb.
  • Its very Hectic To Adding And Removing The Classes For Animation So AMP Offers Several Components.
  • It Can Also Secure You From Attackers. You Get Full Benefits If You Site is Https Over Http.

How Does AMP works?

AMP project Renders only html codes it doesn’t contain javascript library. Although you have to use javascript Library as per AMP Project. According To google analytics :

AMP traffic uses different client IDs from those for web traffic by default. AMP pages load faster and show different traffic patterns than their standard web page counterparts, which can often mean you will get different metrics between AMP and non-AMP traffic.

Three main Factors that plays vital Role in Amp projects:

1. Amp html code:

Most of the Tags Are Regular Tags although some Tags Are Replaced With amp Specific html Tags Those Powerful Tags Provides Performance And Optimization In Efficient Way.

asyncsrc="https://cdn.ampproject.org/v0.js"></script> 
<link rel="canonical" href="$SOME_URL"> tag inside their <head>

But Question Is How The Site Loads Faster Within A Sec Just Because Large Portion Of Original Codes Cut Down And amp Renders The Valuable Code That Is Need For Optimization Of Mobile Page.

2. Amp Cache :

The Google AMP Cache is a Proxy-Based Content Delivery Network CDN. It Only Fetches Validated Pages Through Their Proxy Networks Proxy Based Server Is Nothing But That Allows Content Retreive From Server Side By Seperate Server The Same Content Goes Back To The Client.

  • All AMP JavaScript Is Executed Asynchronously.
  • Extension mechanisms Don’t Block Rendering.
  • CSS Must Be Inline And Size-Bound
  • Font Triggering Is Efficient.
  • Style Recalculations Are Minimized.
  • Running only GPU-accelerated Animations.
  • Resource Loading Is Prioritized.
  • Instantly Load Pages.

3. Amp javascript:

The Js Library Is Responsible For Fast Rendering The Code In Runtime. Mainly This Take Care Of All Aspect It Integrates The Main Resources And Gives Faster Optimized Page. The Main Advantage Of AMP Javascript Is It Works Asynchronously It Means Nothing Can Block Pages From Rendering.

Who should use AMP for their website’s?

Although amp Can Favour You With High Speed Loading Webpages But Implementing Amp Could Be Difficult If You Are Not Developer. Because amp Can Stripped Down Original Data To Increase Efficiency And Optimization You Might Miss Out Rendering Some Images On Your Website.

final conclusion:

My Own Perspective Is That If Your Website Has Static Pages It Will Give You Seamless Experience And Benefits Over Dynamic And Responsive Pages.

Rating:
Ravi Joshi
About Ravi Joshi Author of Bloggingwithravi, Observer, Technology Freak, Learner, Analyser, Blogger.

Comments

comments powered by Disqus