Downloading JS and CSS as a single file ( package ) - javascript

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

Related

How to reduce multiple JavaScript request from the server

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.

HTML + JS + CSS converter

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.

Include separate CSS and JS files into the header OR all code in one CSS and one JS file?

I'm trying to optimize my website. I have a few plugins to include (jquery plugins with CSS), and my own javascript code.
Now I have the CSS in separate files for different plugins, as I downloaded them. And if I need one on the actual page, I generate code to include that. The same with the JS files. But when it comes to render a complex page with a lot of stuff, 9 CSS files can be called and 7 or 8 JS files, each of which are HTTP requests.
Should I put the CSS into one big file to reduce the number of included CSS files? But then everything will be interpreted by the browser even if the current page doesn't need so much stuff.
I've thought of a third way: generate CSS and JS files with PHP. Then it'll be always one JS and one CSS file, and only with the things which are needed. Or is it an absurd way?
What do you say, which to use to reduce page load time?
It is better to include all CSS in a file and all JS in a file and the minify them using many online services that minify and compress CSS and Javascript. this will reduce the number of http requests as well as volume of data to be downloaded.
If you generate CSS with php then the CSS and JS should be downloaded with every page and generating them takes some time, but if you pack them in one file it downloads once and the browsers caches it.
if your site has many different sections and packing all css in a file makes a huge file then you can pack CSS in two or three file and in each section load the related one.
reducing number of http request is very important.
I think your last solution is the best one.
Generate one js file and one css file from php, and don't forget to minimized/gziped them :)
Here is a very good article about optimization : http://developer.yahoo.com/performance/rules.html
This depends largely on how your users use your page. If most of the users just view one page then it makes sense to only send them the stuff that they need to display that one page (combining everything into as few requests as possible). On the other hand if most of users view multiple pages then it makes sense to send them more than they need so they will already have the CSS&JS on the next page view. But in this case you have to make sure that you are always generating the same CSS&JS with the same URI, so that the browser will not re-download the same content under a different name. You also have to setup proper HTTP caching.
What I usually do is split JS/CSS in two parts. Every page has a "common.css" and "common.js", which has stuff that every page needs (header/footer/... styles for CSS, and then jquery/common js/... for JS). Then every subpage has it's own JS&CSS that has just the stuff you need for that page (if required).
For me, the best way is somewhere in the middle - for CSS files, you better grab them all, join and compress to one file. For JS code - make for example 3+ files: one with compressed and joined external libs, one with your common stuff, and maybe next files for each bigger section - but I dont think its needed. Maybe splitting your JS code on part needed before user login, and after user login.
Remember to minify and consider asynch loading (with LAB.js for example).
Oh, and this php script... I dont think it is good idea - better use/write some script which joins and minifies your statics on compile (or deploy, or even run by hand), so there is no need to generate everythin over and over again.

Minify everything into one file or use CDN

For things like jQuery etc, isit better to leave it to use CDN or minify it into 1 file together with other JS
CDN - it's likely it will already be cached on the users machines and thus you'll save the download for it. Not to mention it will load faster from a CDN than from your site anyway - the overhead of the one extra connection to grab that file is diminimus
All your code should definitely be combined & minified. For the libraries, it's a bit trickier. CDNs are good in theory, but some studies have shown that they were not actually as efficient as they could be because of various reasons.
That means, if you've 50% miss rate on your CDN, the overhead of the extra DNS resolving and extra connection can actually slow you down more than it'll help.
The most important thing anyway is that you should version your minified/combined JS file, make it have a unique url for every version of the code you deploy. That way you can set Expires headers to +10 years, and make sure that anyone that downloads it only downloads it once.
Also don't forget to enable gzip (mod_deflate in apache), that will typically compress the transfer to 1/5-1/10th of its original size.
Using CDN is great, as the js file may be already cached from the CDN to user's computer.
But, there might be some plugins of jQuery and your own sites validation and other functions which might be separated in different JS files. then minify + combining is good approach.
For our ease we have separated the code in different files, and when browser tries to load content it has limitations on how many requests to send on the same server, CDN is out of your domain it will be requested without any browser limit so it loads fast. You need to combine your js files to reduce the number of requests from browser to load your page faster.
For me I use PHP to combine and minify
In html
<script src="js.php" >
and in php
header('Content-type: text/javascript');
include 'js/plugin.js';
include 'js/validation.js';
You can use output buffering to minify and also send this content as gziped to browser

Organizing script files

I usually have jQuery code that is page specific along with a handful of functions that many pages share. One approach is to make seperate files for organizing, but i'm thinking that putting all the script in one file and making comments in the file for readability would also work. Then when the site goes live I can minify and obfuscate if needed.
I think the question comes down to limiting http requests or limiting file size. Is one of these a bad habit?
You can have it both ways. Develop with as many individual .js files as you need. Then use a build/deployment process that assembles the files into one larger one, then pushes them through something like Google's Closure Compiler. Compression can be handled transparently by your web server if configured properly.
Of course, this implies a structured development and deployment workflow -- e.g., with files to be assembled/compiled in a specific directory, separated from files that should be served as-is.
References:
Closure Compiler
Apache Ant
Automating the Closure Compiler with Ant
If you can put all the scripts in one file which is minified then that's what you should do first.
Also if your webserver sends out gzipped content the actual script transfer would be small, and the script will be cached on client. Since tcp transfers starts out slow and increase in speed, limiting the number of requests is the best way to speed up the overall loading of a page.
This is the same reason you see sites concatenating images into one larger image, and using CSS to display the correct part of it.

Categories