Book Image

Responsive Design High Performance

By : Els
Book Image

Responsive Design High Performance

By: Els

Overview of this book

This book is ideal for developers who have experience in developing websites or possess minor knowledge of how responsive websites work. No experience of high-level website development or performance tweaking is required.
Table of Contents (11 chapters)
7
7. Speeding Up Development with Design Concepts, Patterns, and Programs
10
Index

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:

Sprite sheets

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