How can I fix performance issues in my website

Question

I'm working towards improving my angular 6 SPA SEO score, I'm using Lighthouse audits to figure out specific/major issues that cause bad performance in order to get better score.

I see a problem with my main javascript files. I run the - webpack-bundle-analyzer to see what's going on in my code and got this image:

I'm using lazy-loading already, hence, you can see for example the biggest file on the red relates to the user module which is loaded only after login so it's not relevant, However, the main file on the green is always loaded and also the purple file called: "lazy-public-script.js".

I'm not sure how much I can save from that. I thought of removing the moment library from the main file and also lazy load the translation file that you see as he.json, en.json, and even try to minimize the lazy-public-script.js file.

Still not an expert in the field of performance and I'm not sure if I'm attacking this issue right.

Another idea that came to my mind is to create really small module that will contain only necessary HTML & CSS and by that removing the need for the lazy-public-script.js until the user needs it.

I will appreciate any help on how to access these issues the right way.

Answer 1

Server-Side Rendering

The biggest impact to improve initial performance and the SEO metrics will be to utilize server-side rendering (SSR). SSR will increase first-contentful paint significantly, and is essential for SEO.

SSR helps in two significant ways:

1. Reduces the initial bundle size, by excluding the Angular run-time.
2. By sending already pre-rendered HTML to the client.

Both of these reduce first-contentful paint (FCP) and time to interactive (TTI).

Check out the official documentation for detailed information: https://angular.io/guide/universal

Production/Minified Build

By the looks of it, the scripts being loaded are not minified, which shouldn't be the case if you are doing a production build (ng build --prod). Minified scripts reduce the bundle size by quite a bit. It is also a best practice to only deploy a production build of the final product.

Lazy-Loading of Images (Defer offscreen images)

Following that, as indicated by Lighthouse audits, there are many images on that page which are loaded initially. Deferring the images until they are needed will improve FCP/TTI metrics.

You seem to be already utilizing some lazy-loading, but it don't seem to be doing the job as observed in the DevTools. Check out this package for more "angular-native" lazy-loading: https://www.npmjs.com/package/ng-lazyload-image.

Image Sizes (Properly size images)

Aside from bundle sizes, you can look into reducing the size of images. As indicated by Lighthouse, there is a potential saving of 1s.

This applies both to file-size, and also for the dimensions of images.

For example, this image located at /assets/images/pages/regular/sections/header/1.webp:

1. 223Kb - you could play around with different file formats (PNG/JPEG) and compression qualities to reduce the file size as-is.
2. 1920x1100 - the dimension of the image could probably be reduced significantly, considering that this image is actually much smaller on the screen where it is currently used (inside the iPhone screen).

You could probably reduce that image down to 40-50Kb by utilizing two of those points. Same suggestion for the image at /assets/images/pages/regular/sections/header/main-photo.webp - the dimensions and file size could be reduced significantly.

There are other suggestions (as indicated by Lighthouse, e.g. remove unused CSS), but those three above would give a headstart in SEO and performance. Again, server-side rendering would be the very first thing to tackle.

Answer 2

First use Lazy Loading: Only add home component in app modules and load other component as a lazy load.

Second use Angular universal for server side redending and seo

And you can also load image as lazy load, in init time you have to use default image when image is loaded then replace from default image.