Google Page Speed Insights: – Every webmaster even you want to increase the conversion rate of your website and reduce the exit rate.
Can you tell me the reason behind it?
The reason may vary person to person but the ultimate goal is to generate more revenue from your site or blog.
The goal can only achieve when visitors spend more time on your site or blog.
And a visitor will stay on your site only when he has a good experience while browsing your site or blog.
Here a good experience means a visitor doesn’t have to wait for page loading while moving to a page within your site or blog.
A visitor can’t bear a fraction of sec delay for loading a web page. As he feels delay loading page he may leave your site quickly.
This makes a bad reputation of your site or blog in front of search engines. And as a result, the ranking of your site downgrades.
I have some tactics that may help your site to maintain its ranking for a long period because No one wants to downgrade its ranking.
I am sure your site will touch the highest performance of its if you implement all these tricks.
Let’s get started without delay.
Keep small in size but quality image.
The largest file size in any blog/site is of media, that is a photo, video, and image. Since most blogs have the same file in a blog. Because of this, they acquire more memory too. Since these files grow in size, it takes a long time to load from server to browser.
A web page consists of text, image, and video. The biggest file size is of media. It may be either an image or video.
Nowadays all webmasters upload videos files to YouTube and place a link of it on their site.
The next big file is an image file. Whenever a new visitor visit to a post or page first time the browser downloads it to its local computer.
Big in size take more time to download the image file to the local computer and till then the visitors have to wait to view the complete page or post of the site or blog.
Small image size takes less time and increases visitors better browsing experience.
So keep the image file size small but better in quality.
Why Google page speed insights suggest image optimization?
Google Page Speed Insights reports this issue only when you have uploaded an image of large size on your page and it is taking a long time to display to the visitors.
This chart shows the details.
This time will definitely increase further if your internet connection is slow.
We all know according to content analysis tool of the Yoast SEO, having at least one image in a blog post raises its ranking level.
The size of an image depends on its resolution with its scale (W x H).
Many bloggers upload images of any size on their blog, and WordPress takes cares of these images in resizing, which do not affect its display.
But do you know how these large images are adjusted through coding?
The CSS code plays an important role in resizing these images. But your browser downloads its original full-size image.
This means we are wasting both our memory and bandwidth by uploading large images
I have two solutions to the above issue.
- The first solution is to read the complete documentation of the theme of your blog before uploading an image and upload the image of its required size.
- The second solution is to use the compressed .png format image on your blog.
There are also two reasons for using the image of the png format.
- The first is the .png format compresses more than .jpg format.
- Second, the .png is more compatible for web pages and compression does not affect its quality more.
You can apply these methods for image compression.
Solution 1. Without using the plugin.
You can use the https://imagecompressor.com website.
For this, you have to upload your image to this website.
After a while, this website displays the rate of compression and quality of compression as well. It also gives you an option to compress according to your requirement.
This website gives you an option to download compressed image individual and bulk as well.
After downloading, you can upload it to your blog.
Solution 2. With Plugin.
For this, you have to install a wp smush plugin from WordPress repository and activate it on your WordPress blog.
Then follow these steps.
Click the Smush menu on the left-hand side of the WordPress admin dashboard.
Go to the Bulk Smush option on the right-hand side of the Plugin dashboard.
Enable Automatic Smush. Select the image size clicking checkbox depending on your requirement.
Click on the update setting.
Now your plugin is fully ready for image compression. It automatically compresses the image as you upload an image to the site.
This plugin optimizes all images of the blog and grows its GTmatrix score of your blog.
Set the expiry period of the cache files.
A web browser and the web server application implements a technology named Browser caching or web cache or HTTP cache.
According to this technology, the web browser reads the webpage and download some files like the image on the user’s local computer.
This also affects the loading speed of our webpage.
Why Google page speed insights suggest leverage browser caching?
Whenever the reader visits the webpage the first time, the browser downloads some files to its local computer and stores these.
When the same reader visits the same webpage next time, its web browser just downloads the updated/changed data from the web server and it combines the already downloaded data to the local computer. And it displays the requested web page.
- The first advantage of this technology is this reduces the consumption of its data. The visitor does not have to wait for all the data to be downloaded from the server.
- The second advantage is it allows the reader a good browsing experience and tilts towards your site. Because the webpage displays immediately on the screen of the reader.
- The third advantage is less load on the web server as it does not need to download the entire data. Because the browser download only updated data to the reader’s computer.
How much time will the complementary data of a webpage’s be safe in the browser of your computer? It depends on their browser configuration and server-side cache setting.
How to deal with web page resources in the browser of a visitor?
The leverage browser caching means, how much time a client browser of a visitor should temporarily store the cacheable data of a visited site in its browser so that the browser needs to download only the changed data of the already visited site its next visit.
To enable leverage browser caching, you have to set cacheable content expiry dates by adding cache-control-headers, resource headers, and ETag headers in the HTTP header.
The cacheable resource expires headers explain the expiry duration of the cacheable resource of the web page.
The cache-control-headers explains the caching period of the cacheable resource to the web browser.
ETag is used to verify changes between the cached resource and the requested resource.
All these headers are added to the .htaccess file inside the public_html folder of the web server.
Its compression rate can be increased up to 70% -90% if this compression technique is enabled on your WordPress blog/site through a .htaccess file.
Why Google page speed insights suggest for file compression?
How does this work?
A gzip compression algorithm organizes the recurring string at a single place instead of storing its repeated string.
At the time of file compression and retrieving the data from the compressed file, this algorithm manages the location values of that repeated string.
Thus, this compression technique works efficiently on HTML and CSS file. Because there are many quantities of repeating strings in HTML and CSS file.
Before commencing compression.
Nowadays, on some web hosting servers, Gzip compression is enabled by the company itself.
The Gzip compression tool may help in checking this compression.
Before implementing this process, make sure that Gzip compression is already enabled on your WordPress site/blog.
If not, then implement the process. Otherwise, find out how much more can be compressed.
This technique is implemented differently depending on the web server type. Find out what type of blog/site is deployed on the server. After that implement the compression technique in its specific manner.
There are two ways to implement file compression in the web server.
This technique is implemented in Apache and Nginx servers.
Gzip compression technique can be implemented in two ways.
Solution 1. Coding in .htaccess file.
In this technique, some code is added to the .htaccess file of WordPress and it starts compressing the files.
Solution 2. Using the plugin
In this process, download a cache plugin such as w3 total cache or WP super cache from WordPress repository to your WordPress blog/site and activate it.
Read all the options and configure it according to your site/blog and click save changes.
Now the plugin is fully prepared to compress the resource of the blog/site.
This technique is only implemented in the Apache server.
Why Google page speed insights suggest minification?
What is minification?
If all these useless codes are removed from the web page resources, then the size of the file will be reduced and there will be no effect on the functionality of the file.
Why is minification required?
It’s simple answer is “to increase the page speed”.
Because minification reduces web page size, it results in loading speed of the webpage.
To better understand this, analyze the website speed score report on a web page analysis tool (GTmatrix).
Before implementing the minification, the website’s loading speed report.
After implementing the minification, the website’s loading speed report.
You must analyze your website on Google PageSpeed Insights, GTmatrix, and Pingdom before implementing the minification.
You will definitely see the difference.
Web page load speed is an important factor for a website in SEO context. Google also recommends for minifying web pages.
You can minify your blog/site in these two ways.
Solution 1. Using plugin.
In this method, you have to install and activate one of these plugins from the WordPress repository. Such as w3 Total cache, Autoptimize, or wp fastest cache etc.
Solution 2. Using the online tool.
It is obvious that the web browser will spend time loading this script and rendering of the web page will take a lot of time. Till then the user will have to wait.
There are two ways to solve this problem.
Solution 1. Place the external script at footer.
Keep all external scripts just above the closing </ body> tag. By doing this, all external scripts will be downloaded to the webpage in the background after rendering the web page.
Solution 2. Use defer and async attribute.
Let us tell you that defer is used for external resource and async internal resources.
Using the async attribute we give signal the browser for downloading the internal source of a web page with rendering files.
While defer is used for signaling the web browser to download the external files after rendering the web page.
Both of these ways can increase the loading speed of the web page and give a better experience to the user’s browsing experience.
I am sharing some resources here. Which will help in the preparation of your post/page URL.
Final words: –
All these methods surprisingly increase the load speed of your web page and give the user / reader a different browsing experience. You apply these methods one by one to your site / blog and share your experiences with us through comment.
If you like our article and you want to give any suggestions, do not forget to comment.