How to reduce the page load time?

Question

I have a web page I run locally on a WebKit mobile browser (not on a web server) which has around 27 MB of JavaScript files, YES 27 MB of JavaScript files. It is because I have custom JSON objects and arrays hard-coded inside my .js file.

I have split the complete JS contain into 27 small .js files of around 1 MB.

The problem is that when I includes these .js files inside my header, the page load time increases very much.

I'd like to know how can I reduce the page load time in such a case where the js files are required.

1) Is there a way wherein we can inject the .js files inside the HTML after the page loads for the first time? (because the JavaScript content comes into picture only after a link is clicked on the page)

2) What would be an optimium solution to includes such a large JavaScript content inside a web page? I have minified my all js files to reduce the file size as much as possible!

Thanks in advance.

UPDATE 1:

The page runs locally and no WEB SERVER is involved. Finally, it would run inside a mobile browser, and so that's how all the problem arised i.e. the load timing is very high in mobile browser, so want to reduce the initial load time.

Cirrate

Do you absolutely need to code those in JS? Why not storing the data in a DB and retrieve it (e.g. via AJAX) only when needed? 27 Mb of hard coded data in JS is just plain wrong. – Seventieth

its actually all static data which I converted into JSON, and I don't want any network connectivity. Besides, JSON can be very easily processed using JavaScript... so I have taken this approach... – Cirrate

what do you mean with "I don't want network connectivity"? Is this running locally? Otherwise you will still have to download the 27 Mb of data (unless, of course, you cache the js, which I guess may apply if it's static data). – Seventieth

Yes, it is running locally, NO WEB SERVER involved.. the loading time takes in the webkit mobile browser – Cirrate

@mahi: Wow is that information that should have been in the question. I've added it. For crying out loud, if you say "web page" people are going to assume you're talking about a web page, e.g., a page on the web. Not a local HTML file. Failing to mention that just wastes everyone's time. – Citriculture

@T.J.Crowder Updated my question to include that info! – Cirrate

@mahi: As I said: I already had. – Citriculture

Answer 1

At 27MB it's always going to be slow as you're going to run into the memory limits on the device.

Most mobiles don't have a lot of RAM and once you load and parse the JSON it's going to be using more the 27MB

Minification will help you but gzip won't as the browser still has to decompress it)

If you're just rendering HTML in response to user actions, why don't you create HTML fragments instead of JSON and fetch these and insert them into the DOM when someone clicks on the link?

Simonesimoneau

Answer 2

(Note: Most of the below was written before you'd bothered to tell us you were running an HTML file locally in a mobile browser without using a web server. Much of it still applies, some of it doesn't, but I've left it for others actually doing web pages.)

1) Is there a way wherein we can inject the .js files inside the HTML after the page loads for the first time?

Yes, it's actually really easy (live example: run / edit):

var script = document.createElement('script');
script.src = "path/to/the/file.js";
document.body.appendChild(script);

Note that the script will load asynchronously (you can't just assume it's loaded after the appendChild call).

But if your goal is just to have the page showing while the 27MB file downloads, you can just put your script tag at the end of your page, just before the closing </body> tag. Update: If you're running a local HTML file, not a web page, I'd think this is all you'd need: A single script tag at the end of the page loading your 27MB .js file.

2) What would be an optimium solution to includes such a large JavaScript content inside a web page?

Ideally, reduce the size if at all possible. If you can demand-load assets as you need them (either using the technique above or ajax), do that instead. Update: If you're running a local file, not a web page, you basically can't do ajax reliably. But you can demand-load what you need, when you need it, via adding script elements as per the above.

Regarding your 27 1MB .js files: If you hardcode the script tags for them, it's much better to do one 27MB file than 27 1MB files. Minimizing HTTP requests to your server (ideally at most one .js file and one .css file) is one of the key ways to improve page load time. In your case, though, you've said various parts aren't needed until various things are clicked, so you'll probably end up with a main file (which will hopefully be a lot smaller than 27MB), and then a bunch of other things you demand load (as per the above) as necessary.

Other things you can do:

• Minify, compress, or "compile" your .js files (this means you'll have separate "source" and "production" files, since typically this is a one-way process that removes comments and such)
• Ensure that your server is serving .js files with gzip compression (for instance, with Apache you'd use mod_deflate); you can test that it's working with various tools

Also very much worth a read: Best Practices for Speeding Up your Website, which makes the points above and a whole bunch more.

Citriculture

Hi, thanks for your reply. My doubt is: Do I have to create a script object as you have shown for all my 27 small js files or is there a shortcut for it? – Cirrate

@mahi: ("question", not "doubt") If your goal is just to load it after the page has loaded, just do one big 27MB file. But you're much, much better off demand-loading things as you need them. Presumably you'd put the script creation thing in a function and call it as necessary with the relevant script's URL. – Citriculture

@mahi: Wow is that information that should have been in the question (and I've put it in there now). You can still demand-load assets (via script elements as shown under #1 above; ajax is tricky when running using a file:// URL), but if it's running locally, I'd expect just a single script tag at the bottom, just above the closing </body> tag would be good enough. – Citriculture

Yes, my mistake, may be I should have added that the page runs only LOCALLY and not on a webserver... :-( – Cirrate

Answer 3

You have to combine again that *.js files into one. That will reduce the server requests that cost in time !

Compress your JavaScript content with that tool : http://www.refresh-sf.com/yui/ or that http://closure-compiler.appspot.com/home

Also you have to put that files at the page footer, in order to allow the page to be rendered while you download the js files into the client browser.

Another thing that can help is the long time caching of the file. This will allow your JavaScript to be "saved" into client web browser cache and next time is not important to re-downloaded.

Finally I am not 100% sure is that help but try lazy JavaScript loading.

---

Edit for Lazy Laod

<script type="text/javascript">

    (
        function()
        {
            var sc = document.createElement('script');
            sc.type = 'text/javascript';
            sc.async = true;
            sc.src = 'http://www.url-to-your-javascript.file/my-javascript.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(sc,s);
        }
    )();

</script>

---

Another helpful source

http://gtmetrix.com/dashboard.html

Tests your web site speed. This will help you find your way on speed optimization about your web site :)

Spectrograph

Yes, I have compressed all my JavaScript contents (updated my question). Do you have any links or sample for lazy loading JavaScript.. I am anxious about this approach! – Cirrate

+1 for the links for compressing the js files and suggesting to load the js files at the bottom – Cirrate

Best approach for me is the one used by Google Analytics ;) I will edit the code above with the source code of lazy loading – Spectrograph

s.parentNode.insertBefore(ga,s); - nice copy&paste from google ads :p but you probably wanted s.parentNode.insertBefore(sc,s); – Papism

xaxaaxaxa. I Just says that in the above comment. That I like the Google Analytics Lazy load. :P I will correct it now – Spectrograph

Answer 4

I would load the data after page load with ajax. That is after you loaded the page, you make an asyncronous request for the 27MB of data. This allows you also to eventually add a load animation while the data is transferred. You can have a look at jquery to implement this.

Lakeesha

Answer 5

As a best practice, you should always load javascript in bottom oh html file. Put css at top, and js at bottom will greatly help.

27MB is too large. Why are you using hard code in js. you can use ajax. Take help from an expert, may be he can minimize your js

Aulos

Please refrain from adding a signature to your answers - especially one containing a link to your website. SO automatically signs your answers with both your nickname and your gravatar/identicon. – Papism

Answer 6

I finally solved over this problem of mine by creating a native application for the mobile device rather than using the hybrid (HTML5) technology i.e. I moved the 27 MB JS files which were containing the actual app data to an sqlite file and used it directly in my Android app.

Cirrate