How Google PageSpeed Insights Can Optimize Your Webpages – Coding Ninjas
Coding Ninjas
July 2019
« Jun    


How Google PageSpeed Insights Can Optimize Your Webpages

Michael MiraMichael Mira

Google PageSpeed Logo

Google PageSpeed Insights is a web-based tool that analyzes the content and elements of a web page. It will then generate suggestions to make that page faster and other optimization options. Google PageSpeed Insights is a valuable tool for online businesses and other professionals who want to improve their website’s visibility and potential traffic.

Why is optimizing your website to load faster so important? Besides the obvious reasons—such as better navigability and being more UX-friendly—the loading speeds of your webpages will help you improve the longevity and overall function of your whole website. Using Google PageSpeed Insights’ suggestions can also help you identify SEO improvements and then apply the necessary changes to optimize your webpages.

In a previous article, we talked about the importance of optimizing your website’s images to improve load times. A website that has a lot of large image files can drag down its load speed and consequently how you effectively present your information to visitors. According to a recent study, visitors to your website make their judgment about your brand within 50 milliseconds. This is true for any kind of website, whether it’s an e-commerce business or a freelance photographer portfolio. The interaction between your website and your audience is critical in either keeping their attention or putting them off.

First, let’s take a look at the mobile layout version. In a recent article, I talked about the importance of optimizing your website to be mobile-friendly. Independent studies have shown that 60% of consumers are more likely to make a purchase if the website they’re visiting is mobile-friendly. So it’s recommended you tackle the page speed of your mobile layout immediately.

Here’s a sample website I used for a Google PageSpeed Insights test:

google page speeds 1

As you can, see Google PageSpeed Insights uses a 100-point rating system and this particular website is clearly not living up to its full potential. The first improvement suggestions you will see are listed in ‘Should Fix’. These suggestions concentrate on the most urgent issues on your website.

google page speeds 2

I know the instructions can be a bit confusing if you’re not familiar with front-end development, or JavaScript, HTML and CSS fundamentals. So let’s define some of the common terms you’ll see on Google PageSpeed Insights.

Render-Blocking – Render is just a fancy word for loading. Therefore, a render-blocking JavaScript means that there is an element on your website that is preventing your page to load at optimum speed.

Above-the-Fold Content – First of all, the term “fold” refers to the bottom portion of the screen when you load a page. When you go to a website, the content you see immediately without scrolling down is “above the fold”. Any content you see upon scrolling down is referred to as “below the fold”.

Google PageSpeed Insights makes it easy for you by listing the render-blocking JavaScript. You simply have to go to your web host’s CSS editor and find (For Windows users, use Ctrl+F. For Mac users, use Command+F) those scripts. Follow the instructions and simply remove them.

Next, Google PageSpeed Insights will list the CSS delivery that needs to be optimized. CSS delivery simply refers to the way you use CSS to load a web page. It’s recommended that you stick to just one CSS style sheet and make sure that the size is less than 75k.

Google PageSpeed Insights will also list issues under ‘Consider Fixing’. These suggestions are not as urgent as the ones in red (‘Should Fix’), but they are just as important, in my opinion. The usual suggestions are image optimization or size reduction. The example website I used is image-heavy and many of the JPEG/GIF files on the website are large high-resolution photos. In fact, the low page speed score of 41/100 it received is due in part to these large image files.

So, the next step would be to go through all of the image files you have uploaded to the website and remove them. Once removed, edit those same photos or GIF files to decrease their size. My advice is to not use the original JPEG or GIF files you have on your hard drive because they tend to be large in size. Instead, create a copy of those files and decrease their size, and then use those to upload to your website.

The last category you will see on the Google PageSpeeds Insights reports are the “rules” of SEO and speed optimization that you passed. It’s recommended that you study these rules so that you will know the best practices in SEO and page speed optimization.

The desktop layout version will give you a different PageSpeed Insights score. In this case, the website I used as an example did better than the mobile layout with a 71/100 rating. However, it clearly still needs some improvements. As with the mobile layout version, Google PageSpeed Insights will list the critical issues first and detail which elements on your webpages need to be optimized or removed.

google page speeds 3

One of the unique features of Google PageSpeed Insights is that they are very detailed as to what you need to do for optimization. For example, one of the suggestions for image optimization shows you how much you need to reduce the image by:

google page speeds 4

Likewise, it Google PageSpeed Insights will tell you which JavaScript you need to minify in order to increase page speed performance. The steps are quite easy to do even if you are not familiar with front-end or back-end processes. If you have a webmaster, this is a valuable tool for them to use.

Now that you’re acquainted with Google PageSpeed Insights, go ahead and try it out using your website’s URL and see how well (or poorly) you score. Optimizing your webpages’ speed is an essential part of maintaining a healthy user-friendly website.

Michael Mira is a writer, photographer and web designer based in Houston. He was born in Manila, and grew up in New York City and Texas.

Comments 0
There are currently no comments.