Skip to main content

The Lost Art of Optimized Web Design

Back in the early days of the web, web developers were probably forced to have optimized web design due to slow internet connections and limited resources. Today, powerful hardware & high-speed internet have lead to complacency. Although web technologies have advanced significantly over the years, it is still important to hone the fundamentals of optimized web design. Optimized web design is the art of creating websites that are fast, efficient, and user-friendly.

While it may not be as glamorous as cutting-edge design trends or flashy animations, optimized web design is essential for ensuring that websites are accessible to all users, regardless of their device or connection speed. For sites like personal blogs, it may not be as important, but for business websites, it could make the difference in sales conversion.

I have learnt alot of web design techniques, but not often do I hear about optimized web design. Hopefully it will become commoneplace again.

Here are some techniques for optimizing web design:

1. Minimize HTTP Requests​

Each element on a web page, such as images, scripts, and stylesheets, requires an HTTP request to load. The more requests a page has to make, the longer it will take to load.

Combine multiple scripts and stylesheets into a single file​

Instead of linking to multiple CSS and JavaScript files, combine them into a single file to reduce the number of HTTP requests.

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

Use image sprites​

Combine multiple images into a single sprite sheet and use CSS to display only the portion of the image you need. This reduces the number of image requests.

.sprite {
  background-image: url('sprites.png');
  background-position: -10px -20px;
  width: 20px;
  height: 20px;
}

2. Optimize Images​

Images are often the largest files on a web page and can significantly impact page load times. To optimize images:

Use the correct image format​

Choose the appropriate image format based on the content of the image. For photographs, use JPEG; for graphics and logos, use PNG; for transparent images, use GIF or PNG.

Compress images​

Use image compression tools to reduce the file size of images without sacrificing quality. Tools like TinyPNG and ImageOptim can help reduce image file sizes.

convert input.jpg -quality 80 output.jpg

3. Minify CSS and JavaScript​

Minification is the process of removing unnecessary characters from CSS and JavaScript files to reduce file sizes. This can include removing whitespace, comments, and unnecessary semicolons.

/* Before minification */
body {
  color: red;
}

/* After minification */
body{color:red;}

You can use tools like UglifyJS and CSSNano to minify your CSS and JavaScript files.

uglifyjs script.js -o script.min.js

4. Lazy Load Images​

Lazy loading is a technique that defers the loading of images until they are needed. This can help reduce initial page load times and improve the user experience.

<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="Image">

5. Use Content Delivery Networks (CDNs)​

Content Delivery Networks (CDNs) distribute your website's static assets, such as images, scripts, and stylesheets, across multiple servers around the world. E.g. Cloudflare, Akamai, Amazon CloudFront.

This can help reduce latency and improve page load times for users in different geographic locations.

<script src="https://cdn.example.com/script.js"></script>
<link rel="stylesheet" href="https://cdn.example.com/styles.css">

6. Enable Browser Caching​

Browser caching allows browsers to store static assets locally so that they don't have to be re-downloaded every time a user visits your website. This can help reduce load times for returning visitors.

# Enable caching for images, CSS, and JavaScript files
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
</IfModule>

7. Optimize Web Fonts​

Web fonts can add visual appeal to a website, but they can also slow down page load times. To optimize web fonts:

Use system fonts​

System fonts are pre-installed on most devices and don't require additional HTTP requests to load. Use system fonts as fallbacks for custom web fonts.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

Subset fonts​

If you're using a custom web font, consider subsetting it to include only the characters you need. This can reduce the file size of the font and improve load times.

@font-face {
  font-family: 'CustomFont';
  src: url('CustomFont.woff2') format('woff2');
  unicode-range: U+0020-007F; /* Subset to ASCII characters */
}

8. Optimize Critical Rendering Path​

The critical rendering path is the sequence of steps browsers take to render a web page. Optimizing the critical rendering path can help improve page load times and user experience.

Minimize render-blocking resources​

Identify and optimize resources that block the rendering of the page, such as CSS and JavaScript files. Load critical resources inline and defer non-critical resources.

<!-- Load critical CSS inline -->
<style>
  body { color: red; }
</style>

<!-- Defer non-critical JavaScript -->
<script src="script.js" defer></script>

Prioritize above-the-fold content​

Load above-the-fold content first to ensure that users see the most important parts of the page quickly. Lazy load below-the-fold content to improve load times.

<header>Header content</header>
<main>Main content</main>
<footer>Footer content</footer>

9. JavaScript Loading Strategies​

JavaScript can significantly impact page load times, especially if it's large or render-blocking. Consider the following strategies to optimize JavaScript loading:

Defer non-critical JavaScript​

Defer the loading of non-critical JavaScript files to improve page load times. This allows the browser to load and render the page before executing JavaScript.

<script src="script.js" defer></script>

Asynchronous loading​

Load JavaScript files asynchronously to prevent them from blocking the rendering of the page. This can help improve load times and user experience.

<script src="script.js" async></script>

Code splitting​

Split large JavaScript files into smaller modules and load them only when needed. This can help reduce the initial load time of the page.

import { module1 } from './module1.js';
import { module2 } from './module2.js';