Three seconds! Yeah, that's correct.
That's all the time you've got in your hand to grab your user's attention. Do something magical so that your consumer doesn't lose their patience from your page. Otherwise, you'll fade away from the race.
The worst thing is that, according to econsultancy, most retail mobile sites take about 6.9 seconds to load, which is more than double the amount of moment 40 percent of customers wait before leaving the site.
So, what is the solution? This is where AMP arrives to get rid of this issue.
How! Let's discover that.
AMP stands for the Accelerated Mobile Page. AMP is an open-source framework created by Google to guarantee that mobile web pages operate at optimum speed. It operates as an evolving instrument to provide optimized mobile pages to decrease page load times on mobile devices.
It allows you to build lightweight experiences for mobile by simplifying the HTML and following streamlined CSS rules. AMP pages are built with 3 core components: AMP HTML, AMP JS, and AMP Cache. AMP pages load on mobile devices almost immediately.
Before introducing AMP to the website, it is essential to understand how it operates. AMP follows easy algorithms to operate properly. Below I addressed how it works. Let's dig those steps;
Object Model) construction and delay page rendering.
In AMP pages, all DOM reads happen first before all the writes. This ensures there's the max of one recalculation of styles per frame.
What Type of Content Works Best Using AMP?
- News articles
- Blog pages
- Recipe pages
- Product listings
- Product pages
- Classifieds listings
- Classified ad pages
Decreased Bounce Rates
Bounce rate reflects the proportion of individuals who visit one of your websites and then leave the website without clicking anywhere else.
Slow-loading websites are one of the primary culprits for the high mobile bounce rate. AMP pages significantly lower bounce rates by rapidly rendering the website, thus enhancing the rank of the website.
Your website's mobile version will face some analytics issue as it's not the same as your traditional one, and it doesn't have the analytics characteristics added.
AMPs don't operate with your already implemented monitoring. They are stored and monitored differently from normal websites.
There are several AMP extensions available for Joomla website. You can use any of them. I am going to describe the most popular three extensions among them. So, let's explore them with their amazing features.
It automatically converts your Joomla contents into the AMP HTML markup.
You can quickly test the AMP version of each AMP enabled page and test the validation on the Google AMP Test website. It also previews the AMP page rendering through a mobile emulator window.
Display social share buttons on AMP pages, for instance, Facebook, Google+, Tweeter, etc. It enables lightbox for images on AMP pages. It helps to show YouTube video on AMP pages.
To install AMP on your Joomla website, you don't need to worry. Just stay back and follow the below steps;
Step 01: Download
Download the following files. You can download it from weeblr.
Step 02: installation
Go to Extension > Manage > Install > Upload Package Files to install your downloaded files on your Joomla website. You will get a successful message after successful installation.
Step 03: Plugin Configuration
Go to Extensions > Plugin. Find the "wbAMP" plugin on the list and edit.
Note: Select "Development" mode on operation mode configuration. Once you finish configuration and you will be sure your AMP pages are valid, then you can switch to "Normal." When "Development" mode is enabled, AMP pages can be displayed on your site, but they will be not visible for Google bots.
Step 04: Select Pages Configuration
If you want to display AMP pages for all Joomla blog category and article pages, configure the settings by following the below steps;
Com_content category: Select categories for which you want to display AMP pages.
Article id: Type Id of articles to display AMP pages for selected articles only. Type "*" to choose any article.
View: Select views for which you want to display AMP pages, you can choose "category," "article" or both.
Menu Item: Select menu items to display AMP pages for selected menu items only.
AMP pages taken from DJ-Classifieds content:
Component: Choose "DJ-Classifieds"
View: Select views for which you want to display AMP pages, you can choose "items," "item" or both
Menu item: Select menu items to display AMP pages for selected menu items only
Category query var: Type "cid" as DJ-Classifieds category query var if you want to display AMP pages for selected categories
Value: Type id of DJ-Classifieds categories for which you want to display AMP pages (comma separated)
Item query var: Type "id" as DJ-Classifieds item query var if you want to display AMP pages for selected items
Value: Type id of DJ-Classifieds items for which you want to display AMP pages (comma separated)
Step 05: Meta Data Configuration
The top part of the layout is the header, which can display your log, site name, etc.
The name of the site and/or the picture of the site you specify will be displayed centered across the page and link to the site's home page. If you set an image, use the AMP specification to indicate its width and height.
Note: You must setup publisher information. This will be added by wbAMP to the meta data of your AMP pages, and should help consolidating authority of your organization.
Step 06: Analytics Configuration
It is very important to track how your Accelerated mobile pages are used, especially for something as new as AMP.
The specification allows for using multiple analytics services providers, but currently only Google Analytics and Google Tag Manager support is handled by wbAMP. Configure Analytics tab to track your AMP pages.
Step 07: Custom Elements Configuration
- Facebook share
- Twitter share
- Google+ share
- LinkedIn share
The settings on this page lets you select which button to display, where - before or after the main content of the page and a combination of styles and theme.
Custom links - DJ-Classifieds requires some additional AMP scripts to work properly. Copy and paste the following scripts into that field:
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> <script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script> <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Step 08: Ads Networks Configuration
wbAMP has extensive support for inserting Ads in your Accelerated Mobile Pages. By default, the Ads network settings are global, ie, the same network will be used throughout all AMP pages.
But you can also manually insert ads from any ad networks the AMP project supports by means of tags in your content.
Step 09: Cleanup Configuration
Under the wbAMP Configuration Cleanup tab, you will discover options to allow you to remove unwanted content or disable plugins that can produce unwanted content in the first location.
Step 10: Advanced Configuration
This settings tab for wbAMP includes sophisticated characteristics. It shouldn't be necessary to change those options for most sites, but offer you a lot of power and control when needed.
Do you need any further information? Don't hesitate to ask us. Do you think any significant issue I missed out? Let us know if I did. Eventually, this Complete AMP Guide article is dedicated to enhancing your productivity. So, put your thoughts regarding the article through the comment box below.