All I have is one graph / chart, and some tooltips by ExtJS on my website. Why does it have to make between 400 and 600 requests to my server just to load that? It's making calls to a zillion different .js files...
clickrepeater.js
manager.js
seperator.js
offset.js
button.js
textmetrics.js
item.js
box.js
auto.js
And that's just to name a FEW. On a slow connection, these requests take as long as 30 seconds to complete! And yet, I only have just the one production ext.js referenced by my html code. It's ext.js that's making all these additional requests.
Because you're running it in development mode where it loads each source file individually for ease of debugging (and some other things). You need to make a production build using Sencha Cmd which will concat all the required parts of the framework + your app into a single file.
Related
could anyone please help with my webbsite loading times?
Whilst desktop pagespeed ranks 99 the mobile version ranks 75 only.
https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.muscle-cars.eu%2F&form_factor=mobile
What could I do? I already use next/image and wepb, do I have to compress it more?
Yesterday I tried to remove Catamaran font from the website and it speeds up to 96, but it is very unlikely that removing 80kb font would help that much, I think there is something blocking up loading the font. I tried Google API and self hosted both similar result.
Thanks for help.
Here is the result of your website test, we can see that the mobile version only ranks 75.
I used chrome devtools to check this web page and found some issues to enhance your web user experience.
Your website gets the raw css and javascript files from the server. It's too big and will waste more time. You can reduce file size by using ugly javascript and css files when the page is first loaded.
Your website is getting too many javascript files on first load. I found more than 10 files to load. In mobile 3G networks, more time is wasted. So use webpack or other bundling tool to combine these files into fewer files.
You can reduce file size by using tree shaking javascript and css.
Your web page home page can use server-render teck, which renders javascript in server and sends whole html file to mobile browser.
I am working on a spring framework project optimization. Its taking 2 minutes+ to load. When I checked in
Network console, it was js, css content download which were the main reason. 200KB file taking 2 minutes to be downloaded. Every 1KB taking 2-8 Seconds to be downloaded(other files).
Generated .war file relocating those css, js files in webroot but nothing improved.Where should I investigate to find the delay in content download? Could modifying .jsp files directly in .war file be helpful? It's not in localhost, I am deploying it in User Acceptance Testing server(UAT).
Tech Stack : Spring framework, Angular, GWT.
I have a website which have loading time of 10 sec, and which we want to reduce to 3 second or so. I have two questions on it:
1. When I do an analysis of bundle loading in the network tab of dev tools, I can see some JS/CSS files which have very less usage in home page load. But since bundle.js contains everything, I can't see what JS part of it (which is unused), is present in which source code file. Is there a tool or way to do so, so that I can reverse map (not covered JS and css), to an actual source code file and modify it?
2. While the bundle is downloading, is there a way to show a spinner or progress bar to the user to wait for some more time, which is obviously better than showing blank page?
Tried lighthouse and analysis of loading using network tools
React supports code splitting : https://reactjs.org/docs/code-splitting.html
If you implement code splitting in your app, then you can use a fallback component.
I'm building an app in React Native. I want to include a field in the settings screen which displays the build version of the app. This is because I test the app on several devices (5 different ones at the moment). A build label would therefore be useful just to be sure what bundle I'm running. The build label will basically just state the date that the bundle was built. For instance 20181201 (which would be 1st of December 2018). I can quite easily just create a constant, and update the constant manually before building a bundle. However, this relies on me remembering to update that label. It would be nice if this label was automatically generated at the time of build. Any good suggestions as to how I could achieve this in React Native?
If you write the build number you want in:
Android - app/build.gradle versionCode property
iOS - ios/[APP_NAME]/info.plist CFBundleVersion property
You can use react-native-device-info.
Check out getBuildNumber method.
I use a json file that contains information about the build. This json file is then imported and its contents are used to make a footer on the settings page, this allows me to track which build is on which device.
Personally I use Bitrise to make my builds, so in my workflow there I have a step that runs a bash script that updates the json file with specific information. i.e. date and time of build, Bitrise build number etc.
Alternatively if you don't use a CI suite like Bitrise
For iOS you could use a Pre-action in Xcode and run a script that would update the json file when you create your archive. Edit schema... select Pre-actions and then add a Run Script.
For Android you could use a custom task as explained in this SO answer Execute a custom independent gradle task in android studio
This is probably a newbie question but....
I am developing my first mobile website using Sencha Touch 2. I now deployed the app to my Hosting server but.....it takes about 11 seconds before it even starts up ??
This is when I am running it in Chrome on my development machine.
It does 247 request with a total of 1.8 MB.
247 requests ❘ 1.8 MB transferred ❘ 10.65 s (onload: 10.66 s, DOMContentLoaded: 352 ms)
Is this normal ? I mean, this is only the framework stuff.
Thanks
You need to concatenated and minimize all of the files that you use into one big file
Use Sencha Command for Sencha Touch 2.1
sencha app build
If you've deployed development version directly on server then overall loading time will increase. To deploy app, you should build your app with compressed css and js. Follow this guide to start with. After successful build you'll get minified version of js files. Consider compressing css files too. To compress CSS files, you can use compass. Although, you've developed app already, consider going to theming guide that covers how to compress css files for production version.
As you've mentioned app is making 247 request. I assume that includes images too. You can base64 encode images directly into CSS files to avoid frequent communication with server. Another way to reduce image requests is to use css sprites.
SO also uses css sprites for different images seen here.