In a few posts here, we will explore how to improve the site performance and scale.
Make sure you don't write </script> anywhere within the <script> element as it will close the HTML and cause the script to fail. So notice that we escaped it using a backslash <\/script> in the closing script element of the documentWrite.
To begin with one of the easiest performance boost to page loads is to source your standard libraries from CDN whenever possible instead of sourcing them from your server.
WHAT
A CDN, Content Delivery Network, is a set of servers spread across the globe that host content and have an optimized algorithm to serve the content efficiently. So most of your standard libraries like jQuery should be loaded from CDN.
WHY
HOW
Using CDN is simple. Just direct your script statement to load from Google instead of loading from your server copy.
Notice that we use https. Many CDNS also accept just // and then translate that to http or https depending on what your site uses. However, by using https, you can ensure that no one can get in between you and Google and tamper the libraries. So even if your site is un-encrypted http, use https while loading the CDN libraries.
And finally, you may yet want the browser to go to your local server copy in case your CDN is unavailable. While chances of CDNs being unavailable are low, you may hit unfortunate events like library moving behind a paywall, changing its URL location, and such. So it is prudent to have a fallback. To do that just add a check to see if the library was loaded, and if not, load yours.
WHAT
A CDN, Content Delivery Network, is a set of servers spread across the globe that host content and have an optimized algorithm to serve the content efficiently. So most of your standard libraries like jQuery should be loaded from CDN.
WHY
The advantages of using CDN for your standard scripts are:
- Better Caching: No matter how optimized your site is, the user will have to download the library once at least. But, if you use a popular CDN, and if your user has already visited another site that referenced the same library, the library has already been downloaded into the browser's cache. So it will not be downloaded again. This creates a cool cross-site caching effect.
- Lower Load and More Parallelizing: Browsers typically limit number of simultaneous connections from one server. Loading libraries from a CDN server means one less connection to your server for that library. This translated to lower loads to your server, but more importantly, it also frees up the connections that this library load would have used to loading your actual content.
- Decreased Latency: CDNs are typically optimized to serve content efficiently based on location. Meaning that the content will be served from the CDN server that can serve it the fastest. You will have to invest fairly well in infra to achieve that kind of optimization.
WHICH
The main CDN providers are cdnjs and Google CDN, along with Microsoft for ASP. Google CDN is the most widely deployed. However, cdnjs has some libraries that Google does not provide.
HOW
Using CDN is simple. Just direct your script statement to load from Google instead of loading from your server copy.
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>
Notice that we use https. Many CDNS also accept just // and then translate that to http or https depending on what your site uses. However, by using https, you can ensure that no one can get in between you and Google and tamper the libraries. So even if your site is un-encrypted http, use https while loading the CDN libraries.
And finally, you may yet want the browser to go to your local server copy in case your CDN is unavailable. While chances of CDNs being unavailable are low, you may hit unfortunate events like library moving behind a paywall, changing its URL location, and such. So it is prudent to have a fallback. To do that just add a check to see if the library was loaded, and if not, load yours.
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script>
if (!window.jQuery)
document.write('<script src="/path/to/local/jqueryui/1.8.18/jquery-ui.min.js"><\/script>');
</script>
Make sure you don't write </script> anywhere within the <script> element as it will close the HTML and cause the script to fail. So notice that we escaped it using a backslash <\/script> in the closing script element of the documentWrite.