HTML Performance

Optimizing Web Performance

Web performance is essential for keeping users on your site and improving your search engine ranking. Organizing your code structure and loading assets efficiently is the key to fast load times.

Example: Optimizing Web Performance

<link rel="stylesheet" href="styles.min.css">

Deferred and Async Script Loading

By default, browsers pause loading your webpage layout to download and run script files, which can slow down your site's load speed.

Using defer or async attributes allows the browser to download scripts in the background without blocking the layout rendering.

Example: Deferred and Async Script Loading

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

Lazy Loading Assets

If your webpage has many images, downloading all of them at once can slow down your site's load speed. The loading="lazy" attribute instructs the browser to delay downloading images located lower on the page until the user scrolls close to them.

Example: Lazy Loading Assets

<img src="offscreen.jpg" alt="Offscreen image" loading="lazy">

Pre-fetching and Resource Hints

To make page transitions feel instantaneous, you can use resource hints (like dns-prefetch or preload) inside your head link tags to tell the browser to resolve domains or download key assets ahead of time.

Example: Pre-fetching and Resource Hints

<link rel="dns-prefetch" href="https://fonts.example.com">
<link rel="preload" href="logo.png" as="image">

Minimizing Cumulative Layout Shifts

When an image loads, it takes a few seconds to download. If you do not specify its width and height, the browser will not know how much space to reserve, causing the page layout to jump around.

Setting these dimensions explicitly tells the browser exactly how much space to lock in ahead of time.

Example: Minimizing Cumulative Layout Shifts

<img src="photo.jpg" width="600" height="400" alt="Photo">

Core Web Vitals (LCP, FID, CLS)

Core Web Vitals are three metrics Google uses to measure real user experience. LCP, or Largest Contentful Paint, measures how quickly the biggest visible element loads.

FID, or First Input Delay, measures how quickly the page responds to a user's first interaction. CLS, or Cumulative Layout Shift, measures how much content unexpectedly jumps around while loading.

Example: Core Web Vitals (LCP, FID, CLS)

<img src="hero.jpg" width="1200" height="600" alt="Hero banner">

Image Optimization Techniques

Choosing the right format, like WebP or AVIF instead of an uncompressed PNG, compressing images before uploading, and serving appropriately sized images for the display size all dramatically reduce page weight.

Images are typically the single largest contributor to page load time on most websites.

Example: Image Optimization Techniques

<img src="photo.webp" alt="Compressed photo">

Minification Explained

Minification removes unnecessary characters from CSS and JavaScript files, like whitespace, line breaks, and comments, without changing what the code actually does.

This makes files smaller and faster to download without affecting how the page behaves.

Example: Minification Explained

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

Browser Caching Basics

Browser caching lets a visitor's browser store files like images, CSS, and JavaScript locally after the first visit, so future page loads on the same site can reuse them instead of downloading everything again.

This is controlled by HTTP response headers like Cache-Control sent from the server.

Example: Browser Caching Basics

<!-- Server response header: Cache-Control: max-age=31536000 -->
<img src="logo.png" alt="Logo">