Improving Page Loading Speed

A slow website frustrates users and severely damages your Search Engine Optimization (SEO) rankings. While server speed and image compression are important, you can also optimize your actual HTML structure to force the browser to render the page much faster.

When a browser downloads your HTML, it reads it from top to bottom. Every time it encounters a script or a massive img, it pauses rendering to deal with that file. We can instruct the browser to manage these intelligently.

Native Image Lazy-Loading

Images outside of the initial viewable screen (below the fold) waste bandwidth by downloading immediately. By simply adding loading="lazy" to your img tags, modern browsers will wait to download the image until the user scrolls near it.

Tip: Never Lazy-Load Hero Images

Do not use loading="lazy" on images at the very top of your page (like logos or hero banners). Doing so actually slows down the initial paint time because the browser pauses to calculate if it should load it.

Defer Render-Blocking JavaScript

If you put a large Javascript file in your head, the browser stops painting the page until the file finishes downloading and executing. By adding the defer attribute, the browser downloads the script in the background while it continues building the visual page, executing it only when the HTML is finished:

Preconnect and Preload

Sometimes you might use assets from other domains, like Google Fonts. Establishing a connection to a third-party server takes time. You can use link rel="preconnect" to tell the browser to do the network handshake early.

Similarly, if you know an asset (like a primary CSS file) is absolutely critical, you can prioritize it above everything else using link rel="preload":

Full Working Example

Below is a highly optimized HTML structure demonstrating exactly where all these attributes belong. Remember, performance optimization is cumulative. Applying all these strategies together will be better than just doing one or two:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fast Loading Page Example</title>
<style>
  body { font-family: sans-serif; margin: 20px; line-height: 1.6; }
  .demo-box {
    background-color: #e2e3e5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin-top: 15px;
    background-color: #ccc; /* Placeholder color while loading */
    min-height: 300px;
  }
  .code-caption { 
    background: #fff; 
    padding: 10px; 
    font-family: monospace; 
    font-size: 0.9em; 
    color: #d63384; 
    border: 1px solid #ddd;
    margin-top: 10px;
  }
</style>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preload" href="/common/css/master.48.min.css" as="style">

</head>
<body>

<h1>Optimization Demonstration</h1>
  <p>This page uses several techniques to ensure it paints to the screen as fast as possible.</p>

<div class="demo-box">
    
    <h2>Deferring Non-Critical JavaScript</h2>
    <p>By adding the <code>defer</code> attribute, we tell the browser to download the script in the background, without stopping the HTML from rendering to the screen.</p>
    <div class="code-caption">&lt;script src="heavy-analytics.js" defer&gt;&lt;/script&gt;</div>
    
    
    
  </div>

<div class="demo-box">
    
    <h2>Lazy Loading Images</h2>
    <p>If you have an image far below the fold, there is no reason to force the user to download it immediately. The <code>loading="lazy"</code> attribute fixes this natively.</p>
    <div class="code-caption">&lt;img src="massive-photo.jpg" loading="lazy" alt="..."&gt;</div>
    
    
    <img src="/pix/samples/21m.jpg" loading="lazy" alt="A sample large photograph">
  </div>

</body>
</html>

View Output Full Screen Preview

PageSpeed Insights and Core Web Vitals

Google provides a tool called PageSpeed Insights (PSI) that measures the loading performance of your page on both mobile and desktop devices. It also provides recommendations on how to improve your page loading speed. PSI bases its analysis on the Core Web Vitals, which are a set of metrics that Google uses to measure the loading performance of a page.

The Core Web Vitals are:

Largest Contentful Paint (LCP): The time it takes for the largest element on the page to load.
Cumulative Layout Shift (CLS): The amount of layout shift that occurs while the page is loading.
Interaction to Next Paint (INP): The time it takes for the page to respond to user interaction.

PageSpeed Insights also provides a breakdown of the page load, showing you exactly how long each element takes to load. The breakdown includes:

First Contentful Paint (FCP): The time it takes for the first element on the page to load.
Time to First Byte (TTFB): The time it takes for the first byte of data to be sent from the server to the browser. This was experimental at the time of writing.

PSI gives you two scores: a Core Web Vitals score and a Performance score. The Core Web Vitals score is a measure of how your page actually performed over the last 28 days, while the Performance score is a measure of how your page performs in lab conditions. The higher the score, the better.

The recommendations from PSI are very specific and actionable, and they are often accompanied by code examples that you can use to implement the improvements.

You can find Google Pagespeed Insights here: https://pagespeed.web.dev/