Increase WordPress speed and Score 100/100 in Google PageSpeed Insights

This article will help in scoring 100/100 in Google PageSpeed Insights for both WordPress and Non-WordPress site owners.

Almost every blogger is running their site on WordPress. So to speed up a WordPress site, you will install plugins and check whether the speed of your site is increased or not.

But without knowing that why you are changing the settings through plugins, you will never get a clear picture of speeding up a site. Also, plugins behavior will vary among different themes and different WordPress versions. It can also contradict the settings of other plugins.

Here, we will try to increase our site speed and Google will tell us how to do that. We will use Google PageSpeed Insights to check our site speed. And we will fix the problems suggested by Google. Google will provide scores based on our site speed. If our score increases, then our site speed is increased.

 

The score ranges between 0 to 100 for both mobile and desktop devices. We will try to score 100/100 in Google Tests.

 

To check whether our site speed really increased or not we can check Google PageSpeed Insights as well as other online tools like Pingdom or GTmetrix. Since Pingdom gives more detailed report on website speed, my site speed results are shown below as got from Pingdom.

The article contains the ways to follow for both WordPress and Non-WordPress users. WordPress users can install plugins and non-WordPress users will have to do some copy paste of codes in cPanel.

 

My site speed when tested with Pingdom before following the below steps:

Pingdom Site Speed Test before Optimization-min

 

 

How to use Google Score to increase our site speed

  • Visit Google PageSpeed Insights and Enter your site URL to scan your site performance score.
  • After scanning you will get scores for mobile and desktop devices which your site achieved. Score means how well your site performance is on that device and you will find some possible optimization below to score much better.

Rectifying the possible optimization will increase your score. To score 100/100 in Google PageSpeed is our target with this article, so that we can achieve fastest speed for our site  over the Internet.

 

I will try to cover all the possible optimization techniques which you might encounter in Google PageSpeed Insights result.

It will vary for different sites. If you don’t have the particular problem shown, or already you have the particular problem as optimized, you can skip to your required optimization techniques.

 

Possible optimizations and the corresponding way to optimize them

1. Reduce server response time

Server Response Time PageSpeed Insights

 

What does this means?

If you got this warning in Possible optimization section, it means that the time taken to retrieve you website from your server is more. It totally depends upon your hosting plan and hosting service provider as how they have configured their servers.

reduce-server-response-time-pagespeed-insights

If you are just a normal consumer of any hosting company, you cannot do much optimizations for this.

 

What to do?
  1. It’s better to choose good hosting provider whose response time is less and never goes down.
  2. If your site is already hosted, you can check with their other hosting plans, which provides less response time and can renew your plan to reduce this time.
  3. Otherwise, you can host your site on CDN (Content Delivery Network) to minimize the response time of your server.

 

 

2. Eliminate render-blocking JavaScript and CSS in above-the-fold content

Eliminate Render Blocking JavaScript CSS

1. Remove Render Blocking JavaScript
What does this means?

This means, while loading your site, browser is waiting for other resources like JavaScript and CSS to load first. After the other resources are loaded, then only remaining lines of code will execute to design your website front page.

 

Eliminate-Render-Blocking-JavaScript-CSS-Above-the-Fold-PageSpeed- Insights

For example see the code below. This is the sample homepage code which will execute when someone visits your site.

<html>
<head>
<script type="text/javascript" src="/js/small.js"></script>
<div>Hello, world!</div>

Here, just in the third line, browser has to call your JS file first, before executing the remaining code below. This increases the network round trips before the page is rendered.

 

What to do?

Non WordPress user

  1. If that particular JS file has small amount of code, you can place the entire code here instead of calling a file. or,
  2. If the file is big, Divide that JS file in 2 parts. Keep the JS code in 1st file which is required while rendering the visible homepage of your screen and call from here. Call the 2nd file after your html code completes. or,
  3. Write async in code when the JS file is called. This will load your JS file asynchronously (without waiting for it) like
<script type="text/javascript" src="/js/small.js" async></script>

WordPress user

  1. Install Async Javascript Optimizer plugin and Activate it. It will automatically add async property everywhere when JS is called. Now check your site once. If you don’t find any UI issues, then its done. or,
  2. Download Above the Fold Optimization plugin and Activate it. Navigate it from Appearance -> Above the Fold -> Go to JavaScript tab -> Enable Optimize Javascript Loading and Click Save. Check if the issues if solved. If not then,
  3. Try not to use any slides or similar dynamically changing UI in homepage. This is done by JS. Remove that setting by customizing your theme from Appearance->Customize.

 

2. Optimize CSS Delivery
What does this means?

This means, while loading your site, browser is waiting for CSS resource to load first. After the other resources are loaded, then only remaining lines of code will execute to paint and style your home page.

This is same as above Render Blocking JavaScript discussion.

For example see the code below. This is the sample homepage code which will execute when someone visits your site.

<html>
<head>
<link rel="stylesheet" href="small.css">
<div>Hello, world!</div>

Here, just in the third line, browser has to call your CSS stylesheet first, before executing the remaining code below. This increases the network round trips before the page is rendered.

 

What to do?

Non-WordPress user

  1. You can load CSS synchronously by adding rel=”preload” attribue in <link> element while calling a CSS file. or,
    <link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
  2. If that particular CSS file has small amount of code, you can place the entire code here instead of calling a file. or,
  3. If the file is big, Divide that CSS file in 2 parts. Keep the CSS code in 1st file which is required while rendering the visible homepage of your screen and call from here. Call the 2nd file after your html code completes.
  4. For more details, check to Google guidelines to optimize CSS delivery.

WordPress user

  1. Download Above the Fold Optimization plugin and Activate it. Navigate it from Appearance -> Above the Fold -> Go to CSS tab -> Enable Optimize CSS Delivery and Click Save. Done!

 

 

3. Leverage browser caching

Leverage Browser caching Banner Explanation PageSpeed Insights

What does this means?

What happens if user visits your site? The codes and images will be transported from your server to the user’s browser over the network. What if the user visits your site daily or more frequently? Same codes and images are exported daily from server to browser.

leverage-browser-caching-pagespeed-insights

 

We can decrease this network load and server hits, by storing some data in cache memory of user’s browser, so that when user visits your site next time, browser requests only changed data from server and renders the remaining data from its cache memory.

 

We can save the files in browser cache. But how long?
That is where max-age comes in use. Setting max-age means setting time period up to which the file will be stored on browser cache memory.

This will decrease the network round trips and server load, resulting in faster page loading.If you want to know more, then see how browser determines the changed data from its cache memory and server.

 

What to do?

For both WordPress and Non-WordPress user

To solve this problem, we need to set maximum age of some recommended files by Google. The easiest way is
Open cPanel -> Go to File Manager -> Navigate to Root Directory of your site -> Go to public_html section -> You will see .htaccess file. Open this file -> Copy paste the below code and save the file.

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|txt|js|xsl)$">
Header set Cache-Control "max-age=31536050"
</FilesMatch>

This code will set max-age of these file extensions to 1 year. If the files changes in server, they will be requested by browser to load, otherwise these files will be retrieved from browser’s cache.

 

 

4. Optimize image

Image Optimization PageSpeed Insights

What does this means?

Images are big files when compared to text. So they require more bandwidth to retrieve each time from server. We can avoid loading of large image files by compressing them without losing their quality. So you need to compress images which are shown in this section.

optimize-images-pagespeed-insights

 

Google will show you link of the particular image which can be compressed more to increase load speed.

 

What to do?

WordPress user

I have already posted about how to optimize images for SEO and rank better.

Non-WordPress user

  1. Copy the image name -> Go to cPanel -> File Manager -> Home directory -> You will find search toolbar. Paste that image name here. When searched, you will find the image location. Go to this location and download the image, and delete it from your file directory (cPanel).
  2. Now, compress jpg and png images and upload that image again to same directory with same previous name. Repeat the same for all images and you are done!

 

 

5. Minify JavaScript

Minify JS PageSpeed Insights

What does this means?

JavaScript are codes which makes the HTML codes work fluently. Writing it in multiple lines causes browsers to download many new lines and empty texts. So you can remove all of these unnecessary characters from code.

minify-javascript-pagespeed-insights

 

What to do?

WordPress user

Install Autoptimize plugin and Activate it. Navigate to Settings -> Autoptimize -> Click on Show Advanced Settings -> Check “Optimize JavaScript Code?” and “Also aggregate inline JS?” and click Save.

Non-WordPress user

  1. Copy the JS file name shown by Google -> Go to cPanel -> Go to File Manager -> Home directory -> Paste the file name in Search bar -> you will get the file path where it is located.
  2. Navigate to that path -> Open that file -> Copy all the codes at once -> Open JS minify and paste the copied code. Click “Compress JavaScript“.
  3. After that JS will be minified. Again copy the minified code, and remove the existing code from the file in cPanel and paste the minified code here. Save changes and close. Repeat the same for each file. Done!

 

 

6. Minify CSS

Minify CSS PageSpeed Insights

 

What does this means?

CSS is the code responsible to show tyles and colors on your page. It is very important to show a rich User Interface. Writing it in multiple lines causes browsers to download many new lines and empty texts. So you can remove all of these unnecessary characters from code.

Minify-CSS-pagespeed-insights

 

What to do?

WordPress user

Install Autoptimize plugin and Activate it. Navigate to Settings -> Autoptimize -> Click on Show Advanced Settings -> Check Optimize CSS Code? and Also aggregate inline CSS? and click Save.

Non-WordPress user

  1. Copy the CSS file name shown by Google -> Go to cPanel -> Go to File Manager -> Home directory -> Paste the file name in Search bar -> you will get the file path where it is located.
  2. Navigate to that path -> Open that file -> Copy all the codes at once -> Open CSS minify and paste the copied code. Click “Minify“.
  3. After that CSS will be minified. Again copy the minified code, and remove the existing code from the file in cPanel and paste the minified code here. Save changes and close. Repeat the same for each file. Done!

 

 

7. Avoid landing page redirects

Avoid Landing Page Redirects PageSpeed Insights

 

What does this means?

While visiting the URL if any redirection found, then again one more network round trip is wasted. So lots of time is wasted on network trips instead of showing the site to user.

 

In details, when user requests one URL, server will find the difference in settings and will send URL which needs to be requested back to the browser. Now browser again changes its request, and now the actual page is retrieved from the browser.

Avoid-Landing-Page-Redirects-PageSpeed-Insights

To avoid this, thoroughly check if you have defined any redirection for any url of your iste. This error will not come if your are redirecting requests from “yourdomain.com” to “www.yourdomain.com”. This error arises in following cases

  1. yourdomain.com -> m.yourdomain.com/homemultiple roundtrips for mobile devices.
  2. yourdomain.com -> www.yourdomain.com -> m.yourdomain.comvery slow mobile experience.

 

What to do?

For both WordPress and Non-WordPress user

To solve 1, use responsive web design so that same page URL loads in responsive styles for different devices.

To solve 2, check with your needs and try to minimize the redirects. However, if you use responsive themes, your any of the both problems will be solved automatically because for mobile users, you will not have to redirect them to other URL.

 

 

8. Enable compression

Enable compression PageSpeed Insights

 

What does this means?

When user visits your site, instead of sending HTML code, JS code, CSS code, Images, etc separately , you can compress all of these files in one file and send that to browser. Compressing will reduce the overall file size and will be sent in even less bandwidth resulting in faster page loading.

Enable-compression-PageSpeed-Insights

What to do?

WordPress user

Install W3 Super Cache plugin and navigate to Setting-> WP Super Cache -> and Enable caching. This plugin automatically generates the zip file of your site which is sent over the network for each request coming from browser.

Non-WordPress user

You need to detect the code files which is loading on browser requests. Now compress all the file and keep that file at the location from which it can be retrieved on URL call.

 

 

9. Minify HTML

Minify Html PageSpeed Insights

 

What does this means?

Don’t repeat step 5 or 6 here just like minifying JS or CSS. Some of the codes in HTML needs some characters included which may gets be removed in minification process. If removed, then this will result in wrong rendering process of HTML which can affect your page design severely.

I have ran into this situation while minifying one of my client’s WordPress site.

Minify-HTML-pagespeed-insights

What to do?

WordPress user

  1. Install Autoptimize plugin and Activate it. Go to Settings -> Autoptimize -> Check Optimize HTML Code? and click Save. or,
  2. Install Above the fold Optimization plugin and Activate it. Go to Appearance -> Above the Fold -> Select HTML tab -> check Minify HTML and click Save.

Non-WordPress user

  1. Go to cPanel -> Go to File Manager -> Home directory -> Now Search out the HTML file being rendered for your homepage.
  2. Navigate to that path -> Open that file -> Copy all the codes at once -> Open HTML minifier and paste the copied code. Click “Minify HTML“.
  3. Copy the minified code, and remove the existing code from the file in cPanel and paste the minified code there. Save changes and close. Done!

 

 

10. Prioritize visible content

Prioritize visible content PageSpeed Insights

When the page loads, only the top part of the page (which fits on to the screen first) is called Above the fold content. So it may happen, that while loading your homepage, browser is painting your page from bottom to top parts.

 

Means, Firstly, below HTML codes are making the page design. After that, above design which will be shown to the user when visiting your page, are being painted. This will look like more waiting time to the user while loading page.

 

Prioritize-visible-content-pagespeed-insights

 

To avoid this, you need to do coding or take help of any coder. As different sites use different themes and different codes,
we cannot provide any generalized way to avoid this.

 

Now you are ready. If you follow the above steps, you have achieved the score just below or above 90. If you are using a good premium theme, you may have scored 100/100 in both mobile and desktop devices.

My site speed when tested with Pingdom after following the below steps:

Pingdom Site Speed Test After Optimization-min

 

The process explained above will work 100%. And after following the above process, you know the codes tracing better which which will be helpful for you to tackle any site speed related issue in future.

 

NOTE:

  1. It is not easy to achieve 100% score in Google PageSpeed Insights for a full fledged website. If there is no content or much styling in your site, you can achieve this score easily. You can find many YouTube videos showing 100/100 result.
  2. In addition to the above, achieving 100/100 score should not be your ultimate goal. Remember that Google tests your page by some technical algorithms which you can’t compare 100% with human mind.

For example, sometimes JavaScript render is an error in Google page speed. And you solved it by placing the JS file at last of your homepage. This way you passed the Google insights at 100/100. But also check manually if it is creating any UI issue for your users or not.

If it is so, you need to leave this error as it is. To score 100/100 in Google should not be your ultimate goal. In my experience, if you are near to 90/100, you are good. Make your site good for Google as well as Users.

 

Hope this article helped you. Please share this post if you find this helpful. Please share your thoughts in comment section below.

Increase WordPress speed and Score 100/100 in Google PageSpeed Insights
4.8 (96%) 5 vote[s]
Summary
Increase WordPress speed and Score 100/100 in Google PageSpeed Insights
Article Name
Increase WordPress speed and Score 100/100 in Google PageSpeed Insights
Description
This article will help in scoring 100/100 in Google PageSpeed Insights for both WordPress and Non-WordPress site owners.Almost every blogger is running their site on WordPress. So to speed up a WordPress site, you will install plugins and check whether the speed of your site is increased or not.But without knowing that why you are changing the settings through plugins, you will never get a clear picture of speeding up a site. Also, plugins behavior will vary among different themes and different WordPress versions. It can also contradict the settings of other plugins.Here, we will try to increase our site speed and Google will tell us how to do that. We will use Google PageSpeed Insights to check our site speed. And we will fix the problems suggested by Google. Google will provide scores based on our site speed. If our score increases, then our site speed is increased."The score ranges between 0 to 100 for both mobile and desktop devices. We will try to score 100/100 in Google Tests."To check whether our site speed really increased or not we can check Google PageSpeed Insights as well as other online tools like Pingdom or GTmetrix. Since Pingdom gives more detailed report on website speed, my site speed results are shown below as got from Pingdom.The article contains the ways to follow for both WordPress and Non-WordPress users. WordPress users can install plugins and non-WordPress users will have to do some copy paste of codes in cPanel.My site speed when tested with Pingdom before following the below steps:How to use Google Score to increase our site speed Visit Google PageSpeed Insights and Enter your site URL to scan your site performance score.After scanning you will get scores for mobile and desktop devices which your site achieved. Score means how well your site performance is on that device and you will find some possible optimization below to score much better.Rectifying the possible optimization will increase your score. To score 100/100 in Google PageSpeed is our target with this article, so that we can achieve fastest speed for our site  over the Internet.I will try to cover all the possible optimization techniques which you might encounter in Google PageSpeed Insights result.It will vary for different sites. If you don't have the particular problem shown, or already you have the particular problem as optimized, you can skip to your required optimization techniques.Possible optimizations and the corresponding way to optimize them 1. Reduce server response time.What does this means?If you got this warning in Possible optimization section, it means that the time taken to retrieve you website from your server is more. It totally depends upon your hosting plan and hosting service provider as how they have configured their servers.If you are just a normal consumer of any hosting company, you cannot do much optimizations for this.What to do?It's better to choose good hosting provider whose response time is less and never goes down.If your site is already hosted, you can check with their other hosting plans, which provides less response time and can renew your plan to reduce this time.Otherwise, you can host your site on CDN (Content Delivery Network) to minimize the response time of your server.2. Eliminate render-blocking JavaScript and CSS in above-the-fold content.1. Remove Render Blocking JavaScript.What does this means?This means, while loading your site, browser is waiting for other resources like JavaScript and CSS to load first. After the other resources are loaded, then only remaining lines of code will execute to design your website front page.For example see the code below. This is the sample homepage code which will execute when someone visits your site.<html><head><script type="text/javascript" src="/js/small.js"></script><div>Hello, world!</div>Here, just in the third line, browser has to call your JS file first, before executing the remaining code below. This increases the network round trips before the page is rendered.What to do?Non WordPress user.If that particular JS file has small amount of code, you can place the entire code here instead of calling a file. or,If the file is big, Divide that JS file in 2 parts. Keep the JS code in 1st file which is required while rendering the visible homepage of your screen and call from here. Call the 2nd file after your html code completes. or,Write async in code when the JS file is called. This will load your JS file asynchronously (without waiting for it) like <script type="text/javascript" src="/js/small.js" async></script> WordPress user.Install Async Javascript Optimizer plugin and Activate it. It will automatically add async property everywhere when JS is called. Now check your site once. If you don't find any UI issues, then its done. or,Download Above the Fold Optimization plugin and Activate it. Navigate it from Appearance -> Above the Fold -> Go to JavaScript tab -> Enable Optimize Javascript Loading and Click Save. Check if the issues if solved. If not then,Try not to use any slides or similar dynamically changing UI in homepage. This is done by JS. Remove that setting by customizing your theme from Appearance->Customize.2. Optimize CSS Delivery.What does this means?This means, while loading your site, browser is waiting for CSS resource to load first. After the other resources are loaded, then only remaining lines of code will execute to paint and style your home page.This is same as above Render Blocking JavaScript discussion.For example see the code below. This is the sample homepage code which will execute when someone visits your site.<html><head><link rel="stylesheet" href="small.css"> <div>Hello, world!</div>Here, just in the third line, browser has to call your CSS stylesheet first, before executing the remaining code below. This increases the network round trips before the page is rendered.What to do?Non-WordPress user.You can load CSS synchronously by adding rel="preload" attribue in <link> element while calling a CSS file. or,<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">If that particular CSS file has small amount of code, you can place the entire code here instead of calling a file. or,If the file is big, Divide that CSS file in 2 parts. Keep the CSS code in 1st file which is required while rendering the visible homepage of your screen and call from here. Call the 2nd file after your html code completes.For more details, check to Google guidelines to optimize CSS delivery.WordPress userDownload Above the Fold Optimization plugin and Activate it. Navigate it from Appearance -> Above the Fold -> Go to CSS tab -> Enable Optimize CSS Delivery and Click Save. Done!3. Leverage browser caching.What does this means?What happens if user visits your site? The codes and images will be transported from your server to the user's browser over the network. What if the user visits your site daily or more frequently? Same codes and images are exported daily from server to browser.We can decrease this network load and server hits, by storing some data in cache memory of user's browser, so that when user visits your site next time, browser requests only changed data from server and renders the remaining data from its cache memory.We can save the files in browser cache. But how long?That is where max-age comes in use. Setting max-age means setting time period up to which the file will be stored on browser cache memory.This will decrease the network round trips and server load, resulting in faster page loading.If you want to know more, then see how browser determines the changed data from its cache memory and server.What to do?For both WordPress and Non-WordPress user.To solve this problem, we need to set maximum age of some recommended files by Google. The easiest way is Open cPanel -> Go to File Manager -> Navigate to Root Directory of your site -> Go to public_html section -> You will see .htaccess file. Open this file -> Copy paste the below code and save the file.<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|html|htm|xml|txt|js|xsl)$">Header set Cache-Control "max-age=31536050" </FilesMatch>This code will set max-age of these file extensions to 1 year. If the files changes in server, they will be requested by browser to load, otherwise these files will be retrieved from browser's cache.4. Optimize image.What does this means?Images are big files when compared to text. So they require more bandwidth to retrieve each time from server. We can avoid loading of large image files by compressing them without losing their quality. So you need to compress images which are shown in this section.Google will show you link of the particular image which can be compressed more to increase load speed.What to do?WordPress user.I have already posted about how to optimize images for SEO and rank better.Non-WordPress user.Copy the image name -> Go to cPanel -> File Manager -> Home directory -> You will find search toolbar. Paste that image name here. When searched, you will find the image location. Go to this location and download the image, and delete it from your file directory (cPanel).Now, compress jpg and png images and upload that image again to same directory with same previous name. Repeat the same for all images and you are done!5. Minify JavaScript.What does this means?JavaScript are codes which makes the HTML codes work fluently. Writing it in multiple lines causes browsers to download many new lines and empty texts. So you can remove all of these unnecessary characters from code.What to do?WordPress user.Install Autoptimize plugin and Activate it. Navigate to Settings -> Autoptimize -> Click on Show Advanced Settings -> Check "Optimize JavaScript Code?" and "Also aggregate inline JS?" and click Save.Non-WordPress user.Copy the JS file name shown by Google -> Go to cPanel -> Go to File Manager -> Home directory -> Paste the file name in Search bar -> you will get the file path where it is located. Navigate to that path -> Open that file -> Copy all the codes at once -> Open JS minify and paste the copied code. Click "Compress JavaScript".After that JS will be minified. Again copy the minified code, and remove the existing code from the file in cPanel and paste the minified code here. Save changes and close. Repeat the same for each file. Done!6. Minify CSS-What does this means? CSS is the code responsible to show tyles and colors on your page. It is very important to show a rich User Interface. Writing it in multiple lines causes browsers to download many new lines and empty texts. So you can remove all of these unnecessary characters from code.What to do?WordPress user-Install Autoptimize plugin and Activate it. Navigate to Settings -> Autoptimize -> Click on Show Advanced Settings -> Check Optimize CSS Code? and Also aggregate inline CSS? and click Save.Non-WordPress user-Copy the CSS file name shown by Google -> Go to cPanel -> Go to File Manager -> Home directory -> Paste the file name in Search bar -> you will get the file path where it is located.Navigate to that path -> Open that file -> Copy all the codes at once -> Open CSS minify and paste the copied code. Click "Minify".After that CSS will be minified. Again copy the minified code, and remove the existing code from the file in cPanel and paste the minified code here. Save changes and close. Repeat the same for each file. Done!7. Avoid landing page redirects-What does this means?While visiting the URL if any redirection found, then again one more network round trip is wasted. So lots of time is wasted on network trips instead of showing the site to user.In details, when user requests one URL, server will find the difference in settings and will send URL which needs to be requested back to the browser. Now browser again changes its request, and now the actual page is retrieved from the browser.To avoid this, thoroughly check if you have defined any redirection for any url of your iste. This error will not come if your are redirecting requests from "yourdomain.com" to "www.yourdomain.com". This error arises in following casesyourdomain.com -> m.yourdomain.com/home - multiple roundtrips for mobile devices.yourdomain.com -> www.yourdomain.com -> m.yourdomain.com - very slow mobile experience.What to do?For both WordPress and Non-WordPress user-To solve 1, use responsive web design so that same page URL loads in responsive styles for different devices.To solve 2, check with your needs and try to minimize the redirects. However, if you use responsive themes, your any of the both problems will be solved automatically because for mobile users, you will not have to redirect them to other URL.Check here if your site is mobile friendly or not.8. Enable compression-What does this means?When user visits your site, instead of sending HTML code, JS code, CSS code, Images, etc separately , you can compress all of these files in one file and send that to browser. Compressing will reduce the overall file size and will be sent in even less bandwidth resulting in faster page loading.What to do?WordPress user-Install W3 Super Cache plugin and navigate to Setting-> WP Super Cache -> and Enable caching. This plugin automatically generates the zip file of your site which is sent over the network for each request coming from browser.Non-WordPress user-You need to detect the code files which is loading on browser requests. Now compress all the file and keep that file at the location from which it can be retrieved on URL call.9. Minify HTML-What does this means?Don't repeat step 5 or 6 here just like minifying JS or CSS. Some of the codes in HTML needs some characters included which may gets be removed in minification process. If removed, then this will result in wrong rendering process of HTML which can affect your page design severely.I have ran into this situation while minifying one of my client's WordPress site.What to do?WordPress user-Install Autoptimize plugin and Activate it. Go to Settings -> Autoptimize -> Check Optimize HTML Code? and click Save. or,Install Above the fold Optimization plugin and Activate it. Go to Appearance -> Above the Fold -> Select HTML tab -> check Minify HTML and click Save.Non-WordPress user-Go to cPanel -> Go to File Manager -> Home directory -> Now Search out the HTML file being rendered for your homepage.Navigate to that path -> Open that file -> Copy all the codes at once -> Open HTML minifier and paste the copied code. Click "Minify HTML".Copy the minified code, and remove the existing code from the file in cPanel and paste the minified code there. Save changes and close. Done!10. Prioritize visible content-When the page loads, only the top part of the page (which fits on to the screen first) is called Above the fold content. So it may happen, that while loading your homepage, browser is painting your page from bottom to top parts.Means, Firstly, below HTML codes are making the page design. After that, above design which will be shown to the user when visiting your page, are being painted. This will look like more waiting time to the user while loading page.To avoid this, you need to do coding or take help of any coder. As different sites use different themes and different codes,we cannot provide any generalized way to avoid this.Now you are ready. If you follow the above steps, you have achieved the score just below or above 90. If you are using a good premium theme, you may have scored 100/100 in both mobile and desktop devices.My site speed when tested with Pingdom after following the below steps:The process explained above will work 100%. And after following the above process, you know the codes tracing better which which will be helpful for you to tackle any site speed related issue in future.NOTE:It is not easy to achieve 100% score in Google PageSpeed Insights for a full fledged website. If there is no content or much styling in your site, you can achieve this score easily. You can find many YouTube videos showing 100/100 result.In addition to the above, achieving 100/100 score should not be your ultimate goal. Remember that Google tests your page by some technical algorithms which you can't compare 100% with human mind. For example, sometimes JavaScript render is an error in Google page speed. And you solved it by placing the JS file at last of your homepage. This way you passed the Google insights at 100/100. But also check manually if it is creating any UI issue for your users or not.If it is so, you need to leave this error as it is. To score 100/100 in Google should not be your ultimate goal. In my experience, if you are near to 90/100, you are good. Make your site good for Google as well as Users.
Author
Publisher Name
Apoorv Sukumar
Publisher Logo

Apoorv Sukumar

A blogger and a Software Developer, exploring trending technologies in market. A philomath, web explorer, who learns many things and want to deliver them to the world. Founder of wantextra.com

You may also like...

2 Responses

  1. Julia says:

    Great advice. Thank you. I will keep it in mind.

  2. Yeah that’s something , Covers all topics related to speed, now I will do minify the html :-), beside the Caching plugin although I had already installed wpcache, I will Show This to my blogger freinds too . 🙂 good luck

Leave a Reply

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

This blog is under sale. Please send mail to [email protected] if you are interested in buying it.