How to add a CDN to HTML?
PublishedViews3EditorJinDun TeamEstimated reading time 3 min
A typical web performance killer that many developers don't realize is the physical distance between the server and the user. A proven solution to this problem is to introduce a content delivery network (CDN) into HTML.
CDNs are able to provide "heavyweight" resources such as images, stylesheets, and script files from servers close to users in physical locations. Not only does it help reduce latency, but it also improves your web search rankings. Whether you're a beginner using public libraries like Bootstrap or a developer who needs to build a private custom CDN, this guide will show you the correct implementation method in detail.
Normally, when building a standard website, the files referenced in the HTML code are hosted on a personal server:
HTML
<linkrel="stylesheet"href="css/style.css">
<scriptsrc="js/main.js">
When you "add a CDN", simply replace these paths with the addresses of the global network of high-speed servers:
HTML
<linkrel="stylesheet"href="https://cdn.Sudun.com/css/style.css">
<scriptsrc="https://cdn.Sudun.com/js/main.js">
If you use a well-known open-source library like Bootstrap, jQuery, or FontAwesome, you don't need to host your files yourself. You can directly use public CDN services such as cdnjs, jsdelivr, or unpkg.
Paste the tag into the element of the HTML:<link>``<head>
HTML
<htmllang="zh-CN">
<metacharset="UTF-8">
My high-speed website
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
Place the label at the end of the section, right before the closed label. This ensures that HTML content loads first:<script>``<body>``</body>
HTML
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
If you have a custom website and want CDN acceleration of your images and resources through a provider like Cloudflare, Bunny.net, or Amazon CloudFront, follow these steps:
Upload images, CSS, and JS files to an origin server or bucket (e.g., AWS S3).
Once you configure the CDN, you will get an "endpoint" or "zone URL", such as: https://assets.Sudun.com/
Use the Code Editor's Find Replacement tool to update all local paths to the new CDN address:
Before modification:
After modification:
In addition to speed, CDNs also bring SEO optimization and security enhancements. Follow these standard practices:
When using a public CDN, add the integrity and crossorigin attributes. This effectively prevents hackers from "injecting" malicious code into the libraries you use.
HTML
Although the probability is extremely low, CDN services can still be disrupted. To ensure that the website functions normally, you can install the same library file locally and set up a detection mechanism: if the CDN fails to load, it will automatically switch to the local server to load.
HTML
<scriptsrc="https://cdn.Sudun.com/jquery.min.js">
Before the browser starts processing content, establish a connection to the CDN server in advance. Put this code on top:<head>
HTML
<linkrel="preconnect"href="https://cdn.Sudun.com">
The Google ranking algorithm places a high emphasis on core web page metrics:
LCP (Maximum Content Paint): Accelerating the delivery of images and CSS through CDNs can significantly improve the loading speed of visible content on web pages.
TTFB (Time to First Byte): Faster byte transfer speeds because the CDN server is closer to the user.
Using a CDN will increase website visitor satisfaction and improve SEO metrics to better rank in search results.
Adding a CDN to HTML is a small change that can make a difference. Whether it's copy-pasting a link to a CSS library directly or migrating an entire resource folder to a custom endpoint like Sudun.com, you'll end up with a faster, more secure, and more reliable website.
