Minimize HTML page load time if it contains image icons

Question

I want that my html page loads faster as it can. So I'm trying to put all CSS styles into the same .css file and all JavaScript code to the one .js file. How my colleagues told me it makes web page load faster. I want to ask some questions about it.

Just to be sure: Are my colleagues right? On which situations it's better to break CSS or JS code to the separate files?
Question is: If I have a lot of small icons on my page, like "delete, edit, add", should I load image with all icons at once or each icon separately? If I'll load all icons at once, how do I select desired one, if icon's size is 40x40px?

Thank you!

score 5 · Accepted Answer · answered Apr 11 '11 at 19:11

Are my colleagues right?

Single files can be downloaded with single HTTP requests (with single sets of HTTP headers, etc, etc) and can be compressed more efficiently then multiple files. So from a performance perspective, if you need all the content, it is better to place them in a single file.

On which situations it's better to break CSS or JS code to the separate files?

When you need a specific page to load very quickly (e.g. the homepage) or when there are sections of the site which use a large chunk of script that isn't used elsewhere then it can be beneficial to break the files up then.

If I have a lot of small icons on my page, like "delete, edit, add", should I load image with all icons at once or each icon separately?

From a performance standpoint, the same rules apply. However, there is no way to specify that a content image (and icons that don't decorate text are content images) is just part of a larger file. You have to use hacks involving background images. This breaks the separation of concerns around content and style and usually involves using semantically incorrect elements, and then requires further hackery to provide alternative content for users who can't see the image and that hackery rarely does as good a job as an alt attribute.

If I'll load all icons at once, how do I select desired one, if icon's size is 40x40px?

You have an element with specific dimensions and a background image with background-position set so that only the part of the image you want shows through.

score 1 · Answer 2 · answered Apr 11 '11 at 19:12

1

Consolidating your CSS and JS code into a shared file will improve load times on all loads after the first so long as the browser uses the version of the file in its cache rather than downloading it again. There are many factors that can affect this, but under normal circumstances it should work.

Also, make sure your image files are stored in the same resolution as they will be displayed. Displaying a 40 x 40 pixel file at 20 x 20 pixels means that you have download four times the necessary image size. If the same icon file is referenced many places in an HTML document, then that icon file will only be downloaded once, so it will have little effect on page loading times.

answered Apr 11 '11 at 19:12

Jeffrey L Whitledge

58,241
9
71
99

Good caching rules will give a performance boost on subsequent pages irrespective of how many files the data is spread between. – Quentin Apr 11 '11 at 19:14
@David Dorward - At first, I understood the OP as asking whether each page should have its own CSS file, or if a single CSS file should be shared across all pages. I see now that interpretation may not be correct. – Jeffrey L Whitledge Apr 11 '11 at 19:17
I found useful info about image sizes. Thank you – andriy Apr 11 '11 at 19:21

score 1 · Answer 3 · answered Apr 11 '11 at 19:13

1

For putting all the icons into one file and choosing which one, see this: http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites

answered Apr 11 '11 at 19:13

penguinrob

1,431
3
17
39

score 1 · Answer 4 · answered Apr 11 '11 at 19:17

You can use what they call CSS sprite.

The thing is very simple to think of but can be a little tricky to use. Here is the idea.

You merge all your images into on big image, making it a single load. Wherever these images were used on the site, you replace it by a css class which use the big image as a background and a certain positioning.

Let's say you merge 4 image together : delete.png, add.png, edit.png, share.png. You create a css class for everyone of these like so :

.delete{ background-image:url('../img/icons.png');
         background-position:0px 0px;
 }
.add {background-image:url('../img/icons.png');
         background-position:0px 40px; 
}
.share {background-image:url('../img/icons.png');
         background-position:40px 0px; 
}
.edit { background-image:url('../img/icons.png');
         background-position:40px 40px;
}

This way, you reduce the number of request since you you use a single image to show everywhere. The code was written on the fly, tell if something is wrong.

Also have a look at performance guru tools : Page Speed

score 0 · Answer 5 · answered Apr 11 '11 at 19:12

Breaking CSS files is not really a problem, considering browser caching.

Breaking up JS files is okay. You can have one JS that handles things needed for the page to load in the <head> tag. And one js that gives interaction to you, after </body>. By doing this you won't have various effects, but you ensure your users sees your text content.

Regarding your images, there's a practice called CSS Sprites. You can use that to make one big file for your small images and use CSS background-position to show only the part you want. It's like cropping your image file based on the css class.

isNaN1247 · Answer 6 · 2011-04-11T19:19:52.147

If speed is most important, then what you've been told is correct.

Less CSS and JS files means less HTTP requests to the server. I would only separate files if you have a specific need as part of a project (eg they need to be maintained in ver separate ways)

For JS I always load JQuery and other libraries from the Google CDN - this has a greater performance boost that merging the library into your code as users are likely to have a cached version of Googles code.

For icons I would use CSS sprites (again this means fewer requests to the server) or if you really want to go as far as possible - look into embeding Data URI in your CSS.

Further reading

Googles Page Speed tool

Data URI in CSS

score 0 · Answer 7 · edited May 23 '17 at 12:26

If you want a better performance report about your page, you can take a look at these tools

YSlow: http://developer.yahoo.com/yslow/

PageSpeed: http://code.google.com/intl/es-ES/speed/page-speed/docs/overview.html

Both can be added into the FireBug plugin (Mozilla Firefox).

From YSlow documentation:

Minify JavaScript and CSS tag: javascript, css

Minification is the practice of removing unnecessary characters from code to reduce its >size thereby improving load times. When code is minified all comments are removed, as >well as unneeded white space characters (space, newline, and tab). In the case of >JavaScript, this improves response time performance because the size of the downloaded >file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI >Compressor. The YUI compressor can also minify CSS.

Obfuscation is an alternative optimization that can be applied to source code. It's more >complex than minification and thus more likely to generate bugs as a result of the >obfuscation step itself. In a survey of ten top U.S. web sites, minification achieved a >21% size reduction versus 25% for obfuscation. Although obfuscation has a higher size >reduction, minifying JavaScript is less risky.

In addition to minifying external scripts and styles, inlined and blocks >can and should also be minified. Even if you gzip your scripts and styles, minifying them >will still reduce the size by 5% or more. As the use and size of JavaScript and CSS >increases, so will the savings gained by minifying your code.

Preload Components tag: content

Preload may look like the opposite of post-load, but it actually has a different goal. By >preloading components you can take advantage of the time the browser is idle and request >components (like images, styles and scripts) you'll need in the future. This way when the >user visits the next page, you could have most of the components already in the cache and >your page will load much faster for the user.

There are actually several types of preloading:

•Unconditional preload - as soon as onload fires, you go ahead and fetch some extra >components. Check google.com for an example of how a sprite image is requested onload. >This sprite image is not needed on the google.com homepage, but it is needed on the >consecutive search result page. •Conditional preload - based on a user action you make an educated guess where the user >is headed next and preload accordingly. On search.yahoo.com you can see how some extra >components are requested after you start typing in the input box. •Anticipated preload - preload in advance before launching a redesign. It often happens >after a redesign that you hear: "The new site is cool, but it's slower than before". Part >of the problem could be that the users were visiting your old site with a full cache, but >the new one is always an empty cache experience. You can mitigate this side effect by >preloading some components before you even launched the redesign. Your old site can use >the time the browser is idle and request images and scripts that will be used by the new >site

If you are using JQuery, then you can take a look at this: Preloading images with jQuery

mousio · Answer 8 · 2011-04-11T21:08:14.277

0

Interesting concepts to improve download speed, perceived speed and actual speed:

Most principles explained are still generally applicable.

edited Apr 11 '11 at 21:08

answered Apr 11 '11 at 19:49

mousio

10,079
4
34
43

Minimize HTML page load time if it contains image icons

8 Answers8