What Could be the Reason Behind the Sharp Decline in My Google PageSpeed Insights Score?

Optimization

On my desktop, I have successfully achieved a high page speed score of 96 on this site: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.usstoragecenters.com%2Fstorage-units%2Fca%2Falhambra%2F2500-w-hellman-ave&tab=desktop

Current Status:

Despite efforts to improve the score, especially for mobile devices, it has unfortunately decreased to 69 on desktop. You can view the results here: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstage.usstoragecenters.com%2Fstorage-units%2Fca%2Falhambra%2F2500-w-hellman-ave%3Fplain%3Dtrue&tab=mobile

Challenge Faced:

The move from Angular (first link) to plain JavaScript (second link) was intended to improve performance, but unexpectedly caused a drop in Google PageSpeed Insights score.

The reduction in resource size, particularly JavaScript (from 2MB on prod to 500KB on stage), was an attempt to enhance speed.

Evaluation Results:

Comparing the First Contentful Paint metric between prod and stage, there seems to be a delay despite the latter having fewer resources. This anomaly raises concerns about render times.

An analysis of mobile thumbnails suggests that stage loads initial content quicker than prod, contrary to expectations.

https://i.sstatic.net/mALMg.png

Highlighted visuals point out differences in completion time between stage (top) and prod (bottom).

Showcase:

Sample screenshots showcase variations in PageSpeed Insight readings due to differing run times.

Stage example:

https://i.sstatic.net/zWMyR.png

Production snapshot:

https://i.sstatic.net/DTqE2.png

Revamp Efforts:

Key adjustments made during optimization attempts are listed below:

  • Migrated from Angular to plain JavaScript, drastically reducing script dependence.
  • Implemented lazy loading for JavaScript and images.
  • Decreased DOM elements significantly from 4,600 to 1,700.
  • Utilized HTTP/2 server push for expedited loading of new scripts.

These modifications were expected to enhance page speed.

Inquiry:

Why did the PageSpeed score drop despite implementing these enhancements?

javascriptcssoptimizationpagespeed

Answer №1

It would be beneficial for you to explore the differences in how third-party scripts are integrated between your Production and Staging environments.

From my experience, issues with pagespeed usually stem from problematic third-party scripts. Of course, results may vary.

As a starting point, when comparing the data between the two environments, I observed that a specific Wistia script behaves differently. This could be due to variations in how it is embedded or other factors.

In Production

  • Wistia: Main-Thread Blocking Time: 3ms (section: Minimize third-party usage)
  • Wistia: Total CPU Time: 87 ms (section: Javascript execution time)
  • Wistia: Script Evaluation: 76 ms (section: Javascript execution time)

In Staging

  • Wistia: Main-Thread Blocking Time: 229 ms (section: Reduce the impact of third-party code)
  • Wistia: Total CPU Time: 425 ms
  • Wistia: Script Evaluation: 376 ms

Answer №2

The challenge you are facing

You have made many correct decisions, but your performance is suffering due to issues with First Meaningful Paint and First Contentful Paint

Upon analyzing the loading sequence, I have observed that your main HTML file has increased in size by 33%, from 60kb to 81.6kb.

This increase indicates where things might be going wrong, as all HTML must be loaded before the browser can initiate rendering.

Although Lighthouse (the engine behind PSI) suggests there are no render-blocking resources, it may not accurately identify what is causing render delays.

Your website still requires the SVG logo and icomoon files to complete rendering above the fold.

While these resources load early on the main site, they are deferred on the staging site, leading to delays in the First Contentful Paint and other aspects of performance.

There could be other issues present, but these are a few that caught my attention at first glance.

Solutions for the highlighted issues

HTML size - consider externalizing some of the inlined JSON data and lazy loading it instead (subject to feasibility)

SVG Logo - a simple fix would involve replacing the external resource with inline text for the logo

icomoon - although more complex, swapping icons with inline SVGs can address this issue

Extra tip - transitioning from icon fonts to SVGs can enhance accessibility for users with custom style sheets overriding fonts

Additional benefit - reducing one request!

Identifying Performance Issues

To troubleshoot similar problems, follow these steps to understand the root cause:

Begin by opening Developer Tools and navigating to the network tab.

Select 'Disable Cache - true' and 'Slow 3G' in the dropdown box to simulate slower connections.

Load each version of the site and compare the waterfall charts to detect changes in loading order.

The objective is to identify items appearing above the fold and optimize or remove them, similar to how CSS optimization was implemented.

Utilize the Coverage and Rendering tabs for quick insights into problematic areas.

Familiarize yourself with the performance tab and interpret the trace it generates to pinpoint issues efficiently.

If you are already proficient in these tools, great! If not, learning them will expedite the process of identifying and resolving performance challenges.

Answer №3

After much investigation, I have come to a realization. It appears that PageSpeed Insights may not always provide accurate results.

Despite its unreliability, I managed to significantly boost the score by eliminating server pushing of the JavaScript files, which only amounted to less than 20KB in total.

Interestingly, the page now seems to take longer to load visually, yet PageSpeed Insights believes it is loading quicker and consequently improves the overall score.

In one instance, the mobile score miraculously reached 99:

https://i.sstatic.net/i6SR4.png

A subsequent attempt yielded a more realistic score of 82:

https://i.sstatic.net/3NTgG.png

On desktop, the score skyrocketed to 98:

https://i.sstatic.net/CKpUu.png

The intriguing part about the mobile screenshot displaying a perfect 99 is that you can observe in the timeline thumbnails that the image for the slideshow at the top of the page had not fully loaded. It seems like Google PSI prematurely determines the completion of page loading, even when it hasn't entirely finished rendering.

It almost feels as if prolonging certain elements on the page can trick Google into overlooking them. Essentially, the slower the loading speed, the higher the bestowed score—a counterintuitive approach indeed.

Perhaps I might need to settle for a suboptimal workaround to achieve an inflated score. Alternatively, there could be a middle ground solution worth exploring (e.g., utilizing the first JavaScript file to inject link rel=preload tags for immediate loading of the remaining scripts rather than waiting for full module resolution).

If anyone can offer a better explanation, I will gladly acknowledge it as the answer. Otherwise, this current explanation may suffice.

Middle Ground Approach

UPDATE: Here's the compromise I implemented, which seems to yield positive outcomes. Initially, I incorporate a JavaScript file named preload.js as follows:

<script src="/preload.js" defer></script>

Below is the content of the preload.js file:

// Optimization to preload all JavaScript modules without resorting to server push or early preload,
// as that negatively affects Google PageSpeed Insights scores (odd but true).
// Instead, we begin loading them once this file has loaded.
let paths = window.preloadJavaScriptPaths || [],
    body = document.querySelector('body'),
    element;
paths.forEach(path => {
    element = document.createElement('link');
    element.setAttribute('rel', 'preload');
    element.setAttribute('as', 'script');
    element.setAttribute('crossorigin', 'anonymous');
    element.setAttribute('href', path);
    body.appendChild(element);
});

The backend establishes a window object variable titled preloadJavaScriptPaths, holding an array of script file paths such as /app.js.

The page still loads swiftly, maintaining a commendable PSI score (80 for mobile, 97 for desktop):

https://i.sstatic.net/vJMkM.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind the appearance of 'Cannot Get/' when trying to render pug?

Attempting to configure a basic Express server with a simple pug template. Could you kindly point out what I might be doing incorrectly in this setup? 'use strict'; //Require Express var express = require('express'); var app = expres ...

javascriptnode.jsexpresspug

Display <div> exclusively when in @media print mode or when the user presses Ctrl+P

Looking for a way to create an HTML division using the div element that is only visible when the print function is used (Ctrl+P) and not visible in the regular page view. Unfortunately, I attempted the following method without success. Any advice or solut ...

javascripthtmlcss

Is there a way to link my mapDispatchToProps with an onClick property in React?

I'm currently facing some challenges while trying to integrate redux into a basic react project I'm working on. It's actually a react 360 webvr project but I've noticed similarities with react native that make me believe it should work. ...

javascriptreactjsredux

JQuery failing to validate the form

Whenever I try to validate a form by clicking the submit button, it seems to ignore the validation altogether and proceeds to post the entered data to the next page. Below are the validation codes: <script> $(document).ready(function() { $("#re ...

javascriptjqueryvalidation

Prevent automatic scrolling of a div in jQuery while it is being hovered over

After addressing a previous question, I have further refined the script but encountered an issue at the final step. The current functionality involves a div automatically scrolling 50px at a time until it reaches the bottom, then it scrolls back to the to ...

javascriptjquery

Accessing a JavaScript object outside of its containing JavaScript file within a Dojo

I am working on a Dojo application that includes a Dgrid. My objective is to send the javascript containing the dgrid data to the server. However, I am encountering difficulties in accessing the javascript object beyond the file where it is defined. The a ...

javascriptscopedojodgrid

Custom Email Template for Inviting Msgraph Users

I'm currently exploring the possibility of creating an email template for the MS Graph API. I am inviting users to join my Azure platform, but the default email they receive is not very visually appealing. public async sendUserInvite(body: {email: < ...

javascripttypescriptnext.jsmicrosoft-graph-api

When utilizing the http.post method, the req.body is not being populated as expected

I am puzzled by the fact that the req.body appears to be empty... app.js utilizes the body-parser middleware() var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var index = require('./routes/in ...

javascriptnode.jsexpresspost

Tips for receiving live updates of active users online with the help of Mongoose and socket.io

I have been working on developing an app that covers various topics. Each topic has online users, and I am using express/socket.io/mongoose for the backend and flutter for the frontend. Currently, I am facing a challenge in displaying real-time informatio ...

javascriptnode.jsmongodbmongoosesocket.io

Forking a Node.js child process to assign it CPU affinity

Looking to utilize the child_process.fork function in Node.js for spawning a new process. This example is also applicable with the spawn function. To optimize CPU usage and make sure that these child processes are distributed evenly across all cores of th ...

javascriptnode.jsforkcpuspawn

Creating PDF files for iPhone using Phonegap

While Phonegap does not have this feature in its API, iOS offers the capability through Quartz 2D. You can find more information about it here. How can I achieve similar functionality in Phonegap for iPhone? As a beginner, any guidance on setting up the n ...

javascriptiphoneobjective-cioscordova

Error on Laravel 7: Unable to retrieve resource - the server returned a 400 (Bad Request) status code

Seeking assistance with a technical issue involving Razorpay. I'm encountering difficulty passing a value from the controller to JavaScript in the view. The data-order_id field is not populating, resulting in the error mentioned above, indicating a nu ...

javascriptphplaravelapirazorpay

Tips for deactivating all JavaScript events on a webpage that has been loaded within an iframe

My website is equipped with various JS click/mouseover/mouseout/scroll events and incorporates several JS libraries to operate features such as carousels, bootstrap modal pop-ups, and more. I am looking to halt all events on a specific element. Although I ...

javascriptjqueryhtmladdeventlistenerevent-listener

Updating Mysql through REST API/JWT using PUT method is not possible

I have been attempting to send an update request using Jwt (Tokens) and Node.Js with a backend in mysql. While Postman confirms that the record has been successfully updated, I am unable to locate where the actual update occurred. No changes seem to be ref ...

javascriptmysqlnode.jsrestjwt

Clickable headline in Boostrap 5 accordion

I'm in the process of incorporating a clickable help feature into my Bootstrap 5 accordion, as shown in the following screenshot: https://i.sstatic.net/G8rDI.png The idea is to allow users to click on the question mark icon, which will then trigger ...

javascripttwitter-bootstrapbootstrap-5

Encountering an issue with an Angular application: TypeError occurs when attempting to read property 'then' of undefined

I encountered an error while performing a post from my controller. function postDashboardsData (dataType, dateFrom, dateTo) { $scope[dataType + '_done'] = false; Api.post('rotations/' + vm.data[0]._id + '/dashboard&apo ...

javascriptangularjs

Identifying memory leaks caused by rxjs in Angular applications

Is there a specific tool or technique available to identify observables and subscriptions that have been left behind or are still active? I recently encountered a significant memory leak caused by components not being unsubscribed properly. I came across ...

javascriptangulartypescriptrxjsrxjs6

Place picture in the bottom right corner of the div without using absolute positioning

I am looking for a way to position an image in the lower right corner of a div, but I want to avoid using absolute positioning. The reason for this is that when I use absolute positioning, the text wrap is affected due to the float right applied to the ima ...

htmlcss

What is the best way to deactivate certain JavaScript functions on my webpage when accessed through a mobile device?

Is there a way to disable specific JavaScript functions when accessing my website from a mobile device? While I can achieve this using CSS only, certain buttons require JavaScript functionality. Below is the internal JavaScript code: var menuBtn = docume ...

javascripthtmlresponsive

iOS - Embedding text into a UIWebView input field

Just a quick question - if a textfield in a webform does not automatically have the focus set by the form, meaning you have to press the field before the keyboard pops up, am I correct in assuming that the field cannot be edited? In simpler terms - is it ...

javascriptioswebformsuitextfield