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>
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">
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)
Let me know any other ways you know of that help speed up website load times!
I can think of some extra thingies:
Best regards! 😁
Edit:
Just out of curiosity, aren't all CDNs decentralised? 😅 What am I missing?
Thank you
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 :)
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
/apidirectory 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 soThank 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?