The Tips on How to Link to JQuery Files

Many Blogger widgets are developed using jQuery, one of the famous JavaScript frameworks. In order to run these widgets, we have to load the jQuery file on the website.

If the web owner is not familiar with jQuery, this might happen: find some widgets from the internet, install on a website/blog, but including multiple jQuery files (with different versions). Such action will definitely delay the page loading; even cause an unexpected conflict between different jQuery versions.

Since quite a few widgets from WFU BLOG are written with jQuery, it's important to guide readers how to link to jQuery files correctly. This post will conclude all tips on installing jQuery.

1. JQuery Version

If you're not familiar with jQuery, let's start from scratch. Firstly, we need to know the format of jQuery link.

A. Official Link

If you would like to host the jQuery file on your web storage, just download relative files from jQuery official website. But this way is not recommended, as the response time of your web storage couldn't compete with jQuery official CDN, so let's just link jQuery file directly from the official site. Here is one link example:

http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
There are some features:

• including the string "jquery"
• version is "2.0.0"
• "min" means this file is minified
• extension filename is "js"

Just try to get familiar with the above features, it will help find out the jQuery link in your template.


B. Select Proper Version

Which jQuery version should be used? We might consider 3 factors:

• File size: after version 2.0, the jQuery file size decreases a lot, which could shorten the response/download time from the server. In most situations, we suggest to choose newer version than 2.0 (with compressed version). Please refer to this page "jQuery file size", including the list of all jQuery versions in detail.
• IE support: if your website should be compatible with IE8 or older version, then you could choose an older version of jQuery than 1.8.3.
• Plug-in: some plug-ins might develop under old jQuery versions, thus you're forced to use old jQuery version accordingly.

2. Find out Unnecessary Jquery Link

After a basic introduction about jQuery, let's go on to find out all unnecessary jQuery links in the template. For the Blogger blog, not only we must check the template, but also all the sidebar and HTML/JavaScript widget.


A. Blogger Widgets

Go to Blogger Dashboard → Layout → Edit each HTML/JavaScript widget → Search the string "jquery", to check if there is any jQuery link. If so, it might look like:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Then just delete this line.


B. Blogger Template

Go To Blogger Dashboard → Template → Edit HTML → Click into template area → Press Ctrl-F to search the string → Follow the tips as "section A. Blogger Widgets", to search all jQuery links. Just delete these links and leave only one jQuery link before the location </head> in the template.

3. HTTPS Compatible

Recently BLOGGER STARTED TO SUPPORT HTTPS. If your blog have enabled HTTPS mode, in the Blogger template, it's very important that you have to ensure all protocols(of links) come with "https", to avoid the condition of MIXED CONTENT.

Also, you could change the protocol string as "//" only, this is the easier way for HTTPS compatible. For example, we could modify jQuery official link as:

<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>

4. CDN And China Visitors

A. CDN

CDN is short for "Content Delivery Network". In brief, the goal of a CDN is to serve content to end-users with high availability and high performance(Wiki definition).

We might host the jQuery file on our web storage, but surely the speed will be slower than CDN. So it's better to choose a suitable CDN for the jQuery file.


B. Google CDN

According to this page, Google provides the CDN for various JS libraries:

• https://developers.google.com/speed/libraries/

We could find the jQuery link as this one:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
Just modify the red text as your favorite version.

Basically, Google deploys a large amount of CDN in the world, if you don't have other concerns, it's the best choice to let the Google CDN host the jQuery file for you.


C. Jquery CDN

Officially Jquery also provide the CDN:

• https://code.jquery.com/jquery/

For now, the link of latest version would be:

<script src='//code.jquery.com/jquery-2.1.4.min.js'></script>

Please just modify the version as demand.


D. China Visitors

Though Google CDN is the best choice to host jQuery file, after testing by greatfirewallofchina.org, all files in Google CDN will be blocked by China.

So, if some of your readers are from China and you do care about China market, then official jQury CDN will be the right choice.

5. Conclusion

At last, let's review whole procedure, to realize all steps in brief:

• Refer to "Chapter 1. JQuery Version", to know the format of jQuery link, and choose the suitable version.
• Delete all duplicated jQuery links in the website, and leave only one.
• Change the protocol of jQuery link as "//" only.
• According to "chapter 4. CDN And China Visitors", decide to use Google CDN, or official jQuery CDN.
• Finally, put this jQuery link before the location </head> in the template.