Using jQuery with a CDN For Better Performance (Beginners)
What Is jQuery And What Is It Used For?
- Document manipulation and traversal- jQuery makes it super-easy to perform all manner of things on documents with few and uncomplicated lines of code.
- jQuery animations and effects- Create smooth frontend animations without having to deal with the internal and complications of vanilla Js.
- Ajax to make server requests
- Manipulate CSS for dynamic styling
- Adds additional utilities to your designs
- Interact with HTML Methods
Example jQuery Event Handler for Mouseover
$("p").css ("background-color", "red");
jQuery is a library and therefore needs to be loaded in some way to render your page or other assets that depend on it. This perfectly fine in most cases, but sometimes having to load the library from your server can have a slightly negative impact on your page load speeds hence the need to include jQuery in your projects. Here are some instances where hosting the full jQuery library on your servers could have a negative impact on your website/web app:
You have a limited hosting package- some hosts will provide cheap but restricted hosting packages that may suffer if you have too many assets and dependencies on your website or web application. This will affect your page-load speeds and probably restrict how much you can upload to your server.
How to Use jQuery with a CDN
A content delivery network makes it easier to load libraries like jQuery without having to worry about latency or any other restrictions you might have on your server. It also saves you the hassle of having to download the entire jQuery library, unzipping it and uploading it to the right folder on your web server in order to use it in your projects.
You can add jQuery to your project through a CDN by either referencing it within your head tags and using an open-source jQuery CDN like Google as shown in the code snippet below.
Alternatively, you can still have jQuery hosted on your web server and have your website or application loaded through a website CDN. This way, the CDN will use cached versions of your web assets to make it smoother for your visitors to load your website on their devices. Using a CDN for libraries such as jQuery has become so popular and effective at improving user experiences that it has become a best practice in the industry.
Where do I put jQuery CDN in HTML?