Performance Optimization - Speed of the Caravan

In Ancient Egypt, the speed of material delivery determined the pace of pyramid construction. In web development, page loading speed determines whether a user will stay on the page or leave. Studies show that 53% of users abandon a page if it takes longer than 3 seconds to load.

Minification - Compressing Hieroglyphs

Minification is the process of removing unnecessary characters from code (spaces, comments, new lines) without changing its functionality:

1/* BEFORE minification - readable version */
2body {
3  font-family: Georgia, serif;
4  max-width: 800px;
5  margin: 0 auto;
6  padding: 20px;
7  /* Sand-colored background */
8  background: #f5f1e3;
9}
10
11/* AFTER minification - optimized version */
12/* body{font-family:Georgia,serif;max-width:800px;margin:0 auto;padding:20px;background:#f5f1e3} */

Minification tools:

• cssnano - CSS minification
• Terser - JavaScript minification
• html-minifier - HTML minification
• Bundlers like Webpack or Vite do this automatically

Image Compression

Images are the heaviest resources on a page. Image optimization is a key step:

Image Formats:

• JPEG - photos, gradient backgrounds (lossy compression)
• PNG - graphics with transparency, icons (lossless)
• WebP - modern format, 25-35% smaller than JPEG/PNG
• AVIF - newest format, even smaller than WebP
• SVG - vector graphics, icons (scalable)

The picture Element - Modern Approach:

1<picture>
2  <!-- The browser will choose the best format -->
3  <source srcset="pyramid.avif" type="image/avif">
4  <source srcset="pyramid.webp" type="image/webp">
5  <img src="pyramid.jpg" alt="The Great Pyramid of Giza"
6       width="800" height="600">
7</picture>

Lazy Loading

Lazy loading delays the loading of images that are not visible on screen. This way the page loads faster:

1<!-- Images below the screen load only when scrolling -->
2<img src="sphinx.jpg" alt="The Great Sphinx" loading="lazy"
3     width="800" height="600">
4
5<!-- First image on the page - DO NOT use lazy loading -->
6<img src="hero.jpg" alt="Pyramids at sunset" loading="eager"
7     width="1200" height="600">

Width and Height Attributes

Always specify image dimensions - this prevents the page from "jumping" during loading (CLS - Cumulative Layout Shift):

1<!-- GOOD - the browser reserves space -->
2<img src="pyramid.jpg" alt="Pyramid" width="800" height="600">
3
4<!-- BAD - the page "jumps" during loading -->
5<img src="pyramid.jpg" alt="Pyramid">