Google Pagespeed Insights Optimize for newbie

Google Pagespeed Insights Optimize for newbie

Speed + Mobile = Podium #1

It’s true! Especially when mobile devices are booming these days. Today (November 12, 2018) Google released new version of Pagespeed Insights Tool which has many new reports and metrics.

google pagespeed insight tool new version
The result you’ll get at the end of this guide: a nearly perfect Google pagespeed score!

 

Nearly 70% of Consumers Say Page Speed Impacts Their Purchasing Decisions. Further, 81% of marketers are aware that page speed impacts their conversions, but the majority aren’t making it a priority.

– According Search Engine Journal wrote about this stats.

 

New Google Pagespeed Insights Tool

Let’s find out what need to know if you want rank higher on Google.

Now put my blog URL into new Google Pagespeed Insights Tool to see what happen:

google pagespeed insight tool new version
On Desktop I got 80/100 pagespeed score.

Type your URL in this form and see what Google says
Google Pagespeed Insight new version has speed score based on lab data.

pagespeed insights tool lab data

As you can see above, Speed Score now based on lab data not your browser, your internet connection, your device. This is important.

Diagnostics section
Diagnostics section in new Pagespeed Insight tool. I have 7 things to do as Google recommend to fix.

Lab Data section
Lab Data section tells you estimated time to finish render your web page.

Opportunities section
Opportunities section list all optimizations can speed up your page load.
Click down arrow in the right to show more information.

Passed Audits section
Passed audits section show what you’ve done good. Congrats.

 

Optimizing Google Pagespeed Insights score for newbie

Start with Opportunities section

In this section Google tell me that I have 4 tasks to resolve in order to get better speed and score. Ok let’s pick number 3 “Properly size images” to fix first. Because it easiest.

By fix this I can save 1.64s. Great. My avatar display in Left Sidebar display only 156 x 156px but the actual file size is 1812 px.

kimi phan avatar size image

kimi phan avatar file size on pagespeed tool

Open Inspector tool of your browser you can see my image has 1812 x 1812 px that take much space and bandwidth to load so I resize it to display size 156px.

I install Autoptimize plugin to minify & combine CSS/JS files to minimize http request server.

desktop score optimized pagespeed insight tools for phankimi.com
Score go up 93/100. Awesome!

Installing a Cache plugin to make browser caching and database cache. I use WP-Rocket, you can use free cache plugin such as WP Super Cache, W3 Total Cache, WP Fastest Cache as your choice.

optimize google pagespeed insight tool score desktop

It 96/100 now. Great. Now we are going to optimize for mobile score. I think 96 is a good score no need to spend time get 100/100. Even Google product websites is not 100 score. Lol.

Okay. Next: I’ll try to fix these tasks in Diagnostics and Oppoturnities section to see how it going on. Try to improve my score above 95/100. I’ll update this article next days!

Stay tuned!

Let’s move on Mobile Score

optimize pagespeed insights score for mobile

I got 46/100. As new Google Pagespeed Insights tool consider it is slow speed. Let’s make it faster. Scroll down to Diagnostics to see a list of problems need to resolve.

At line 5 Reduce JavaScript execution time I saw Sumo App request 3 javascript so it make initial load speed slow. To get rid of this I config Sumo don’t load in homepage of my blog. Because it’s a social share so I only need it load in posts template.

google pagespeed insights tool mobile score optimize
Sumo request 3 scripts at homepage.

 

Now press Analyze button to re-check mobile score:

mobile score optimize for google pagespeed insights tool new version

Great! Mobile Score go up 66/100. Next, at Opportunities section, I try to find solution in order to get rid of Eliminate Blocking Resources problem.

 

eliminate render blocking for pagespeed insights

 

For optimizing images (1), (2) use this free tool to compress and present it with new format WebP to save ~ 2.6 s.

As you can see in screenshot above: autoptimize’s CSS and core jquery make render blocking. I try to move autoptimize CSS file into inline CSS in Customizer to see how it going on.

Open CSS cache file (https://phankimi.com/en/wp-content/cache/autoptimize/css/autoptimize_72eb1b118dcce796903546d7f56ca6f5.css) and copy its content into Autoptimize Inline CSS setting fields. Go to Dashboard > Settings > Autoptimize > Inline and Defer CSS?

Or you can make Critical CSS for Above the Fold with this free tool.

inline CSS for optimizing mobile pagespeed score

Save Changes and recheck by press ANALYZE button in Google Pagespeed Insights Tool.

 

optimize mobile score google pagespeed insight tool inline css

Mobile Score go up to 69/100. Pretty good. Now I find more opportunities to optimize score. In screenshot below in Opportunities section > 5. Defer offscreen images. Seem we can save 0.45s just lazy load images not in above the fold screen.

Easiest way to resolve this is install a lazy load effect plugin. I used BJ Lazy Load plugin. Install and activate it to see how it affect mobile score.

No more CSS render blocking now. Only jquery in core of WordPress. Remove jquery/jquery.js from this exlude scripts to get rid of it.

fix jquery render blocking resources

 

My mobile score after lazy load images:

lazy load images to increase mobile score google pagespeed insights tool

Score down 1 but don’t worry. I will move it up later. Notice at Opportunities section now just 4 tasks more to go. It’s a good news.

optimize google pagespeed score for newbie guide

Look at Opportunities section again, there is one more task to go: Reduce Server Respond Times.

reduce server respond times pagespeed insights

Click Learn more to read more detail about this metric.

reduce server respond times pagespeed insights recommends

As Google recommend, at this time not many things you can do excerpt upgrade your hosting’s specs. Or hire someone good at optimizing server do it for you. If you are using share host contact your host provider to upgrade it to higher plan which approriate with your current traffic.


Thought about optimizing Google Pagespeed score

Until now I have mobile score = 78/100. Pretty good score already but stay tuned I’ll optimize more to get mobile score above 90.

optimize google pagespeed score result
Nearly perfect score with Pagespeed Insights Tool.

optimize google pagespeed score mobile result

An important thing to remember: your goal here should not be to score a perfect 100 on PageSpeed Insights Tool. Rather, it should be to try your best to get a good score, without sacrificing user experience. If there are scripts on your WordPress site essential for a robust UX, you shouldn’t remove them just to get a slightly higher score on PageSpeed Insights. The rules on which Google scores your sites are merely guidelines, and should be taken as such.

Double check speed with another tool: Pingdom

pingdom tools optimize tips
It also has a good score with Pingdom Tools.

 

Show your pagespeed score after this version release below. Is it decrease or increase? I want to hear from you guys.

4 thoughts on “Google Pagespeed Insights Optimize for newbie”

  1. Hey Kimi,

    Awesome tutorial. I think having a good speed page is very crucial for any web master. Not only it factor into ranking but your users would abandon you if they feel their time is being wasted.

    I have 99 on page speed insight to.

    Keep up the good work

    • Exactly Bikram!
      I am little busy with New Year plan but trying to write more post about Web optimize. I have some tips which helps me ranked some niche sites in just fews months want to share with you guys.

Share your thought