Optimizing your Website using Google PageSpeed Insights

By JessicaParker, 29 January, 2016
Tips for Optimizing your Website using Google PageSpeed Insights

In this blog post, we want to share some tips and techniques to really speed up your website, regardless of what CMS or programming language your website is programmed in. Every webmaster and web developer can benefit from prioritizing resources within the rendering path to optimize delivery of resources and not only render your web page faster, but show search engines you care about User Experience. We'll be using Google's own PageSpeed Insights to check our web page for issues that need to be addressed, as they are the leading traffic source for many website owners.

Over at PCWDLD.com, we are consistently finding ways to make our site and user experience better and Faster for all our viewers. We've gone through our site extensively to really drill down into the fundamentals of what makes a web page better for the Internet as a whole while ensuring that the User Experience is top notch for our viewers. Our process is quite laborious, especially for those using any Particular CMS, such as WordPress, Drupal, Joomla or whatever you may be using to manage your site templates and content. Nevertheless, making the changes highlighted below will pay back tremendously when all the pieces of the puzzle come together.

Most Common Issues

Some of the most common issues when looking to optimize a webpage or template is "Eliminate render-blocking JavaScript and CSS in above-the-fold content". Many developers and webmasters who are fairly new to web development are clueless on what this means and what it takes to fix this issue. Other alerts that commonly show up on the PageSpeed Insights page are as follows: Optimize images, Leverage browser caching, Minify JavaScript, Minify CSS, Minify HTML, and many more. Many of these issues are self-explanatory - For Instance: Optimize Images usually means your images need to be further compressed in order to meet Google image compression Guidelines and image format Guidelines. Google has outlined a which format you should use depending on certain criteria:

format tree

As you can see, Google has clearly given you the path you should take for what file format the image should be in, along with compression values. Many of the issues described above are fairly easy to fix, as they require little to no knowledge of programming or critical rendering path optimization. In many cases, you are simply compressing the images on your site, minifying the HTML code, JavaScript code and/or CSS files to further reduce the file size. After completing the above requirements, many webmasters and developers are still getting the dreaded "Eliminate render-blocking JavaScript and CSS in above-the-fold content" alert and never really bother to fix it.

What does "Eliminate render-blocking JavaScript and CSS in above-the-fold content" mean?

Google is all about perceived speed and how quickly a browser can start rendering a web pages' content. Many webmasters think they need to achieve Loads Times below a certain threshold (1 - 2 seconds), which is true to an extent. But what we have found is that developers should be focusing on how fast their page starts to Render, rather than on overall load times.

This measurement is known as TTFB (or Time To First Byte), and has little to do with overall page load times, but more so about Perceived Speed and how quickly a web page will start to Render. A the end of the day, users want to see your Content faster, and by optimizing Above the Fold CSS and JavaScript/JQuery file delivery, you can render your webpage Faster and more efficiently, while letting non-crucial elements load after your page has started to render. Google is also emphasizing a "Mobile First" programming approach to web development, hence the need for lower TTFB, as cellular networks are not nearly as fast as home and business internet connections.

Combine and Relocate JavaScript and JQuery Files

The first step of the process is to combine any JavaScript and JQuery files. This can easily be done by viewing the Source of your webpage, and then copying each JavaScript or JQuery file into a new document in the order they are shown in the Source of your webpage. This is very important, as you don't want to break the functionality of your website.

After you have combined all JavaScript or JQuery files into 1 file respectively, you can then either Dequeue & Deregister the references within your Theme Template Files or Remove the reference of those files we combined in your templates and assign the combined files in their place. At this point, you'll also want to ensure those JavaScript or Jquery files are in the correct order and add "ASYNC" to the script source, like so: async in the script link of your js files. This will ensure that the JavaScript or Jquery files are loaded asynchronously (or at the same time) as the rest of the page, speeding up the overall page.

Above the Fold CSS

The next piece of the puzzle is finding your Above the Fold CSS and inlining only the Above the Fold CSS styles into the <head> section of your page and then moving your CSS file/s to right above the </body> tag . This will allow the browser render the Above the Fold content using the inlined CSS Styles in your header rather than downloading your whole CSS file, which can be fairly large, and start styling the page within milliseconds.

In order to find your Above the Fold CSS, we use this Critical Path CSS Generator. All you have to do is copy the contents of your CSS file into the Left side box, Enter in your URL at the top of the page you want to extract the Critical CSS from and then hit the "Create Critical Path CSS" button. The site will churn in the background for a couple seconds and present you with the Above the Fold CSS. You can now copy the CSS styles and inline them into the head portion of your web page and move the link that points to your CSS file to the bottom of the webpage right before the "</body>" tag, as mentioned above.

Conclusion

At this point, if you have followed the steps above and tweaked, combined and minified your JavaScript, JQuery and CSS files correctly, as well as inlining your Above the Fold CSS content into the <head> portion of the page, you should be scoring much higher on the Google PageSpeed Insights page and you'll see much better TTFB and faster Render times of your content.

Remember, Load times aren't the greatest determining factor of speed. Take careful consideration of TTFB and Critical Rendering path, because Google wants to see rendering of our webpage within Milliseconds rather than waiting 1 -2 seconds for a complete webpage to download and then started Rendering. Perceived Speed always trumps Load times in our book. Good Lucky and Happy Developing.