If you are running a website these days, there is a good chance that you already know about the Google Pagespeed Insights tool. It is a web performance tool that helps you to identify the factors affecting your website loading speed easily. In this article, I will show you how you can improve your final Google Pagespeed Insights scores for both desktop and mobile.

Website loading speed is one of the critical factors that affect the overall user experience. According to Felix Tarcomnicu, CMO at Monitor Backlinks, it is essential to decrease the average page load time of a site to below 5 seconds. It surely would be frustrating to lose visitors even before they have landed on your site, thus giving you no chance to “engage” them on the page. If your site has a loading time of over 20-25 seconds, Google-bot is probably going to give up on your site as it won’t be able to fetch anything from it at all. Back in April 2015, following a significant algorithm update (that led to the infamous #mobilegeddon in the SEO industry), Google made an announcement that “more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan”. As of the second quarter of 2017, 52.21 percent of global web traffic originated from mobile devices. The fast and frictionless mobile experience has become as important as desktop user experience, if not more. Google’s Mobile-first Indexing is also expected to roll out in the year 2018.

In the following section, I’ll be explaining how you can fix the top five page-speed issues.

1) Compress the Images:

For a typical content and image-rich WordPress site, the most significant cause of slow page loading and low Google Pagespeed Insight score is often large images.

Some file formats are relatively larger than others. Choosing the right kind of file format (.jpg vs .png, 8 /24 vs .gif) is crucial to have a lighter image while maintaining its quality. You should also avoid text graphics and instead use ‘css’ to place text over images. That improves load speed to some extent and is better for SEO.

If you are still wondering how you can improve the score, you can just use a plugin to scale, compress and optimize all of your images. My favorite is Smush Image Compression and Optimization. The plugin will look in the WordPress media library and detect images that it can reduce. The large images will be automatically replaced with their smaller and scaled-down versions. You can alternatively use an image optimization service like Imagify.

However, it’s always going to depend on the number of images being requested at a time. It’s better not to use too many images on a single page.

2) Leverage browser caching:

A webmaster can instruct the browser how to deal with the resource it is loading by modifying the request headers for each resource. “Browser caching” is all about making the browser ‘remember’ the resources from the site that it has already visited, so that it doesn’t have to reload them upon a new page visit.

Now with WordPress, there’s a plugin for it. W3 Total Caching has over one million active installs. With this plugin, you can minify HTML, CSS, and javascript resources, and this can save up to 80% bandwidth.

3) HTML /JS/CSS Minification:

With W3 Total Caching, you can turn on the minification feature for HTML. It basically generates minified HTML /JS/CSS codes for page requests and stores them in a cache. In the Dashboard navigate to Performance > Minify and turn on HTML & XML, JS and CSS minification. Enabling the JavaScript minification can sometimes lead to issues, and you will need to disable JavaScript minification and use the Combine only feature. You can keep the behavior set as Default (blocking).

In contrast to JavaScript, CSS is not likely to be affected by whitespace and line-break removals.

4) Eliminate render-blocking JavaScript and CSS:

Scripts loading in the above-the-fold section (within head and body tags) of the site sometimes may delay the site loading as the browser would wait for the end of execution of those scripts before it loads the content for the site. They are known as render-blocking javascript.