I have an angular2 firebase app.
I've noticed that when live it task 4 seconds to get 12 JavaScript libraries that I store locally in my prod build and then it shows the app.
I need to get this 4 second delay down to 2 seconds.
When I watch the sources in the console in chrome it just pauses for 4 seconds then loads. It seems to be render blocking JavaScript the correct term?
Things I've tried:
HTML5 async and defer on the 12 JavaScript libraries.
I tried combining the libraries into the same file but that gave me loads of errors.
My CSS is fine and all minified.
All the js 12 files are minified.
The 12 JavaScript libraries are all stored locally and not requested from other servers.
I have images on my website and they are all optimized and compressed and placed on a CDN.
I use cloudflare and all the performance toggles are on.
I host with Firebase.
The JavaScript files are below the and not in the header.
My PageSpeed Insights scoress from google:
(Resource: https://developers.google.com/speed/pagespeed/insights/)
61/100 for mobile.
83/100 for desktop.
I can't use webpack.
I just want an easy method for showing the user interface and then load the libraries.
Let me know if you have any further questions.
Angular 2 generates your user interface, so what you are asking seems impossible at first. But you are in luck: the angular 2 team is working on something to help you out. It is actually already ready to use, but i don't think you can use it in combination with Firebase hosting. Take a look at https://universal.angular.io/. It allows you to render the initial view on the server side.
Related
I am trying to serve a React widget for a Chatbot messenger like Intercom widget. Everything works fine until the SEO team argues with me about the size of the downloaded script.
I'm using:
React 16.13.1
React-scripts 3.4.1
Typescript 3.9.6
Redux 4.0.5
Styled-components 5.1.1
Material-UI 4.11.0
...
It weighs ~570k (gzipped) and that costs around 25 points on Google lighthouse benchmark.
So, just like Intercom did when they face the same issue, I split my code into chunks using dynamic import() feature. Now, when I run the benchmark it gives a good mark (I gain ~15 points) and everything goes green on dev mode.
But, I'm not sure anymore:
how to integrate my widget's chunks on customer's pages? (of course not as they are in dev mode: 5 separate script tags)
Which chunk/script from the generated ones should I use, and which one come dynamically?
do chunks really call each other only when needed? (because they don't look so!)
Do orders make a difference? (JS so I think it does)
I used to integrate similar script before modification:
<script
src="cdn.myhost.com/script.min.js"
data-lang="en"
data-license="XXX-XXX"
data-options='{"tags":["test"]}'
/>
Any suggestions will be helpful!
I have integrated React.js with my asp.net MVC application. The main thing is it loads fast enough when I am debugging locally or when I am entering the website consecutively, which is I assume due to caching.
But
when I am entering my website for the first time after like let's say, half an hour the .jsx file takes a crazy long time
The time and the values:
It took 32 s! I hope that's not normal and it's not that big of a file either. It's only 17.6 KB.
Now I am pretty new to React.js, I am wondering what I have done wrong or could this be happening due to a slow server, I don't have the best server at my disposal but other websites on this server are nowhere near this slow.
Thanks in advance.
So apparently you can preload scripts in MVC projects. Right inside App_Start > ReactConfig.cs and add the following line inside Configure():
ReactSiteConfiguration.Configuration = new ReactSiteConfiguration().AddScript("~/Scripts/gapi.js").AddScript("~/Scripts/firebase.js").AddScript("~/Scripts/React/Home.jsx");
As you can see I am using gapi and firebase scripts which were also required in my Home.jsx, but the problem is I cannot reach the functions inside these scripts from Home.jsx so this all started to slowly drive me insane.
What I did as a solution was simply give up trying to use Reactjs inside asp.net MVC and made a separate proper reactjs application and I am using C# as a web service. Now I am having no loading time problems, it loads like lightning.
We have a .net web forms application, running on iis on our own server that has show some strange behaviour in the last 24 hours.
Rollbar notified me of multiple errors all saying certain js functions/variables can't be found from a host of users - essentially breaking the app. I've come into work today, loaded the site up in chrome dev tools only to find it did not have any source file shown, and therefore no js files to load/step through (css & image files are there though).
To make matters more confusing, after refreshing the page everything is there as it should be?!
An updated build of the app was released yesterday, so I'm guessing that has something to do with it?
Honestly any speculative pointers on things we can look into to prevent it happening again would be appreciated.
If you have multiple javascript files and your code is running before its dependencies are loaded, then you get 'undefined' errors.
After page refresh the dependency files are already cached, so they load immediately, almost synchronously. That's why you dont get errors next times.
Try to disable cache in devTools and reload it a few times checking if next attempts are still working.
If that is the problem, you might consider modularizing your JavaScript code and loading it as asynchronous dependencies, for example by using browserify, webpack or even require.js. Anyways, you can find more in the subject looking for "javascript load order".
i am trying to improve the performance of my web application.
It is a java based web application & deployed on an amazon cloud server with Jboss & apache.
There is one page in the application that is taking 13-14 seconds to open. The functionality is so much that there are about 100+ http requests that get executed on page loading time. The Js & css files are taking too much time to load.
So i moved all of the Javascript code from my JSP page to new JS files. Minified the JS & css files. Still there is not much difference in the page load time.
There is dojo data on this page as well which takes time to load.
Is there any other appproach i should try to tune this page?
Can something be done at the Jboss or Apache level?
Apply caching for images etc. More here
Use CDN for any external libraries you use (like jquery). More here
Use a library for your js scripts like RequireJS to optimize your css and js files. You can concatenate (merge multiple js files to one) your code. This will reduce the number of ajax calls (that's what the browser does when it sees a js or css dependency) (As #Ken Franqueiro mentions in the comment section, Dojo already has a mechanism for this). More here
Optimize your images. Use appropriate dimensions. Do not use full blown dimensions if you just intend to use it for a 10x10 container. Use sprites if possible. More here
Show a message/loader to show the user some progress. This will minimize the user restlessness More here
If you load data that takes too long, then show the page and load the data afterwards. This will too give some sense of progress to the user.
If the response is very big you can compress your response data. Be careful though that the browsers your application supports, can handle the compressed information by default, or add a custom mechanism to decompress the data. More here
Use some profiling tools like Chrome Development Tools or FireBug for Mozilla.
Take a snapshot of your network traffic and check where the bottleneck is.
In Chrome you press F12 and then select the Network tab.
Thought I would open this question to the javascript community. Does anyone know if its possible to combine CKEditor into 1 file? I want to try and integrate it in one of my desktop applications which uses a web viewer - I can execute one flat file in my web viewer internally in my application otherwise I'll have to reference to the CDN which I'm hoping to avoid. I want to develop an app that does not require external web service.
Performance should not be an issue as the file would be in my application running locally - I would include all the licenses/readme etc etc.
Is there a tool out there that can help me to achieve this, and has anyone done it or is not possible due to the architecture - the way CKEditor has been written?
Thanks
CKEditor loads some JS files on demand (i.e. dialog definitions). There are also several skin CSS files, sprites with icons and separate langfiles. I hardly think there's any reasonable way to combine all these resources into a working JS bundle without architectural changes.