Skip to main content
google page speed insights-feature image

Google Page Speed Insights Optimization Techniques.

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.

image-load-webtechthoughts

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).

pagespeed-image-size-webtechthoughts

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.

smush-pagespeed-webtechthoughts.com

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.

For displaying a webpage on your browser, the web browser has to download HTML, CSS, javascript, text and image files from the web server to your local computer.

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?

Google page speed insights report this issue only when there is no expiry date code of the files being used in your web pages. All these are downloadable files like HTML, CSS, javascript, text, and image etc.

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.

Use compressing HTML, CSS, XML and javascript files.

Gzip compression technology can be implemented by a plugin. Web page resources such as HTML, CSS, XML, and javascript files may decrease its size up to 70% -80%.

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?

Google page speed insights report this issue only when web page resources such as HTML, CSS, XML and javascript files are large to download on a client browser.

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.

Gzip compression

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.

DEFLATE compression

This technique is only implemented in the Apache server.

Minify HTML, CSS & javascript files.

In this section, we will learn about the minification of web resources HTML, CSS and javascript.

Why Google page speed insights suggest minification?

Google page speed insights report this issue only when the functionality of some code is not used on web page resources such as HTML, CSS, and javascript files. They just work to take the vacant place.

What is minification?

Web page resources such as HTML, CSS, and javascript files contain some code which does not participate in the functionality of the file but enlarge the size of the file.

Such as unnecessary line-breaks of HTML, unused spaces of CSS and unnecessary code of javascript etc. These do not support all the code in the functionality of the file but their existence increases the size of the file.

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.

The technique to reduce the number of requests to HTML, CSS, and javascript files by removing these useless codes from its resources, and minimizing them as possible, is called minification.

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.

without-minify-gt-report-google page speed

After implementing the minification, the website’s loading speed report.

after-minify-gtreport

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.

In this method, you have to manually minify HTML, CSS, and javascript files. Some online free tools are available on the Internet which works to minify these files. Like CSS minifier, minify your javascript and YUI compressor etc.

Place the render blocking javascript files at footer.

Like HTML and CSS in a web page, javascript also has an important role. Its main work is to give web page additional functionality like a special effect, user interaction, and user validation etc.

In fewer words, the main work of javascript begins after loading the entire web page.

Generally, a javascript separate file is created and placed the code in between the HTML and CSS to load their script in a web page.

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.

Why Google page speed insights suggest to place javascript at footer.

Google page speed insights report this issue only when a javascript file becomes render blocking file. This means the file prevents the web page from being displayed.

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.

Founder , WebtechThoughts

Barun Chandra is technology enthusiast and a blogger. He is fond of technology in depth and writes posts in simple words to make understand easy.

Get Free Email Updates!

Signup now and receive an email once I publish new content.

I agree to have my personal information transfered to MailChimp ( more information )

I will never give away, trade or sell your email address. You can unsubscribe at any time.

One thought to “Google Page Speed Insights Optimization Techniques.”

Leave a Reply

Your email address will not be published. Required fields are marked *