Google PageSpeed for Noobs and the Clueless Part 3

Welcome back to my Google PageSpeed page. If you haven’t read Part 1 or Part 2, you may want to start there. For Part 3 I’m going to continue with the fine tuning of our web template.

We left Part 2 with a Google PageSpeed rating of 54/100 Descktop and 45/100 for mobile. Now we are going to follow the suggestions provided by Google and see how much more we can improve our ratings by.

Google does a nice job of telling us exactly what is clogging up the works, so we’re going to follow along with each suggestion, completing one section at a time to see by how much each change will affect our rating by.

First things first, in Part 2 we left off with moving the Render Blocking jQuery link to the bottom of our page. This corrected 2 of the render blocking scripts, but it ‘can’ produce unwanted results, let’s take a look at this video and I’ll show you how moving the jquery script to the bottom of the page affects the bootstrap dropdown menu bar, and how we can fix it.

Moving script to bottom of page menu fix

So now we’ve corrected a display issue for our Bootstrap Menu bar by moving the code to a new location. This won’t have any affect on our Insights rating, but it will have a positive effect for our website visitors as they’ll now be able to navigate our website once more!

I want to continue with improving our ranking so let’s see what other fun things have popped up.

Removing render blocking javascript

Now that we’ve removed some of the render blocking javascript we’ll want to minimize it as well, or we’ll keep getting annoying messages from google. Let’s take a look at this now:

Render Blocking CSS Oh My!

Next we’ll be moving onto render blocking CSS, for which, we have a solution. Moving javascript to the bottom of the page can be a huge pain in the neck, but render blocking CSS can be even worse as CSS should load at the top of the page, and CSS is required to load before the content or your site will look likes it’s loading in chunks and reforming like a werewolf’s full moon transformation.

We’ll review the steps to removing render blocking CSS in Part 4.