PhotoDeck vs alternatives: optimizing loading speed
This post, written by the developers of the software on which PhotoDeck is based, is a bit nerdy. But it’s for an important cause: speeding up your website. It is about an important improvement they’ve just done, but it’s mostly an illustration of our philosophy and of the kind of work that makes PhotoDeck websites faster than the others.
JavaScript is a key part of the code that makes your website, along with HTML and CSS. Each time you load a website on the Internet, you load its JavaScript code. In some cases, a lot of it.
So it’s quite important that this code loads fast. It’s also important that it is compact and well-designed, so that the viewer's computer or mobile phone can not only load it but also run it as fast as possible. Lean code places less strain on the device, requires less energy, and that has an impact on battery life, and in the grander scheme of things, on the environment.
So with this in mind, we’ve now completed a project to further optimize the JavaScript code on PhotoDeck websites. The word “optimization” might be a bit of a misnomer given the results, but we’ll get back to this in a second.
(Skip to the main results if you’re in a hurry)
Most websites rely on third-party code libraries. They offer ready-made key functions, so it’s easier for the website developer to just assemble some of those building blocks and add new code on top of them.
These libraries are super-convenient, but they are large in size and they therefore slow down a website. In addition to that, they evolve in time (among other things to adapt to newer, faster browser capabilities and because of security issues), and website developers need to keep updating their own code accordingly. This maintenance is so demanding that only few are diligent about it.
Like pretty much everybody else, we’ve been using external libraries since our launch in 2010. Unlike pretty much everybody else, we’ve been keeping everything up-to-date and secure.
But we’re always looking for ways to speed up our websites even further - they’ve consistently been the fastest of the alternatives for a reason.
So here is today’s news: we’ve now axed the third-party libraries and replaced them by our own optimized code.
The results, compared with competitors
We’ve slashed the size of the JavaScript code on PhotoDeck websites by 32%. Not only is it significantly faster to load, but since it’s better integrated, it’s much lighter for browsers to run, too.
JavaScript on a PhotoDeck website now weights in at just 48 KB. That’s about the size of a photo thumbnail.
Let’s put this in perspective by comparing a basic Contact page hosted on a PhotoDeck website to a similar page on websites featured by three of our main competitors. These alternatives to PhotoDeck are well known US-based “market leaders” and there is little doubt you’re familiar with them.
- PhotoDeck: 48 KB
- Competitor A: 650 KB, libraries not updated since 2012, with 6 known security vulnerabilities
- Competitor B: 470 KB, libraries not updated since 2014, with 5 known security vulnerabilities
- Competitor C: 750 KB, libraries not updated since 2014
- We could go on and on…
On average from this small set, the JavaScript code on a PhotoDeck website is twelve times lighter.
Why does this matter?
Loading speed is a very important thing, but since we’re not ones for marketing bullsh*t, let’s get this straight: this optimization will speed up your website but by itself won’t be a revolution for your customers or your Google ranking (PhotoDeck websites were exceptionally fast even before this new improvement).
Still, in the big picture there is more to it.
Security of course. More code means more security risks.
The user experience on the website, too. Directly using the more recent native browser technologies instead of external libraries makes for smoother, faster execution.
Generally speaking, overbloat and unmaintained code are markers for carelessness and fragility - of a platform as a whole.
This is also where we circle back to our philosophy: we don’t like waste. We like it when things are clean, fast, robust, and don’t consume more resources than necessary.
Lean is beautiful, and it’s the right thing to do!
Footnote
To check the results above for yourself (or to compare another site), simply open the Developer tools in your computer browser, and under the Network tab, click on the JS filter, select the checkbox to disable the cache, then hit Reload. You'll see the totals at the bottom of the window. When there’s an external Captcha, we’ve excluded its code for fairness of comparison, as well as third-party tracking. Known security vulnerabilities are identified by the Lighthouse tool in Chrome.