In the fast-moving world of website creation, mobile is everything.
Creating a website that loads quickly and looks great on mobile devices can make or break the user experience of that site.
Given that more users than ever conduct the majority of their Internet searches via mobile, this isn’t surprising.
Speed and usability are everything, and, if you’re lacking in either, you’re missing out on a lot of potential user traffic.
AMP is a project by Google and Twitter, as well as an increasing number of other platforms, to create fast mobile web pages.
In today’s article, we’ll be taking a closer look at what a Google AMP test is, how the design standard works, and whether your site meets its standards.
How Does AMP Work?
Saying that mobile is king in the world of website design would be an understatement.
With so many websites moving their content across the mobile divide, there’s a need for design standards to help this data load quicker.
Accelerated Mobile Page (or AMP) is a design standard that serves as an answer to that need.
And the way it works is simple.
Websites are designed in HTML, the same as they’ve always been, but the language itself is stripped down.
HTML tags are cut back to the bare essentials. CSS, in turn, is reduced to a simpler language, with AMP calling for the dropping of certain parts of the script.
This kind of data trimming aims to create a version of your website that focuses on readability instead of features. The idea is that there are certain pieces of script which are guaranteed to slow down the loading of a page on mobile get cut.
Consider it a backend diet for your mobile design. The more you can cut, the faster your page will load, and the better a mobile product you’ll have.
Forms, for instance, can slow things down. Under the AMP banner, these are out of the question for a mobile page design. In a similar vein, JavaScript, a very popular design tool for many website designers, is dealt away with, as it can slow down the load.
That said, there are options for Java lovers reading this article. These are simplified, off-the-shelf libraries, with a handy feature known as “lazy loading.” This kind of loading caches images, which would slow down loading, so that they only appear as the user scrolls over them.
Cold Hard Cache
Caching like this is one of the driving forces behind this entire standard. This reduced design helps Google to host your page, storing cached information about you to help load your page immediately.
It’s this use of reduced web technologies, and cached site hosting that AMP uses to achieve its remarkable load speeds.
Special Treatment
One of the more obvious benefits open source software is that it is, well, free-to-use.
Sites that adhere to the specifications set by Google’s AMP design standards become a search priority. As a way of rewarding the use of this project, the search engine gives these sites special attention.
This is an effective form of SEO or search engine optimization. This is because AMP sites appear closer to the top of the Google search results for their associated keywords.
There is a catch to keep in mind, though. Users who share links to things they have discovered on your AMP site, after arriving there from a Google search, won’t be linking to you. Because Google uses caching to host your website, any links to it actually point to Google’s servers.
So, while users will have a better time loading your page, and it will appear closer to the top of its search results, your content lives on their servers. You won’t get as much of that backlink traffic, simply because users may not want to put in the work.
With the SEO benefits of this kind of favoritism, many sites opt for it, regardless of the issue with sharing, but it is worth noting.
Open Source
Obviously, the greatest benefit of most open source software is that they are, well, free-to-use.
The same applies to Google’s AMP project.
JS libraries, source code, AMP reviewer tools and other handy extensions all made free to bloggers and website managers all AMP a steal.
Is Analytics Included?
Google AMP implements analytics services in a way that stays true to its goal of keeping loading speeds quick.
They do this by using two distinct elements of different complexities.
The Amp-Pixel element provides simple traffic-counting data. It operates using a GET request and provides users with basic information such as page views.
The Amp-Analytics Extended Component is a much more complex element, because of the value of the information it generates. With improved configuration options and a range of robust data gathering services, this is the more popular of the two extensions.
And Ads?
While JavaScript is taboo under AMP guidelines, there are some ways to include ads on your site, while being AMP compliant.
AdSense, for starters, can still be added by using the Responsive Add-On, which converts these ads into the AMP format. You should restrict your ads to standard formats. This ad avenue comes with a few other general limitations, but for the most part, it works without any problems.
As the standard is becoming more widespread, different ad networks have started supporting AMP. AMP for ads is a movement by Google to integrate lazy loading into ad requests, after the website content. This makes for faster ad rendering and reduced CPU usage.
Criticisms
It would be impossible to discuss Google’s AMP standard without mentioning a few of the recent backlashes against it.
First, there’s a problem we’ve already mentioned: the content of your website loads off of Google’s servers, not from the site itself.
What this does, aside from adding an extra step to the linking process, is remove direct links to your website. This can lead to a downturn in conversions. It’s easy to understand: users have to do more to get back to you from a link, after their browser has redirected them to the Google page for your site, first.
Moreover, many web designers have criticised Google for making themselves the de facto portal to access sites through. They compare this, most often, to platforms like Facebook.
Finally, there are those who say that it’s possible to mitigate the issue of loading times in other ways. From this view, all the benefits of using this standard are less meaningful, considering the fact developers can do this in other ways.
What Is A Google AMP Test?
In 2016, Google launched their Search Console’s new, enhanced AMP testing tool.This
This utility uses the actual Googlebot to analyze the AMP readiness of a web page.
It does this on two fronts. First, by examining the stability of your AMP markup work, and then analyzing the structured data on your page.
This is a handy tool, in that it narrows down and targets the parts of your mobile site code that may be lacking in AMP viability. It does this at a granular level, highlighting specific errors in a site’s code and giving coders notes on how they should change.
On the same note, if your website meets the required standards to for AMP compliance, the AMP tool gives you a preview of its search placement. Because they use the actual GoogleBot, these results are live, and an accurate representation of your search placement.
The benefits of a tool like this are clear. Using this, and other integrated AMP inspection tools, you can move through your blog or website and make changes until the page is AMP ready. Bloggers or website owners can alter their designs over time, moving over to the AMP standard as they need.
To make the process more convenient, Google has also included a share button within the app itself. With this, developers can share links to their AMP qualifications between team members or other involved parties.
Do You Qualify?
As this project becomes more popular among web developers, it’s natural to want to optimize your site to fall in line with AMP standards.
Like any other optimization technique, there are some clear steps you’ll need to take to make your website perform better under these guidelines.
To start, it’s important to have two versions of all your article pages. The first is a standard page, with all the original content it would otherwise have. The second is an AMP-optimized version.
AMP design calls for a restriction on the use of form elements such as on-page comments. As we’ve already discussed, it also prohibits the use of third-party JavaScript elements, in the line of lead forms and other elements.
According to AMP best practices, CSS must be in-line, and amount to less than 50KB of data, total. When using custom fonts in your CSS, you’ll also want to use an optimised AMP font extension, for improved control over load times. This is actually an important factor to keep in mind, as fonts can have a big impact on the load intensiveness on your web page.
Multimedia elements such as images, videos, and animations also require special attention. Much like custom fonts, images should be uploaded using a custom AMP-img element to streamline their load times.
That’s not all: these image files should also be edited down to specific dimensions to follow AMP standards.
Locally-hosted videos also require custom tags, known as AMP-video. YouTube videos, similarly, require the very popular amp-youtube component. With a little experimentation, you’ll be able to work these tags into your coding, naturally.
The Code To Success
Google isn’t the only site out there making use of AMP technology. WordPress and Twitter are two other platforms that use AMP optimization to help mobile sites improve their usability.
So that the tech on these sites can detect AMP usage in your article, they need specific coding modifications to the original page. The page you’re optimizing must include this tag:
<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>
Additionally, some AMP platforms also call for Schema.org meta data, so that they can classify each page’s specific content type.
Get Your Ads Right
One of the goals of the AMP project, from the beginning, has been to find a way to integrate improved user experiences and effective ad monetization.
Because, while the user always comes first, what use is a business website where your revenue source is cut off?
With that in mind, there has been an increased number of ad networks integrated into the project, by way of the amp-ad extended component. These include everything from Google AdSense and Doubleclick to Flite, Yieldmo, and Amazon A9.
What’s more, as many sites use via paywalls and subscription services, AMP has created the “AMP Access” extension. There is extensive documentation on using it to integrate these services within your AMP creation.
Are You Ready For The Google AMP Test?
Google’s rollout of its accelerated mobile pages hasn’t exactly been without its critics.
That being said, it’s still the fastest way to create a smooth, user-focused mobile experience for your website. And with two years and a handful of useful updates under its belt, it’s a design standard that’s stronger today than the day it was released.
At its core, the ideology remains simple: cut out the clutter.
Creating an AMP-friendly website means dialing your code back to the basics. And, with developments in Google-approved extensions, the project has taken on a greater range of design options than ever. With everything in a standard website now available to AMP designers, there’s never been a better time to optimize your site for mobile.
With the added benefit of Google’s search prioritization for AMP sites, you’ll see the difference in your SEO almost immediately. More than that, though, your mobile users will experience the difference in their end user experience.
Interested in finding out more about getting your website optimised for search engine rankings? Get in touch with us, today, for SEO services that put your business website ahead of the curve.
