Skip to HeaderSkip to PostSkip to Footer

Review of the Advantages and Disadvantages of AMPHTML vs HTML5

Review of the Advantages and Disadvantages of AMPHTML vs HTML5 - After doing web design experiments for this Blogger template, I realized several things related to AMPHTML that I want to share this time. Which do you think is better, AMPHTML or HTML5? This time, I want to give my opinion on it. Let's try to find the best answer to the question.

Maybe no one is aware that on this web/blog I applied 2 different templates, namely the LinkMagz version 2.5 template from Mas Sugeng which is valid HTML5 template and the Kompi Dark AMP template from KompiAjaib which is AMPHTML valid.

For more details, you can check the following link:

And after I applied the two different versions of the template I realized that the non-AMP version was more satisfying than AMP.

If any of you think it's because you're using the wrong AMP template, try using this one or that one, the results will be satisfying. Then I will answer WRONG! Before I decided to use the KompiDark AMP template for the AMP version of my web/blog, I've tried several other AMP templates. And I think this KompiDark AMP template is quite satisfactory for the following reasons:

  1. The setting is easy because it still uses the layout version 1 from Blogger.
  2. The structure and others are valid from the start so there is no need to bother with optimization and cleaning up the structure again.
  3. The display is OK!

Disadvantages of AMPHTML

1. Invalid HTML5

It is undeniable, AMPHTML is one of the most important factors for a blog and is also highly recommended by web developers from the giant, Google. However, there is something stuck in my heart, namely HTML5.

Some time before the explosion of AMPHTML, HTML5 became a mainstay which is considered the best HTML optimization and is still trusted and used by many web developers. Unfortunately, when I validate the HTML5 template after I add the AMPHTML version of the blog template, my blog is no longer valid HTML5. In other words, the default AMPHTML script causes errors for HTML5.

Actually, I'm still not sure, is this because AMPHTML is incompatible with HTML5? Or is it because the validator I'm using hasn't been updated using the AMPHTML script update? What is clear, this is a pretty good new toy for those of you who really like to tinker with HTML scripts. I haven't found a solution to this question either.

At first glance, if you pay attention, AMPHTML actually uses HTML5 as a basis for tagging. For example, if in HTML5 we use video, then in AMPHTML we convert it to amp-video and when the browser reads the tag, the browser will render the amp-video into video. So, it should be the same.

2. LSI Check Results and GTMetrix Messed up!

If you activate or use an AMP-based template, then don't be surprised if you find orange/yellow or red reports on Google Pagespeed Insights or GTMetrix. As a comparison, please pay attention to the following 2 pictures:

Laporan LSI AMP vs Non AMP

As you can see in the image above, the results for the AMP version of this web/blog homepage have a lot of orange and red PR with a score of around 80 on Google Pagespeed Insights, while the non-AMP version passes with almost perfect scores.

And for the PR of the AMP version, I can't look or fix it because it comes from the default AMP script which then becomes a bundle. For this problem, until now, the developer from AMP has stated that this is a bug that is still being worked on and the solution is being worked on.

Pay attention to the words, THE SOLUTION IS WORKING ON. That means, the AMP developers also know that there is a bug in their AMP script that causes errors or reports from LSI to turn orange and red.

However, they can't delete or fix it immediately because the AMP script that was built has been designed in such a way to be compatible with many other scripts such as third-party scripts, AddThis and others.

3. Editing is a bit lazy (only for Blogger users)

Since Blogger has not released a feature that allows users to easily access AMP features, users who want to experience AMP features must be willing to manually edit their blog posts and templates to make them valid for AMP.

And because it's manual, it takes a long time to edit it.

For my personal blog, when I just synced the AMP version I have to edit approximately 100 of my posts so that they are all AMP valid. It's quite time consuming, lol.

So for those of you who have been blogging for a while using HTML5 or non-AMP formats, I really don't recommend changing your template to AMP because you are required to edit each of your posts one by one.

Seriously, it's quite tiring.

Advantages of AMPHTML

When asked about the advantages, I personally think there are several advantages by activating this AMP feature. Some of them are:

1. Loading the mobile version is faster

This is my personal opinion, accessing the AMP version of my blog on a cellphone, the loading is indeed faster. This statement is contrary to my previous argument which says that the results of LSI and GTMetrix are red and orange.

This argument could be invalid because it is based on personal opinion but that's the fact that I feel. If anyone doesn't agree, just say so.

And as we all know, fast loading blogs are a plus for our blog/web SEO.

2. Get the AMP logo in Search Results

One more advantage of implementing AMPHTML is the display in different Google search results. If you can optimize the structure of AMP, you can create a web story for each display of article search results on your web / blog. For more details, please see the image below:

Hasil Pencarian AMP

Pay attention to number 1 where it is a special sign that Google gives for websites that implement AMP.

The advantages of having that logo in search results are:

  1. Increase CTR on articles because people who understand the meaning of the sign know that loading from your website or blog is fast and easy to access.
  2. Increase visibility (attraction to be seen) in search results. Before being clicked, of course, your article must be interesting first and the presence of the symbol can attract the attention of Google users, you know.
  3. This is still an issue but it is said that websites that implement AMP get more attention from Google in search results. Again, for the third point, this is still an issue and I'm still investigating.


Despite all that, I myself decided to implement the AMP version to be implemented in my blog. So, I decided to use 2 versions, namely HTML5 as the base template and AMPHTML as an addition or alternative while praying, AMPHTML can be considered valid in the HTML5 concept.

What do you think? What is your blog/web template base? HTML5 or already implemented AMPHTML? Which do you think is better? I am waiting for your answers in the comments column. Let's discuss this together!

Hopefully this article is useful and see you in my next article.


Post a Comment

Please give relevant comments. Dont put irrelevant link on the comment section or I will delete the comment.