6 Steps To Optimize Sites Using Google PageSpeed Insights

By | July 4, 2018

Do you want to speed up your site loading time? Are you aware of your website isn’t loading fast enough, you’ll lose potential customers? Website loading speed is one of the search engine (SEO) ranking factors. Site loading time eventually improves overall user experience as people don’t have the patience to wait for a page to load. You can optimize sites using Google PageSpeed Insights tool and make it load faster.

Read also: 5 Best CDN Providers which will Speed Up Your Blog

As people are impatient and expect a site to load instantly and so you need to optimize your site for both desktop and mobile. Nowadays more and more people are using mobile devices and they like speedy sites.

I optimize my site using Google PageSpeed Insight tool and found a terrible score. PageSpeed Insights shows the score for mobile devices 59/100 and 71/100 for the desktop version. In addition, it also provides you suggestions for optimizing your website for page load speed. You can achieve great results by optimizing and provides a better user experience.

How to optimize sites using Google PageSpeed Insights tool and make pages load faster?




Optimize Images 

Optimizing images on websites helps you to load faster by reducing their file size. To do that you need to compress all images using tools like ShortPixel, Compressor.io, and TinyPNG. Most of these tools are free to use which lets you reduce image file size by more than 80%. In addition, of reducing file size it also maintains the original quality of the image.

High-resolution images having bulky file size make your site to load very slow. Optimizing images lets you improve your site performance and your user will like it. Image optimization includes resolution, quality settings, image format, and much more. Google’s PageSpeed Insights provides specific optimization recommendations for PNG, JPEG, and GIF format. 

Minify CSS & JavaScript

Google’s PageSpeed Insights tool suggest you minify your JavaScript and CSS files. Optimizing CSS & JavaScript reduces the sizes of your files by eliminating unnecessary white spaces, characters, and comments from your CSS and JavaScript files. While coding you may often leave many spaces and comments which can even double the size of your CSS and JavaScript files.

You can install Autoptimize WordPress plugin which lets you optimize your site really easy. It also lets you minify and cache scripts and styles, injects CSS in the page head by default. Autoptimize also minifies the HTML code itself, making your page really lightweight. 

Leverage Browser Caching – Optimize Sites Using Google PageSpeed Insights

Leverage browser caching speed up your site load time significantly. It means the amount of data your user’s browser has to download is less as fewer requests have been made to your server. When a visitor’s browser loads a web page it actually downloads all the web files which include all the HTML, CSS, JavaScript and images.

Some pages might load very fast because of small in size and some pages may be larger in size and make them load very fast. Each file makes a separate request to your web server. The more requests your server gets, the more it needs to process and ends uploading your page very slow.

Leverage browser caching can help you by storing some of these files locally in your user’s browser. So, their first visit to your site will take some time to load but whenever they revisit your website, it loads faster than before. Your web pages still load faster even when your user refreshes the page or even moves to a different page of your site. Your web server tells user’s browser to keep the files and not to download them from your server which saves users time and also your web server bandwidth.

You can leverage browser caching by edit your WordPress .htaccess file. Enable Leverage Browser Caching by (i) adding Expires Headers (ii) adding Cache-Control Headers and (iii) Turning ETags Off.

Copy and paste the following code into the .htaccess file and save it.

Add Expires Headers

# TN - START EXPIRES CACHING #
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
# TN - END EXPIRES CACHING #

 

Add Cache-Control Headers

 

# TN - BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# TN - END Cache-Control Headers

 

Turn ETags Off

# TN - BEGIN Turn ETags Off
FileETag None
# TN - END Turn ETags Off

You can also leverage browser caching by using WordPress Plugins like W3 Total Cache, WP Fastest Cache, and Browser Caching with .htaccess.

Another way to optimize sites using Google PageSpeed Insights by using a CDN network which is a network of servers located at various sites around the world. It lets you cache the static version of your websites, such as images, CSS, and JavaScript files. When a user requests to open your site, the static content is loaded from the server closest to them. Some of the Content Delivery Networks are MaxCDN, KeyCDN, CloudFlare, and much more.

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

While testing your website on Google PageSpeed insights, you will likely to see one of the suggestion to eliminate render-blocking JavaScript and CSS. Your site may have theme and plugins that add JavaScript and CSS files to the front-end of your website.



JavaScript and CSS files can really increase your site’s page load time, and they can also block rendering of the page. Furthermore, user’s browser will have to load those scripts and CSS before loading rest of the features on the page. You can easily fix render-blocking JavaScript and CSS by using Autoptimize, or W3 Total Cache WordPress Plugins.

Optimize sites using Google PageSpeed Insights – Enable compression

Google PageSpeed Insight recommend you to enable GZIP compression to reduce the transfer size of your site static files. Enabling compression also helps you to achieve fast load times on your WordPress site by reducing the size of your web page. Furthermore, it will reduce the amount of time to download the resource, reduce data usage for your user, and improve the time to first render of your pages. 

When your user’s browser visits a website it checks to see whether your web server has GZIP enabled. If it has GZIP enabled, then it sends the compressed and smaller files else it sends the uncompressed files. If you don’t have GZIP enabled, you are most likely to see errors message in speed testing tools such as Google PageSpeed Insights and GTmetrix.

There are many ways you can fix it, but using WordPress Plugins like WP Fastest Cache, Check and Enable GZIP compression makes your life easy.

Improve Server Response Time

PageSpeed Insights detects errors and shows you that your server response time is high which is above 200 ms. Server response time also tells you that how long your site takes to load by rendering the page from your server.

Low quality shared hosting provider might be the cause of slow server response time. So it is better to upgrade to the best hosting solution provider. Some plugins also make your site slow if they are poorly coded and increase the size of your site’s database. Finally, you can use W3 Total Cache WordPress Plugin to improve server response time.

Follow the above steps to optimize sites using Google PageSpeed Insights tool and make pages load faster.

Has you or your team also undertaken such steps to optimize your site or blog for better user experience? If so, what were your results? Comments below and let us know about your experience. Share and Like this post if it adds value to your site. 

 

Published on: July 20, 2017

Leave a Reply

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