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.
04 April 2019 0 comments Web Performance, Web development
tl;dr We could make the initial HTML document 40% smaller if moved from inline SVG to external, optimized, .svg static assets. But there are lots of caveats unless the SVG can be used as an image.
One of the many goals of MDN Web Docs this year is to make it faster. That makes users happier and as a side-effect, it makes Google happier. And hopefully, being faster will mean Google ranks us higher.
I'm still new to the MDN code base and there are many things we can do. One thing I noticed is that the site uses inline SVG. E.g.
<a href="/en-US/docs/Learn">References & Guides
<svg class="icon icon-caret-down" xmlns="http://www.w3.org/2000/svg" width="16" height="28" viewBox="0 0 16 28">
<path d="M16 11a.99.99 0 0 1-.297.703l-7 7C8.516 18.89 8.265 19 8 19s-.516-.109-.703-.297l-7-7A.996.996 0 0 1 0 11c0-.547.453-1 1-1h14c.547 0 1 .453 1 1z"/>
</svg>
</a>
The site uses HTTP/2 so the argument of reducing the number of requests is not valid. Well, with caveats. Browser support for HTTP/2 is getting really good. Definitely good enough to make it worth betting on.
It used to be that there's a trade-off for making static assets external: you can potentially avoid downloads, at all, by browser caching and the initial HTML document becomes smaller. But all, at the cost of more requests.
There are other, more subtle, differences with SVG. For example, the content of the SVG might depend on dynamic data. There might be others that I'm not aware and I'm quick to admit that I don't know much about use and stuff but this article might be full of those details.
The Experiment
I wrote a script that opens https://developer.mozilla.org/en-US/ and extracts every <svg> tag and puts them on disk. E.g. svg.icon.icon-smile_fbf6292.svg. They have a hash checksum on the content in case two <svg>s are different (but with the same classList). Then it does the following:
- Run
svgo on each .svg to create a .min.svg. - Run
zopfli on each .min.svg to create a .min.svg.gz - Run
brotli on each .min.svg to create a .min.svg.br - Sum all inline ones total size, sum the size of all
.min.svg, sum the size of all .min.svg.gz, sum the size of all .min.svg.br.
Results
| Technique | Number | Total Bytes |
|---|
| Inline | 27 | 22,142 (21.6KB) |
Optimized with svgo | 15 | 14,566 (14.2KB) |
| Zopfli compressed | 15 | 6,236 (6.1KB) |
| Brotli compressed | 15 | 5,789 (5.7KB) |
Conclusions and Caveats
For every single MDN page, we stand to make the initial HTML document 22KB smaller. Every time. Most web developers I know often Google for something and end up on MDN and do so frequently enough that there's a good chance for a warm browser cache.
But! This 22KB is uncompressed. Since the HTML documents are served gzipped, at a ratio of about 1:4, the total inline SVGs is roughly 5.6KB. At the time of writing the MDN home page is 58,496 bytes decompressed and 14,570 bytes gzipped. So that means that we stand to potentially
strip away 40% of the document size!
Second but! There are some non-trivial differences in usage of SVG. You can't simply replace...
<a href="/en-US/docs/Learn">References & Guides
<svg class="icon icon-caret-down" xmlns="http://www.w3.org/2000/svg" width="16" height="28" viewBox="0 0 16 28">
<path d="M16 11a.99.99 0 0 1-.297.703l-7 7C8.516 18.89 8.265 19 8 19s-.516-.109-.703-.297l-7-7A.996.996 0 0 1 0 11c0-.547.453-1 1-1h14c.547 0 1 .453 1 1z"/>
</svg>
</a>
...with...
<a href="/en-US/docs/Learn">References & Guides
<img src="/static/icon-caret.914d0e4.min.svg">
</a>
(Compare this and this)
You can, instead, use <svg><use xlink:href="/static/icon-caret.914d0e4.min.svg".></svg> but it comes with its own host of challenges and problems (styling and IE support) and you still need this <svg>
tag to do the wrapping in the first place which adds bytes.
It's not always worth compressing tiny static assets. And it might be worth experimenting with what the CPU cost is for a low-performance mobile device to decompress the asset versus just eating the extra network download cost of leaving it uncompressed.
HTTP/2 is great in that it allows the browser to download external assets earlier, on the same open connection, as the initial HTML document. But it's not without risks and costs that need to be carefully considered.
21 March 2019 1 comment PostgreSQL, Django
tl;dr; SELECT COUNT(*) FROM (SELECT DISTINCT my_not_unique_indexed_column FROM my_table) t;
I have a table that looks like this:
songsearch=# \d main_songtexthash
Table "public.main_songtexthash"
Column | Type | Collation | Nullable |
-----------+--------------------------+-----------+----------+
id | integer | | not null |
text_hash | character varying(32) | | not null |
created | timestamp with time zone | | not null |
modified | timestamp with time zone | | not null |
song_id | integer | | not null |
Indexes:
"main_songtexthash_pkey" PRIMARY KEY, btree (id)
"main_songtexthash_song_id_key" UNIQUE CONSTRAINT, btree (song_id)
"main_songtexthash_text_hash_c2771f1f" btree (text_hash)
"main_songtexthash_text_hash_c2771f1f_like" btree (text_hash varchar_pattern_ops)
Foreign-key constraints:
...snip...And the data looks something like this:
songsearch=# select text_hash, song_id from main_songtexthash limit 10;
text_hash | song_id
----------------------------------+---------
6f98e1945e64353bead9d6ab47a7f176 | 2565031
0c6662363aa4a340fea5efa24c98db76 | 486091
a25af539b183cbc338409c7acecc6828 | 212
5aaf561b38c251e7d863aae61fe1363f | 2141077
6a221df60f7cbb8a4e604f87c9e3aec0 | 245186
d2a0b5b3b33cdf5e03a75cfbf4963a6f | 1453382
95c395dd78679120269518b19187ca80 | 981402
8ab19b32b3be2d592aa69e4417b732cd | 616848
8ab19b32b3be2d592aa69e4417b732cd | 243393
01568f1f57aeb7a97e2544978fc93b4c | 333
(10 rows)If you look carefully, you'll notice that every song_id has a different text_hash except two of them.
Song IDs 616848 and 243393 both have the same text_hash of value 8ab19b32b3be2d592aa69e4417b732cd.
Also, if you imagine this table only has 10 rows, you could quickly and easily conclude that there are 10 different song_id but 9 different distinct text_hash. However, how do you do this counting if the tables are large??
The Wrong Way
songsearch=# select count(distinct text_hash) from main_songtexthash;
count
---------
1825983
(1 row)
And the explanation and cost analysis is:
songsearch=# explain analyze select count(distinct text_hash) from main_songtexthash;
QUERY PLAN
------------------------------------------------------------------------------------------------------------------------------------
Aggregate (cost=44942.09..44942.10 rows=1 width=8) (actual time=40029.225..40029.226 rows=1 loops=1)
-> Seq Scan on main_songtexthash (cost=0.00..40233.87 rows=1883287 width=33) (actual time=0.029..193.653 rows=1879521 loops=1)
Planning Time: 0.059 ms
Execution Time: 40029.250 ms
(4 rows)Oh noes! A Sec Scan! Run!
The Right Way
Better explained in this blog post but basically, cutting to the chase, here's how you count on an indexed field:
songsearch=# select count(*) from (select distinct text_hash from main_songtexthash) t;
count
---------
1825983
(1 row)
And the explanation and cost analysis is:
songsearch=# explain analyze select count(*) from (select distinct text_hash from main_songtexthash) t;
QUERY PLAN
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Aggregate (cost=193871.20..193871.21 rows=1 width=8) (actual time=4894.555..4894.556 rows=1 loops=1)
-> Unique (cost=0.55..172861.54 rows=1680773 width=33) (actual time=0.075..4704.741 rows=1825983 loops=1)
-> Index Only Scan using main_songtexthash_text_hash_c2771f1f on main_songtexthash (cost=0.55..168153.32 rows=1883287 width=33) (actual time=0.074..4132.822 rows=1879521 loops=1)
Heap Fetches: 1879521
Planning Time: 0.082 ms
Execution Time: 4894.581 ms
(6 rows)Same exact result but ~5s instead of ~40s
. I'll take that, thank you very much.
The Django Way
As a bonus: Django is smart. Here's how they do it:
>>> SongTextHash.objects.values('text_hash').distinct().count()
1825983
And, the SQL it generates to make that count looks very familiar:
SELECT COUNT(*) FROM (SELECT DISTINCT "main_songtexthash"."text_hash" AS Col1 FROM "main_songtexthash") subquery
Conclusion
- Avoid "sequential scans" like the plague if you care about performance (...or not just killing your resources).
- Trust in Django.
05 March 2019 1 comment Javascript, Web development
In a highly unscientific survey of exactly 2 French native friends, I asked them what they think about formatting large numbers the "French way" versus doing it the "English way". In particular, if the rest of content/app is English, would it be jarring if the formatting of numbers was French. Both Adrian and Mathieu said they prefer displaying the number the French way even if the app/content is French.
If you have an English browser opening https://codepen.io/peterbe/pen/xBRGoN
means it's going to display the two numbers the same way. But if you have a French locale in your browser it'll look like this:
Number.toLocaleString() is now universally supported so that's no longer a worry.
For years I was using a function like this:
/* http://stackoverflow.com/a/2901298 */
function numberWithCommas(x) {
var parts = x.toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return parts.join('.');
}
numberWithCommas(100000000);
// "100,000,000"
and it works and is reasonably fast too but it's so tempting to not use and instead stand on the shoulder-of-browsers to supply this functionality instead. But consider the alternative:
(100000000).toLocaleString();
// "100,000,000"
The thing that's always worried me is; What will someone's reaction be if the texts are in one locale and the formatting of numbers (and dates, etc!) are in another locale?
All 2 of the people I asked say they don't mind the mixing but admit that it's weird but that ultimately they prefer "their" format.
If you're non-English browser, what do you prefer? If you're a web usability expert, please, too, drop a comment to share what you think.
