Erica Gilbert

Best in the Market Magento 2 Update or Upgrade Services

What is AMP (Accelerated Mobile Pages)?

The main purpose of AMP is to serve web content instantly on mobile devices. They are the web pages that are created by following a new set of coding standards set by AMP technology. AMP (Accelerated Mobile Pages) are HTML pages that are lightweight, fast, and far more user-friendly.

My website is already using responsive web design (RWD) why should I use AMP?

Many website owners ask this question, let’s take an in-depth look at both below, clearly defining each:

RWD focuses on flexibility, allowing your website to be displayed on various devices by adjusting itself accordingly.

Pros:

Responsive sites look modern and match with the latest web standards

No need to develop a separate website

Only need to update one website

Cons:

Time-consuming development

Slow loading due to unnecessary HTML/CSS

Compatibility issues for the older versions of some browsers

AMP pages are designed singularly to serve content instantly on mobile devices.

Pros:

Improve load time on mobile

Improve server response

Increase click-through rate (CTR)

Standard mobile optimization for different websites

Improve Search Engine Ranking on Mobile browsers

Cons:

JS and CSS limitations

Serving Google cached pages

Decrease in Ad Revenue

Implementation is not easy

When AMP Came into Existence?

“The AMP Project was announced by Google on October 7, 2015. It was intended to improve the performance of the mobile web. More than 30 news publishers and several technology companies (including Twitter, Pinterest, LinkedIn, and WordPress) were initially announced as collaborators in the AMP Project.” ~ Wikipedia

Google began displaying AMP pages in mobile search results in February 2016. You have assuredly come across AMP pages while performing mobile searches. AMP pages are easily distinguished as they include a tiny lightning bolt symbol. Let’s take a deeper look below at AMP search results and what type of browsing experience they offer mobile users.

AMP Process:

See below Google results with AMP symbols shown on mobile devices:

Google shows available AMP versions of the pages when the relevant queries are searched by users. Moreover, the AMP pages served through Google’s server to achieve the fast load speed.

When someone visits the above-mentioned AMP articles, it goes like this:

The AMP pages shown above are served through Google’s AMP cache. The URLs browsed are:

URL from Snap1:

https://www.google.com/amp/s/amp.theguardian.com/world/2019/sep/16/yemen-houthis-claim-responsibility-for-saudi-oil-field-attacks

URL from Snap2:

https://www.google.com/amp/s/abcnews.go.com/amp/International

Google does not want to leave any stone unturned which is why Google uses its servers to load AMP pages, the above URLs demonstrate that. One of the main factors contributing to the speed of AMP pages is that Google servers expedite AMP pages, allowing them to load much more quickly when compared to RWD mobile pages.

The above-mentioned are Google AMP’s cache URLs. The actual AMP URLs on your website may look at any of the below-mentioned formats:

http://www.example.com/amp/doc.html http://www.example.com/amp/doc/

or

http://amp.example.com/doc.htm http://amp.example.com/doc/

Now that we’ve covered what AMP is and how it works, let’s take a look at some key metrics on how AMP can affect your overall mobile site performance:

Image Source: amp.dev

So, now you must be wondering, “How can I make my website AMP ready?”

You have to create a whole new website in AMP coding (AMPHTML). Either you can create manual pages in AMP format or can convert your HTML pages in AMPHTML. Extensions, modules, plugins, and other tools (like ampcreator.com) can be used to convert your existing pages into AMP format, and without much hassle or manual work. Rave Digital recommends using some addon or tool for making the AMP website.

To understand AMP HTML, here is a sample coding example:

You can check more coding rules and syntax here.

Let’s take a look at some of the available solutions used to convert your existing site over to AMP and preparing the code according to a multitude of website platform’s core requirements and functionalities.

In WordPress, there is an official AMP plugin which is a game-changer when tackling what can otherwise be a daunting task of creating an AMP site, named AMP. Additionally, site owners can install and configure AMP extensions for Magento stores, Drupal Modules for Drupal Websites, Joomla extensions for Joomla sites, so on and so forth.

Rave Digital recommends AMP be implemented by a certified team of experts. If you are interested in making your Magento, WordPress, Drupal or any other website AMP ready, contact Rave Digital today for a free consultation and quote!

Stay tuned for more web development and website improvement articles!

Prior to “how” you may be wondering about “why” I should care about my website’s load speed and performance?

The answer is straightforward:

Faster websites convert better, users love speedy sites, and so do search engines, including Google!

“A website’s load speed is one of Google’s main ranking factors. Having a quick load speed will reduce conversion abandon rate, as users are likely to remain on your website for longer periods.”

Not yet sure if you “need” to optimize your site? Check out the following stats below to find out how much revenue you are leaving on the table!

Both of the above images belong to unbounce.com

Now that we’ve established the importance of a fast loading website, how the speed of a website affects overall performance, and fast website speed increases revenue, let's take a look at how to test your website speed.

When scanning your website, tools are measuring many items, but most importantly the following:

Performance Grade

PageSpeed Score

Page Size

Load Time

Number of Requests

There are quite a few tools available; however, we use and recommend the following three:

Pingdom

GTmetrix

Google’s PageSpeed Insights (Only tool for Mobile)

Performing site speed audits and repairing site speed issues is not a one and done task. It is crucial to consistently test your website and continually make the recommended changes as doing so will ensure your website is running at optimum speed and performance.

Listed below are essential optimization tasks that should be attended to in order to achieve optimum site speed and performance:

Serve images in next-gen formats

Optimize Images

Remove Unused CSS

Remove Duplicate JavaScript and CSS

Minify HTML

Compress components with gzip

Minify JavaScript

Minify CSS

Leverage Browser Caching

Minimize Redirects

Reduce the Number of DOM Elements

A major consideration when it comes to site speed is choosing a Fast Response Hosting Provider:

Hosting providers have one of the largest impacts on overall site speed and significant effect on website load times and subsequent performance. Rave Digital highly recommends WPengine, HostGator, and Inmotion hosting to avoid the pitfalls of subpar providers.

The next step is to proceed according to your website platform’s core requirements and functionalities. If your store is on the Magento platform then using extensions or hiring a team of certified Magento developers who will continually optimize and maintain your Magento store or website to improve website load speed times and performance. In terms of alternate platforms such as Drupal, WordPress (WP), Joomla, .Net websites; Modules, plugins, or extensions can be implemented in order to achieve optimum website performance.

Rave Digital has extensive WordPress web development experience and great success in improving WordPress website load speed. One of the most beneficial aspects of WordPress is the enormous development community and access to endless amounts of plugins! Listed below are several plugins Rave Digital recommends to increase Wordpress site speeds and boost site performance:

WP Rocket - One of the best all-in-one plugins to increase Wordpress website speed. It includes features like Page Caching, GZIP Compression, Browser Caching, Database Optimization, Google Fonts Optimization, Lazyload, Minification/Concatenation, Defer JS Loading, and many others.

In the event this plugin or some of the functionalities are not supported by your website, you can use alternate plugins for different optimization, see below:

W3 Total Cache - W3 Total Cache improves the user experience of your site by increasing website performance, reducing load times via features like content delivery network (CDN) integration and the latest best practices.

WP Fastest Cache - When a large amount of traffic visits a site, the system uses a lot of RAM and CPU, therefore, pages are rendered slowly. In this case, you want to avoid a cache system that continually renders pages. WP Fastest Cache generates static HTML files, saving them and serving static HTML pages to visitors greatly reducing what would otherwise be extremely slow load times!

Imagify - Speed up your website with this image optimizer and get lighter images without losing quality.

Shortpixel - A freemium easy to use, comprehensive, stable, and frequently updated image compression plugin, optimizing any image or PDF document on your website.

In the event of compatibility issues, you can research alternative WP plugins for each of the website speed issues at WP plugins.

Stay tuned for more web development and website improvement articles!