Academy / Advanced Level: HTML and CSS

Web Performance Optimization

Reducing HTTP Requests

Every asset (CSS, JavaScript, images, fonts) on your page requires an HTTP request, and too many requests can slow down your site. Reducing the number of HTTP requests minimizes load times.

Techniques to Reduce HTTP Requests:

• Combine CSS and JavaScript files: Instead of multiple CSS or JS files, combine them into a single file (e.g., using Webpack or Gulp).
• Use CSS Sprites: Combine multiple images into a single image to reduce the number of HTTP requests.

Example: CSS Sprite

.icon {
  background: url('sprite.png') no-repeat;
}

.icon-home {
  background-position: 0 0;
}

.icon-search {
  background-position: 0 -50px;
}

In this example, multiple icons are combined into a single image, reducing the number of image requests.