12 ms·

My fight against CDN libraries

298 points by agateau 10y ago

hhsnopek 10y ago
The only issue with going against the grain here if you're not putting your site itself behind a cdn. It'll vary in download rates across the global. This was the intended use case for CDNs, but analytics are added so CDNs can improve. You're correct with the fact that they are tracking us, but there's a trade off that comes with this that holds tremendous value. If that value of speed isn't a factor or low on your list of priorities then by all means, sever everything.
- minxomat 10y ago
  Not download rates, but request times are important for a website. Of course, if your uplink is exceptionally bad, the former matters somewhat, too. Usually, one would amalgamate the resources to avoid additional requests to any server at all (CDN or not, all requests have unnecessary overhead). Many Web CDNs include frameworks that combine CSS, JS etc. resources to speed up page loading. Add to that SVG inlining and image optimization and you're good speedwise. What you still miss the the geo-targeting of an Anycast network like CF et al. This will slow down the initial resource request again. The question is: If you knew that you could live without the aforementioned pros of a CDN, why use it in the first place...
  - majewsky 10y ago
    > Many Web CDNs include frameworks that combine CSS, JS etc. resources to speed up page loading. Add to that SVG inlining and image optimization and you're good speedwise. I thought that's what HTTP/2 was for? I'd rather solve this at the connection level than have some third party amalgamate my content and thus silently break it in maybe 5% of cases.
- OJFord 10y ago
  > It'll vary in download rates across the global [sic]. Sure, but we're talking on the order of ~KBs, so many HTML pages are going to be bigger than font and CSS files, and seeing as the author is providing a webcomic, all those images certainly will be. Nobody's CDN-ing CSS for latency when the rest of their assets are served from a single location. As the author says, it's just "laziness" (or 'ease of development').
- korethr 10y ago
  I think this is a false choice. If CDNs were simply caching the content in various geographic regions to keep the data closer to the users, and thus loading quickly, then that'd be fine. But in my observation, that's not what they've become. It seems that increasingly more often, I have to enable javascript from numerous third party sites just to get some or all of the supposed first party content of the page to even render at all. And then all this extra JS ends up slowing my browser down, IMO, cancelling any improvement in load time from having a geographically close cache. Then there's other annoyances, like the alignment of the text, pictures, and other content suddenly shifting about, because the font has changed, or the JS from one CDN finally finished processing and decided that, no, actually, pictures should go over there. My needs and wants from a page are rather simple. Render your content, then kindly get out of my way and let me take in the message you are trying to communicate to me. Attempting to import distracting fanciness from CDNs is more likely to cause me to skip your site than an extra 100ms of load time because I'm in Germany and you're in Canada. On an unrelated note, it looks like I might be taken by another archive binge here soon.
  - hhsnopek 10y ago
    Sadly a lot of people don't use the `async` attribute for script tags. We can still load fonts over CDNs, even using Cloudfront or Cloudflare for caching. > Then there's other annoyances, like the alignment of the text, pictures, and other content suddenly shifting about, because the font has changed, or the JS from one CDN finally finished processing and decided that, no, actually, pictures should go over there. This is because the scripts and css are so large that it takes time for the browser to render all the rules set by that site. This can easily be optimized with the right tools or throwing out dead code, even only fetching code specific to that web page. Most developers just `script` tags into their head as well and this _kills_ loading of pages more than anything (unless your css file is thousands of lines). CDNs are meant for distributing across the globe, you're hosting your own assets without a CDN in the middle and the site is still slow, you're optimizing in the wrong place.
    - mattmanser 10y ago
      There are particular circumstances you can actually use 'async' though. Load order is usually important.
- creshal 10y ago
  You don't need inject third-party Javascript files into your website to geo distribute a few font files. You can still put them on something like S3 and let the hoster figure out the shortest path.
  - dexterdog 10y ago
    That would have to be S3 with Cloudfront which is the only way to easily have custom domain SSL since S3 is not CDN'ed or cached.
- ehnto 10y ago
  The latency issue is only present once, the initial page load. After that the resources are cached. Second to that, if you're following best practices for page speed, the user will not notice at all because a snippet of CSS that provides the initial layout and styles will be sent with the HTML body. Amongst dozens of other things you can do to make this a non-issue.
  - enraged_camel 10y ago
    >>The latency issue is only present once, the initial page load. The initial page load is also one of the most important things to optimize for things like, you know, conversion of visitors to paying customers. I've given up on subscribing to new products and services simply because their pages weren't performing well, and I'm sure many others here have done the same.
    - ams6110 10y ago
      I've given up subscribing because pages don't work (as in don't render anything at all) with JS disabled.
      - leeoniya 10y ago
        i've given up subscribing because pages look like shit in telnet:80 :D
  - nkozyra 10y ago
    Cached per browser, though, which is significantly different than cached per request. Even if you're caching/serving static content efficiently it still adds load to a server.
mikebay 10y ago
Also avoid facebook's reactjs, google's angular & twitter's boostrap :)
olegkikin 10y ago
So your main argument is privacy, not letting Google collect users' data, but then consider that most of your users are probably using Chrome, everything they type in the URL box is sent to Google (for autocompletion) anyway. Is looking at some comics website even a privacy problem? Let's say google finds out your user X looks at your website. What possible damage can they do? Sell it to the advertisers so they can target X with some comics ad? If you ran a medical site, I would get it. Then you have to give up other cool things like Google Analytics. P.S. Some beautiful artwork on your site.
- zitterbewegung 10y ago
  It would depend on the site if most users use chrome. Also, you have to ask what kind of damage can be done in the future if the data is collected .
  - olegkikin 10y ago
    That's what I'm asking. What kind of damage are you talking about exactly? I understand privacy concerns for medical, porn, political, gender rights websites. But a comics one?
    - zitterbewegung 10y ago
      Categorizing people based on what they read comes to mind .
      - olegkikin 10y ago
        Ok, so you categorized the people by whether they read this comic or not. What's the damage?
        ryandrake 10y ago
        You've been categorized based on what you read.
        10y ago
JoshTriplett 10y ago
Great to see someone paying attention to the problem of loading third-party <script>s, and talking about the work required to avoid them.
- pselbert 10y ago
  Before I knew it was a comic site I was amazed they took the time to copy all of the icons they wanted as svg. Even knowing the author is an illustrator it is still admirable and impressive.
  - JoshTriplett 10y ago
    That part didn't seem strictly required to address the third-party content problem. They could have used the font icons, and just copied all the necessary bits to their server. Also, for anyone with a similar problem, consider backing https://www.kickstarter.com/projects/232193852/font-awesome-5 https://www.kickstarter.com/projects/232193852/font-awesome-... . They're 15 hours from completion, and $38k away from a stretch goal to release SVG icon support in the Open Source version.
- gefh 10y ago
  > the work required to avoid them And that's the rub, it was a _lot_ of work. It's nice to see it can be done, but few sites will have the time or inclination.
deleted 10y ago
[deleted]
madeofpalk 10y ago
Good. Another reason not to use these CDNs is they're additional risk and introduce the potential for downtime and breakage. It's an additional point of failure that just doesn't come with many benefits. I'll happily use these services for quick POCs and throwaway demos, but once anything starts to become semi-permanent I'll make sure I control my uptime and host these assets myself.
- this-dang-guy 10y ago
  I've started to leverage them with fallback, but I guess I'll see how that plays out. (For fonts - I don't use anything else from a CDN, aside from front caching with cloudflare)
mark242 10y ago
From the post: "Well a big one: Privacy of the readers of Pepper&Carrot." Before even thinking about tossing things like Google Fonts or AddThis or whatever, the very first thing you need to do is turn on HTTPS. If you're concerned about privacy, or content injection, or MITM attacks, or name-your-poison-here, you must immediately only serve up pages via HTTPS with strong encryption.
- fencepost 10y ago
  Those are to a large extent different problems. For one you are eliminating requests to outside hosts from your own website and thus avoiding having those outside hosts track your users. For the other, adding encryption, you're preventing the carrier being used at either end or in between from tracking which pages on the site are visited but not so effectively whether the site was visited at all. Without the libraries being loaded Google and other CDN Library providers have no way of knowing whether I have visited that site unless they are also providing the underlying network connection that I am using.
- mpweiher 10y ago
  These seem completely independent to me. - HTTPS is for attacks. - What the article describes is run-of-the-mill tracking by Google etc. If I am not being attacked, the CDN resources will still allow Google to track me. If I am being attacked the CDN resources will still allow Google to track me. If I don't have these Google resources (let's just use Google resources for now), I don't think that Google will MITM me.
  - Klathmon 10y ago
    Google might not MITM you, but a shitty wifi router, your ISP, a hotspot, a hacked device on your network, or the government, and more can and will MITM you. Time and time again you see stories of people having tracking, ads, and malware injected into their browsing from free wifi, most ISPs, cell providers, hacked wifi routers, or even antivirus software. Enabling HTTPS is THE baseline, there's no excuse not to have it.
  - pdkl95 10y ago
smnscu 10y ago
After working at an encrypted/private email service, this is my cup of tea. However, I'd like to go off-topic and point out that the comic looks fantastically well drawn: http://peppercarrot.com/en/article383/episode-19-pollution http://peppercarrot.com/en/article383/episode-19-pollution
- severine 10y ago
  Made with Krita!
  - chrismorgan 10y ago
    I’ve just recently been deciding on an app to use for drawing with my Surface Book for illustrating all kinds of things, and I’ve settled with Krita in the last week. It’s best-of-breed, and free to boot.
jonchang 10y ago
I use Decentraleyes to help with the CDN issue. It's not much but every little bit helps I think. https://addons.mozilla.org/firefox/addon/decentraleyes https://addons.mozilla.org/firefox/addon/decentraleyes
cagenut 10y ago
This post and half the comments are killing me on conflating "third party javascript" with "CDN".
- pselbert 10y ago
  Yes. While I completely agree with the author and their quest to eliminate third party scripts from their site, the problem isn't with CDNs. The problem is with third party scripts, most of which aren't coming from a typical CDN (cdnjs, for example). It is entirely valid, and common, to front your own application code behind a CDN. Love the sentiment, just wish the terminology was more accurate.
beardog 10y ago
The code injection problem can often (but not always) be solved via Subresource Intergrity https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity https://developer.mozilla.org/en-US/docs/Web/Security/Subres...
mstaoru 10y ago
I only represent about 0.00000013% of all Chinese Internet users, but let me chime in: EVERY website that uses Google CDNs for js or fonts just doesn't work here. It just keeps loading and loading, and loading forever. In most cases it's jQuery, and in most cases it's in the <head> so the page just never shows. Cloudflare (cdnjs), Amazon CDNs, Akamai CDNs also occasionally get blocked and take entire Internet segments with them. If you use 3rd party CDNs, please consider implementing client-side failover strategy so you don't leave out 50% of the Internet "population".
- this-dang-guy 10y ago
  For my new site, what I'm doing is a full fallback - local, cdn font, served from my site, then regular font-family fallback. Not sure if that works properly in China, if it just spins. It might never 'fail' and fall back. I'd need to test that. Like so: src: local('Slabo 13px'), local('Slabo13px-Regular'), url(https://fonts.gstatic.com/s/slabo13px/v3/B9U01_cNwYDvIHK04hXMriEAvth_LlrfE80CYdSH47w.woff2 https://fonts.gstatic.com/s/slabo13px/v3/B9U01_cNwYDvIHK04hX...) format('woff2'), url(https://fonts.gstatic.com/s/slabo13px/v3/fScGOqovO8xyProgHURSR_k_vArhqVIZ0nv9q090hN8.woff2 https://fonts.gstatic.com/s/slabo13px/v3/fScGOqovO8xyProgHUR...) format('woff2'), url("/fonts/Slabo13px-Regular.ttf"); }
- pritambarhate 10y ago
  Thanks for sharing this. Is there a list of big domains such as Google which don't work in China? Does adding social logins like FB and G+ also makes the login pages to break?
  - samhamilton 10y ago
    Yep social logins do break or make pages very very slow to load. (Expat in Shanghai)
- 9248 10y ago
  Funny thing, most if not all 'client-side failover' strategies you might find through google or the likes won't work either. This is because the loaded resource will 'fail' anywhere between x seconds up to minutes, or never! In the meantime the user just sees a blank page, or best case, some 80-90% page that keeps trying to load something... I've experienced this myself a couple times. Most probably my ISP messed up some stuff taking down whole chunks of 'internet' :)
nitwit005 10y ago
The cats are pretty nice.
kakarot 10y ago
I use uMatrix and do not load external web fonts. I am stripping out CDN reliance in our stack at work as well. This practice of supporting secure protocols but still trading ease-of-development for end-user privacy & security must stop.
splitbrain 10y ago
It's awesome that nearly 10 years after I came up with MonsterID, it's still going strong. I love those cats.
WildGreenLeave 10y ago
I really like CDNs because of the ability to drop in a file and know it will be cached correctly. (Also there is a high probability that your user already has a cached version of the file) But never thought about CDNs being able to track you. Isn't there an alternative? A more transparant way to provide users with source files and still keep the 'cached items' aspect.
a3n 10y ago
Firefox on Linux. I use uBlock Origin, Ghostery and Disconnect, and Flash Control. peppercarrot.com is all zeroes for all three blockers, meaning nothing is blocked because there's nothing noticed that needs to be blocked. There are no Flash Control icons, meaning no video or audio noticed and blocked. Thanks for caring. :) On the front page of theguardian.com, logged in as me, there's a V icon at the top, meaning that Flash Control has blocked video, probably for some gratuitous menu feature. I have zero trouble using and reading the site. When I first opened theguardian a few minutes ago, uBlock was blocking 13 requests. It's steadily climbed in those minutes to 32 blocked requests. Ghostery is noticing/blocking 0 trackers. Disconnect is blocking two: nielsen and comscore. Disconnect is also blocking 1 from Facebook and 3 from Google. All three tools may be seeing and blocking some of the same things. Without these four tools, except for low/no-commercial technical sites and public service sites like wikipedia my web is all but unusable. With them my web is fine. I very rarely have any problems using any site. I had to enable my bank in uBlock to use their popup bill pay feature. I think I had trouble viewing a cartoon at The New Yorker; I forget what I did to view it. Youtube and Flash Control seem to be in a perpetual arms race, as was the case with Flashblock. Youtube is my main motivation for using Flash Control, to prevent automatic video playing. And yep, I get that sites pay the bills with ads. I $ubscribe to three news sites, and I also get that that doesn't pay the whole bill. The web is either going to have to block me for using a blocker (I've been seeing that very rarely recently, or at least "Unblock us please") or figure out a less dangerous, intrusive and loadsome way to serve ads. (And yep, I just made up the word "loadsome." I can do anything!) EDIT: I whitelist duckduckgo.com in uBlock. https://duck.co/help/company/advertising-and-affiliates https://duck.co/help/company/advertising-and-affiliates https://duckduckgo.com/privacy https://duckduckgo.com/privacy
- kalleboo 10y ago
  Some of the trackers load more trackers - taking theguardian.com as an example again, with Ghostery on it blocks only 6 items. But whitelist the site and after it lets those 6 load, now it finds 18 trackers.
- kasparsklavins 10y ago
  Not sure if this is a feature of youtube or chrome, but when opening a video in a new tab, it does not play until I have that tab in focus.
dillondoyle 10y ago
AddThis makes money by selling 3rd party audience segments to advertisers like me. I assume they get this data by tracking what users view what pages through their sharing buttons. Example segments I can buy to advertise too: http://i.imgur.com/JF6ZZPC.jpg http://i.imgur.com/JF6ZZPC.jpg The author doesn't even mention the big players: every FB share or like button, on all that nasty porn you watch (even in incognito mode), straight to FB. They recently changed their policies and signaled that they are going to start using this data for ad targeting, probably in a push to expand FAN and be more competitive with Google. Something as simple as a share button that some blogger copy and pasted into their blog turned into an ad tech/data company! I personally love that story and think that's cool and innovative thinking from AddThis. But I also think more data = better ads, at the expense of privacy (probably not a popular opinion around here).
vbezhenar 10y ago
CDN is common enough technique which should be standardized in browsers. HTML should include link to resource hosted by site and its checksum. Now browser can easily use cached resource from any other site with the same checksum or just download it from site. There are 2 reasons to use CDN. First is caching (different sites using the same resource from the same CDN will download it only once), second is speed (some browsers restrict connection count to the same domain, so hosting resources on a different domains might improve download time). Caching is better solved by using checksum as a key, instead of URL. Speed with HTTP/2 is not an issue, because there's only one TCP connection. The only advantage of CDN might be geographically distributed servers, so user from China would download resource from China server instead of US server. I don't see easy and elegant way to solve it, but I'm not sure it should be solved at all, HTTP/2 pushing resources should be enough.
- fenollp 10y ago
  > CDN is common enough technique which should be standardized in browsers. HTML should include link to resource hosted by site and its checksum. Now browser can easily use cached resource from any other site with the same checksum or just download it from site. I really like this idea! Store your heavy assets in a public DHT with each browser storing a part. Then fetch said assets by content-hash if not already in cache. Maybe disable serving for mobiles. The W3C needs to get on this!
  - willglynn 10y ago
    The W3C has a thing called subresource integrity, which is basically what vbezhenar described: https://www.w3.org/TR/SRI/ https://www.w3.org/TR/SRI/ However, there are reasons why e.g. hash-addressed JavaScript are not used as a shared cache: https://hillbrad.github.io/sri-addressable-caching/sri-addressable-caching.html https://hillbrad.github.io/sri-addressable-caching/sri-addre...
    - fenollp 10y ago
      WRT the "timing attack": In most cases, client does not even request bytes from CDN which is then not able to track Client. But then again CDNs can implement tracking based on this lack of requests (which is kind of ironic and should be infeasible the more clients use this technique I think). Actually the other issues are solved by the "DHT" part of this idea: no centralized party can track which assets are already in your history. The only tracking I can think of is by your nearest neighbours's browsers. If such a neighbour N empties your cache (DNS attack?) it will trigger a full fetch from N. Then N can attempt to fingerprint this assets query with what other pages list. But then the whole point of this is to cache assets that are used on most pages! I love this idea. Let's make the Web decentralized again! (I couldn't resist)
blauditore 10y ago
Maybe I'm missing something crucial, but why not just host the content on your own server? I.e., just download that Google font, jquery.js or FontAwesome and serve it directly instead of using an external CDN. The post seems to say "I don't like where some content is coming from, so I re-created said content by myself".
- CapacitorSet 10y ago
  To first thought, there may be licenses in place preventing you from self-hosting the content.
  - ocdtrekkie 10y ago
    At least in the case of Google Web Fonts and FontAwesome, I am almost positive there is no issue with hosting locally.
- Fluxenein 10y ago
  That leaves AddThis and Gravatar
  - dexterdog 10y ago
    Can't you just proxy gravatar?
- brianwawok 10y ago
  Then you pay the bandwidth bill. I know I would rather save a few bucks over make a site work for China. Many sites don't need to work in China.
tscs37 10y ago
Why use alternatives? You can download the Google Web Fonts and serve them from your host. You can also download and serve Font Awesome from local. And there doesn't seem to be a reason why you can't do it with gravatar either. I don't get this post honestly. It seems to be about replacing stuff with other stuff instead of replacing CDN with locally served content.
ludwigvan 10y ago
In the case of Google fonts, is it legally possible to download the font and serve it from one's own server? The FAQ has a relevant section, but does not answer this question: https://developers.google.com/fonts/faq https://developers.google.com/fonts/faq
- pmlnr 10y ago
  As far as I'm aware, the fonts on Google are just fonts, not owned by Google. Example: https://www.fontsquirrel.com/fonts/playfair-display https://www.fontsquirrel.com/fonts/playfair-display Playfair Display - "Copyright (c) 2010-2012 by Claus Eggers Sørensen (es@forthehearts.net), with Reserved Font Name 'Playfair'" in the SIL licence right next to the font files. Therefore yes, you should be able to download them, and use them, according to the original licence. ( Which, by the way, usually required the font creator to be credited, which Google only does when you select it, but not in the served CSSs, which I believe, is not fair. )
- wanda 10y ago
  IANAL but they would not appear to be able to construct a case against you for using the fonts on your own server, since at no point is it stated that such a practice would be in violation of the terms of use. As you observe, they do not explicitly answer the question, but their reticence should be taken as an implicit green light, encased in a warning about loading times. Most Google fonts are merely served from their hardware, and not created by them, so the license selected by the font's creator applies. Think of Google Fonts as an aggregator of free-to-use fonts. There is also a list of fonts and their licenses available from Google Fonts here: https://fonts.google.com/attribution https://fonts.google.com/attribution If you're really concerned, check who created the font and see if they make the font available under a permissive license on their own website. Lato, for instance, is available from its creator's website and is published under the Open Font License.
thinkMOAR 10y ago
Wonder if there will be a time CDNs of these will pay you for the visitor data you 'share/leak' with them via the linked resources (to convince you to keep using them).
brianzelip 10y ago
Off topic, but the root site of this blog post is pretty awesome - "Pepper & Carrot: A free, libre and open-source webcomic supported directly by its patrons to change the comic book industry!"
bandrami 10y ago
So, here's where I mark myself as a dinosaur: why are you trying to set a specific font for a web page? Clients select fonts for a reason.
- Raphmedia 10y ago
  But that's not a web page, it's a web app! I want full control of it! ... I don't even know myself if I'm being sarcastic or not ...
- eps 10y ago
  Because presentation matters a lot in a lot of cases.
- jmcdiesel 10y ago
  Your question is answered by another question. Why does more than one font exist?
  - bandrami 10y ago
    Because readers have different needs? Seems pretty obvious to me.
    - zachsnow 10y ago
      Historically "fonts" have been set by the author, not the reader. While I appreciate that this is no longer necessary, it seems reasonable that authors still want to choose it for reasons of presentation. Of course it's easy enough to write a use stylesheet, so readers that need a different view can get one.
huxflux 10y ago
https://github.com/justjavac/ReplaceGoogleCDN https://github.com/justjavac/ReplaceGoogleCDN I would like to recommend this plugin (for Chinese users) and reach out an arms for others to help contribute towards it.

298 points by agateau 10y ago

The only issue with going against the grain here if you're not putting your site itself behind a cdn. It'll vary in download rates across the global. This was the intended use case for CDNs, but analytics are added so CDNs can improve. You're correct with the fact that they are tracking us, but there's a trade off that comes with this that holds tremendous value. If that value of speed isn't a factor or low on your list of priorities then by all means, sever everything.

minxomat 10y ago
Not download rates, but request times are important for a website. Of course, if your uplink is exceptionally bad, the former matters somewhat, too. Usually, one would amalgamate the resources to avoid additional requests to any server at all (CDN or not, all requests have unnecessary overhead). Many Web CDNs include frameworks that combine CSS, JS etc. resources to speed up page loading. Add to that SVG inlining and image optimization and you're good speedwise. What you still miss the the geo-targeting of an Anycast network like CF et al. This will slow down the initial resource request again. The question is: If you knew that you could live without the aforementioned pros of a CDN, why use it in the first place...
- majewsky 10y ago
  > Many Web CDNs include frameworks that combine CSS, JS etc. resources to speed up page loading. Add to that SVG inlining and image optimization and you're good speedwise. I thought that's what HTTP/2 was for? I'd rather solve this at the connection level than have some third party amalgamate my content and thus silently break it in maybe 5% of cases.
OJFord 10y ago
> It'll vary in download rates across the global [sic]. Sure, but we're talking on the order of ~KBs, so many HTML pages are going to be bigger than font and CSS files, and seeing as the author is providing a webcomic, all those images certainly will be. Nobody's CDN-ing CSS for latency when the rest of their assets are served from a single location. As the author says, it's just "laziness" (or 'ease of development').
korethr 10y ago
I think this is a false choice. If CDNs were simply caching the content in various geographic regions to keep the data closer to the users, and thus loading quickly, then that'd be fine. But in my observation, that's not what they've become. It seems that increasingly more often, I have to enable javascript from numerous third party sites just to get some or all of the supposed first party content of the page to even render at all. And then all this extra JS ends up slowing my browser down, IMO, cancelling any improvement in load time from having a geographically close cache. Then there's other annoyances, like the alignment of the text, pictures, and other content suddenly shifting about, because the font has changed, or the JS from one CDN finally finished processing and decided that, no, actually, pictures should go over there. My needs and wants from a page are rather simple. Render your content, then kindly get out of my way and let me take in the message you are trying to communicate to me. Attempting to import distracting fanciness from CDNs is more likely to cause me to skip your site than an extra 100ms of load time because I'm in Germany and you're in Canada. On an unrelated note, it looks like I might be taken by another archive binge here soon.
- hhsnopek 10y ago
  Sadly a lot of people don't use the `async` attribute for script tags. We can still load fonts over CDNs, even using Cloudfront or Cloudflare for caching. > Then there's other annoyances, like the alignment of the text, pictures, and other content suddenly shifting about, because the font has changed, or the JS from one CDN finally finished processing and decided that, no, actually, pictures should go over there. This is because the scripts and css are so large that it takes time for the browser to render all the rules set by that site. This can easily be optimized with the right tools or throwing out dead code, even only fetching code specific to that web page. Most developers just `script` tags into their head as well and this _kills_ loading of pages more than anything (unless your css file is thousands of lines). CDNs are meant for distributing across the globe, you're hosting your own assets without a CDN in the middle and the site is still slow, you're optimizing in the wrong place.
  - mattmanser 10y ago
    There are particular circumstances you can actually use 'async' though. Load order is usually important.
creshal 10y ago
You don't need inject third-party Javascript files into your website to geo distribute a few font files. You can still put them on something like S3 and let the hoster figure out the shortest path.
- dexterdog 10y ago
  That would have to be S3 with Cloudfront which is the only way to easily have custom domain SSL since S3 is not CDN'ed or cached.
ehnto 10y ago
The latency issue is only present once, the initial page load. After that the resources are cached. Second to that, if you're following best practices for page speed, the user will not notice at all because a snippet of CSS that provides the initial layout and styles will be sent with the HTML body. Amongst dozens of other things you can do to make this a non-issue.
- enraged_camel 10y ago
  >>The latency issue is only present once, the initial page load. The initial page load is also one of the most important things to optimize for things like, you know, conversion of visitors to paying customers. I've given up on subscribing to new products and services simply because their pages weren't performing well, and I'm sure many others here have done the same.
  - ams6110 10y ago
    I've given up subscribing because pages don't work (as in don't render anything at all) with JS disabled.
    - leeoniya 10y ago
      i've given up subscribing because pages look like shit in telnet:80 :D
- nkozyra 10y ago
  Cached per browser, though, which is significantly different than cached per request. Even if you're caching/serving static content efficiently it still adds load to a server.

mikebay 10y ago

Also avoid facebook's reactjs, google's angular & twitter's boostrap :)

olegkikin 10y ago

So your main argument is privacy, not letting Google collect users' data, but then consider that most of your users are probably using Chrome, everything they type in the URL box is sent to Google (for autocompletion) anyway. Is looking at some comics website even a privacy problem? Let's say google finds out your user X looks at your website. What possible damage can they do? Sell it to the advertisers so they can target X with some comics ad? If you ran a medical site, I would get it. Then you have to give up other cool things like Google Analytics. P.S. Some beautiful artwork on your site.

zitterbewegung 10y ago
It would depend on the site if most users use chrome. Also, you have to ask what kind of damage can be done in the future if the data is collected .
- olegkikin 10y ago
  That's what I'm asking. What kind of damage are you talking about exactly? I understand privacy concerns for medical, porn, political, gender rights websites. But a comics one?
  - zitterbewegung 10y ago
    Categorizing people based on what they read comes to mind .
    - olegkikin 10y ago
      Ok, so you categorized the people by whether they read this comic or not. What's the damage?
      - ryandrake 10y ago
        You've been categorized based on what you read.
      - 10y ago

JoshTriplett 10y ago

Great to see someone paying attention to the problem of loading third-party <script>s, and talking about the work required to avoid them.

pselbert 10y ago
Before I knew it was a comic site I was amazed they took the time to copy all of the icons they wanted as svg. Even knowing the author is an illustrator it is still admirable and impressive.
- JoshTriplett 10y ago
  That part didn't seem strictly required to address the third-party content problem. They could have used the font icons, and just copied all the necessary bits to their server. Also, for anyone with a similar problem, consider backing https://www.kickstarter.com/projects/232193852/font-awesome-5 https://www.kickstarter.com/projects/232193852/font-awesome-... . They're 15 hours from completion, and $38k away from a stretch goal to release SVG icon support in the Open Source version.
gefh 10y ago
> the work required to avoid them And that's the rub, it was a _lot_ of work. It's nice to see it can be done, but few sites will have the time or inclination.

deleted 10y ago

[deleted]

madeofpalk 10y ago

Good. Another reason not to use these CDNs is they're additional risk and introduce the potential for downtime and breakage. It's an additional point of failure that just doesn't come with many benefits. I'll happily use these services for quick POCs and throwaway demos, but once anything starts to become semi-permanent I'll make sure I control my uptime and host these assets myself.

this-dang-guy 10y ago
I've started to leverage them with fallback, but I guess I'll see how that plays out. (For fonts - I don't use anything else from a CDN, aside from front caching with cloudflare)

mark242 10y ago

From the post: "Well a big one: Privacy of the readers of Pepper&Carrot." Before even thinking about tossing things like Google Fonts or AddThis or whatever, the very first thing you need to do is turn on HTTPS. If you're concerned about privacy, or content injection, or MITM attacks, or name-your-poison-here, you must immediately only serve up pages via HTTPS with strong encryption.

fencepost 10y ago
Those are to a large extent different problems. For one you are eliminating requests to outside hosts from your own website and thus avoiding having those outside hosts track your users. For the other, adding encryption, you're preventing the carrier being used at either end or in between from tracking which pages on the site are visited but not so effectively whether the site was visited at all. Without the libraries being loaded Google and other CDN Library providers have no way of knowing whether I have visited that site unless they are also providing the underlying network connection that I am using.
mpweiher 10y ago
These seem completely independent to me. - HTTPS is for attacks. - What the article describes is run-of-the-mill tracking by Google etc. If I am not being attacked, the CDN resources will still allow Google to track me. If I am being attacked the CDN resources will still allow Google to track me. If I don't have these Google resources (let's just use Google resources for now), I don't think that Google will MITM me.
- Klathmon 10y ago
  Google might not MITM you, but a shitty wifi router, your ISP, a hotspot, a hacked device on your network, or the government, and more can and will MITM you. Time and time again you see stories of people having tracking, ads, and malware injected into their browsing from free wifi, most ISPs, cell providers, hacked wifi routers, or even antivirus software. Enabling HTTPS is THE baseline, there's no excuse not to have it.
- pdkl95 10y ago

smnscu 10y ago

After working at an encrypted/private email service, this is my cup of tea. However, I'd like to go off-topic and point out that the comic looks fantastically well drawn: http://peppercarrot.com/en/article383/episode-19-pollution http://peppercarrot.com/en/article383/episode-19-pollution

severine 10y ago
Made with Krita!
- chrismorgan 10y ago
  I’ve just recently been deciding on an app to use for drawing with my Surface Book for illustrating all kinds of things, and I’ve settled with Krita in the last week. It’s best-of-breed, and free to boot.

jonchang 10y ago

I use Decentraleyes to help with the CDN issue. It's not much but every little bit helps I think. https://addons.mozilla.org/firefox/addon/decentraleyes https://addons.mozilla.org/firefox/addon/decentraleyes

cagenut 10y ago

This post and half the comments are killing me on conflating "third party javascript" with "CDN".

pselbert 10y ago
Yes. While I completely agree with the author and their quest to eliminate third party scripts from their site, the problem isn't with CDNs. The problem is with third party scripts, most of which aren't coming from a typical CDN (cdnjs, for example). It is entirely valid, and common, to front your own application code behind a CDN. Love the sentiment, just wish the terminology was more accurate.

beardog 10y ago

The code injection problem can often (but not always) be solved via Subresource Intergrity https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity https://developer.mozilla.org/en-US/docs/Web/Security/Subres...

mstaoru 10y ago

I only represent about 0.00000013% of all Chinese Internet users, but let me chime in: EVERY website that uses Google CDNs for js or fonts just doesn't work here. It just keeps loading and loading, and loading forever. In most cases it's jQuery, and in most cases it's in the <head> so the page just never shows. Cloudflare (cdnjs), Amazon CDNs, Akamai CDNs also occasionally get blocked and take entire Internet segments with them. If you use 3rd party CDNs, please consider implementing client-side failover strategy so you don't leave out 50% of the Internet "population".

this-dang-guy 10y ago
For my new site, what I'm doing is a full fallback - local, cdn font, served from my site, then regular font-family fallback. Not sure if that works properly in China, if it just spins. It might never 'fail' and fall back. I'd need to test that. Like so: src: local('Slabo 13px'), local('Slabo13px-Regular'), url(https://fonts.gstatic.com/s/slabo13px/v3/B9U01_cNwYDvIHK04hXMriEAvth_LlrfE80CYdSH47w.woff2 https://fonts.gstatic.com/s/slabo13px/v3/B9U01_cNwYDvIHK04hX...) format('woff2'), url(https://fonts.gstatic.com/s/slabo13px/v3/fScGOqovO8xyProgHURSR_k_vArhqVIZ0nv9q090hN8.woff2 https://fonts.gstatic.com/s/slabo13px/v3/fScGOqovO8xyProgHUR...) format('woff2'), url("/fonts/Slabo13px-Regular.ttf"); }
pritambarhate 10y ago
Thanks for sharing this. Is there a list of big domains such as Google which don't work in China? Does adding social logins like FB and G+ also makes the login pages to break?
- samhamilton 10y ago
  Yep social logins do break or make pages very very slow to load. (Expat in Shanghai)
9248 10y ago
Funny thing, most if not all 'client-side failover' strategies you might find through google or the likes won't work either. This is because the loaded resource will 'fail' anywhere between x seconds up to minutes, or never! In the meantime the user just sees a blank page, or best case, some 80-90% page that keeps trying to load something... I've experienced this myself a couple times. Most probably my ISP messed up some stuff taking down whole chunks of 'internet' :)

nitwit005 10y ago

The cats are pretty nice.

kakarot 10y ago

I use uMatrix and do not load external web fonts. I am stripping out CDN reliance in our stack at work as well. This practice of supporting secure protocols but still trading ease-of-development for end-user privacy & security must stop.

splitbrain 10y ago

It's awesome that nearly 10 years after I came up with MonsterID, it's still going strong. I love those cats.

WildGreenLeave 10y ago

I really like CDNs because of the ability to drop in a file and know it will be cached correctly. (Also there is a high probability that your user already has a cached version of the file) But never thought about CDNs being able to track you. Isn't there an alternative? A more transparant way to provide users with source files and still keep the 'cached items' aspect.

a3n 10y ago

Firefox on Linux. I use uBlock Origin, Ghostery and Disconnect, and Flash Control. peppercarrot.com is all zeroes for all three blockers, meaning nothing is blocked because there's nothing noticed that needs to be blocked. There are no Flash Control icons, meaning no video or audio noticed and blocked. Thanks for caring. :) On the front page of theguardian.com, logged in as me, there's a V icon at the top, meaning that Flash Control has blocked video, probably for some gratuitous menu feature. I have zero trouble using and reading the site. When I first opened theguardian a few minutes ago, uBlock was blocking 13 requests. It's steadily climbed in those minutes to 32 blocked requests. Ghostery is noticing/blocking 0 trackers. Disconnect is blocking two: nielsen and comscore. Disconnect is also blocking 1 from Facebook and 3 from Google. All three tools may be seeing and blocking some of the same things. Without these four tools, except for low/no-commercial technical sites and public service sites like wikipedia my web is all but unusable. With them my web is fine. I very rarely have any problems using any site. I had to enable my bank in uBlock to use their popup bill pay feature. I think I had trouble viewing a cartoon at The New Yorker; I forget what I did to view it. Youtube and Flash Control seem to be in a perpetual arms race, as was the case with Flashblock. Youtube is my main motivation for using Flash Control, to prevent automatic video playing. And yep, I get that sites pay the bills with ads. I $ubscribe to three news sites, and I also get that that doesn't pay the whole bill. The web is either going to have to block me for using a blocker (I've been seeing that very rarely recently, or at least "Unblock us please") or figure out a less dangerous, intrusive and loadsome way to serve ads. (And yep, I just made up the word "loadsome." I can do anything!) EDIT: I whitelist duckduckgo.com in uBlock. https://duck.co/help/company/advertising-and-affiliates https://duck.co/help/company/advertising-and-affiliates https://duckduckgo.com/privacy https://duckduckgo.com/privacy

kalleboo 10y ago
Some of the trackers load more trackers - taking theguardian.com as an example again, with Ghostery on it blocks only 6 items. But whitelist the site and after it lets those 6 load, now it finds 18 trackers.
kasparsklavins 10y ago
Not sure if this is a feature of youtube or chrome, but when opening a video in a new tab, it does not play until I have that tab in focus.

dillondoyle 10y ago

AddThis makes money by selling 3rd party audience segments to advertisers like me. I assume they get this data by tracking what users view what pages through their sharing buttons. Example segments I can buy to advertise too: http://i.imgur.com/JF6ZZPC.jpg http://i.imgur.com/JF6ZZPC.jpg The author doesn't even mention the big players: every FB share or like button, on all that nasty porn you watch (even in incognito mode), straight to FB. They recently changed their policies and signaled that they are going to start using this data for ad targeting, probably in a push to expand FAN and be more competitive with Google. Something as simple as a share button that some blogger copy and pasted into their blog turned into an ad tech/data company! I personally love that story and think that's cool and innovative thinking from AddThis. But I also think more data = better ads, at the expense of privacy (probably not a popular opinion around here).

vbezhenar 10y ago

CDN is common enough technique which should be standardized in browsers. HTML should include link to resource hosted by site and its checksum. Now browser can easily use cached resource from any other site with the same checksum or just download it from site. There are 2 reasons to use CDN. First is caching (different sites using the same resource from the same CDN will download it only once), second is speed (some browsers restrict connection count to the same domain, so hosting resources on a different domains might improve download time). Caching is better solved by using checksum as a key, instead of URL. Speed with HTTP/2 is not an issue, because there's only one TCP connection. The only advantage of CDN might be geographically distributed servers, so user from China would download resource from China server instead of US server. I don't see easy and elegant way to solve it, but I'm not sure it should be solved at all, HTTP/2 pushing resources should be enough.

fenollp 10y ago
> CDN is common enough technique which should be standardized in browsers. HTML should include link to resource hosted by site and its checksum. Now browser can easily use cached resource from any other site with the same checksum or just download it from site. I really like this idea! Store your heavy assets in a public DHT with each browser storing a part. Then fetch said assets by content-hash if not already in cache. Maybe disable serving for mobiles. The W3C needs to get on this!
- willglynn 10y ago
  The W3C has a thing called subresource integrity, which is basically what vbezhenar described: https://www.w3.org/TR/SRI/ https://www.w3.org/TR/SRI/ However, there are reasons why e.g. hash-addressed JavaScript are not used as a shared cache: https://hillbrad.github.io/sri-addressable-caching/sri-addressable-caching.html https://hillbrad.github.io/sri-addressable-caching/sri-addre...
  - fenollp 10y ago
    WRT the "timing attack": In most cases, client does not even request bytes from CDN which is then not able to track Client. But then again CDNs can implement tracking based on this lack of requests (which is kind of ironic and should be infeasible the more clients use this technique I think). Actually the other issues are solved by the "DHT" part of this idea: no centralized party can track which assets are already in your history. The only tracking I can think of is by your nearest neighbours's browsers. If such a neighbour N empties your cache (DNS attack?) it will trigger a full fetch from N. Then N can attempt to fingerprint this assets query with what other pages list. But then the whole point of this is to cache assets that are used on most pages! I love this idea. Let's make the Web decentralized again! (I couldn't resist)

blauditore 10y ago

Maybe I'm missing something crucial, but why not just host the content on your own server? I.e., just download that Google font, jquery.js or FontAwesome and serve it directly instead of using an external CDN. The post seems to say "I don't like where some content is coming from, so I re-created said content by myself".

CapacitorSet 10y ago
To first thought, there may be licenses in place preventing you from self-hosting the content.
- ocdtrekkie 10y ago
  At least in the case of Google Web Fonts and FontAwesome, I am almost positive there is no issue with hosting locally.
Fluxenein 10y ago
That leaves AddThis and Gravatar
- dexterdog 10y ago
  Can't you just proxy gravatar?
brianwawok 10y ago
Then you pay the bandwidth bill. I know I would rather save a few bucks over make a site work for China. Many sites don't need to work in China.

tscs37 10y ago

Why use alternatives? You can download the Google Web Fonts and serve them from your host. You can also download and serve Font Awesome from local. And there doesn't seem to be a reason why you can't do it with gravatar either. I don't get this post honestly. It seems to be about replacing stuff with other stuff instead of replacing CDN with locally served content.

ludwigvan 10y ago

In the case of Google fonts, is it legally possible to download the font and serve it from one's own server? The FAQ has a relevant section, but does not answer this question: https://developers.google.com/fonts/faq https://developers.google.com/fonts/faq

pmlnr 10y ago
As far as I'm aware, the fonts on Google are just fonts, not owned by Google. Example: https://www.fontsquirrel.com/fonts/playfair-display https://www.fontsquirrel.com/fonts/playfair-display Playfair Display - "Copyright (c) 2010-2012 by Claus Eggers Sørensen (es@forthehearts.net), with Reserved Font Name 'Playfair'" in the SIL licence right next to the font files. Therefore yes, you should be able to download them, and use them, according to the original licence. ( Which, by the way, usually required the font creator to be credited, which Google only does when you select it, but not in the served CSSs, which I believe, is not fair. )
wanda 10y ago
IANAL but they would not appear to be able to construct a case against you for using the fonts on your own server, since at no point is it stated that such a practice would be in violation of the terms of use. As you observe, they do not explicitly answer the question, but their reticence should be taken as an implicit green light, encased in a warning about loading times. Most Google fonts are merely served from their hardware, and not created by them, so the license selected by the font's creator applies. Think of Google Fonts as an aggregator of free-to-use fonts. There is also a list of fonts and their licenses available from Google Fonts here: https://fonts.google.com/attribution https://fonts.google.com/attribution If you're really concerned, check who created the font and see if they make the font available under a permissive license on their own website. Lato, for instance, is available from its creator's website and is published under the Open Font License.

thinkMOAR 10y ago

Wonder if there will be a time CDNs of these will pay you for the visitor data you 'share/leak' with them via the linked resources (to convince you to keep using them).

brianzelip 10y ago

Off topic, but the root site of this blog post is pretty awesome - "Pepper & Carrot: A free, libre and open-source webcomic supported directly by its patrons to change the comic book industry!"

bandrami 10y ago

So, here's where I mark myself as a dinosaur: why are you trying to set a specific font for a web page? Clients select fonts for a reason.

Raphmedia 10y ago
But that's not a web page, it's a web app! I want full control of it! ... I don't even know myself if I'm being sarcastic or not ...
eps 10y ago
Because presentation matters a lot in a lot of cases.
jmcdiesel 10y ago
Your question is answered by another question. Why does more than one font exist?
- bandrami 10y ago
  Because readers have different needs? Seems pretty obvious to me.
  - zachsnow 10y ago
    Historically "fonts" have been set by the author, not the reader. While I appreciate that this is no longer necessary, it seems reasonable that authors still want to choose it for reasons of presentation. Of course it's easy enough to write a use stylesheet, so readers that need a different view can get one.

huxflux 10y ago

https://github.com/justjavac/ReplaceGoogleCDN https://github.com/justjavac/ReplaceGoogleCDN I would like to recommend this plugin (for Chinese users) and reach out an arms for others to help contribute towards it.