Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Brad Woods
Brad Woods
13,772 Points

Moving all css/ javascript to a script tags in index.html

At the completion of a website, is it common practice to move all CSS and Javascript into script tags in the index.html file, so the client is only downloading 1 file instead of 3?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

CSS cannot be moved into script tags. However, concatenating files is becoming increasingly more common. Using Grunt or Gulp we can concatenate and minify our files. I don't think we want to roll it all into one file; if there's even a small chance that someone else will need to maintain our code. By keeping frameworks separate from the custom files, this will make it a lot easier on someone else trying to make changes and updates.

    ...
    <link href="./css/custom.min.css" rel="stylesheet">
</head>
    ...
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src=./js/custom.min.js></script>
</body>

6 Answers

James Barnett
James Barnett
39,199 Points

At the completion of a website, is it common practice to move all CSS and Javascript into script tags

Yes, you should minify and combine all of your JavaScript into one file and your CSS into one file

so the client is only downloading 1 file instead of 3?

You hit the nail on the head, the overhead of separate downloads is a major factor in the load time of a website.

You can use an IDE extension to make this process easier.

Brad Woods
Brad Woods
13,772 Points
Brad Woods
Brad Woods
13,772 Points

Robert - Sorry, I didn't mean script tag's for CSS, I meant style tags. Jeff - my understanding is that when a person views a website, the server sends files such as index.html and main.css to the client's browser to view. By putting all css into the index.html file you are removing 1 of the files that client needs to download to view the site, thereby making the site load faster.

I got the idea from a technique called image mapping (i think). Where instead of having multiple image files that the user would need to download to view a site, all images are moved onto 1 file, making a kind of montage. When a image needs to be displayed on a site, the montage is loaded and positioned so only part of it is being displayed, and the rest of it hidden.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

That's a cool idea, but as I understand it, the browser does not work like this and needs to know all the css before it can show the page to the user as intended; and needs to know all the javascript before the user takes an action that would otherwise trigger some event or layout change. Caching allows users who visit your site more than once to experience the benefits of using your site without needing to re-download all the files again.

Brad Woods
Brad Woods
13,772 Points
Brad Woods
Brad Woods
13,772 Points

The browser would still get all the css and javascript information and would do it with only 1 file request and download rather than 3.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I get what you're saying, but pending the expertise of someone else, I'm not aware of the browser being able to load one file and parse different types of information contained within. I like the idea - perhaps it's future tech that's yet to be invented.

Tristan Eason
Tristan Eason
13,400 Points
Tristan Eason
Tristan Eason
13,400 Points

I believe you can concatenate these files using Grunt. I personally haven't dived into this too much but here's a link that shows a basic example of how it works. http://gruntjs.com/sample-gruntfile

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Can't imagine why that would be necessary. Just send a link for them to view the page/site. Why would the client need the files?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I think he's referring to the client browser downloading the files in order to render the page.

Brad Woods
Brad Woods
13,772 Points
Brad Woods
Brad Woods
13,772 Points

A browser can parse css and javascript contained with a html file as long as they are in within style and script tags respectively. Even when you have css and js files the code for these files is contained within these tags when the page is loaded as the link to these files is contained within these tags.