Reducing the number of requests

In a previous chapter, I said that the bulk of load time is spent on loading images. So, we will start-off by focusing on reducing requests for images.

Sprite sheets

When you have a button or a background element such as Facebook, Twitter or any other link that you place on your website, you can very often reduce the number of requests by putting them in a sprite sheet.

Let's take this web page as our example:

Here is another website about coffee. I never get tired of this! This website has all the stuff that we need to improve HTTP requests: multiple images and buttons that are of the same size with different states. Let's just focus on the social media buttons. We have three buttons that are of the same size, 50 pixels by 50 pixels, and when you hover on a button, a darker version of that button is shown.

Now, instead of having six different images being fetched when a page is loaded, we are going to combine all the six images into sprite sheets.

So...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Responsive Design High Performance

By : Els

Responsive Design High Performance

By: Els

Overview of this book

Reducing the number of requests

Sprite sheets

Responsive Design High Performance

By : Els

Responsive Design High Performance

By: Els

Overview of this book

Reducing the number of requests

Sprite sheets

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access