AMP WordPress Plugin – The Quickest Way to Increase Site Page Speed

[Video Tutorial] (One Trick) Increase Site Page Speed up to 93 – Must Check This! [Hindi/Urdu]

Core Web Vitals (VWV)

Success on the web is all about User Experience. We want our users to experience joy, and also to not experience frustration, when they access and engage with the products we make. Recognizing the importance of UX on the success of web content creators and publishers, Google recently launched an initiative called Web Vitals. The goal of the Web Vitals initiative is to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Each Core Web Vital  represents a distinct facet of the performance of our site directly related to the experience of our users. Specifically:

Largest Contentful Paint (LCP)

Measures load time: how fast our pages are loading on the devices of our users. To provide good user experience, LCP should occur within 2.5 seconds from when the page first starts loading.

First Input Delay (FID)

Measures load responsiveness. It quantifies the experience our users feel when trying to interact with our content. To provide good user experience, pages should have an FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS)

Measures visual stability of our content. It is computed by detecting when an element that is visible in the viewport changes its start position between two rendering frames. To provide good user experience, pages should maintain a CLS of less than 0.1.

AMP

AMP is a web components library designed to facilitate the development of web pages that are highly performant and provide a compelling, engaging, and fast experience to users. The library does that by packaging a punch of coding and performance best practices, as well as a variety of clever design decisions that help developers achieve their goals while maintaining good performance and efficiency. All these capabilities combined make it much easier to achieve and maintain the desired CWV thresholds that are so important to the success of our sites.

The goal of optimizing Web Vitals is well aligned with AMP’s vision and design principles. From its inception, AMP has been all about a simple axiom: take care of the user experience and everything else will follow. This means AMP was envisioned, designed, and implemented explicitly with the purpose of making it easier to build user-first sites; these are sites that are fast, beautiful, engaging, secure, and accessible.

In short, AMP is a powerful and cost-effective tool to make it way easier to build great-performing sites, reducing the level of technical expertise, as well as the time and resources required to succeed at that goal.

Importance of AMP

The following is a partial list of the things AMP gives you to help you excel as a web developer:

Asynchronous loading of resources

One of the main premises of AMP is: never, never, ever, block the rendering of a page. This means that any obstacles that may obstruct the rendering critical path must be removed. And this is achieved by loading all resources asynchronously.

Static Layout System

In a normal HTML page, the browser does not know what the layout of the page will be until the assets are loaded. In contrast, AMP effectively decouples document layout from asset layout, which allows that only a single HTTP request is needed to layout the entire document. 

Inline-Size-Bound CSS

Often pages include one or more external stylesheets and this means that additional HTTP requests are needed to load them with a consequent impact on performance, especially in high-latency scenarios. In AMP, you can have only a single inline stylesheet allowed with a maximum size of 75KB. This means that one or more HTTP requests are removed from the critical rendering path, as well as a bound on the amount of CSS processing to take place in the loading of an AMP page.

Lazy-loading and Extensive use of the pre-connect API

In AMP resources are loaded only when it is likely they will be seen by the user, and the pre-connect API is extensively used to ensure HTTP requests are as fast as possible. This makes lazy-load requests to happen faster when they are eventually made.

Minimize style/layout recalculations

Every time you measure and change something in a page, the browser has to do a recalculation of the layout of the page, and these operations are quite expensive. To avoid this, there is a simple rule: do not interleave the execution of DOM reads and writes. This is really hard to do in practice; especially in teams with multiple developers because the chance of elements colliding in this way increase. AMP carefully batches DOM operations to minimize style recalculations.

GPU-accelerated Animations

Your graphics card (i.e your GPU) is very efficient computing what needs to be rendered on the screen. GPUs can execute animations. AMP forces you to stay on the fast lane by allowing only CSS animations that can be run on the GPU: transform and opacity.

Resource Prioritization

From AMP perspective, all of the components making a web page are considered relative to the position of the viewport. Images and ads are loaded only if they are likely to be seen by the user. Also, intelligent resource handling can be done. When something is in the viewport, elements cannot be resized unless the user interacts with the element (i.e. add a resizing UI element). When something is below the viewport, and it wants to be bigger than originally planned, AMP is fine with it.  When something is above the viewport, dynamic resizing is still allowed, because we can subtract the potential shift from scroll top so that the elements in the viewport end up at the same exact spot as before.

Optimized Analytics reporting

Analytics measurements are a really important aspect of web development. If there is no revenue, there is no content. The problem is that sometimes, several analytics libraries are added to the same page, and that is bad for performance. A solution to this issue is to separate the instrumentation of pages from. Rule: Instrument once, reports many times. AMP knows how to talk to major analytics vendors. Events on a page can be measured once and reported to different analytics vendors.

The AMP Cache

The AMP Cache is a kind of CDN for caching AMP documents and make them available for anyone to use close to where they are, for free.

 It ensures that served AMP documents are actually valid AMP, which  this guarantees that served AMP pages are consistently fast. And it performs a variety of optimizations to make AMP pages to load faster. Such optimizations include: HTML optimizations, removal of duplicate script tags, image optimizations, and others.

Furthermore, the AMP cache allows AMP pages to be pre-rendered safely and efficiently. This is very important because this pre-rendering takes seconds from load time significantly improving the UX.

Pre-rendering

The AMP Cache works tightly together with the prioritized loading and static layout system of AMP. Since AMP knows exactly where each page element is positioned, even before any assets are loaded, it is able to load just the first viewport, without any low-priority content getting in the way. The rest of the page is rendered once the user has already decided to go to that part of the page. At this point, only images are downloaded; no other resources are loaded.

An important aspect of the AMP cache is that it is privacy-preserving. The site owner won’t ever know that preload/pre-rendering took place. If this was not the case, there would be privacy issues, as the site could otherwise write cookies and mark the page as “seen”. Similarly, on the publisher’s side, they don’t want to know that there was a pre-render because that would impact their conversions.

AMP and ROI

Good performance and usability improves the user experience and core business metrics. With AMP your site can provide a consistently fast experience across all devices. Performance gains often translate in improvements in the numbers that matter, such as time spent on page, return visits and CTRs. Some of the ways AMP helps us achieve this are the following.

Increase Engagement

Conversions fall by 12 per cent for every extra second a webpage takes to load. If you want people to engage with your brand and increase your sales and the performance of your campaigns, you have to speed things up. AMP offers a way for you to give users a faster experience everywhere — on ads, landing pages or your entire website.

Reduce Complexity

Building sites that provide all the pillars of great UX is very difficult, in part because web development is very complex, and also because we are developing for a global audience which comes with a set non-trivial challenges a cost-effective and simple solution for content creators and publishers to build great page experiences regardless of our technical expertise or the number of resources we have.

Minimize Costs, Increase Revenue

AMP capabilities makes it easier for us to tackle the challenges we must face when building sites for performance and usability. Therefore, we can reduce our investment on development to reach our goals, and also on maintenance to avoid regressions, and staying up to date with the evolution of the capable web.

Since ROI = Spend + Income, reductions on investment levels, and increases on conversion, directly translate into maximizing the ROI for our business .

Build for a sustainable future

With AMP you can build your online presence in a sustainable way. AMP’s design principles and the mechanisms and controls it provides out of the box, allows you as a site owner and/or publisher to build your sites with confidence and stay on the fast path with ease.

Both the AMP framework and the official AMP Plugin for WordPress will continue evolving steadily with time, staying up to date with the capable web. This means that you can keep your sites equally at the forefront of web development best practices without an increased burden on your side.

Importance of AMP WordPress Plugin

The official AMP plugin for WordPress enables AMP content publishing in WordPress in a way that is seamlessly integrated with the standard content publishing workflows of the WordPress platform. It provides features and capabilities in the areas of automation, tooling, and turnkey solutions for AMP content publishing.

The plugin provides three different configuration options to bring AMP content publishing to your sites. These configuration options are called Template Modes, and each of them brings its own value proposition and serves the needs of different segments of the large and diverse WordPress ecosystem. And in addition to the Template modes, the AMP plugin provides many features and capabilities designed to make it easier for you to leverage the capabilities of AMP in your WordPress site.

The Official AMP Plugin for WordPress is developed and maintained by AMP project contributors to put the pillars of AMP content publishing at the fingertips of WordPress users, by:

• Automating as much as possible the process of generating AMP-valid markup.
• Providing effective validation tools.
• Providing support for AMP development.
• Supporting the serving of AMP pages on Origin.

The bottom line is this: When it comes to building successful sites, AMP is your friend. And the official AMP plugin is your key to access the potential of AMP in your WordPress sites.

Template Modes

The AMP plugin provides three different options for you to bring the power of AMP to your WordPress site. These options are called Template modes. Depending on the characteristics of your site and your goals, different modes may be suitable for you:

Mode	Role
Standard	A good and easy choice for sites where all components used in the site (themes and plugins) are fully AMP compatible, or you have resources to do custom AMP development and/or fix validation issues.
Transitional	A good choice if the site uses a theme that is not fully AMP compatible, but the functional differences between the AMP and non-AMP are acceptable.
Reader	May be selected if your site is using a highly AMP-incompatible theme. It is also a good choice if you are not technically savvy, or simply do not want to deal with incompatibilities and prefer a simplified workflow to get AMP experiences to your users.

Follow the guidance in this Section (also in video below) to get started with any of the modes, and get to know all the capabilities and configuration options the plugin provides.

Standard Mode

Standard mode is the ideal configuration option for the plugin, as there is only one template option for serving requests, and a single AMP version of your site. This means that sites in Standard mode are AMP-first (i.e. all AMP). This mode effectively reduces development and maintenance costs, and it is a good and easy choice for sites where all components used in the site (themes and plugins) are fully AMP compatible or some components added to the site may be AMP incompatible but we have the resources or the know-how to fix them.

In this section let’s go over the process of configuring your site in Standard mode. We are configuring a site using the ColorMag WordPress theme.

Step – 1: Install and Activate the AMP Plugin for WordPress

Step – 2: Click on the Onboarding Wizard

Step – 3: In the the next step the plugin asks if you are a developer or technically savvy user. The plugin asks this because depending on the answer to this question, a given configuration of the plugin may be better than another.

Step – 4: We are configuring Standard mode which is the ideal case, but also it may require us to be able to deal with validation errors if they occur. Therefore, we indicate we are technically savvy and proceed.

Step – 5: In the next step the plugin asks us select the template mode we would like to use. Notice the plugin offers guidance on which mode we should use, depending on the answer we gave in the previous step. In the near future, the plugin will also perform Site Scanning task to determine the level of AMP compatibility of the site, and refine its recommendations further.

Step – 6: We select Standard Mode, and continue. In the next step the plugin gives us a summary of the current configuration indicating the mode we chose and the theme we are using. Recall that in Standard mode there is a single theme and a single version of the site.

Step – 7: Clicking on “Next” triggers the saving of the configuration, and the onboarding flow congratulates us and shows a preview of our site embedded in the flow. We can browse the site there, or click “Finish”.

Once we click “Finish” we are taken to the plugin’s Settings Screen. That’s it!

Transitional Mode

In Transitional mode, there is also a single template option, but there are two versions of the site (AMP, non-AMP). The active primary templates are used for serving the AMP and non-AMP versions of a given URL. This mode is a good choice if the site uses a theme that is not fully AMP compatible, but the functional differences between the AMP and non-AMP are acceptable. In this case, users accessing the site from mobile devices can get optimized experiences via the AMP version, while desktop users can get the non-AMP version.

In this section let’s go over the process of configuring your site in Transitional mode. We are configuring a site using the ColorMag WordPress theme.

Step – 1: Install and Activate the AMP Plugin for WordPress

Step – 2: Click on the Onboarding Wizard

Step – 3: In the the next step the plugin asks if you are a developer or technically savvy user. The plugin asks this because depending on the answer to this question, a given configuration of the plugin may be better than another.

Step – 4: In Transitional mode, we may not need to understand much about validation issues if they occur, especially if we use a theme that is pretty good in terms of AMP compatibility and we don’t use plugins that are not AMP-compatible at all. On the other hand, we can use Transitional mode as we work our way to achieve full AMP compatibility for our site. In that case, we do need the technical expertise or the resources to tackle validation issues and fix them. Let’s assume we are in the latter case and indicate we are technically savvy and proceed.

In the next step, the plugin asks us to select the template mode we would like to use. Notice the plugin offers guidance on which mode we should use, depending on the answer we gave in the previous step. In the near future, the plugin will also perform Site Scanning task to determine the level of AMP compatibility of the site, and refine its recommendations further.

Step – 5: We select Transitional Mode and continue. In the next step, the plugin gives us a summary of the current configuration indicating the mode we chose and the theme we are using. Recall that in Transitional mode there is a single theme and two versions of the site. In this case, the plugin tells us we chose Transitional mode, and that we are using the same ColorMag theme.

Step – 6: We can see that in Transitional mode we have the option to configure the automatic redirection of mobile users to the AMP version of our site. We do that by clicking on the toggle bottom at the end of the screen. Clicking on “Next” triggers the saving of the configuration, and the onboarding flow congratulates us and shows a preview of our site embedded in the flow.

Step – 7: Clicking on “Next” triggers the saving of the configuration, and the onboarding flow congratulates us and shows a preview of our site embedded in the flow. We can browse the site there, or click “Finish”.

Once we click “Finish” we are taken to the plugin’s Settings Screen. That’s it!

Reader Mode

In Reader mode there are two different templates, one for AMP and another for non-AMP content, and therefore there are also two versions of the site. This mode may be selected when the site is using a non-AMP compatible theme, and the level of incompatibilities is significant. It is also a good choice if you are not technically savvy, or simply do not want to deal with the incompatibilities and prefer a simplified workflow to get AMP experiences to your users.

Step – 1: Install and Activate the AMP Plugin for WordPress

Step – 2: Click on the Onboarding Wizard

Step – 3: In the next step the plugin asks if you are a developer or technically savvy user. The plugin asks this because depending on the answer to this question, a given configuration of the plugin may be better than another. Reader mode is applicable if you are using a theme that is not AMP-compatible at all, and/or you are using plugins adding functionality to your site in a non-AMP-compatible way. And it may be the best choice for you is you are not technically savvy, or you just don’t want to deal with validation issues. Therefore, let’s tell the plugin we are not technically savvy and proceed.

Step – 4: In the next step the plugin asks us to select the template mode we would like to use. Notice the plugin offers guidance on which mode we should use, depending on the answer we gave in the previous step. In the near future, the plugin will also perform Site Scanning task to determine the level of AMP compatibility of the site, and refine its recommendations further. We select Reader Mode and continue.

Step – 5: In the next step the plugin asks us to select the theme for the Reader mode version our site. By default, the plugin allows us to select any of the WordPress core themes as our Reader theme. Let’s select Twenty Nineteen and proceed.

Step – 6: We can see that in Reader mode we have the option to configure automatic redirection of mobile users to the AMP version of our site. We do that by clicking on the toggle bottom at the end of the screen. Clicking on “Next” triggers the saving of the configuration, and the onboarding flow congratulates us and shows a preview of our site embedded in the flow.

We can browse the site there, or click “Finish”. Once we click “Finish” we are taken to the plugin’s Settings Screen. That’s it!

So, let’s know in comments below which mode you want to opt and are you a technical savvy or not?

3 Steps to Take to Improve Your Website’s Bounce Rate

The bounce rate refers to the number of visitors leaving your page. When they leave, they are “bouncing” back to the SERPs (search engine results pages) or the referring website after only looking at one page.

Having a low bounce rate is a good thing. The higher your site’s bounce rate gets, the worse it is for your rank. After all, if your bounce rate is low, it means people are sticking around, viewing more pages on your site, and increasing the likelihood they will convert.

If you want to improve your site’s bounce rate, there are a few steps you can take.

1. Create a Mobile-Friendly Website.

Over 52 percent of internet traffic comes from a mobile device. On Google, a ranking factor for your site is how mobile-friendly it is. This means having a mobile-friendly website is essential. If your site is not mobile-friendly, there’s a good chance people will leave your site right after landing there. Because of this, you should ensure your site is properly optimized for all mobile devices.

2. Reduce Site Loading Speed.

How quickly (or slowly) your site loads impacts your bounce rate. When it takes too long for pages to load, visitors will leave the site right away. It is possible to improve the load speed by reducing image file size and by using browser caching. There are tools, such as Google Page Speed Insights, that can help you measure how quickly your site loads. This tool also offers suggestions on steps you can take to improve the loading speed.

3. Build an Internal Linking Strategy.

Using internal links will improve the chances that visitors to your website will click through your other pages. This will help you achieve a lower bounce rate. Also, internal links can improve the user experience by making the site more user-friendly.

Be sure the internal links you create are relevant and related to the page your visitor landed on first. Along with that, with the right internal linking strategy, you can improve your SEO.

Reducing your bounce rate is a smart strategy. Use the tips above to take steps to achieve this goal. In the long run, reducing your site’s bounce rate will help improve your site’s rank in SERPs, and help ensure people stick around and take the desired action.

[Video] 3 Steps to Improve Your Website’s (Blogger/WordPress) Bounce Rate [Hindi/Urdu]

[Video Tutorial] (One Trick) Increase Site Page Speed upto 93 – Must Check This! [Hindi/Urdu]

Via

Courtesy: Inc.