HTML Performance
In this page:
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.
Note: Keep your HTML code lightweight and minified to ensure fast download speeds.
Warning: A slow-loading webpage will cause visitors to leave your site and lower your search engine ranking.
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.
Note: Always use the defer attribute on your script tags to let the browser render your page layout first.
Warning: Loading heavy script files in your head section without defer or async will delay your page load times and trigger blank white screens.
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.
Note: Use lazy loading for all images located below the fold, but do not apply it to your hero images at the very top of the page.
Warning: Applying lazy loading to images visible in the viewport can delay initial rendering times and lower your web vitals score.
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.
Note: Preload key assets like your primary brand logo or main font files to improve your site's rendering speed.
Warning: Overusing preload tags can cause the browser to download too many files at once, wasting user bandwidth.
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.
Note: Always specify the native aspect ratio width and height coordinates inside your image tags.
Warning: Failing to define image dimensions causes layout shifting, which lowers your Core Web Vitals score on Google.
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.
Note: Setting explicit width and height on images is one of the single most effective ways to improve your CLS score, since it reserves space before the image loads.
Warning: Poor Core Web Vitals scores can directly hurt search engine rankings, not just user experience, since Google uses them as a ranking signal.
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.
Note: Convert large photographic images to WebP format, which usually produces noticeably smaller file sizes than JPEG at the same visual quality.
Warning: Uploading a full resolution camera photo, often several megabytes, and only resizing it with CSS still forces every visitor to download the entire original file.
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.
Note: Minification is almost always handled automatically by a build tool rather than done by hand — focus on setting it up once in your build process.
Warning: Minifying code makes it very hard to read in browser developer tools, so always keep an unminified source version for debugging.
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.
Note: Set long cache lifetimes for files that rarely change, like logo images, and shorter or no caching for files that update frequently.
Warning: Caching a file for a very long time and then updating its content without changing its filename means returning visitors may keep seeing the old cached version.
Example: Browser Caching Basics
<!-- Server response header: Cache-Control: max-age=31536000 -->
<img src="logo.png" alt="Logo">- Loading heavy script files in your head section without the defer or async attributes.
- Overlooking image dimension settings, which causes annoying Cumulative Layout Shift bugs.
- Applying the lazy loading attribute to hero images located at the very top of your page.
- Use the defer attribute on your script tags to let the browser render your page layout first.
- Lazy load off-screen images using loading="lazy" to keep page load times fast.
- Define explicit dimensions on image elements to prevent layout shifting and improve your Core Web Vitals score.
Modern performance attributes and resource preloads are supported natively by all modern web browsers.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: