How to reduce page load time?

Question

I have a web page that I run locally in a WebKit mobile browser (not on a web server) that contains about 27 MB of JavaScript files, YES 27 MB of JavaScript files. This is because I have custom JSON objects and arrays hardcoded inside my .js file.

I split the full JS into 27 small .js files about 1 MB in size.

The problem is that when I include these .js files inside my header, the page load time is greatly increased.

I would like to know how to reduce page load time in such a case when js files are needed.

1) Is there a way in which we can embed .js files inside HTML after the page is loaded for the first time? (because the content of JavaScript gets into the image only after the link is clicked on the page)

2) What would be an optimistic solution for including so much JavaScript content in a web page? I have reduced all my js files to minimize file size!

Thanks in advance.

UPDATE 1:

The page is executed locally and the WEB SERVER is not involved. Finally, it will work in a mobile browser and so that as the whole problem arises, that is, the download time is very long in the mobile browser, so you want to reduce the initial download time.

Answer 1

At 27 MB, it will always be slow, since you are going to work within the limits of memory on the device.

Most mobile phones do not have a lot of RAM, and as soon as you download and parse JSON, it will use more than 27 MB

Minimization will help you, but gzip will not, as the browser still needs to unzip it)

If you just render HTML in response to user actions, why don't you create HTML snippets instead of JSON and extract them and paste them into the DOM when someone clicks on the link?

Answer 2

(Note: most of the following was written before you said that you use the HTML file locally in a mobile browser without using a web server. Most of them are still used, some of them do not work, but I left it for others who really make webpages.)

1) Is there a way in which we can embed .js files inside HTML after the page is loaded for the first time?

Yes, it is really very simple (example: run / change ):

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

Note that the script will load asynchronously (you cannot just consider it loaded after calling appendChild ).

But if your goal is only to show the page while the 27 MB file is loading, you can simply put your script tag at the end of your page immediately before the closing </body> . Update . If you are using a local HTML file and not a web page, I think that is all you need: one script tag at the end of the page loading your 27MB.js.

2) What would be an optimistic solution for including so much JavaScript content in a web page?

Ideally, reduce the size, if at all possible. If you can claim assets as needed (using the above technique or ajax ), do it instead. Update . If you use a local file, not a web page, you basically cannot do ajax reliably. But you can demand - download what you need when you need it, adding script elements as described above.

Regarding your 27 files 1 MB. If you tightly bind script tags to them, It is better to make one 27 MB file than 27 1 MB files. Minimizing HTTP requests to your server (ideally in most .js files and one .css file) is one of the key ways to improve page load time. In your case, however, you said that the various parts are not needed until various objects are pressed, so you will probably get the main file (which, we hope, will be a lot less than 27 MB), and then a bunch of other things that you require at boot (as above).

Other things you can do:

• Minify , compress, or "compile" your .js files (this means that you will have separate "source" and "production" files, since this is usually a one-way process that removes comments, etc.)
• Make sure that your server serves .js files with gzip compression (for example, with Apache you will use mod_deflate ); you can check that it works with various tools

It’s also very worth reading: “Best practices to speed up your site” , which makes the above points and the whole group.

Answer 3

You need to merge the * .js files into one again. This will reduce the number of server requests that will cost on time!

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

You must also place these files in the page footer to allow the page to display when loading js files into the client browser.

Another thing that may help is a long file caching time. This will allow you to “save” your JavaScript in the cache of the client’s web browser, and the next time it is not important to reload.

Lastly, I'm not 100% sure this will help, but try lazy loading JavaScript.

---

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 useful source

http://gtmetrix.com/dashboard.html

Checks the speed of your website. This will help you find a way to optimize the speed of your website :)

Answer 4

I will load the data after loading the page using ajax. This is after loading the page, you make an asynchronous request for 27 MB of data. It also allows you to ultimately add loading animations when transferring data. You can take a look at jquery to implement this.

Answer 5

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

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

Answer 6

Finally, I solved this problem by creating my own application for a mobile device, and not using hybrid (HTML5) technology, that is, I moved the 27 MB JS files that contained the actual application data to the sqlite file and used it directly in my application for Android.