When I was planning to launch a pet supply website and considering a classic HTML-based approach due to WordPress's heavy performance, a "Google AMP" advertisement caught my eye.
The ad claimed "increased ad click-through rates on fast mobile sites using AMP."
A site with a classic structure like HTML, CSS, and jQuery is incredibly lightweight and fast.
AMP achieves speed optimization through "AMP Cache," a CDN (Content Delivery Network) for sites built with AMP.
It seemed like a good opportunity, so I decided to try building a site using "Google AMP."
The page I actually created → https://forsmile.jp/pet/landing.amp.html
In this article, I'll introduce an overview of AMP and the benefits of implementing it.
WHAT IS GOOGLE AMP? AN OVERVIEW
AMP stands for Accelerated Mobile Pages.
Officially, it's touted as a "web component framework."
From my quick look at its internals, it feels like a stripped-down version of hard design elements from frameworks like "ONSEN UI" or "Vuetify."
Similar to ONSEN UI and Vuetify, unique "tags" can be used in addition to standard HTML tags.
Unlike JavaScript frameworks like Vue.js, it simply adds tags.
AMP has its own unique coding rules, and violating them will trigger errors during debugging.
While the specific coding rules are meticulously defined for each page and tag, the debugging process can detect non-compliant coding. It might sound troublesome, but for engineers experienced in website speed optimization, these rules are understandable and acceptable.
To describe AMP in a single sentence, it's exactly as stated in the following phrase from its official website:
"AMP is a simple and robust format that makes websites fast, user-first, and monetizable."
However, what I actually felt after implementing it was that some rules, while perhaps unrelated to speed optimization, could spark 'religious' debates among engineers. Even I thought, 'Wait, this isn't allowed either?' during implementation. It seems to be an evolving platform, with discussions happening on Git and plans to incorporate user feedback, so the potential for further changes is also an interesting aspect.
TOP 3 BENEFITS OF USING AMP
It helps with SEO, especially for mobile.
While official announcements state that AMP implementation doesn't directly affect search rankings, current SEO evaluation criteria tend to prioritize "speed," such as display speed and minimizing user wait times. Therefore, an AMP site, which naturally loads quickly, can be considered a highly advantageous framework from an SEO perspective.
PC pages also quickly ranked higher in search engines. The site appeared prominently in search results for multiple keywords. For non-AMP landing pages, some only started appearing in search results after extensive use of external and internal links. Articles updated to AMP, however, hit organic search results within 7 days without any specific external link building efforts.
Faster display speed reduces user abandonment due to load delays.
The rendering speed is noticeably faster. While image loading still depends on the images themselves, the "AMP Cache" mechanism, which caches pages, makes the overall experience feel quick.
This is expected to reduce user abandonment rates caused by slow page loading, leading to a more user-first page experience.
Useful tags become available.
By adding AMP, you gain access to tags that allow you to easily create various components.
The appeal lies in the wide array of tags available, from dynamic components like carousels and accordions to integrations with social media platforms like Twitter.
DISADVANTAGES OF USING AMP
Currently, I believe there are many cases where AMP is not suitable, except for very simple page structures.
This stems from the unique AMP coding rules mentioned in the overview. While adhering to these rules enables speed optimization, their existence can prevent the adoption of other frameworks or integration into existing pages.
If you have an existing website, I recommend creating new AMP pages separately rather than refactoring existing ones. For search engine optimization, you can link existing pages and AMP pages using HTML's canonical tag (<link rel="canonical">) for same-page detection.
Furthermore, because unique coding rules are set for each tag, tags often won't function if the HTML structure isn't carefully considered during coding. There are also instances where integration with other platforms (like Google AdSense) doesn't work smoothly, which I consider another disadvantage, indicating that it's still very much a work in progress.
AMP RECOMMENDATION LEVEL
This is purely my personal opinion, but I think it might be worth trying for simple sites.
If you were to use it for business purposes, the addition of AMP would lead to pages that can be implemented with AMP and pages that cannot, incurring extra design costs. Moreover, it's questionable whether complex pages can truly benefit from AMP, as most web page conversions aren't solely driven by page load speed. At this stage, I think AMP is best used only for pages linked from Twitter or advertisements.
Since I've already started building with it, I'll continue to use it. Hopefully, the evaluation above will change for the better someday.
📦