15 May 2019 0 comments Nginx, Python
Usually, a CDN is just a cache you put in front of a dynamic website. You set up the CDN to be the first server your clients get data from, the CDN quickly decides if it was a copy cached or otherwise it asks the origin server for a fresh copy. So far so good, but if you really care about squeezing that extra performance out you need to worry about having a decent TTL and as soon as you make the TTL more than a couple of minutes you need to think about cache invalidation. You also need to worry about preventing certain endpoints from ever getting caught in the CDN which could be very bad.
For this site, www.peterbe.com, I'm using KeyCDN which I've blogged out here: "I think I might put my whole site behind a CDN" and here: "KeyCDN vs. DigitalOcean Nginx". KeyCDN has an API and a
python client which I've contributed to.
The next problem is; how do you test all this stuff on your laptop? Unfortunately, you can't deploy a KeyCDN docker image or something like that, that attempts to mimic how it works for reals. So, to simulate a CDN locally on my laptop, I'm using Nginx. It's definitely pretty different but it's not the point. The point is that you want something that acts as a reverse proxy. You want to make sure that stuff that's supposed to be cached gets cached, stuff that's supposed to be purged gets purged and that things that are always supposed to be dynamic is always dynamic.
The Configuration
First I add peterbecom.local into /etc/hosts like this:
▶ cat /etc/hosts | grep peterbecom.local
127.0.0.1 peterbecom.local origin.peterbecom.local
::1 peterbecom.local origin.peterbecom.local
Next, I set up the Nginx config (running on port 80) and the configuration looks like this:
proxy_cache_path /tmp/nginxcache levels=1:2 keys_zone=STATIC:10m
inactive=24h max_size=1g;
server {
server_name peterbecom.local;
location / {
proxy_cache_bypass $http_secret_header;
add_header X-Cache $upstream_cache_status;
proxy_set_header x-forwarded-host $host;
proxy_cache STATIC;
# proxy_cache_key $uri;
proxy_cache_valid 200 1h;
proxy_pass http://origin.peterbecom.local;
}
access_log /tmp/peterbecom.access.log combined;
error_log /tmp/peterbecom.error.log info;
}By the way, I've also set up origin.peterbecom.local to be run in Nginx too but it could just be proxy_pass http://localhost:8000; to go straight to Django. Not relevant for this context.
The Purge
Without the commercial version of Nginx (Plus) you can't do easy purging just for purging sake. But with proxy_cache_bypass $http_secret_header; it's very similar to purging except that it immediately makes a request to the origin.
First, to test that it works, I start up Nginx and Django and now I can run:
▶ curl -v http://peterbecom.local/about > /dev/null
< HTTP/1.1 200 OK
< Server: nginx/1.15.10
< Cache-Control: public, max-age=3672
< X-Cache: MISS
...
(Note the X-Cache: MISS which comes from add_header X-Cache $upstream_cache_status;)
This should trigger a log line in /tmp/peterbecom.access.log and in the Django runserver foreground logs.
At this point, I can kill the Django server and run it again:
▶ curl -v http://peterbecom.local/about > /dev/null
< Server: nginx/1.15.10
< HTTP/1.1 200 OK
< Cache-Control: max-age=86400
< Cache-Control: public
< X-Cache: HIT
...
Cool! It's working without Django running. As expected. This is how to send a "purge request"
▶ curl -v -H "secret-header:true" http://peterbecom.local/about > /dev/null
> GET /about HTTP/1.1
> secret-header:true
>
< HTTP/1.1 502 Bad Gateway
...
Clearly, it's trying to go to the origin, which was killed, so you start that up again and you get back to:
▶ curl -v http://peterbecom.local/about > /dev/null
< HTTP/1.1 200 OK
< Server: nginx/1.15.10
< Cache-Control: public, max-age=3672
< X-Cache: MISS
...
In Python
In my site, there are Django signals that are triggered when a piece of content changes and I'm using python-keycdn-api
in production but obviously, that won't work with Nginx. So I have a local setting and my Python code looks like this:
# This function gets called by a Django `post_save` signal
# among other things such as cron jobs and management commands.
def purge_cdn_urls(urls):
if settings.USE_NGINX_BYPASS:
# Note! This Nginx trick will not just purge the proxy_cache, it will
# immediately trigger a refetch.
x_cache_headers = []
for url in urls:
if "://" not in url:
url = settings.NGINX_BYPASS_BASEURL + url
r = requests.get(url, headers={"secret-header": "true"})
r.raise_for_status()
x_cache_headers.append({"url": url, "x-cache": r.headers.get("x-cache")})
print("PURGED:", x_cache_headers)
return
...the stuff that uses keycdn...
Notes and Conclusion
One important feature is that my CDN is a CNAME for www.peterbe.com but it reaches the origin server on a different URL. When my Django code needs to know the outside facing domain, I need to respect that. The communication between by the CDN and my origin is a domain I don't want to expose. What KeyCDN does is that they send an x-forwarded-host header which I need to take into account when understanding what outward facing absolute URL was used. Here's how I do that:
def get_base_url(request):
base_url = ["http"]
if request.is_secure():
base_url.append("s")
base_url.append("://")
x_forwarded_host = request.headers.get("X-Forwarded-Host")
if x_forwarded_host and x_forwarded_host in settings.ALLOWED_HOSTS:
base_url.append(x_forwarded_host)
else:
base_url.append(request.get_host())
return "".join(base_url)
That's about it. There are lots of other details I glossed over but the point is that this works good enough to test that the cache invalidation works as expected.
05 May 2019 0 comments Javascript, Web Performance, Web development
Back in 2012, I did an experiment
to compare if and/or how much faster WebSockets are compared to AJAX (aka. XHR). It would be a "protocol benchmark" to see which way was faster to schlep data back and forth between a server and a browser in total. The conclusion of that experiment was that WebSockets were faster but when you take latency into account, the difference was minimal. Considering the added "complexities" of WebSockets (keeping connections, results don't come where the request was made, etc.) it's not worth it.
But, 7 years later browsers are very different. Almost all browsers that support JavaScript also support WebSockets. HTTP/2 might make things better too. And perhaps the WebSocket protocol is just better implemented in the browsers. Who knows? An experiment knows.
So I made a new experiment with similar tech. The gist of the code is best explained with some code:
// Inside App.js
loopXHR = async count => {
const res = await fetch(`/xhr?count=${count}`);
const data = await res.json();
const nextCount = data.count;
if (nextCount) {
this.loopXHR(nextCount);
} else {
this.endXHR();
}
};
Basically, pick a big number (e.g. 100) and send that integer to the server which does this:
# Inside app.py
# from the the GET querystring "?count=123"
count = self.get_argument("count")
data = {"count": int(count) - 1}
self.write(json.dumps(data))
So the browser keeps sending the number back to the server that decrements it and when the server returns 0 the loop ends and you look how long the whole thing took.
Try It
The code is here: https://github.com/peterbe/sockshootout2019
And the demo app is here: https://sockshootout.app (Just press "Start!", wait and press it 2 or 3 more times)
Location, location, location
What matters is the geographical distance between you and the server. The server used in this experiment is in New York, USA.
What you'll find is that the closer you are to the server (lower latency) the better WebSocket performs. Here's what mine looks like:
My result between South Carolina, USA and New York, USA
Now, when I run the whole experiment all on my laptop the results look very different:
Running all locally
I don't have a screenshot for it but a friend of mine ran this from his location in Perth, Australia. There was no difference. If any difference it was "noise".
Same Conclusion?
Yes, latency matters most. The technique, for the benefit of performance, doesn't matter much.
No matter how fancy you're trying to be, what matters is the path the bytes have to travel. Or rather, the distance
the bytes have to travel. If you're far away a large majority of the total time is sending and receiving the data. Not the time it takes the browser (or the server) to process it.
However, suppose you do have all your potential clients physically near the server, it might be beneficial to use WebSockets.
Thoughts and Conclusions
My original thought was to use WebSockets instead of XHR for an autocomplete widget. At almost every keystroke, you send it to the server and as search results come in, you update the search result display. Things like that need to be fast and "snappy". But that's not where WebSockets shine. They shine in their ability to actively await results without having a loop that periodically pulls. There's nothing wrong with WebSocket and it has its brilliant use cases.
In summary, don't bother just to get a single-digit percentage performance increase if the complexity of the code and infrastructure is non-trivial. Keep building cool stuff with WebSockets but if you expect one result per action, XHR is good enough.
Bonus
The experiment app does collect everyone's results (just the timings and IP) and I hope to find the time to process this and build graph a correlating the geographical distance compared to the difference between the two techniques. Watch this space!
By the way, if you do plan on writing some WebSocket implementation code I highly recommend Sockette. It's solid and easy to use.
29 April 2019 0 comments Web Performance
, Web development
Before I commit to KeyCDN for my little blog I wanted to check if CloudFront is better. Why? Because I already have an AWS account set up, familiar with boto3, it's what we use for work, and it's AWS so it's usually pretty good stuff. As an attractive bonus, CloudFront has 44 edge locations (KeyCDN 34).
Price-wise it's hard to compare because the AWS CloudFront pricing page is hard to read because the costs are broken up by regions. KeyCDN themselves claim KeyCDN is about 2x cheaper than CloudFront. This seems to be true if you look at
cdnoverview.com's comparison too. CloudFront seems to have more extra specific costs. For example, with AWS CloudFront you have to pay to invalidate the cache whereas that's free for KeyCDN.
I also ran a little global latency test comparing the two using Hyperping using 7 global regions. The results are as follows:
KeyCDN on Hyperping.io
CloudFront on Hyperping.io
| Region | KeyCDN | CloudFront | Winner |
|---|
| London | 27 ms | 36 ms | KeyCDN |
| San Francisco | 29 ms | 46 ms | KeyCDN |
| Frankfurt | 47 ms | 1001 ms | KeyCDN |
| New York City | 52 ms | 68 ms | KeyCDN |
| São Paulo | 105 ms | 162 ms | KeyCDN |
| Sydney | 162 ms | 131 ms | CloudFront |
| Mumbai | 254 ms | 76 ms | CloudFront |
Take these with a pinch of salt because it's only an average for the last 1 hour. Let's agree that they both faster than your regular Nginx server in a single location.
By the way, both KeyCDN and CloudFront support Brotli compression. For CloudFront, this was added in July 2018 and if your origin can serve according to Content-Encoding you simply tell CloudFront to cache based on that header.
Although I've never tried it CloudFront does have an API for doing cache invalidation (aka. purging) and you can use boto3 to do it but I've never tried it. For KeyCDN here's how you do cache invalidation with the python-keycdn-api:
api = keycdn.Api(settings.KEYCDN_API_KEY)
call = "zones/purgeurl/{}.json".format(settings.KEYCDN_ZONE_ID)
all_urls = [
'origin.example.com/static/foo.css',
'origin.example.com/static/foo.cssbr',
'origin.example.com/images/foo.jpg',
]
params = {"urls": all_urls}
response = api.delete(call, params)
print(response)
I'm not in love with that API but I know it issues the invalidation fast whereas with CloudFront I heard it takes a while to take effect.
23 April 2019 0 comments Web Performance, Nginx, Web development
tl;dr; I'm going to put this blog behind KeyCDN and I expect a 2-4x performance boost (on Time To First Byte).
Right now, requests to my blog go straight to an Nginx server in DigitalOcean in NYC, USA. The Nginx server, 99% of the time, serves the blog posts (and static assets) as index.html files straight from disk. If the request is GET /plog/some-slug it will search for a file called /path/to/cached/files/plog/some-slug/index.html (or index.html.br or index.html.gz depending on the user agent's Accept-Encoding header). Only if the file doesn't exist on disk, it goes through to Django (via uWSGI built into Nginx). All of it is done with HTTP/2 and uses LetsEncrypt for SSL.
This has been working great but it's time to step it up. It's time to put the whole site behind a CDN. And I think I'm going to use KeyCDN for it.
In the past, it used
to be best-practice that you serve your HTML document from your smart server (e.g. Django) and then, for the static assets, you put in a CDN. Like this:
<html>
<link rel="stylesheet" href="https://myaccount123.cloudakamaifastlyflare.com/static/main.d910ef9a33.css">
...
<body>
<img src="https://myaccount123.cloudakamaifastlyflare.com/images/hero.jpg">
...
But with HTTP/2, this becomes an anti-pattern for web performance because your client has already made an expensive HTTP/2 connection (and SSL negotiation) to https://yourcooldomain.com and now it's cheap to just download the rest. I used to do it like that too and I don't regret it. As a matter of fact, on https://songsear.ch is straight to Nginx but all its images are (lazy) loaded via songsearch-2916.kxcdn.com. But I think, when time allows, I'll put all of Song Search behind a CDN too.
Basically, it's time to put the whole site behind a CDN. With smart purging techniques and smarter CDNs respecting your dynamic content cache control headers, it's time to share the load. ...all over the world.
CDN Choices
There are many sites that want to compare CDNs. But many are affiliated or even made by one of them. So it's hard to get comparisons. For example,
KeyCDN demonstrates they're the cheapest by comparing themselves with 5 others that they picked. (But mind you, that seems reasonably backed up by this comparison on cdn.reviews).
CDNPerf does a decent job with cool graphs and stuff. Incidentally, they rank my current favorite (KeyCDN) as the slowest compared to the well known giants that I compared it to.
But mind you, the perf difference between KeyCDN and the winner (topmost in the graph as of today) is 36ms vs 47ms which are both fantastic numbers.
It's hard to compare CDNs because they're all pretty fast, and actually, they're all reasonably cheap. What really matters is the features and that's a lot harder to compare. CloudFlare often comes up as a CDN provider with stellar features that impress me. I've never actually used them but at least they mention "Fast cache purge" and "API programmability" are their key features. But they also don't mention Brotli caching which I know is a feature KeyCDN supports.
KeyCDN
has been great to me in the past when I've used it to CDN host static assets. I'm familiar with their interface and they recently launched an API to do things like purge-by-tag and purge-by-URL. They're cheap, which matters because in this context it's all side-project stuff I want to put behind a CDN. They have a Python library which, although very rough around the edges, it works. And also very important; I've communicated very successfully with them through their support and they've been responsive and helpful. So I'll go with KeyCDN.
The Opportunity
Before I move my domain www.peterbe.com to become a CNAME for one of their CDN domains, I wanted to experiment a little and see how it works and what performance numbers I get for comparison. So I set up beta.peterbe.com
and did some Django and Nginx wiring so it would work the same but with the difference that it goes through a CDN for everything.
Then I picked a random page and set up a Hyperping monitor from all of its available regions and let it brew for a while. Unfortunately, Hyperping doesn't let you compare two monitors side-by-side so you're going to have to use your own eyes to compare the graphs:
NOT behind a CDN (server is New York, USA)
Behind a CDN
The "total Response Time" in Hyperping doesn't really make sense. They're an average across all regions it pings from. If you live in, for example, Germany; the only response time that matters to you is 1,215 ms versus 40 ms. Equally, if you live somewhere in New York, the only response time that matters to you is 20 ms versus 64 ms.
I actually ran another benchmark. I used Python like this:
t0 = time.time()
r = requests.get('https://www.peterbe.com/plog/some-slug')
t1 = time.time()
print("Took", t1 - t0)
I did this from South Carolina which means my nearest KeyCDN edge location
could be Atlanta, Miami, or New York. Either way, I'm reasonably near New York (compared to the rest of the world) so it'd be a fair performance comparison for all US east coast traffic. (Insert disclaimer here). It downloads the most recent blog posts, in repeated cycles, which gives the CDN a solid chance to warm up and then it compares the median of the last 100 downloads. The output of this is as follows:
beta
COUNT 1854 (but only using the last 100)
HIT RATIO 100.0%
AVERAGE (all) 63.12ms
MEDIAN (all) 61.89ms
www
COUNT 1856 (but only using the last 100)
HIT RATIO 100.0%
AVERAGE 136.22ms
MEDIAN 135.61ms("HIT RATIO" for the non-CDN URL means it was served entirely without Djando server rendering)
What it means is that the median, with a CDN is: 62ms and 135.6ms
without. That's a 2x boost.
The crawler stats script is available here: github.com/peterbe/peterbecom-cdn-crawl and I would be thrilled if you can clone it and run it and report what numbers you get and where you're running it from.
Notes and Conclusion
Mind you, 62ms vs. 136ms might sound like a silly difference if Webpagetest says it takes 700ms until the page is interactive (on an LTE connection). And this is a tiny super-optimized page. But never forget A) we can't all live in the US east-coast area and B) if the HTML can download marginally faster it allows the browser to parse it sooner and start downloading all the other stuff much sooner. It'll make a big difference! I'm sure you've all seen graphs like this:
Imagine if all those static asset downloads could have started a whole second "to the left"
Of course a CDN is faster. It's no news. But it's also a hassle and it costs money. It's 2019 and most good CDNs now support Brotli, fast purge-by-url, and HTTP/2. It's time to make the switch! It's not like cache-invalidation is hard.
UPDATE April 23 2019 (same day)
KeyCDN has a neat looking tool that is similar to Hyperping but more of a one-off kinda deal. It's called Performance Test
and I wouldn't be surprised it's biased as heck because they probably run these pings from the same location'ish as where they have the edge locations. Anyway, the results are nevertheless juicy. Note the last, TTFB column numbers.
Performance Test without CDN
Performance Test with CDN
15 April 2019 0 comments Javascript, ReactJS, Python, Web development
A couple of months ago my colleague Michael @mythmon Cooper wanted to add a feature to the front-end code of Whatsdeployed and learned that the whole front-end is spaghetti jQuery code. So, instead, he re-wrote it in React. My only requirements were "Use create-react-app and no redux", i.e. keep it simple.
We also took the opportunity to rewrite some of the ways that URLs are handled. It used to be that a "short link" would redirect. For example GET /s-5HY would return 302 to Location: ?org=mozilla&repo=tecken&name[]=Dev&url[]=https://symbols.dev.mozaws.net/__version__&name[]=Stage... Basically, the short link was just an alias for a redirect. Just like those services like bit.ly or g.co. Now, the short link is a permanent fixture. The short link is included in the XHR calls to the server for getting the relevant data.
All old URLs will continue to work but now the canonical URL becomes /s/5HY/mozilla-services/tecken, for example. The :org/:repo isn't really necessary because the server knows exactly what 5HY (in this example means), but it's nice for the URL bar's memory.
Another thing that changed was how it can recognize "bors commits". When you use bors, you put a bunch of commits into a GitHub Pull Request and then ask the bors bot to merge them into master. Using "bors mode" in Whatsdeployed is optional but we believe it looks a lot more user-friendly. Here is an example of mozilla/normandy with and without bors toggled on and off.
Without "bors mode"
With "bors mode"
Thank you mythmon!
Lastly, hopefully this will make it a lot easier to contribute. Check out https://github.com/peterbe/whatsdeployed. All you need is Python 3, a PostgreSQL, and almost any version of Node that can run create-react-apps. Ping me if you find it hard to get up and running.
12 April 2019 0 comments Web Performance, Nginx, Web development
tl;dr; The global average response time of serving an image from my NYC DigitalOcean server compared to a CDN is almost 10x.
KeyCDN is a CDN service that I use for side-projects. It's great. It has about ~35 edge locations. I don't know much about how their web servers work but I can't imagine it's much different from the origin server. In principle.
The origin server is my DigitalOcean (6 vCPU, 16 GB RAM, Ubuntu 14) droplet. It's running an up-to-date CloudFlare build of Nginx and the static images are served straight from (SSD) disk with a 4 weeks TTL (max-age=2419200,public,immutable). The SSL is done with LetsEncrypt and I'm somewhat confident the Nginx is decently configured and uses HTTP/2.
So the CDN, on songsearch-2916.kxcdn.com, is basically configured to front any requests to songsear.ch. If the origin has cache-control headers, KeyCDN knows it can hold on to it for a while, but it's not a guarantee that it will for the full time specified in the cache-control
. Either way; how does it compare?
The Experiment
I picked a random static asset URL. It's a 32 KB JPEG file. Its origin URL and its CDN URL are:
- https://songsear.ch/static/albums/2017/05/24/08/170630_300x300.jpg
- https://songsearch-2916.kxcdn.com/static/albums/2017/05/24/08/170630_300x300.jpg
Next, I set up a Hyperping monitor on both URLs as GET requests. For the regions (regions from where Hyperping will do pings from), I picked the following:
- San Francisco, USA
- New York, USA
- London, United Kindom
- Frankfurt, Germany
- Mumbai, India
- São Paulo, Brazil
- Sydney, Australia
(I wish I had selected all 12 possible regions when I started but now it's too late for lazy me)
Then, I let Hyperping GET these URLs for a while and behold, here are the numbers:
The Results
Average response time:
- The CDN: 79 ms
- The origin: 714 ms
That's a 10x difference!
Mind you, the "average response time" is across all regions. It doesn't reflect what people get. If 90% of your visitors are from Australia, the average response times would, of course, be very different. But as an example, the origin server is in New York and there, the average response time is 26 ms vs. 105 ms which is a 5x difference.
Here are some screenshots from Hyperping:
KeyCDN
Origin server
Conclusion
KeyCDN's server is clearly fast and worth doing. It's unsurprising that it performs better far away from New York but it's surprising how much faster it is at serving than the origin when pinged from New York (5x difference).
The site is still NOT fronted by a CDN because, apart from the images, almost all content is un-cacheable. However, I need to do more research and experimentation with putting everything behind a CDN and being meticulous with setting no-cache headers on dynamic stuff and using async tools to invalidate CDN caches when appropriate.
