Google PageSpeed Insights v5 November 2018 Update

 

If you’ve used the latest iteration of the Google website speed test and web performance measurement tool using the Google PageSpeed Insights v5 November 2018 Update, you’ll realize that there have been a number of major changes  First and foremost, the new GPSI now uses data from Google’s Lighthouse, a brutally strict tool that analyzes more than just what’s in the webpage, but also how it responds.

 

In addition, GPSI now grades Mobile pages with a much more critical eye.  Essentially, if your page, when viewed on a mobile device on a 3G network, is slow, it’s going to get a bad score.

 

Our initial reaction here at Pegasaas was “AWESOME!”.  Why?  Well, in truth, nothing has changed from before, except now Google Insights are telling us what it feels is truly important about your page’s load time.  This is FANTASTIC!

New PageSpeed Opportunities

To summarize, Google’s PageSpeed Insights Rules are no more.  Now, there are a number of new ‘opportunities’ which now need to be addressed, according to Google PageSpeed Insights:

 

  • Defer Unused CSS
  • Ensure Text Remains Visible During Webfont Load
  • Serve Static Assets with an Efficient Cache Policy (formerly Leverage Browser Caching) now expects a much longer cache time
  • Minimize Critical Requests Depth
  • Defer Offscreen Images (Lazy Loading, both Foreground and Background Images)
  • Preload Key Requests
  • Use video formats for Animated Content
  • Avoid Enormous Network Payloads
  • Avoid an Excessive DOM size
  • Javascript Execution Time
  • Minimize main-thread time.
  • Serve Images in Next-Gen Formats
  • Properly Size Images

That’s quite the list!

New Google Page Speed Changes and PageSpeed Metrics

Just when many were still asking, “What is FCP and DCL” and furiously searching for “fcp and dcl meaning” , Google up and changed the entire game plan.  In addition to those opportunities that have replaced the PageSpeed Insight Rules, GPSI is now reporting a new metric called “Time To Interactive” which measures how long it takes a page to reach the point where the page has displayed useful content, event handlers are registered for most visible page elements, and the page responds to user interactions within 50 milliseconds.  More than just a “fully loaded time”, this metric is all about usability.  If you keep your TTI score below 5.0s for mobile, you’ll be doing well.

 

GPSI is also showing another metric called “Speed Index“.  Speed index shows how quickly the contents of a page are visually populated.  Keeping the Speed Index below 3 seconds on mobile will go a long ways towards getting a fast GPSI score.

 

In addition to the aforementioned metrics, the GPSI tool now has “First CPU Idle” and “Estimated Input Latency” which are indicators on how much resources, such as rendering and javascript parsing, are being used in the background.

 

Mobile Mobile Mobile

So what is a good Google Page Speed Score? What is a PageSpeed Insights Average Score?  I’ll be honest, don’t even bother focusing on the Desktop GPSI score.  It’s pretty easy to get a very high Desktop GPSI score — we typically see 95-99 for desktop scores, for sites running Pegasaas Accelerator WP.  In fact, the night before GPSI was updated to this latest version, both our mobile and desktop PageSpeed scores for pegasaas.com were 99/100.  Once GPSI updated, we were still getting 99/100 for desktop, but our mobile GPSI score was suddenly 39/100.  Do you think we had a heart attack?  🙂

 

So for the better part of a week, we focused on coming up with new mechanisms, addressing the new “opportunities”.  After 4 days, we had pushed the mobile GPSI score for Pegasaas.com from 39/100 to 92/100.  If we disabled the Google Tag Manager and Google Analytics, we could get it up to 96/100.   But we got there by focusing JUST on how the page would operate on a mobile device running on a simulated 3G network.

New Opportunities, New Features

So, with the “need for more speed”, we were able to craft a number of new features.  These new features will be rolling out in the next couple of weeks (expected by December 1st, 2018), along with an updated interface.  To summarize what we’ve put together:

 

Lazy Loading

We had to upgrade our lazy loading to handle both a desktop and mobile scenario.  In addition, we built a background-image lazy loader.  We hadn’t even considered that background image lazy loading was possible.  But… abra-cadabra.  It’s for real.  And it sure makes a big difference to load time.

 

Defer Unused CSS

When we saw this opportunity, our initial reaction was “NFW” (no flipping way)!  But, after considering what it meant, we built in automated lazy-loading of CSS files.  Provided you have adequate Critical CSS injected into the page, you can have the stylesheets lazy loaded so that they are available should an action happen on the page.  This feature is fairly experimental, however, we have additional features which are contingencies for those situations where the Critical CSS generated by our Critical CSS Engine is not 100% adequate:

  • exclude user-defined stylesheets from the Defer Unused CSS mechanism (and just preload them as they’re normally done when being deferred to avoid being render-blocking)
  • add ‘Essential CSS‘ to alongside the Critical CSS — basically filling in the gap made by inadequate Critical CSS

 

How to Defer Render Blocking CSS | Eliminate Render Blocking Resources

Font Display

In order to ensure text remains visible during web font loads, the “font-display” attribute needs to be injected into CSS @font-face {} declarations.  We’ve been able to adjust the Critical CSS on-the-fly so that the font-display attribute gets added directly to your page code to satisfy this new requirement of GPSI.  Our Font Display feature allows you to use the “fallback” (default) setting, “optional”, or “swap”.  If you’re interested in learning more about controlling font performance with font-display, Google has a great article.

 

Strip Google Fonts for Mobile

To address the “Minimize Critical Requests Depth”, we’ve focused on stripping out Google Fonts for mobile.  This new feature is set to a  default setting to “strip” Google Fonts.  However, if you want to “split the difference” between performance and visual accuracy to the desktop version of your site, we’ve added an option to strip all but the most ‘normal’ version of the Google Font.  Often, multiple font styles (normal, italic) and font weights (100,200,300,400,500,600,700,800) will be loaded (that’s 16 versions, 16 critical request chains!) which can keep your web page from loading fast on mobile.

 

Preload FavIcons / Preload Individual Files

While we were already preloading stylesheets and javascript files, we have now included the automated “Preload FavIcons” feature which automatically preloads your favicons for a faster page load.  When not pre-loaded, they draw out the load time of the page.  You can also now explicitly define individual files that may need to be preloaded, that the Pegasaas plugin can’t auto-detect.  An example of a resource that you may wish to pre-load would be the Google Analytics file if you are using Google Tag Manager, or some other file that loads by being injected after page load such as some sliders for themes such as Elegant Theme’s Divi.

 

Avoid Enormous Network Payloads

While we don’t have a new feature for this opportunity, we did develop a whole new version of our javascript deferring mechanism.  Actually, we created two new versions (JSDefer #3 & #4), and the second of those two beat out the load time of the first by just a bit.  The newest method defers each individual file in its original location in the DOM (Document Object Model) and then bundles up all inline Javascript, if it includes code that is dependent on jQuery, into a single file deferred at the end of the page.  Previously, we would bundle up ALL of the javascript into a single block of code that was then saved to a file called “deferred-js.js” which was deferred at the end of the page.  With the new method, the network payload is much smaller, and it also helps to reduce the Javascript Execution Time and main-thread time.  In addition, this method (JSDefer #4) means that the individual script files can be cached for an even faster secondary page load.

 

Ahead of the Curve with PageSpeed Insights v5

It just so happens, there were a few new opportunities that have been addressed by previous versions of Pegasaas Accelerator WP.  Nice to be ahead of the game.

 

Auto Sizing of Images

In v1.12.1 (September 6, 2018) we released something we referred to “magic image sizing”.  Essentially, Pegasaas Accelerator determines the more appropriate size of image and auto sizes the image down from those massively huge stock photos that you may have uploaded to your website.

 

WebP Images

One of the new opportunities available is to serve images in next-gen formats.  We’ve been automatically serving WebP images via our Image CDN since v1.10.0 (July 26, 2018).  WebP images can be much smaller than traditional PNG or JPG images, resulting in a faster load of the web page, and lower cost to the mobile user.

 

Moving Ahead

We’re pretty stoked about this new iteration of Google PageSpeed Insights.  We believe that browsing the web should be fast, and that website operators should be able to make their websites fast for their visitors without having to learn all the ins-and-outs of web performance optimization.  That’s why we created the Pegasaas Accelerator WP plugin — so that average people could make their website‘s fast, more-or-less with a click of a button.  Mobile devices are everywhere, and everyone should be concerned with how fast their website displays for mobile. The Google PageSpeed Insights v5 Update was designed to address precisely the issues facing the bulk of the world’s mobile devices (Think with Google).

 

Make the mobile visitor happy that the website loaded fast and you’ve already satisfied the desktop user.

 

In summary, we think the Google PageSpeed Insights v5 November 2018 Update is a hit.