How to reduce multiple JavaScript request from the server? which is causing the webpage load slow
minify your javscript code using
http://jscompress.com/
also make multiple javascript files to one or two and minify it and use
Bundling and Minification are what you are looking for. Please take a look here.
The provided link is for the asp.net mvc framework.
However, you can apply both bundling and minification to other web frameworks, they are both irrelevant as concepts with the web framework you use.
You can minified you javascript files. There are several online tool which will convert your javascript file to minified.
In order to reduce the page load time you can do the following things :
Combine Files – Using external style sheets and scripts is important to keep them from bogging down your page load times, but don’t have more than one CSS and one script file.
Use CSS Sprites – When you combine most or all of your images into a sprite, you turn multiple images requests into just one. Then you just use the background-image CSS property to display the section of the image you need.
Image Maps – Image maps are not as popular as they once were, but when you have contiguous images they can reduce multiple HTTP image requests down to just one.
Also make use of caching.Browser caching stores cached versions of static resources. This speeds up page speed tremendously and reduces server lag.
I'm the developer of FileLoader.js, which can be useful to you (it's also usable with other files than scripts) : https://github.com/Seb-C/FileLoader.js/tree/master
It reduces the number of files and the network load (but not the weight of the files) by loading any files you need from a tar archive.
Related
To improve the performance of our website, we have split the code into modules. (Separate JS files and CSS files for every feature.) Now, we will be loading only the core files during the page load and loading the remaining files, only when the user requests for the feature. instead of sending both JS and CSS requests separately - we are thinking of loading the concatenated file ( JS file and CSS file ) to save a request. is there a way ?
Note: we have already tried the following techniques
http://blogs.msdn.com/b/shivap/archive/2007/05/01/combine-css-with-js-and-make-it-into-a-single-download.aspx
Loading it via Ajax and splitting them via JS.
Consider that a carefully designed site will be able to download JS files and CSS files in parallel. So once you combine all CSS together in a single CSS file, all JS in a single JS file and you make sure the two can be downloaded in parallel (e.g. using JS defer) you should get better end-to-end performance than downloading a single file with JS+CSS concatenated (and this would also avoid the time spend in the processing of the ajax response).
BTW, all of the above can be done automatically and dynamically by mod_pagespeed (if you're on apache or nginx). Also, the page speed documentation gives some useful information on such issues.
If all of the above is not enough, you may want to look into CDNs (cloudflare is a good free starting point) and make sure that resource caching is optimally configured (mod_pagespeed partially does it for you).
This question already has answers here:
Put javascript in one .js file or break it out into multiple .js files?
(11 answers)
Should I copy all my JavaScript sources into one single file?
(3 answers)
Closed 9 years ago.
Ok, so I have a reasonable size project, where I'm using jquery backbone and a couple of other javascript libraries. I was wondering if I should have one file for my javascript libraries and another for my custom code. Or a bunch of separate javascript files.
It is generally a good idea to have fewer HTTP requests. So you should reduce the number of files as much as is reasonable.
My personal preference is to have three "groups" of JavaScript files:
Core file. Contains functions that are used almost everywhere and other useful page initialisation things.
Module files. Contains code that is used in several places, but not everywhere. Can be dropped in to provide additional functionality. For instance, if you have a script to handle date inputs, you could include it as a module file and add it to pages that have date inputs.
Page-specific files. These files contain code that is only used in one place. The only reason they're added as separate files than as part of the page itself is for cache reasons.
One big file. You should minify the code when it goes to production and compress it if its large. You want to make as few requests to the server as possible to improve page performance
It's best to separate it out, but not get overzealous. That way you can reuse your library code later. Also, everyone likes working with separate files more because it keeps things more organized.
That said, it's also best to give the user one compressed file so that everything can be cached easily, and this also reduces the number of page requests. Rails 3 does this automatically in the asset pipeline, for example. You can write a script to run your favorite compressor. But you shouldn't sacrifice code readability for this -- you can have your cake and eat it too!
One big file or two files: one small and one big.
To be clear, during the development it's good have separate files – maybe using something like requireJS. But when you deploy it, it's good compress everything in one file, in order to reduce the HTTP latency and requests.
I mentioned two files. In some cases, it could be good having one small file, that takes care of the "bootstrap" operations, meanwhile the "big file" – especially if it's really big – is downloaded.
This is useful especially for the first access, because users doesn't have your files cached yet.
As a rule, I go with as few as possible simply to reduce the number of requests made to the server.
As suggested it is nice to work with smaller files, but for production code, your build process should include optimization. Part of that optimization should be minimizing the file sizes and network traffic optimzation, by combining into a single js file to reduce calls made by the browser.
Depends on the size of your application. But typically always better to group your javascript files appropriately for better maintainability and re-usability.
You could use a JS module loader like RequireJS to load your JavaScript. At least the files will be organized. You can enhance server performance by making sure these files can be cached on the user's browsers so that they only download them once.
I have a HTML file with JS (jQuery) and CSS. I want a converter that converts all the files, minimizes it and just puts it all in a index.html for example. Google seems to be using this, they have no external files, not even the image, everything is just in one file and I'm sure pre-compiled before release.
Also is this a good idea?
This is not a good idea, in general.
Splitting out your CSS and JavaScript files means that they can be cached independently. You will likely be using a common CSS and JavaScript across many pages. If you don't allow those to be cached, and instead store them in each page, then the user is effectively downloading a new copy of those files for every page they visit.
Now, it is a good idea to served minified versions of these files. Also make sure to add gzip or deflate transfer encoding so that they are compressed. Text compresses nicely... usually around a ratio of 1/8.
(I should note that there has been one occasion where I have loaded everything into a single file. I was working on a single-page web application for the Nintendo Wii, which had no caching capability at all. This is about the only instance where putting everything into a single file made sense. Even then, it is only worth the effort if you automate it server-side.)
I don't recommend to concat CSS with JS.
Just put your css at the top of the page and js at the bottom.
To minify your CSS and JS you have to use gruntjs
Also I recommend you to read this article: Front-end performance for web designers and front-end developers
If your intention is to load the pages faster:
For images: try to use image sprites or images from different domains because browsers love downloading resources from different domains instead of just one domain.
For scripts as well as css: use online minifiers that can reduce white-spaces and reduce the size (if you are on a web hosting, your host may be already compressing the scripts for you using gzip etc)
For landing pages like index pages: If you have less styles then try inserting them inside the <style></style> tag, this will make the page load very fast, Facebook mobile does it that way.
If it wasn't a good idea, google wasn't be using it!
If you put everything in single file, you'll get less HTTP requests when the browser will check if the newer version of file is available.
You also get read of the problem that some resources are not refreshed, which is the headache for 'normal' developers, but it's a disaster in AJAX applications.
I don't know of any publicly available tool doing it all, surely Google is having its own. Note also that, for example in GWT, many such embedding was done by compiler.
What you can do is to search for:
CSS image embedder - for encoding images into CSS
CSS and JS minifier - for building single CSS/JS and minimizing it
And you need some simple tool that will embed it into HTML.
I've launched a redesign of our website and I'm using quite a bit of Javascript for the first time.
I've learned that I should be combining all my javascript and css into one file (each obviously) but while I know I can combine the css without problems but the javascript I'm not sure of.
I have to load:
jquery.min.js <-- I load the top two from ajax.googleapis.com, is that a good idea
jquery-ui.min.js
javascript for Facebook
some for google plus button
same for twitter
some for google analytics
then some inline stuff to hide divs which javascript users shouldn't see and that type of thing.
you can see it here: traditionalirishgifts.com
So can I just copy and paste the contents of all these files into one big file. Find some way to minify (haven't looked into that fully yet) it. Load this one file right at the bottom of my page before and bingo?
I'd use this tool: http://jscompress.com/
JSCompress.com is an online javascript compressor that allows you to
compress and minify your javascript files. Compressed javascript files
are ideal for production environments since they typically reduce the
size of the file by 30-90%. Most of the filesize reduction is achieved
by removing comments and extra whitespace characters that are not
needed by web browsers or visitors.
You should always be able to merge all your external JavaScripts into one file. You can use a server-side compressor to cache it and serve it as one file. It does put some constraints on the files, like which file should load first etc. Also, if there is a syntax error anywhere it will crash completely.
Keep in mind that 3rd party code like code from google can't be mixed in. Usually there is some kind of authentication going on (or an API key in the URL). If you try to cache that code, it will stop working after a while. So you do need to keep those separate.
What are the specific disadvantages (if any) of dynamically including the CSS and JS files for a website?
By dynamically, I mean, using the document.write() method generate and tags.
I'd like to use this technique on a very large, high-traffic website, since it allows me to easily manage which files are downloaded for which site sections, and to switch on a compressed mode in which only minified files are downloaded.
Thoughts?
Reliability. People may have JS
disabled, etc.
Debugging. Some browsers (IE) don't
give you the included file's line
number on an error, but simply the
document.write line in the main file.
The advantages are that you can manage and organize your code more easily and you're able to load only those scripts on the page that are absolutely necessary.
The disadvantage, one that I can think of, is that some website performance measuring tools such as PageSpeed and YSlow will warn you about the number of CSS and JavaScript files referenced by a page. Modern web development practices often encourage you to Combine CSS files and Combine JavaScript files to reduce the total number of files required to render a page and improve network performance. Generally speaking, serving one big, bloated file is better than serving 10 small lean-and-mean files because of the overhead associated with requesting a file from the server.