Based on the research mobile websites become more and more popular. We observe the popularity of mobile devices is stil growing, especially because we can use the Internet almost everywhere. That’s why the company owners should overthink the profits of being their websites available also for mobile users.
Accelerated Mobile Pages
Along with the end of January Google implemented the feature allowing enable acceleration for mobile websites called AMP. But what it really is?
AMP, known as Accelerated Mobile Pages, is a way of building websites based on the static content which has to render quickly.
What are the parts of AMP?
- AMP HTML – it’s a set of recommendations for HTML code allowing rich content creating using the basic HTML code and available extentions as part of AMP.
- AMP JS – JavaScript Libraries which makes the content appearing on website instantly,
- AMP CDN – it’s an optional feature, responsible for delivering HTML websites based on AMP.
Why AMP was created?
It was designed as an open-source service by people connected with people working with mobile websites, an effec of their thoughts and long discussions. There were not just webmasters, programmers or editors but also users, so it’s based on their experience. But what it’s all about? Just for providing content much faster than it has ever been.
AMP was created to affect the website loading time, so the bounce rate caused by slow loading should decreas, regardless of content accessibility (for mobile devices, PCs or laptops).
How AMP exactly works?
The mechanism is really simple, because Accelerated Mobile Pages works the same as other websites based on HTML code. The difference is in some parts of this code, because they are able to use just in specific cases.
AMP trick consists in saving in the cloud/cache of the third party website. It can be, for example, Google Cache.
This solution works by using technical elements provided by servers and search engines, thanks to that the speed of website loading increases which affects the user experience.
It’s worth mention that AMP Acceleration, as a hi-tech solution, works without any obstacles in all modern browsers.
For who AMP was designed?
It can be use by anybody who wants to increase the speed of content providing. Unfortunately it’s limited by knowing the HTML and JavaScript code to accelerate the website correctly. The exlained as adding new tags and tag declarations and describing them using JavaScript.
What are the results of using AMP?
It is definitely decrease of bounce rate caused by slow website loading, but maybe it will affect Google to increase the page position in search engine too? Nothing is for sure now, so it’s worth observing.
How we implemented AMP?
We were determinated to implement AMP technology in our blog based on WordPress. At first we used ready-made plugins, but then decided to try with the own one. Fixing all the mistakes was like a nightmare.
The effects were visible and able to compare by adding /amp or &=1 under the URL, depends if the URL was friendly or not.
Adding AMP – step by step!
We added a feature allowing identify if people are using mobile devices or computer:
function isMobile() { return preg_match(“/(Googlebot-Mobile|googlebot-mobile|android|avantgo|blackberry|bolt|boost|cricket| docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i”, $_SERVER[“HTTP_USER_AGENT”]); }*
Then we made a separate header for mobile devices and put <html amp> tag instead of <html>, removed all the doctype indicators and changed them into those made by Google: <!doctype html> and added a line resposible for inclosing AMP script:
<script src=”https://cdn.ampproject.org/v0.js” async></script>
The next step was cutting and compressing the CSS, then adding a header to a tag:
<style amp-custom></style>.
While creating the header, we removed wp_head and footer from wp_footer as well. It was necessary to throw also away all the needless scripts, because the only script allowed is the Google one.
In all the places where inputs and forms were, we used isMobile() function so they were hidden for AMP.
It was also important to change all the img indicators to amp-img, so we created appropriate function. By the way we added removing style attribute from HTML tags, because AMP would show the mistakes:
function replace_content($content) { if(isMobile()){ $content = scaleImages($content, 300); $content = str_replace(‘<img’, ‘<amp-img’,$content); $content = str_replace(‘data-type=”image”>’, ‘></amp-img>’,$content); $content = preg_replace(‘/(<[^>]+) style=”.*?”/i’, ‘$1’, $content); } return $content; } add_filter(‘the_content’,’replace_content’);
This function, the same as isMobile(), was added to functions.php file.
Then a function of changing width and height in attributes “width” and “height” inticators using DOMDocument and loadHTML was added.
function scaleImages($html,$new_width){ $dom = new DOMDocument(); $dom->loadHTML(‘<?xml encoding=”UTF-8″>’ . $html); $dom->preserveWhiteSpace = false;
$images = $dom->getElementsByTagName(‘img’); foreach ($images as $image) {
$src = $image->getAttribute(‘src’); $width = $image->getAttribute(‘width’); $height = $image->getAttribute(‘height’);
$scale_factor = $new_width/$width; $new_height = floor($height * $scale_factor);
$image->setAttribute(“width”, “$new_width”); $image->setAttribute(“height”, “$new_height”); $image->setAttribute(“data-type”, “image”); }
$html = $dom->saveHTML(); return str_replace(array(‘<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/REC-html40/loose.dtd”>’, ‘<html>’, ‘<body>’, ‘</html>’, ‘</body>’), ”, $html); }
Add to css the following code just in case:
p amp-img{max-width: 100%}
It will remove all the problems with possible photos found in <p></p> indicators.
In the event of our modification we decide by ourselves when the AMP version is shown. You should insert the following code in <head></head> section:
<link rel=”canonical” href=”https://<?php echo $_SERVER[“HTTP_HOST”] . $_SERVER[“REQUEST_URI”] ?>” />
Some of the plugins caused the mistakes, but we just turned them off, as they were needless for us.
What is the final effect? When we’re using the website on the computer we see its traditional, full version, but all it’s accelerated on mobile devices by AMP.
It’s not easy to explain it fully, but we hope this brief description will be understendable enough. To see the effect it was important to do something with isMobile(). All the problems was solved by PHP, because HTML could be more difficult. Without any content available to use it could be impossible, for the sake of form elements – it would be really hard to hide them by css.
It was created on development platform protected with password (to avoid the duplicate content) and we were able to test it using Google Search Console in the end unfortunately. The conclusion is AMP can be use only by websites verified by Google Search Console (in case of Google, of course). * Please remove space between “|” and “docomo” sequence.
The use of AMP is definitely helpful. Great information, thanks for sharing!
You’re very welcome, good to hear that.