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

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. :)

Related

Angular7 slow page load

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

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 :)

AngularJS 1: Above the Fold rendering

currently I'm optimizing my AngularJS site and I'd love to reach those 100/100 from Google page speed insights. Do you know a good pattern for AngularJS to have good above the fold speeds for multiple page entry points?
E.g. Assuming there are multiple views which do not need lots of JavaScript executed (besides routing) for their above the fold content.
The only idea I had was stuffing the index.html file with the content of these above the fold elements and then do some routing in an inline script tag right in the index.html file, but this doesn't sound maintainable to me.
Another possibility could be a gulp task that assembles an index.html file - if that's a thing, I assume somebody has done this before. Have you heard of something like this?
Any ideas? Has anybody ever done this, or should I just accept my 83/100 and get on with my life?
Best and thanks for your suggestions!
I don't know much about how the Google Page Speed work but definitely you can try lazyload.js. All the js files that are not needed for the index.html can be loaded later and the page load will be complete in minimum number of files being loaded. Did you already try that?

Can requiresJS slow down a cordova app that is written using the angular framework?

I am wondering if a large angular app (around 10 megabytes of js, css, and html files) that has been ported over to Cordova will still need requiresJS for lazy loading.
The reason I ask is because I thought requiresJS was mainly focused on saving bandwidth by not loading the entire file at once and only loading the needed modules for the current view…
But since Cordova is native it seems like it would perform much better if it was all loaded from the phones flash drive at the same time?
Another question this brought up is does this stop the actual JavaScript from being loaded into memory until the user navigates to that view?
I tried to research the effects of requiresJS in Cordova applications and did not find anything that answered my question… Any help or insight would be greatly appreciated.
There are multiple reasons why you'd want to use a module loader such as requireJS beyond lazy loading / saving bandwidth: it will help you manage your dependencies and enable you to write better, modular code.
RequireJS will in no way influence the performance of your application negatively - loading speed for fetching .js files locally is negligible anyway.
Another question this brought up is does this stop the actual JavaScript from being loaded into memory until the user navigates to that view?
Depending on how you build your application, it is indeed possible (and encouraged) to load code on demand, a.k.a. lazy loading.
With requireJS it could be as simple as calling 'require('some-library')' at any point in your code where you need it.

Javascript/jQuery optimization for large projects (social media)

I am developing a social media website of the scale of LinkedIn, and I am struggling with few things related to JS. As project is going on, the requirement of JavaScript/jQuery is increasing. I am guessing by the end of the project, jQuery required on each page will be of average file size 1.5MB which is a bad idea. Functions like image upload, comments, like, updates is almost on every page.
My Question here is How to optimize jQuery? Any tricks or concept that I can use on this project which will lower file size as well as do these functions (there are much more than just above ones)?
Here I have already implemented:
1. Compress/Minify jQuery by PHP plugin
2. Use jQuery.getScript() to load file only when it required
3. Divide one large JS file into few separate files to finish loading faster
4. HTML optimization (Google Pagespeed)
I've heard of people using YUI Compressor, which 'has a better compression ratio' than most other tools. Not sure what you're using for compression at the moment, but this could provide a slight improvement. http://yui.github.io/yuicompressor/
Use a CDN (Content Delivery Network) to deliver jQuery. The browser will most probably cache the library and each page that loads, won't actually be needing to download the library again. This, if i'm not wrong, is one of the main reasons CDN's are used.
Otherwise, you should rethink your dependency/development strategy since you might not need jquery after all on each page. At least not whole of it.

Categories