DEV Community

Cover image for Best Ways to Optimise Website Content Delivery
Cloakd
Cloakd

Posted on • Originally published at blok.host

Best Ways to Optimise Website Content Delivery

Overview

Optimising website content delivery is crucial to ensure your website loads quickly and provides a great user experience. This post will discuss some of the best ways to optimise website content delivery.

Minify CSS and JavaScript Files

Minimising CSS and JavaScript files involves removing unnecessary characters like comments, white spaces, and line breaks to reduce the file size. This step helps to improve loading times and the overall performance of your website. Developers commonly use tools such as Webpack and Vite to minify CSS and JavaScript files.

Preload & Pre-Connect

Preloading and pre-connecting are techniques to optimise website content delivery by allowing resources to load in advance. These few lines of code can significantly improve your website's loading times by reducing the time it takes to fetch resources.

There are many other loading methods, but this could be its entire blog (dns-prefetch, prerender, modulepreload etc.). So we will keep it simple with the most common ones.

Here's an example of how to use preload and pre-connect in your HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://example.com">
    <link rel="preload" href="https://example.com/style.css" as="style">
    <link rel="preload" href="https://example.com/script.js" as="script">
    <link rel="stylesheet" href="https://example.com/style.css">
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <script src="https://example.com/script.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The above ensures the optimal loading of the assets needed on https://example.com.

Optimise Image Loading

Images can significantly impact website loading times. Optimising the image format and size and using lazy loading can improve your website's performance.

Optimise the Image Format and Size

Optimising the image format and size can reduce the amount of data that needs to transfer to the user, improving website performance. So when it comes to formats, always optimise for what you need, taking into account requirements such as transparency (PNG vs JPEG), scalability (JPEG vs SVG), browser support (JPEG vs WebP) etc.

In addition, you can use tools like CompressJPEG etc. to compress images without sacrificing quality; usually, images can be reduced by about 20% without losing visible quality.

Lazy Load Images

Lazy loading images can significantly improve the performance of your website by deferring the loading of images until they are needed. You can use the loading attribute in the img tag to implement lazy loading.

Here's an example of how to use lazy loading with the loading attribute:

<img src="example.jpg" alt="Example Image" loading="lazy">
Enter fullscreen mode Exit fullscreen mode

This ensures the image is only loaded when needed, speeding up the time to first paint!

Use Content Delivery Networks (CDNs)

Using Content Delivery Networks (CDNs) is another way to optimise website content delivery. CDNs use a distributed network of servers worldwide to deliver your website's content. When a user visits your website, the content is served from the server closest to them, reducing the distance the content needs to travel and resulting in faster loading times.

Decentralised Content Delivery Networks (dCDNs) are an emerging technology that promises to revolutionise how we deliver and consume online content. Unlike traditional CDNs that rely on centralised servers, dCDNs use a network of decentralised nodes to distribute content making them faster, more secure, and more resistant to downtime and cyber attacks. BlokHost is a notable example of a dCDN that is gaining popularity.

BlokHost is built on blockchain technology, which provides enhanced security, transparency, and decentralisation. By leveraging the power of dCDNs like BlokHost, website owners can further optimise their content delivery and provide a better user experience with the increasing demand for fast and reliable content delivery.

Summary

In conclusion, optimising website content delivery is essential to ensure that your website loads quickly and provides a great user experience. You can significantly improve your website's loading times and performance by minifying CSS and JavaScript files, using CDNs, preloading and pre-connecting resources, and optimising image loading.

Top comments (4)

Collapse
 
cloakd profile image
Cloakd

Let me know any other ways you know of that help speed up website load times!

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

I can think of some extra thingies:

  • Priotiry hints and fetchPriority are a great help as well.
  • Using a Functional Programming approach rather than an Object Oriented approach makes your App tree-shakeable, so bundlers can remove unused code paths from the production build.
  • Server-Side Rendering and Static Site Generation also plays an important role on modern web apps that require SEO.
  • Currently tools that makes that easy for you to handle (like Next JS) began to use streams (see Streaming SSR) to push data from the server to the client on a flux of data instead the classical HTTP 1.1 request-response "loop", taking advantage of the latest HTTP version (see HTTP/3) which improves significantly the overall performance/experience, and we'll see this trend in any framework that wants to be up-to-date with current features.

Best regards! 😁

Edit:
Just out of curiosity, aren't all CDNs decentralised? πŸ˜… What am I missing?

Thank you

Collapse
 
cloakd profile image
Cloakd

Great points! SSR i tend to avoid due to the nature of frameworks changing every 3 months so always tend to stay as agnostic as possible!

CDNs are all distributed but not decentralised, in the traditional sense a single entity can censor & decide exactly what & how the network reacts. Whereas in a dCDN its up to each individual operator!

When it comes to serving more remote regions a mesh network of individual nodes really helps here when it comes to latency! Most normal CDNs are usually just hosted on the "Edge" (in the main terminating DataCenters) so works great in built up areas but not so much elsewhere :)

Thread Thread
 
joelbonetr profile image
JoelBonetR πŸ₯‡
Great points! SSR i tend to avoid due to the nature of frameworks changing every 3 months so always tend to stay as agnostic as possible!

frameworks do evolve but you won't be re-coding everything on a new framework/lib each 3 months nor each year πŸ˜…

You can use the API-first approach that Next JS implements as example; it allows you to code a monolithic App to reduce initial infrastructure costs and whenever you need to scale, you just pick the /api directory and deploy it as Node Express App somewhere else 😁 or if you prefer so, build external APIs from the beginning, nothing stops you on doing so

CDNs are all distributed but not decentralised, in the traditional sense a single entity can censor & decide exactly what & how the network reacts. Whereas in a dCDN its up to each individual operator! When it comes to serving more remote regions a mesh network of individual nodes really helps here when it comes to latency! Most normal CDNs are usually just hosted on the "Edge" (in the main terminating DataCenters) so works great in built up areas but not so much elsewhere :)

Thank you very much for the explanation, I mixed up concepts!
I get to know how CDNs work more or less and also how Netflix sent servers to ISPs so they plug them in the "switchboards" to act as CDN for videos.
Each thing you learn in IT has 10 miles worth of roots πŸ˜‚

Where can I learn more about this dCDN stuff?