{"id":1476,"date":"2024-07-04T08:02:27","date_gmt":"2024-07-04T08:02:27","guid":{"rendered":"https:\/\/www.seoeaze.com\/blog\/?p=1476"},"modified":"2024-08-11T12:35:18","modified_gmt":"2024-08-11T12:35:18","slug":"is-google-amp-still-relevant","status":"publish","type":"post","link":"https:\/\/www.seoeaze.com\/blog\/is-google-amp-still-relevant\/","title":{"rendered":"Is Google AMP Still Relevant in 2024: Speed vs. Flexibility"},"content":{"rendered":"

When Google launched the <\/span>AMP project in<\/span><\/a> October 2015, there was a lot of confusion among website owners and publishers. While AMP promised faster pages and improved user experience, it demanded radical changes in the optimization section to make web pages faster for mobile devices. <\/span><\/p>\n

Nowadays, we spend a lot of time on mobiles, so businesses are developing the latest ways of monetizing. Just like Facebook introduced Instant Articles and Apple brought out Apple News, Google has rolled out Google AMP.<\/span><\/p>\n

Like any other Google project, the<\/span> AMP project found large early adopters, but most developers remained skeptical. We too did a detailed study on how to get started with Google AMP<\/a>.
\n<\/span><\/p>\n

It’s 2024, and AMP is still here. <\/span><\/p>\n

So, is<\/span> it advisable to create an AMP version of your website?<\/span><\/p>\n

Google has shifted its focus from the AMP versions of pages to <\/span>Core Web Vitals<\/span><\/a>. In this article, we explore Google what it is, how it works, and its relevance in 2024. <\/span><\/p>\n

\"Google<\/p>\n

What is Accelerated Mobile Pages (AMP)?<\/span><\/strong><\/h2>\n

AMP or Accelerated Mobile Pages is a Google-backed project that aims to speed up the content delivery system by using stripped-down code, i.e., the AMP HTML. In simple words, AMP is the way to create web pages for static content and allows pages to load faster than regular HTML.<\/span><\/p>\n

AMP uses an open-source framework, meaning other companies can use it to serve content built using AMP HTML, such as Twitter, Google, and<\/span> Pinterest. Google will now use these accelerated mobile pages to serve the content on mobile devices without users needing to click through to the website to check the content. You can easily view the demo of AMP within Google’s search results.<\/span><\/p>\n

How does AMP for Google work?<\/span><\/strong><\/h3>\n

At the core, Google AMP creates lightweight versions of web pages using a restricted subset of HTML, CSS, and JavaScript. <\/span><\/p>\n

When you set up AMP for your web pages, your tool or plugin will use a custom AMP HTML markup with specific tags and restrictions. Additionally, AMP pages prohibit custom JavaScript. Only asynchronous JS from AMP libraries is allowed. Such pages cannot use any external stylesheets except custom fonts. Additionally, AMP versions of webpages have inline and size-bound (50KB limit) CSS files.<\/span><\/p>\n

Google creates an AMP cache for valid AMP pages and then serves validated AMP pages from its own CDN for faster delivery. <\/span><\/p>\n

Browsers can preload AMP content on the front before users click, enabling instant loading.<\/span><\/p>\n

AMP provides built-in components for standard features like carousels and lightboxes, enabling more interactive content. <\/span><\/p>\n

AMP pages must pass validation to be discoverable and eligible for AMP Cache. You can check the validity of the pages for AMP using this <\/span>Google AMP Test tool<\/span><\/a>.<\/span><\/p>\n

This architecture ensures fast loading, smooth scrolling, and prioritized content delivery on mobile devices.<\/span><\/p>\n

Why use AMP?<\/span><\/strong><\/h2>\n

AMP basically aims to solve the problem of slow loading time. Using the AMP elements, Google believes that the websites can drive this down from a whooping 19 seconds to just 5 seconds or 400 percent improvement in performance. Indeed, AMP’s optimization techniques will help the pages to load instantly.<\/span><\/p>\n

Well, AMP makes it very easy for publishers and advertisers to offer resource-intensive content like image carousels, plugins, and video by reducing the total bandwidth required to deliver this kind of content.<\/span><\/p>\n

Limitations AMP introduces in web design: <\/span><\/strong><\/h3>\n

AMP HTML is specially made to improve the content’s readability and speed. Thus, there are a few visual limitations, including:<\/span><\/p>\n

Images will load just as you scroll down to those<\/span><\/p>\n

No JavaScript allowed apart from the AMP library<\/span><\/p>\n

CSS version required<\/span><\/p>\n

While these limitations can be easy for developers to overcome, for content creators using CMSes like WordPress, it raises multiple challenges. Fortunately, there are plugins available that allow WordPress users to instantly create AMP versions of their websites without technical know-how. <\/span><\/p>\n

So, do<\/span> you want to have Google AMP on your WordPress?<\/span><\/p>\n

How do you include AMP in your WordPress site?<\/span><\/strong><\/h2>\n

Before you proceed, it is essential to be aware that AMP may not be the perfect way to make your WordPress site load faster on mobile devices anymore. Focusing on Core Web Vitals is a better alternative to provide a better experience to mobile users and improve traffic to a great extent. <\/span><\/p>\n

If you choose to go for AMP for your WordPress site, here are the steps to follow: <\/span><\/p>\n

Step By Step Tutorial to Make Your WordPress Blog AMP Ready<\/h3>\n

First you Need to Install AMP WordPress Plugin – Link\u00a0<\/a>\u00a0or just to to Add New Plugin In Your WordPress Plugins Section & Search AMP to Install AMP Plugin.<\/p>\n

\"AMP-Plugin\"<\/p>\n

This is main AMP Plugin but after installing this your site is AMP Ready but this plugin don’t do much with designing of AMP Pages which you would surely like to consider, so to customize your AMP Site, add logo, ads, menu & many more options you need to Install Another Plugin AMP for WP\u00a0( Link <\/a>) or Search Accelerated Mobile Pages or AMP for WP in Plugin Search to Install Plugin.<\/p>\n

\"Accelerated-Mobile-Pages-Wp\"<\/p>\n

Setting Options -AMP for WP<\/h3>\n

\"AMP_Settings\"<\/p>\n

 <\/p>\n

To go to Settings Page, Look at the Options Available on your WP Dashboard Menu, You will find an option of AMP at bottom of Dashboard Links. Once You Click on AMP, AMP Settings Page will look like this<\/p>\n

\"AMP_General_Options\"<\/p>\n

Settings Page Will have Following Options :<\/p>\n

General<\/strong> – Her you can upload Logo for AMP site, choose a custom Home Page for AMP site & Some other options.<\/p>\n

Analytics \u00a0<\/strong>– Here You can add Your Google Analytic ID to track the visitors of your website<\/p>\n

\"AMP_Analytics_Settings\"<\/p>\n

Design<\/strong> – In Design Option You can choose from 2 Design Templates, there is 1 more option for adding additional CSS for custom designing.<\/p>\n

\"Additional_Design_AMP\"<\/p>\n

SEO Settings<\/strong> – In this section you can select options like Keeping SEO Meta Data from Yoast SEO Plugin, Custom Description in Yoast for AMP & Additional Header Tags.<\/p>\n

\"AMP_SEO\"<\/p>\n

Menu<\/strong> – Here you can Click on the Link & Select a Menu for AMP Site, You can select from Previous Menus or you can create a menu for AMP Site.<\/p>\n

\"AMP_Menu\"<\/p>\n

Advertising<\/strong> – In This section you can add Google Adsense on different parts of your posts & pages by inserting Publisher IDs & Ad IDs.<\/p>\n

\"Advertising_Options_AMP\"<\/p>\n

Single Post Settings<\/strong> – There are some options like Social Media Icons for Single Posts, Display Next & Previous Posts on main page, selecting size of featured image etc.<\/p>\n

\"Single_Post_Options\"<\/p>\n

Social Sharing<\/strong> :- In social sharing Settings you can choose which social sharing options you need for your posts.<\/p>\n

\"Social_Sharing_Options_AMP\"<\/p>\n

 <\/p>\n

There are some more setting options for settings related to Structure Data, Notifications & translation, You can choose as per your requirements.<\/p>\n

To Display AMP version of website when visited from Mobile turn on the mobile redirection. You can also display link to normal version at last by checking Link to Non-AMP page on Footer option.<\/p>\n

\"Other_Options\"<\/p>\n

Your WordPress site is now AMP-ready. On average, you can expect pages to load about four times faster than standard web pages on mobile if your AMP setup is correct. <\/span><\/p>\n

Now, moving ahead, let’s take a look at the main pros and cons of AMP here:<\/span><\/p>\n

AMP Pros and Cons<\/span><\/strong><\/h2>\n

Pros at a glance<\/span><\/strong><\/p>\n