2

For a modern website, what is the best way to load javascript libraries (in my case jQuery and D3)?

Let assume:

  • everyone accesses the site using HTTP/2
  • self hosting means hosting on GitHub (i.e. for bl.ocks)
  • referencing could mean:
    • Google for jQuery and cdnjs or D3.org for D3
    • cdnjs for jQuery and D3
    • cdnjs for jQuery and D3.org for D3

Since everyone is using HTTP/2, the parallelism argument no long applies (right?).

In order to maximize the chance of a cache hit, I would assume Google is the best bet for jQuery, but they do not provide D3, so I would have to use cdnjs or D3.org for that. Is there an advantage to using cdnjs for both?

EDIT: Let me say about the audience that it is global, so ideally a solution would work well from e.g. Africa and China. The later is important here, because it blocks access to Google servers, meaning a local fallback would be needed.

The audience is also not limited to D3 designers / bl.ocks users (in case that would be relevant to the cache hit chances).

Nisarg Shah
  • 14,151
  • 6
  • 34
  • 55
Bastiaan Quast
  • 2,802
  • 1
  • 24
  • 50
  • 1
    _the parallelism argument no longer applies_ correct, the main benefit you get is caching from using a CDN – George Sep 20 '17 at 08:42
  • ok, so does that mean Google for jQuery and cdnjs for D3 then? – Bastiaan Quast Sep 20 '17 at 08:49
  • 1
    Yes, if you can use a CDN (you don't have to worry about security/firewall concerns) then use it. – George Sep 20 '17 at 08:51
  • Thanks, but e.g. the China audience would not be able to load jQuery from Google, so then a local fallback? – Bastiaan Quast Sep 20 '17 at 08:53
  • 1
    Yes, you can look at [this answer](https://stackoverflow.com/a/3832530/2315360) if you'd like to know how to do that – George Sep 20 '17 at 09:00
  • 2
    Personally I stopped using CDN at all. While it is great to benefit from the fact that those scripts might already be in the cache because the user was already on another site that uses the same CDN you introduce another point of failure, if one of those sites is slow or down for some time or not reachable for some other reasons (AdBlock or similar privacy tools, Firewall, ...). So if your site does not work for one customer you need to figure out if it is because of the CDN or your script. I prefer to bundle my scripts using webpack and to set a high caching time on them. – t.niese Sep 20 '17 at 10:15
  • thanks, can you explain how that is better than trying e.g. google and having a local fallback? speed? IMO if a visitor has adblock and that add to the loading time, that's more their problem than the other visitors – Bastiaan Quast Sep 20 '17 at 10:21
  • 1
    If the CDN script is in the cache of the visitor, then it for sure will have an impact on speed because it would need to load it from your server once. If it is noticeable depends on your server. AdBlock was just one example, CDNs can be down, can be slow, the DNS resolving might fail, ... . You always need to keep in mind, that you often will not figure out how many visitors are affected. And in my case I learned that it is worse if the site does not work properly, if certain scripts are not loaded, then a website that might be slower, which can be resolve with a good hosting strategy. – t.niese Sep 20 '17 at 11:13

1 Answers1

0

Using a CDN version might mean it's cached, so you save a tiny about of downloading another copy of it. However if it's not, then it can actually slow down your site because you need to make a connection to the CDN site including a DNS lookup, a TCP 3 way handshake, deal with TCP Slow Start meaning the connection is initially slow, do a TLS set up (assuming it's over HTTPS), and finally requesting the resource. After which you never use that CDN for anything else so all that setup cost is wasted.

This cost is doubled up for two different CDNs.

Personally, if it's one or two libraries than I just self host for this reason. Even for HTTP/1.1.

If you really want benefits of a CDN then consider putting the whole site behind a CDN like Cloudfare and not just loading one or two libraries from a CDN. And this might not be a bad idea for a global service like you say this is.

Barry Pollard
  • 40,655
  • 7
  • 76
  • 92