I was going through [Best Practices for Speeding Up Your Web Site from developer site of Yahoo...][1]

 - What are the advantages and disadvantages of using a [content delivery network][2] (CDN)?

 - When to use a CDN?

 - Is a CDN a performance booster?

  [1]: http://developer.yahoo.com/performance/rules.html
  [2]: http://en.wikipedia.org/wiki/Content_delivery_network


What are the advantages and disadvantages of using a content delivery network (CDN)?

In order to improve performance of our web pages, we are recommended to use [CDN][1]s to serve `.js` files on our web pages. That makes sense.

Also, we are recommended to bundle our `.js` files in order to reduce the number of requests which are being made to server on load.

So, we need to sit down and make decision between if we use CDN or bundle `.js` files.

What are the pros and cons? Which ones make more sense?


  [1]: http://en.wikipedia.org/wiki/Content_delivery_network

Bundling .js files vs CDN

Bootstrap is distributed in CDN in

http://www.bootstrapcdn.com/

* Is it possible to load Bootstrap with Require.JS 2.x (shimmed or native AMD)?  

* How it is possible to load Bootstrap, or any minified JS, directly from CDN URL with Require.js



Loading Bootstrap from CDN with Require.js

I&#39;d like to use `react.min.js` from a CDN in production (e.g. https://unpkg.com/react@15.3.1/dist/react.min.js)

What is the best way to get Webpack to transform my `import React from &#39;react&#39;` statements into `const React = window.React` instead of building `node_modules/react` into the bundle?                 

I&#39;ve been doing it with `resolve.alias` like this:

In `index.html`:

    &lt;head&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;https://unpkg.com/react@15.3.1/dist/react.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;/assets/bundle.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;

In `webpack.prod.config.js`:

    alias: {
      react$: &#39;./getWindowReact&#39;,
    },

`getWindowReact.js`:

    module.exports = window.React;

**Note**: In the old question I didn&#39;t realize that building React into a Webpack bundle with `NODE_ENV=production` would strip out the `propTypes` checks.  One of the answers focuses on that.

How to use a library from a CDN in a Webpack project in production

What would be a good way to attempt to load [the hosted jQuery at Google][1] (or other Google hosted libs), but load my copy of jQuery if the Google attempt fails?

I&#39;m not saying Google is flaky. There are cases where the Google copy is blocked (apparently in Iran, for instance).

Would I set up a timer and check for the jQuery object?

What would be the danger of both copies coming through?

Not really looking for answers like &quot;just use the Google one&quot; or &quot;just use your own.&quot; I understand those arguments. I also understand that the user is likely to have the Google version cached. I&#39;m thinking about fallbacks for the cloud in general.

---

Edit: This part added...

Since Google suggests using google.load to load the ajax libraries, and it performs a callback when done, I&#39;m wondering if that&#39;s the key to serializing this problem.

I know it sounds a bit crazy. I&#39;m just trying to figure out if it can be done in a reliable way or not.

---

Update: jQuery now hosted on Microsoft&#39;s CDN.

http://www.asp.net/ajax/cdn/

  [1]: http://code.google.com/apis/ajaxlibs/

Best way to use Google&#39;s hosted jQuery, but fall back to my hosted library on Google fail

Question 1:

What exactly is the purpose of installing Twitter Bootstrap through npm? I thought npm was meant for server side modules. Is it faster to serve the bootstrap files yourself than using a CDN? 

Question 2:

If I were to npm install Bootstrap, how would I point to the bootstrap.js and bootstrap.css files?



Purpose of installing Twitter Bootstrap through npm?

Does it actually matter which CDN you use to link to your jquery file or any javascript file for that matter.  Is one potentially faster than the other?  What other factors could play a role in which cdn you decide to use?  I know that Microsoft, Yahoo, and Google all have CDN&#39;s now.

Microsoft CDN for jQuery or Google CDN?

This may be obvious to some, but I&#39;ve been wondering: why should I depend on [Google&#39;s server][1] to host jQuery for my site?

Is it only because it loads faster this way?


  [1]: https://developers.google.com/speed/libraries/devguide

Why should I use Google&#39;s CDN for jQuery?

Is there any CDN sources for backbone.js and also underscore.js to use in our projects?

backbone.js &amp; underscore.js CDN recommendation?

I’m using a CDN for the following javascript:

* https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
* https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
* http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
* http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js 

For each one, how can I revert to using local copy in the instance where it may be blocked/unavailable?

How to load local script files as fallback in cases where CDN are blocked/unavailable?

I&#39;m using Amazon&#39;s CloudFront to serve static files of my web apps. 

Is there no way to tell a cloudfront distribution that it needs to refresh it&#39;s file or point out a single file that should be refreshed? 

Amazon recommend that you version your files like logo_1.gif, logo_2.gif and so on as a workaround for this problem but that seems like a pretty stupid solution. Is there absolutely no other way?

Force CloudFront distribution/file update

Is there a hosted version of [Twitter Bootstrap][1]? Something similar to the hosted version of jQuery on Google?


  [1]: http://twitter.github.com/bootstrap/

Is there a hosted version of Twitter Bootstrap?

I am linking to the jQuery Mobile stylesheet on a CDN and would like to fall back to my local version of the stylesheet if the CDN fails. For scripts the solution is well known:

    &lt;!-- Load jQuery and jQuery mobile with fall back to local server --&gt;
    &lt;script src=&quot;http://code.jquery.com/jquery-1.6.3.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      if (typeof jQuery == &#39;undefined&#39;) {
        document.write(unescape(&quot;%3Cscript src=&#39;jquery-1.6.3.min.js&#39;%3E&quot;));
      }
    &lt;/script&gt;

I would like to do something similar for a style sheet:

    &lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css&quot; /&gt;

I am not sure if a similar approach can be achieved because I am not sure whether the browser blocks in the same way when linking a script as it does when loading a script (maybe it is possible to load a stylesheet in a script tag and then inject it into the page) ?	


So my question is: How do I ensure a stylesheet is loaded locally if a CDN fails ?


How to fallback to local stylesheet (not script) if CDN fails

My website uses about 10 third party javascript libraries like jQuery, jQuery UI, prefixfree, a few jQuery plugins and also my own javascript code. Currently I pull the external libraries from CDNs like Google CDN and cloudflare. I was wondering what is a better approach:

 1. Pulling the external libraries from CDNs (like I do today).
 2. Combining all the files to a single js and a single css file and storing them locally.

Any opinions are welcome as long as they are explained.
Thanks :)

Multiple files on CDN vs. one file locally

I am planning on using Google to download the jQuery lib for both UI and Core. My question is, do they allow me to download the CSS for it or should I have to host it myself?

Also if I use Google to load how should I load other plugins?  Can I compress all plugins together or should it be its own separate file?

Downloading jQuery UI CSS from Google&#39;s CDN

We&#39;re currently pulling jQuery and jQueryUI (and jQueryUI CSS) libraries from the google CDN. I like this because I can call `google.load(&quot;jquery&quot;, &quot;1&quot;);`                          
 and the latest jQuery 1.x.x will be used.

Now I am to pull the libraries locally because of security.

I&#39;m happy to pull them locally but I&#39;m wondering what are some of the other benefits and pitfalls to watch out for?



Benefits vs. Pitfalls of hosting jQuery locally

Are we allowed to link files directly from Github ?

&lt;!-- language: lang-html --&gt;

    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://raw.github.com/username/project/master/style.css&quot;/&gt;
    &lt;script src=&quot;https://raw.github.com/username/project/master/script.js&quot;&gt;&lt;/script&gt;

I know this is allowed on Google Code. This way I don&#39;t have to worry about updating a local file.

How to link files directly from Github (raw.github.com)

&gt; #PAY ATTENTION!
**The Bootstrap icons are back** after [**this pull request merge**](https://github.com/twbs/bootstrap/pull/9767).

&gt;---

&gt;After going back and forth on this for the last couple weeks, I&#39;ve decided to **restore the Glyphicons icon font to the main repo**. Given how prevalent icons are in UIs, it&#39;s probably a disservice to most folks to not include them (or some other icon font) in the same spot as the CSS and JS.

&gt;With this update comes the following:

&gt; - Restores documentation (on the Components page)
- New variables, `@icon-font-path` and `@icon-font-name`, for flexibility in adding and removing icon fonts
- Upgrades to latest Glyphicons (adding 40 new icons)
- Removes the **old Glyphicons mention from the CSS page**


&gt;We&#39;ll work on improving the customization of icon fonts in the future so swapping font libraries can be easier (which was the whole motivation for the original removal).


----

Which is the CDN url of the new version of Twitter Bootstrap Glyphicons? 

From the Bootstrap 3 [they were moved into a separate repository](https://stackoverflow.com/q/17901776/1420197), but I didn&#39;t find any CDN.

From the official documentation:

&gt;With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.

On the [official website](http://glyphicons.getbootstrap.com/) they don&#39;t provide a CDN url for icons.

Where can find it? I don&#39;t want to download the repository and include it into my project.

Bootstrap 3 Glyphicons CDN

Some weeks ago Amazon announced that they have lowered the content expiration period:

[Amazon CloudFront Lowers Minimum Content Expiration Period][1]


So much that you can actually set now TTL in CloudFront to 0. So my question is, why could it be useful to have a CloudFront distribution with TTL set to 0. To me this means no caching at all so every request that gets to CloudFront will end up hitting the origin.

What am I missing?


  [1]: http://aws.amazon.com/about-aws/whats-new/2012/03/19/amazon-cloudfront-lowers-minimum-expiration-period/

What is a TTL 0 in CloudFront useful for?

It&#39;s well known that [Google](http://code.google.com/apis/ajaxlibs/documentation/index.html) and [Microsoft](http://www.asp.net/ajaxlibrary/cdn.ashx) host several common javascript libraries on their CDNs (content distribution networks).  Unfortunately neither seems to host [JSON2.js](https://github.com/douglascrockford/JSON-js/blob/master/json2.js).

I&#39;m aware that I could upload a copy of JSON2.js to my server and serve it myself, but there are a number advantages CDNs offer that I would like to take advantage of.

So with that in mind, are there any publicly available CDNs that host JSON2? If not, any idea why? Is there some sort of copyright reason?

Is there a publicly available CDN that hosts JSON2?

We have a Cloudfront distribution with custom origin that has been working just fine for quite a long time, serving static assets for one of our sites. Just this morning, we noticed that our logo was displaying as a broken link.

Upon further investigation, Cloudfront is returning a strange error message that I&#39;ve never seen before for the [URL in question][CFLogo]:

&gt; # ERROR
&gt;
&gt; ## The request could not be satisfied.
&gt;
&gt; ------
&gt;
&gt; ------
&gt;
&gt; Generated by cloudfront (CloudFront)

Several other Cloudfront URLs from this distribution return the same error, but then others (again, from the same distribution) are working just fine. I don&#39;t see a pattern to what works and what doesn&#39;t.

Some other data points:

* The [origin URLs][ORLogo] work just fine. There&#39;s been no recent interruption in service, to my knowledge. 
* I&#39;ve invalidated the logo URL specifically, to no effect.
* I&#39;ve invalidated the root URL of the distribution, to no effect.

Any idea what&#39;s going on here? I&#39;ve never seen Cloudfront do this before.

**UPDATE:**

Here&#39;s the verbatim HTTP response from Cloudfront:

    $ http GET https://d2yu7foswg1yra.cloudfront.net/static/img/crossway_logo.png
    HTTP/1.1 502 Bad Gateway
    Age: 213
    Connection: keep-alive
    Content-Length: 472
    Content-Type: text/html
    Date: Wed, 18 Dec 2013 17:57:46 GMT
    Server: CloudFront
    Via: 1.1 f319e8962c0268d31d3828d4b9d41f98.cloudfront.net (CloudFront)
    X-Amz-Cf-Id: H_HGBG3sTOqEomHzHubi8ruLbGXe2MRyVhGBn4apM0y_LjQa_9W2Jg==
    X-Cache: Error from cloudfront

    &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
    &lt;HTML&gt;&lt;HEAD&gt;&lt;META HTTP-EQUIV=&quot;Content-Type&quot; CONTENT=&quot;text/html; charset=iso-8859-1&quot;&gt;
    &lt;TITLE&gt;ERROR: The request could not be satisfied&lt;/TITLE&gt;
    &lt;/HEAD&gt;&lt;BODY&gt;
    &lt;H1&gt;ERROR&lt;/H1&gt;
    &lt;H2&gt;The request could not be satisfied.&lt;/H2&gt;
    &lt;HR noshade size=&quot;1px&quot;&gt;
    &lt;/BODY&gt;&lt;/HTML&gt;

    &lt;BR clear=&quot;all&quot;&gt;
    &lt;HR noshade size=&quot;1px&quot;&gt;
    &lt;ADDRESS&gt;
    Generated by cloudfront (CloudFront)
    &lt;/ADDRESS&gt;
    &lt;/BODY&gt;&lt;/HTML&gt;


[CFLogo]: https://d2yu7foswg1yra.cloudfront.net/static/img/crossway_logo.png
[ORLogo]: https://my.crossway.org/static/img/crossway_logo.png

Cloudfront custom-origin distribution returns 502 &quot;ERROR The request could not be satisfied.&quot; for some URLs

Is there a [content delivery network][1] (CDN) that is hosting [google-code-prettify][2]?

I am putting together a blog on [TypePad][3] and would like to take advantage of a CDN if possible.

  [1]: http://en.wikipedia.org/wiki/Content_delivery_network
  [2]: http://code.google.com/p/google-code-prettify/
  [3]: https://en.wikipedia.org/wiki/TypePad


All Cdn Solutions on Gang of Coders

Total of 22 Cdn Solutions