Google insight is showing very low performance in angular application

user_12008380 0
Viewed 2943

I am running an angular application which is showing very low score in google page insights (13 in mobile and 43 in desktop). I am running this on Nginx server and all the compression and caching issues are solved from Nginx side but still it shows very low score in page insight. There is only one image in the page and it is already compressed.

Erros are to remove unused javascript and css files. But the files they are showing error are the build files which are generated from the angular production build. I am not getting how that files are unused. I am attaching the screenshot of errors here. Please help me solving these issues.enter image description here enter image description here enter image description here

google-pagespeed lighthouse angularjs pagespeed nginx
2 Answers

The issue is Zone.js - Zone.js is slowing down the application on google page speed, I have the same problem (for years). You can try too by disabling the zone.js on polyfills, and then add the zone.js file on assets and load as a script tag on the index.html and you will see the issue, and then disable the zone.js tag and run the lighthouse.

Test google page speed:

  1. normal zone.js in polyfills.
  2. Zone.js in assets with script tag on the index.html (on the head) - make sure to disable on polyfills
  3. Disable zone.js on disable on polyfills and or index.html
user_21906530

It isn't that the files are unused, it is that there is a large proportion of the files that contain code that is not executed / needed to render the initial page.

What you want to do is split your JavaScript into "essential" and "non-essential".

"Essential" is everything that is required to render / use anything that appears "above the fold" (content that appears without scrolling). Everything else is "non-essential" as the page can be rendered without it and it can load in the background.

The whole point of this is perceived speed, the site may take the same amount of time to load overall, but if you split your JS like this it will appear to load a lot faster, helping conversion rates etc. etc.

To achieve this you would either have to manually find all the essential JS and package it separately or use a method such as tree-shaking to remove unused code and then use code-splitting to serve high priority JS first (the article linked was the first one I found on code-splitting in Angular, you will have to do your own research for that I am afraid as I am unfamiliar with an Angular workflow).

Lazy loading JS

Below is a simple method to lazy-load any non-essential JS once you have identified it that works all the way back to IE9.

var dfr = function () {
    var n1 = document.getElementById("ds");
    var r1 = document.createElement("div");
    r1.innerHTML = n1.textContent;
    document.body.appendChild(r1);
    n1.parentElement.removeChild(n1);
};

var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf)
    raf(function () {
        window.setTimeout(dfr, 0);
    });
else
    window.addEventListener("load", dfr);
<head>
  <noscript id="ds">
    <script src="some-script-that-is-not-essential.js"></script>
  </noscript>
</head>

user_27028940
Related