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.

Answer 1

(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.

Answer 2

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?

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