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:
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
A. Blogger Widgets
Then just delete this line.
B. Blogger Template
Go To Blogger Dashboard → Template → Edit HTML → Click into template area → Press
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:
4. CDN And China Visitors
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:
We could find the jQuery link as this one:
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:
For now, the link of latest version would be:
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.
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.