CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nico
Nico

Reputation: 100

Having multiple css and javascript files

I have multiple jquery, javascript and css files loading in my head. I want a way to simplify and fasten up the process of loading these files. I also have different javascripts in the head and above the /body tag. I have looked into requirejs and headjs but I find it very complicated and don't know if I can load my stylesheets with this framework.

The size of the site is quite large due to it being a scroll to section site. My question is, is there a way to load my css, javascript files, jquery code and javascript in a simple fast way and if this is possible with headjs or requirejs can someone give me an example on how to do this in an easy way as I am just so confused as their API is not easy to follow for beginners.

Thanks.

Upvotes: 0

Views: 993

Answers (9)

Jitendra
Jitendra

Reputation: 1117

You can reduce the size of your webpage by following two things 1)Compress your Files : Genrally js/Css files are written with lots of white spaces for readability and thus they occupy more bandwith. After Compression you can generally gain 30-50% reduction in the size of Javascript files and 40-70% reduction in Css files. 2)Combine more than one files: Each time a file is sent from server to client it occupies request response headers and some other informations. This can be reduced by combining files. In case of related files of javascript and css files you can combine multiple js/css files in one files.

you can use online tools which compresses as well as join multiple css/js files into one like

jsCompressor and CSS Compressor

Upvotes: 0

Edo
Edo

Reputation: 41

I believe that what you are looking for is called bundling and minification. You can use it to conacatenate all javascript files in one big file, and also minimize its size. The same thing apply to css files.

There are a lot of different solutions depending on the platform that you are using for developement.

For example: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Upvotes: 0

Michael
Michael

Reputation: 7092

One of the best things you can do is minify your files that you put live. There are various free services that do this, such as http://gruntjs.com or http://jsmini.com

A step further, if your site uses PHP, then you can setup some files to load conditionally.

On my personal sites... I use PHP to set the variable $title equal to whatever the simplified page name is, for example "home" or "gallery".

I then include two files into my <head> one for conditional CSS files, and one for conditional JS files...

Then I for example there are 3 javascript files and two css files that are ONLY needed for the gallery page. So I have a simple IF statement in the two conditional files mentioned above like this:

if ($title == "Gallery") {
echo "<script src=\"afile.js\"></script>";
}

This way, these particular files never get loaded unless they are actually required. There are ofcourse certain CSS sheets and javascript files which are required site-wide, in which case I enter those into the <head> just like you would normally, and I always load my "conditional files" BELOW their respective counterparts.

Upvotes: 0

FLX
FLX

Reputation: 2679

To easily merge CSS :

Make a php file,

<?php
header('Content-type: text/css');
header("Vary: Accept-Encoding");
header("Cache-control: public");
header("Last-Modified: ".gmdate("D, d M Y H:i:s"). " GMT");

$cssstyles = '';

$lines = file("file1.css");
foreach ($lines as $line_num => $line)
  $cssstyles .= trim($line);

$lines = file("file2.css");
foreach ($lines as $line_num => $line)
  $cssstyles .= trim($line);

$lines = file("file3.css");
foreach ($lines as $line_num => $line)
  $cssstyles .= trim($line);

echo preg_replace('/\/\*(.+?)\*\/|[\s]*([:;{},>])[\s]*/','$2',$cssstyles);
?>

Replace file1, file2, file3 by each of your files.. You can pass a GET parameter to get different CSS for different pages.

And then call your file as stylesheet with :

<link rel="stylesheet" href="yourFile.php" />

Upvotes: 1

SaQiB
SaQiB

Reputation: 639

You can use js/css combine techniques to reduce requests from server

https://code.google.com/p/minify/

There are other ways as well like host external files on other server. (CDN technique)

This will also help you: http://sixrevisions.com/web-development/site-speed-performance/

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

Have a look at these articles.You need to learn the optimization technique to increase the efficiency of code loading.

load-javascript-faster

faster-page-loads-bundle-your-css-and-javascript

speed-up-your-javascript-load-time

Upvotes: 0

Farid Rn
Farid Rn

Reputation: 3207

There are thing that you can do for a better performance like:

  • Merge you small CSS or JS files to one file to reduce number of requests.
  • Use GZip on your server to reduce size of your resources. (for example jQuery minified version is about 90kb but after enabling GZip on your webserver it will become 30k)
    Setting up GZip for your server is vwery simple.
  • Use tools that will minify your codes. You can save up a lot after minification your code. there are many online tools like this one which I always use.
  • It's a while that I put my javascript codes at the end of my page right before closing body tag. You may not be able to run jQuery code for example in middle of your HTML but the advantages of loading JS at the end are more than this one disadvantage.

Upvotes: 0

Fenton
Fenton

Reputation: 250832

The simplest first step you can take is to reduce the number of HTTP requests. Typically, each request spends as much time queued as it does downloading, so you can reduce all of the queue time by having a single CSS file and a single JavaScript file.

So your first step is to combine the files in the same order you include them and then include just the one combined CSS file and the one combined JavaScript file.

Next Steps

Once you've done this, you can follow it up with:

Minification. This is a process that makes your file size smaller, for example by removing unnecessary white-space and by compressing variable names.

Move script includes to just before </body>. This gives the illusion of speed as the visible page will load before the script is requested, which makes the page appear faster to the user.

Upvotes: 3

Reko
Reko

Reputation: 98

You can try to compress/minify it and merge it together.

Javascript: Google CLosure Compiler (online)

or minify: Minify

Upvotes: 0

Related Questions