Angular7 slow page load - javascript

I have an Angular7 app that was passed onto me. The First Contentful Paint and Time to Interactive is about 6 seconds! It seems to stall(pending) for about 4 seconds on https://www.google-analytics.com/collect and https://fonts.gstatic.com/s/opensans API call, which I found is related with google fonts. But this might not be the cause of the stall. I tried to use lazy loading modules to get bundle smaller. Currently we are at: styles.css 465B, runtime.js 1.1kB, polyfills.js 36kB, styles.js 10kB, vendor.js 583kB, main.js 142kB. Bundle size doesn't seem to be an issue but browser(chrome) still stalls for 6 seconds before user see the home page. Does anyone have any advise?
I also looked at SSR but it seems to be very complicated to setup considering we are serving on AWS S3 using content in dist. I am building with:
ng build --outputHashing=all --prod
Please help. I am want to make sure there is nothing else I can improve on before trying SSR. Thank you!

First of all, you can try and update Angular version to the latest, as it brings performance upgrades and bug fixes. That is what I would do before SSR. Nevertheless, SSR is a "must", if you want better user experience. Considering your bundle size, it is not so big. My app is triple size as yours and it loads faster. As I said, I render on server (SSR) and using v9 so far. But is very hard to answer the question without any code samples.
Cheers!

You can try to optimize your code a bit and use the AOT compilation mode in the time of building.
I found a good article, you can explore this and understand in what way exactly you can improve your code and reduce loading time.
https://www.dotnettricks.com/learn/angular/tips-to-optimize-your-angular-application

Related

Reduce Javascript size in Rails app and improve performance score. Maybe issue with ESBuild?

Not specifically a Rails question, but a question within a Rails app.
In my app I am using the jsbundling-rails gem configured with esbuild.
This gem adds a build line to my package.json file. It works and compiles all my JS and runs fine. However, I found that the generated file is rather large so I started looking at ways to optimise it.
My esbuild statement at this point looks like:
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"
Firstly I thought I could try making my imports conditional. Eg, only import them when they are actually required. I asked another question on how to do that here.
I learned quite a lot digging into that, but at the end of the day it's made no difference to the output of my JS weirdly.
Chrome currently says that my main JS file has 91% code unused. It looks like all the imports are still being compiled together, whether they are statically or dynamically imported. Why can this be?
I then looked further into esbuild, I spotted the --splitting flag. It sounded reasonably correct so I updated my build script to be:
"build": "esbuild app/javascript/*.* --bundle --splitting --format=esm --sourcemap --outdir=app/assets/builds"
This caused a huge amount of outputted JS files (I think they are referred to as "chunks".
I ran my app, and the JS failed to load. The console stated that
Uncaught SyntaxError: Cannot use import statement outside a module
I wasn't 100% sure why was the case but I just guessed that I needed to add type: "module" to my javascript_include_tag in my Rails application layout view.
This made the JS load (which is good :-) )
BUT... The percentage of unused JS code is still 84% of my application.js
So..... my questions are as follows:
Are my dynamic importing of modules working?
Why does static or dynamic importing appear to make no difference?
How can I effectively reduce the size of the output code and reduce the unused percentage of JS on my home page?
This all started because I ran Google's Lighthouse test on my site and it reported my Structure and Accessibility to be practically perfect but performance was < 40. I am aiming to solve this.
I look forward to hearing from you with ideas on how I can try to fix this and improve my Lighthouse Performance score.
Are my dynamic importing of modules working? Why does static or
The paradigm you want is called Propshaft. Try looking at the SProckets -> Propshaft
https://github.com/rails/propshaft/blob/main/UPGRADING.md
Why dynamic importing appear to make no difference?
Because even though ESBuild allows for ES Module syntax (import statements), it still bundles everything into "1" big file. (1 big file for each javascript_include_tag you have, of course).
How can I effectively reduce the size of the output code and reduce the unused percentage of JS on my home page?
The sprockets paradigm was built for the HTTP1 web when keeping connections open and progressive download wasn't realistic. HTTP2 changed all that and now it's more efficient to do code splitting as you want to do. But the Rails world is still very behind and most apps still use Sprockets and try to optimize/minify was much as possible.
I'd recommend you take this course of action:
(1) Try the old-style way first. Remove anything unnecessary, split your app into different sections and load different manifest files for different sections. Use minification. See how far that gets you.
(2) Start experimenting with the new Propshaft for a few weeks until you fully understand it. If you feel it is solid, migrate to that.

Angular Application's first page very slowly to load

I'am hosting my .Net Core / Angular application.
When I visit the url of my application the first page makes more than 90 seconds to load. I found that these files are very Big (15MB): styles. J's, scripts. J's, main. J's, vendor. J's, pollyfills. J's.
So I used this website to minifier the js code https://jscompress.com/
Now my application is faster, but I think that it can be faster.
Do you have any idea please ?click here to see the image
Not sure exactly how you have your application structured, but if possible you could break things up into lazy loaded modules.
I would check into this article, which mentions a variety of possible things to look into when trying to improve load times: https://medium.com/khojchakra/reduce-initial-load-time-of-angular-application-9b9ed4a6bfc9
Also try to serve your application AOT when you go to actually serve it for production if you are not already. This could speed things up quite a bit; but not during local development. the app reload times are quite depressing when making code changes with aot enabled
You can try to build with ng AOT option:
ng build --aot --build-optimizer.
You can find out more here https://angular.io/cli/build
With this your app should load faster
Always use latest versions of angular. Do code splitting. Lazy loading the modules reduces your initial bundle size. Remove unused imports. Try to avoid bloated third party libraries. Proper segregation of functionalities into separate modules.
Advanced: AFter doing all of the above, if you still want to reduce your bundle size. Try Using bazel for build process. https://blog.mgechev.com/2018/11/19/introduction-bazel-typescript-tutorial/
More Advanced: Still you want to reduce your bundle size. Wait for Angular Ivy(public release).

React website slow to load - Is it due to many static assets?

I'm ML pro getting up to speed on frontend. So I added a bunch of fixed assets like images and stuff like that in the assets folder for React and I feel like my website is slow.
Do you think the fixed assets, the images I added is the reason for the slowness?
Thanks for the help!
Yes, all assets slow down your website loading time since they have to be downloaded in case they have not been cached in the first place.
You should look into code-splitting your app official React docs. that way you can load your JS code in chunks and only when needed. Second thing is that you should optimize your assets, your hero image takes up 1.7 MB which is really a lot for someone using a slow internet connection (3g). Also, someone already mentioned in the comments to look into the critical rendering path, no need to load a footer if your user is going to be looking at a pretty hero image. :)

Webpack chunks are not reloaded on deploy

I've been having this issue for awhile now, first describe here. After upgrading to Webpack 4, it seemed like the issue resolved itself, but it doesn't seem to be the case.
The issue here, is that after deploy, when the chunks get updated, the server is not aware of it? It's quite hard to reproduce this issue and I never were able to do it on demand. But sometimes, if I have the page hanging, the browser will try to grab, what I assume, cached versions of webpack chunks for css and js. But as those are outdated now, I end up with this and a empty website:
Reloading the page, sometimes having to do a force reload, is the only way to fix this, as browser redownload the correct chunks. I'd love to get some pointers to resolve this, as I've never managed to find anything written on this and how to fix this. I am planning to either drop chunks all together or provide an inline JS that will ask to reload the page if it detects any of these 404s... which is not ideal way to do this.
You can find my webpack configuration in the link above. I am deploying this to Heroku, my app is Rails 5.1, with Vue.js 2

Create-react-app pagespeed confusion

I've been facing pagespeed problems using this tool from google
My goal is to reach ~95 on pagespeed insights;
I use create-react-app, and after I've:
Enabled gzip in nginx for all project files,
Compressed all images as suggested by Google,
Used loadCSS polyfill to avoid css-blocking while page renders (I placed links of sanitize.min.css, and slick-carousel I use in public/index.html as suggested),
Loaded fonts as suggested here using fontfaceobserver,
Reviewed my css files, reduced amount of inline-css in js files to minimal
my current pagespeed is Medium(72) and Good(85) and PageSpeed Insights suggests to remove JS file which are blocking download (this is my main.js from react) and optimize CSS delivery (which is my main.css), and to make use of browser-caching (which I think is not the case here).
I seen similar questions and I tried to load pages as chunks using code-splitting (from this tutorial) but it only reduced the pagespeed from what I have now, to 40-70 for mobile and for desktop respectively which makes no sense to me because why smaller chunks of code would do this? I also tried different approaches of react-router code-splitting but they didn't help to improve pagespeed at all, even worsen it.
I thought the issue might be that I
#import "material-components-web/material-components-web";
In my index.scss which is pretty heavy itself, I tried to import separate MDC packages but it didn't affected page speed at all. What can be done to reach desired 90+ pagespeed in my case? Thank you!
Well create-react-app is a broad starter project, meaning it is made with different things in mind, and with that, come ~50-100 dependencies which most of them you probably don't need/use. Such a simple tool comes with it's downsides like this. If you are a beginner it is a very awesome tool to use, if you are advanced you'll see you have to eject to make more advanced config changes.
If you really need to tweak it for you every single need, you need to eject, then start by cutting off dependencies that you don't need, but if you are a beginner, I'd say stick with it.
I know this isn't a precise answer to your question, but broad questions receive broad answers :)

Categories