How to get Google Page Speed Score 100/100

  

Page Speed Insight is an online tool by Google developers to check how your website performing regarding it’s speed, it check whether a site follows Google speed guidelines. Based on several speed affecting factors, page speed insight give score to each page for mobile loading as well as desktop. This score is given out of hundred. If your website follow every guidelines, then your score should be 100 out of 100.

 

From 2010 Google start to consider site speed as a ranking factor in their algorithm. Beginning it was a small factor which affect less than 1% search queries. But now it should be a strong factor because Google is focusing more on happier customers than keyword density and meta tags. Actually Google is no more looking into your meta keyword and description, but still people spending more time to make their meta richer. May be investing these time for optimizing your page speed will give you more returns in search rank.

 

It is not so hard to make your page as per Google speed guidelines. Today I’m going to help you to make your page speed score 100/100. It need a little developer knowledge but if you follow me clearly, you can do it easily.

 

First go to Google Speed Insight to check your current scores and issues. This result will have two tabs, one for mobile and other for desktop. In that result Google may show you some suggestions to improve your score. Some of the below guidelines you may already following, then you don’t have to do those steps again.

 

Always take a backup before changing any of your web files

 

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

Above the fold content means, area of your webpage which displays before scrolling down. This is the primary area a user see first when he visit your page. So as per first guideline, some CSS and JavaScript blocking your page from loading the above fold area. This is becuase, normally every developers put their CSS and JavaScript files in head of webpage. that look likes,

 

<head>
<title>Title of web page</title>
<meta name =’keywords’ content=’ ‘>
<link href=”style.css” rel=”stylesheet”>
<script src=”javascript.js”></script>
</head>
<body>
Content of web page
</body>

 

The yellow colored lines shows your css and js files, which are currently in head of your webpage. When loading a page, head will load first then only body content. Because of your CSS and JavaScript files are in head, your web page only load after these files load completely. That is what Google means by render blocking JavaScript and CSS. So now you have to move those files to bottom, then your above fold will load fast.

 

<head>
<title>Title of web page</title>
<meta name =’keywords’ content=’ ‘>
</head>
<body>
Content of web page
<link href=”style.css” rel=”stylesheet”>
<script src=”javascript.js”></script>
</body>

 

This is how source code looks after you moved JavaScript and CSS files from header. By doing this step you may experience a slight trouble in your page loading style. That is your content load first before your CSS and JS files loads, so it looks pure html untill these files load completely. If your page is too lengthy, then the load time of Style sheet and JavaScript may take long, in such condition, place CSS and Js files middle of the page (never above the fold area).

 

2. Enable compression

By the second guideline Google meant about Gzip compression, that will compress all your files to load it fast. You can implement Gzip compression to your website by adding some simple script to your .htaccess file. Confused about .htaccess file?, .htaccess is simple text file that controls a lot about your website appearance. .htaccess simply means Hyper Text Access, for editing this file you need ftp permission. It may be a hidden file that you can reveal in C panel by enabling hidden file view. You may contact your hosting company if any trouble to locate .htaccess file.

 

When you found .htaccess, edit it and add the below code to it.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

 

That’s it, you enabled Gzip compression in your website.

 

3. Leverage browser caching

Browser cache means, static resources of a webpage can store in browser so when a user re visit the page, these files will load from local. Don’t have to get it from server, so the overall speed will increase. It can enable by some plugins in CMS websites. Also you can do it manually by editing your .htaccess and pasting the below code to it.

 

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##

 

After enabling browser cache, you may not able to view your updates on front end. Don’t be panic, it is just becuase your browser load from cache. To solve this you can clear browser cache after each update.

 

4. Minify CSS, HTML and JavaScript

Minify these files means, removing white space and empty lines from the file and make it look like shrink. By doing minify you may feel difficult to make changes on them, so I strongly recommend to keep a backup before minfy. There are several online tools to make your minfy job easier. That are,

So now you have successfully completed another Google Speed guideline, file minify.

 

5. Optimize images

Without loosing quality, you can compress images to make them lite files. Which will help us to load webpage even faster. I have already made a detailed description about it on my article “15 Tips To Make Your Website Load Faster“. You can use several tools for optimizing your images that are,

After compressing your images, image optimization step will get completed.

 

6. Reduce server response time

Server response time is depend on your server bandwidth, always ensure that you are on a high speed hosting service. When traffic increases to great level, it’s also better to switch it to a dedicated hosting.

 

When you complete all this guidelines, you can see a significant change in your page speed score, it should be nearly 100.

 

Conclusion

Google is so serious about page speed score, so there is no doubt about it’s importance in ranking a website. A high speed site not only helps to improve user satisfaction, but also it reduces the cost to a user for browsing it. Even in 2015 majority of webmasters not taking the benefit of page speed score well, so it is a greater chance for you to beat your competitor in SEO.

 

I have clearly explained each and every steps to improve your page speed score in Google speed insight. Feeling any trouble with them, you always welcome to share your experience. Also comment your page speed score below. See you with another journal soon. Thank you.