What’s all about the new Google Page Speed Insights (PSI)?

January 12th, 2019
26 Dec 2018
Arun E
No Comments

To surmise everyone’s thoughts, Google has merged Lighthouse extension to Page Speed Insights.

So, you don’t have to look at the Audit section (in the inspect element) anymore.

The new big change is all about improvising the user experience, which eventually leads to increased traffic, ultimately resulting in good conversion rates.

You could measure the new Google page speed insights by the way it interprets the results of your web pages. You’ll see the current status of it, explained in detail, with the windows of opportunity, even if you score a perfect 100.

Let me help you understand the entire reports with the PSI report of https://www.speedboost.xyz/

Just click on the below-given screenshots of the report – Mobile and Desktop version respectively.

 

MOBILE:

 

 

DESKTOP:

 

 

Let’s know the reason which makes the new analysis report really cool.

 

Field Data:

The new PageSpeed insights use LightHouse, as a primarily analytic engine and also takes the field data from CrUX.

This eventually proves that the results are being displayed based on the current performance of your website.

Earlier, it was showing the metrics for improvements and based on that the scores were displayed.

This will not be the case anymore.

The notable point is that the data indicates an aggregate of previous 30 days page load.

Refer to this simple example:

 

 

Here, in this case,

FCP (First Contentful Paint) and FID (First Input Delay) are split into three categories to know the range of values it takes for the page load.

1) Green, which refers to Fast Load.

2) Orange refers to Average load and

3) Red refers to slow load.

As you could see in the below screenshot,

39% within FCP’s green bar represents that, of all the observed FCP values, 39% falls directly in the fast loading range between 0 ms and 1000 ms.

 

 

Kindly take a look at the below image which provides the three categories and its loading time range, based on CrUX analysis data set.

 

 

Again, if you wish a fast result, both the FCP and FID should be fast.

If either of the both is slow, you would get a slow result. Apart from these two, all the other cases result in Average.

 

Much to the dismay,

You would be making a mistake, if you are happy and settled on seeing your website scoring a perfect 100.

Now, this is the big game changer.

The motive of this report is to render/depict the present scenario. This way, getting a perfect 100 doesn’t mean that your website is completely optimized. The report gives a list of opportunities for enhancement.
 

Web Speed

Join our newsletter to get free tips


 
 

Lab Data:

This metric purely follows LightHouse.

In PSI, the lab data completely depends upon the following metrics:

First Contentful Paint  – The moment you can visually see any text/image.

First Meaningful Paint  – The moment you were able to see anything that makes sense.

Speed Index  – This is based on how quick the contents of a webpage is displayed.

First CPU Idle  – It is the time taken, a page takes for a user, to start interacting with it.

Time to Interactive  – The moment when the page is entirely ready to view and access.

Estimated Input Latency  – This is purely a user’s perception about the load time.

 

 

Google has labeled and differentiated each metric with distinct colors.

Green – Checkmark – FAST

Orange – Information Circle – Average

Red – Warning Triangle – Slow

Google has revised the color buckets in their lighthouse’s latest version v3.1.1

Have a look at what Google says about lab data:

  Any green score (90+) is considered good.

 

Opportunities:

It is an open suggestion to improve the webpage’s performance.

You could refer our other blog LightHouse for a detailed explanation of each metrics.

Now see the real-time example of opportunities in the report analysis.

 

 

As you can see in the report, there are several metrics which are stopping your page from having a good score (Click on the indicated green dropdown to see the metrics).

Eliminate render-blocking resources – You could be having CSS or JS which tries to load before your content does. Find them and follow the practices to eliminate these resources.

Enable Text Compression – This is pretty simple. You just have to enable gzip compression on your server. Now clear the cache and test it again.

Serve images in next-gen formats – Image formats apart from JPEG2000, JPEG XR and WebP are not recommended by PSI, as they consume huge cellular data. So, if you want to see the enhanced score, try using these image formats.

Defer off-screen images – Some images are loaded off the screen (i.e., Below the fold), which you won’t be able to visually see in the initial display. Whenever you load a webpage, the moment you see anything is considered as Above the fold. Since there is no absolute necessity to load below the fold images in the initial render.

Defer unused CSS – It is considered as an excellent way of reducing the latency. There might be unwanted CSS which actually doesn’t need to be downloaded at the time of load. Eliminating it, will enhance your score and displays your webpage quickly. Read more about it here.
 

Web Speed

Check if your website needs to be optimized right away!

 

Diagnostics:

This metric analyses the standards and norms which are being followed and then provide insights/information about the best practices that are yet to be done/implemented.

Have a look at the real time example.

 

 

User timing marks and measures – It is simply the idea of choosing the part of your scripts that you wish to optimize and make use of it with the user timing API. Read more here.

Ensure text remains visible during web font load – It is nothing but controlling the font performance with the font display. It is the web font rendering and the time it takes to load when verified by a developer. Read more here.

Serve static assets with an efficient cache policy – In short, it is the way to retain a local copy of the page in the browser, so that, it gives an immediate render, rather than calling it from the server every time the user hits the URL. Read more here.

Minimize critical requests depth – It is nothing but the orderly display of files in accordance with the priority assigned. Read more here.

 

Passed Audits:

Usually, this would be the last in the report.

This represents the audits that the webpage has passed.

Refer the real time report of the passed audit of SpeedBoost.

 

 

I have done the entire fix, yet the performance didn’t shoot up. What’s still stopping?

Even though you have done the fix by following the PSI’s recommendation, sometimes the performance of your page still lags.

Let me explain why so.

Hosting Quality – It’s high time that you check on the hosting side as well and find a solution coordinating with them. That way you could be able to fix the issues. If the hosting isn’t supportive enough, then maybe it’s time to make good decisions. The website shouldn’t have Server Response Time at any cost. If you are facing it, please refer this article and resolve it immediately.

Theme – This would be on your part. Check if you’ve recently moved to a new theme. Normally, you might incur problems while making changes without the touch of CSS. If this is the case, it’s always better to avoid it. Now, have your theme tested by activating a default theme and then you could run a new page speed test again.

Plugins – Know the importance of the plugins and find those which are bringing down the score. Initiate the speeding process by deactivating it.  Now you could test it again to see the improvised score. Now that you’ve identified the plugins which are causing the issues, you could reach a developer or contact us to put an end. The faster, the better. You could refer this article on how to choose the right plugin.

You never know which webpage your client/user will be accessing.

So, it’s wise to do a basic check not only on the home page but on individual pages also, as and when required.

 

Worried about getting a green in PSI? 

No, you shouldn’t.

Getting a green isn’t an issue nowadays, yet it’s a challenge to maintain a good score.

Since PSI gives you more opportunities even if you score 100, you’ll always be focused about quick response, reducing page weight and much more.

Google is very clear about the real-time User Experience.

Based on their perception about your website in any application and in Chrome, the data are collected, analyzed and displayed to you as reports.

 

HAVING SAID ALL ABOUT PSI,

Now is the time to look at the major ISSUES which I guess everyone is literally facing it globally?

 

The Frustrated us!!!

Yeah, it’s true that Google’s PSI shows inconsistent results, especially in MOBILE.

I’ve seen in many complaint forums – people have started expressing their thoughts about PSI

I have shared some of the screenshots from the discussion forum, which depicts the frustration of many developers, users, web-owners and many more.

 

 

 

 

Asking my view, Google needs some time to overcome this current issue.

Google PSI will be awesome than the earlier version once these issues are stabilized.

Many might want to share their comments. Please go ahead and strike them. 🙂

 

What’s your thought about the new Page Speed Insight?

 

Web Speed

Join our newsletter to get free tips

Arun E

Arun is the Technical Lead. Having over 10 years of expertise, he is a geek and technology enthusiast. His knowledge in any platform is simply mind-blowing which makes him a specialist in development. He writes blogs based on client queries and shares his Lead that everyone gets lucky to follow the guidelines.
Follow Arun E on

Leave a Reply

Your email address will not be published. Required fields are marked *