Lazy Loading, Caching, and Compression Explained

Last week, I tried to buy college football tickets for a conference championship game, only to be met with a slowly loading page. I could almost feel the tickets selling out as I waited. I’ve also had this happen during flash sales online, while booking travel deals, and when trying to read trending news articles.

Most of the time, I simply go to another website to see if that works. That’s bad news for you if you own a website. Website performance is often the difference between a sale and a disgruntled customer, a reader and a bounce, a lifelong customer and someone who tells others to never visit your website.

In short, a slow website means you lose visitors, sales, and search engine rankings.

Unfortunately, website optimization guides often come with hundreds of tips that only a technical person could implement. That’s why I like to stick with the three pillars of performance: lazy loading, caching, and compression. Master those, and you’ll rarely worry about website performance again.

My first recommendation to improve the performance of your website is lazy loading. It’s a technique you can automate to produce faster page load speeds within minutes.

What It Is

Lazy loading does just that — it lazily loads your content. But not in a way that disrupts your user experience. Without lazy loading, a user’s browser must download every piece of content — scripts, video, and images. Even images on a page that aren’t visible. Lazy loading takes advantage of a user’s screen size by only loading content within view.

As a result, lazy loading significantly cuts down:

• Page weight
• Loading speed
• Unnecessary content

But when does lazy loading reveal the rest of your content? Only when the user scrolls down to where that content is located. If a video is located 50% down your homepage, the user has to scroll to that video for the browser to load it.

How It Works

Here’s the simplest way to explain the technical side of lazy loading:

The browser swaps in a lightweight placeholder for your real content until it’s time to load.

The browser calls your viewable area the “viewport.” When a content element nears that viewport — like when a user is an inch away from an image — the browser switches out that placeholder for the actual file.

Modern browsers all support lazy loading. Browsers just handle lazy loading differently depending on the type of content. They use a simple attribute to lazy load HTML elements, but turn to JavaScript libraries for more complex scenarios.

How to Enable Lazy Loading

Here’s how to turn on lazy loading:

• WordPress: Either rely on WordPress’s native lazy loading or consider advanced lazy loading through plugins like Smush or WP Rocket.
• Wix: It comes with built-in lazy loading.
• Shopify: Many Shopify themes have lazy loading by default. If not, you can activate lazy loading by adding the loading=”lazy” attribute to image and iframe tags in your code.
• Custom site: For all other platforms, add the loading=”lazy” attribute to any iframe and image tags, while also considering a JavaScript library like Lazysizes.

You may have to add that loading=”lazy”attribute to multiple theme or site files. For instance, in Shopify, I would look for image tags in theme files like sections/featured-product.liquid and sections/product-template.liquid.

Lazy Loading Best Practices

Here are my best practices for lazy loading:

1. Avoid lazy loading everything.
2. Above-the-fold images, particularly logos and hero images, should load right away.
3. Try low-quality or blurred placeholders for below-the-fold images, which offer a more pleasant user experience than a blank box placeholder.
4. Be sure to test lazy loading; sometimes you have to adjust when lazy loading should trigger.

Once you’re done with lazy loading, it’s onto caching, a technique that pairs well with lazy loading for improved overall performance.

Caching is like keeping frequently used spices on your countertop. It makes for a speedier process without cluttering up your counter with things you rarely use.

What It Is

Caching stores frequently used files in the user’s browser. This way, when they return to your site, it doesn’t take long to load an image or a video or a script.

Caching happens at different levels — like on the user’s device, your server, or even through a content delivery network — which I’ll outline below.

The goal is to make pages load almost instantly, and that all happens because caching reduces server loads on repeat visits. Without caching, the browser would have to request and display every site file all over again.

Types of Caching

Caching often works on your website without you knowing, like if your server host already has it active. You can also activate caching for browsers and through a CDN. Here are all the types of caching:

How to Enable Caching

How you implement caching depends on your platform:

• WordPress: Install a caching plugin like W3 Total Cache or WP Rocket.
• Wix and Shopify: Both platforms offer built-in caching.
• Web hosts and CDNs: You can often toggle caching to the “On” position in your hosting dashboard. For a CDN like Cloudflare, turn on caching in your dashboard.

Many caching tools are either free or offer a premium tier with extra features. Just keep in mind that you may have to pay for advanced features.

Caching Best Practices

Here are my best practices for caching:

1. If a file rarely changes (like for CSS or images), give it a lengthy caching duration, like months or weeks.
2. Use a CDN, even if your server is super fast and offers caching.
3. Clear your cache whenever you complete a major update. This way, users actually see your changes.

I’ve found that most caching plugins and CDNs offer “purge” buttons for you to manually clear out your cache after major updates.

The final foundational piece to improve your website’s performance is compression. It’s like vacuum sealing your clothing to put in storage — everything inside stays the same, but it uses a far smaller package.

What It Is

Compression shrinks the size of a file. As a result, anything from text files (CSS, JS, and HTML) to media files (videos and images) moves faster over a network. With compression, you still get the same content, but its container is much smaller. And when the container unzips, it provides content that’s hardly degraded.

Compression can account for up to 80% smaller file sizes. This leads to much faster download speeds.

Types of Compression

There are several types of compression:

• Text compression: You’ll usually see text files like CSS, HTML, and JavaScript compressed using algorithms like Brotli and GZIP.
• Video compression: You’re generally better off hosting your videos on a site like Vimeo or YouTube. But to compress yourself, go with a modern codec like VP9 or H.265.
• Image compression: Most image compression reduces the size of an image without hurting its visual quality. After that, you can change an image to a more modern image format like WebP or AVIF, both of which offer smaller compression sizes than PNG and JPEG.

You’ll want to compress every type of content on your website that’s prone to slowing it down, as long as the compression doesn’t cause a noticeable decline in quality.

How to Enable Compression

I like to compress media and text files using certain methods for these platforms:

• WordPress: Most standard caching plugins turn on Brotli or GZIP compression. For image compression, I recommend a dedicated plugin like Imagify or ShortPixel.
• Wix and Shopify: Image and text compression happen automatically.
• Servers and CDNs: Set up compression in your Nginx or Apache server settings. CDNs like Cloudflare offer Brotli, but you must turn it on.

As you can see, compression and caching go hand-in-hand. That’s why you can usually just add one caching plugin and get results for both caching and compression.

Compression Best Practices

Here are my best practices for compression:

1. Opt for Brotli over GZIP when possible (superior browser support and compression).
2. Always use PNG and JPEG fallbacks in case older browsers don’t support AVIF or WebP.
3. Never overcompress images or files where you lose visible quality.

I find it best to test different compression levels before committing to one. This can be done in your WordPress plugin or in your server settings.

Each performance enhancement pillar — lazy loading, caching, and compression — offers its own unique advantage, but the true power arises when you combine them all. All three are proven techniques, and you don’t need to be a developer to implement them.

The best part? These quick changes can boost your site performance and improve search engine rankings dramatically.