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.
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:
Type your URL in this form and see what Google says
Google Pagespeed Insight new version has speed score based on 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 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 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.
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.
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.
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!
Let’s move on Mobile Score
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.
Now press Analyze button to re-check mobile score:
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.
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.
Save Changes and recheck by press ANALYZE button in Google Pagespeed Insights Tool.
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.
My mobile score after lazy load images:
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.
Look at Opportunities section again, there is one more task to go: Reduce Server Respond Times.
Click Learn more to read more detail about this metric.
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.
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
Show your pagespeed score after this version release below. Is it decrease or increase? I want to hear from you guys.