I am working on next js based react app and I am trying to minimize the First Contentful Paint(FCP) time, I have tried dynamic imports wherever possible, moved images to CDN but it didn't help. is there any other way to improve the FCP score for my site page. I have nothing to share as a code or what I have done so far. please anyone suggest how can I improve the FCP score.
Well you can do many things :
1- Using Next js build in <Image/> component
2- Minimizing your css files with PurgeCss
3- Using SSG and ISR rendering techniques
4- Use #Next/bundle-analyzer to analyze your js bundles
and so on .....
Related
i am working on a angular 8 application , when user clicks on a button it should redirect to a vendor portal which is completely a different webapp (diff Url), when user redirect to vendor page , user should see the same header ,footer and navigation what i have in my web application. but the vendor application is on angularJS(1.x).
so my question is can we convert the Angular8 project/component into a standalone JS file and ask the vendor to load the JS file in their application ? this JS file should contain the logic to replace/inject with in their page. for ex: we ask the vendor to create a html element with ID name "custom-header" in their page and ask them to add my JS file (hosted on CDN ) on their landing page, and in my JS file we need to write a logic to look for "custom-header" Id and replace with our content ?
so can we write custom code in our Angular8 application and export it as a standalone JS file ?
Note: my Header/Navigration/footer angular components are shared components , i want to use the same component in my webapp as well as vendor component
Here's the shortest answer: No.
Here's the 'been there done that answer':
I've spent time trying to make things backward compatible and it's rarely worth the effort. I have written alot of angularJS and Angular2+ code and believe that any time you spend trying to crowbar a solution here would be better spent just making the angularJS module. AngularJS a simple, fast framework and you could have your result quickly. Alot/most of your logic/html could be directly ported over with small mods.
Here's the TL;DR answer:
I hate to ever say 'You can't do that' with technology because I'm usually wrong... but you can't do that directly. Well, I guess you could use iframes but that's not a good idea.
While there is a path to incrementally merge angularJS into an Angular 8 app, the same is not true of the reverse. However, you should be able to leverage much of the existing logic from the A8 app into a module that angularJS could just import.
Without seeing how intricate the A8 component is, angularJS is alot simpler and it's relatively easy to throw together a controller/directive/view single import. I don't see a clear path to automatically updating the aJS code when you update your angular 8.
I am new to angular js, I have started refactoring code in my project which was developed by some developers previously working in my organization. There are some problems in the code that is making my web page slow.
There is a dashboard page with all the feature links over there. On click of each and every link the html is getting replaced with the specific feature. Now to make this happen the developers have included all the controller/service js file in the dashboard page itself, which is obviously making the page to load slow.
Please help me out or at-least give me a direction in which i should start thinking.
Sounds like you are trying to optimize something that you are no investigated.
You can use oc-lazyLoad package in order to achieve your requirements, but bare in mind that, it only improve the first bootstrap nothing else.
From your description, it looks like you have a different performance problem, you should investigate it using devtools performance tab.
I am planing to develop a huge app (Let's say more than 100 pages with a lot of JS charts and maps) using React, React-Router and Webpack. I believe the size of final JS file is going to be so large and that is going to be so annoying for User during first page load.
Is there any way to load the final JS partially, for example based on the selected route? or I should stick to server-side rendering and using some other libraries like PJAX? I appreciate any other solution as well.
**I am developing a site ,in which front-end is made with Angularjs **
Site name is http://limokit.com/limolog but the problem is that , it take minimum 30 seconds to open the site page on browser. How to reduce this loading time?
we used ngRoute to change the states , but do not getting the result which we wanted to achieve . We also converted all html and js as minified one but it is also not effecting the loading issue for first time.
At first glance it looks like you're loading individual js and css file separately. This can slow down the loading of the page greatly especially on slower connections. The common optimization to do here is to group all js files and css files together and serve one single js and one single css file on production. I don't know what you're using to serve the JS/CSS files but I use compressor for Django.
Also, to further debug this problem, it helps if you look at the network requests that your page is doing on page load in the Chrome inspector. You can glean a lot of information by seeing where your bottlenecks are on page load.
In your site you're having 63 requests and around 3MB size (uncached).
As mentioned in the other answer package everything in bundles. E.g. vendor.bundle.js, bundle.js and bundle.css and also minify these bundles.
I would use webpack or gulp for bundling.
For debugging you can look in the browser console networking tab at the lower right in Firefox you can see a link to load time statistics and also get a info about caching.
The following screenshot shows statistics to your site (left with cache, right uncached).
.
Ditch all frameworks and libraries such as Angular and Jquery and use JSvanilla. Plain javascript is much faster to run(around 160x according to many resources i read..i also know that from my own experience).
Frameworks makes your site crawl.
My app is just 15 pages and does not contain a lot of code on the client side. The website is hosted with modulus from Amsterdam and I call it from Germany. It has an awful long loading time and I was the only one calling the website. The server stats:
154 requests transfered 9.14mb avg response 4.31ms
Most of the loading time seems to be vendor.css and vendor.js. As well as the css and js of the application.
What I already do:
load css first
try to load not needed js later like socket.io, google analytics but it is an Angular App so I need some JS in the head
uglify & minify my JS & CSS
concat CSS, JS to reduce requests
use sprites for small images which are used twice+
load diff. image sizes based on the screensize
use angular template cache for HTML (this adds a bit to initial loading time)
and probably some things I forgot to mention
Question 1
Why is there a gap in the waterfall, sure these are external scripts but it could already load the images in that time.
Question 2
Will loading the external JS from CDNs reduce a lot of the loading time?
I thought about s.th. like this: https://www.npmjs.com/package/gulp-cdnizer but I like it to have a similar prog. in dev and prod. Also my gulp processes are very complex, I really try to avoid restructuring too much there.
Question 3
How are things like gzip combineable with angular template cache?
Question 4
What else can I do to reduce the initial loading time,the loading time in the app is good.
because your site will not load until the dom will be load because this is a single page application, without angular the page have no idea what image to load...
YES! YES! YES!
my dom load was arround 11 secs... my js aggregated file was 850K.
with CDN my dom load was 2sec and the file was 250K (because good gzip)
YES YES YES! will help a lot!
use javascript aggregation to marge and minimize all your js to a single file (or 2 files).
if you have a lot of files, separate to 2 files, required and extra. what you need to load and what can be loaded later...
good luck :)