View Source
Illustration by John Hersey

003 Using a CDN to speed up your sites


From:

View Source

with Ray Villalobos

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

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.
please wait ...
Watch the Online Video Course View Source
2h 10m Intermediate Jan 20, 2012 Updated May 25, 2012

Viewers: in countries Watching now:

The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.

Topics include:
  • Creating a custom URL in WordPress
  • Adding breadcrumb links to sites
  • Creating a toggle button with jQuery
  • Adding Twitter feeds to a site
  • Adding PayPal buttons to pages
  • Uploading photos to your web site
  • Embedding videos for different browsers and devices
  • Parsing and placing a YouTube video feed
Subject:
Web
Software:
WordPress
Author:
Ray Villalobos

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.

There are currently no FAQs about View Source.

 
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.

* Estimated file size

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 ?

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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.