Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

003 Using a CDN to speed up your sites

From: View Source

Video: 003 Using a CDN to speed up your sites

Hello! This is Ray Villalobos and welcome to View Source! This week we're taking a look at using CDNs to speed up the loading of your favorite JavaScript libraries. So if you spent too much time playing Angry Birds between page loads, then it's time to View Source. CDN stands for Content Delivery Network, and it's a network of servers that store commonly-used libraries across a wide range of locations. Google for example has copies of the most common JavaScript libraries stored on a CDN. So instead of downloading and installing your own copies of jQuery, you can simply link to Google's.

003 Using a CDN to speed up your sites

Hello! This is Ray Villalobos and welcome to View Source! This week we're taking a look at using CDNs to speed up the loading of your favorite JavaScript libraries. So if you spent too much time playing Angry Birds between page loads, then it's time to View Source. CDN stands for Content Delivery Network, and it's a network of servers that store commonly-used libraries across a wide range of locations. Google for example has copies of the most common JavaScript libraries stored on a CDN. So instead of downloading and installing your own copies of jQuery, you can simply link to Google's.

Why a lot of locations? Because the web works by sending and receiving packets of information across different physical locations. The closer a user is to your server, the faster the data will get to them. A CDN puts multiple copies of the files across different physical locations. The users will always get the one that is closest to them. Yahoo!'s developer network, Google and others encourage the use of CDNs. Yahoo! has an excellent document on speeding up your web site at this URL.

One of these suggestions is to always use a content delivery network. Remember that since browsers cache JavaScript files, if a user goes to a site that links to a Google CDN and then goes to another site that links to the same link, the second site will benefit from the library already being cached in the computer. Since Google's copies of jQuery are very popular, it's likely that a lot of users will have the version of jQuery already loaded in their computers when they visit your web site. To use Google's CDN, you can go to this URL where you can find copies and links to the most popular libraries, including jQuery.

I like to use this particular link right here, which is the minified version of jQuery, and this happens to be the latest version as of this video. You can find older versions by clicking on this link. There is a couple of problems with using Google's CDN that you should be aware of. The first one is that if there is a connection problem with the CDN, the script will not load. Chances are that Google's CDNs are more reliable than most servers. The more likely problem is that you might be developing code on your local machine without a connection to the Internet.

If your code depends only on a CDN to load jQuery, then your scripts will not load when offline and you won't be able to test things out. The fix is to use a link to a Google or other CDN, but have a backup copy on your local drives. So let's take a look at how you would implement some of this code on a web page. Here's a web page just awaiting my links to the JavaScript libraries to begin working. So we're going to go to the codesnippets.txt file here. This is how we would normally add these libraries to our code. We would download the copies of jQuery and in this case, jquery.cycle, and we would add them to the head section of our document.

Once we add those links, you'll see that the JavaScript will take over and this rotator will start fading the photos. Now if we want to, we could just link to the Google CDN by linking to those links from that page, and in the case of jquery.cycle, we could link to a github CDN. So I'm going to copy that and go back into my index.html file, and I'll replace these pieces of code, and you could see that the file works in the same manner. However, if I lost my web connection, these libraries would not load and the script will not be able to execute and activate the rotator.

So I'm going to go back into codesnippets and show you the version that you should be using which has essentially two script tags for each one of our libraries. The first script tag adds our Google CDN to jQuery right here. And then on the next line, it checks to see if that CDN has already loaded by checking to see if the window.jquery function exists. If it doesn't exist, then it's going to write out to our current document a link to our current local version of the library. So if we copy these things, go back to our index page, and replace our calls to our library, you'll see that it still works fine.

And the advantage is that if we lose the web connection, it will load the local version of our libraries. For more great lessons on jQuery and JavaScript, don't forget to visit the lynda.com Online Training Library. And remember that if you ever had to apologize by sending #F00 roses to your spouse, then you've probably got time for View Source.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 15815 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.