2

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?

Improve this question
3
  • 2
    Thats not true. Google.com pulls in multiple external scripts. They're at the bottom of the body rather than in the head. Commented Jan 26, 2013 at 18:10
  • I don't think it is, when things are organized, things are better. Commented Jan 26, 2013 at 18:10
  • Google doesn't loads all it's CSS and JS files in one single HTML file, what they do is really different, loads the files and then magically make the file disappear from the source HTML. Commented Jan 26, 2013 at 18:25

4 Answers 4

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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

Improve this answer

2 Comments

like css at top and js at bottom reccomendation (+1)
@CezarisLT Sure. Because resources inside head tag blocks page rendering until they will be downloaded. To avoid blank screen and increase page loading speed just move JS to the bottom.
1

If your intention is to load the pages faster:

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

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

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

Improve this answer

3 Comments

"For landing pages like index pages: ...fast", Why is this?
Because now instead of fetching styles from styles.css, by issuing an http request, browser can easily download (albeit larger) single html file without .css file
The point I am trying to explain is, each time the browser has to make an http request, the page will load slower. Moreover this loading is even more slower if the requested resources like images etc are from the same domain
-2

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.

Improve this answer

1 Comment

It isn't generally a good idea, and Google isn't using it. -1 for suggesting base-64 encoding images into CSS, with no explanation. This is actually rarely a good idea. Sure, if you have a couple small images, it may make sense. Otherwise, at least use an external image sprite. Base-64 encoding adds ~34% overhead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.