The web has come a long way since the days of simple HTML pages. Today’s websites are dynamic, interactive, and filled with rich media. However, this evolution has come at a cost: modern websites are often bloated with excessive code, oversized images, and complex javascript that can significantly slow down page load times.
A recent analysis by Dan Luu delved into the issue of website bloat and its impact on user experience, particularly for those using low-end devices. Luu found that many popular websites and site builders are delivering pages that require loading 10-20MB of data. For example, a single Wix webpage was found to require 21MB of data, while Patreon and Threads pages loaded 13MB each.
21MB, so what?
Just to put that into context: Windows 95 came on 13 floppy disks. At 1.44MB each that would have been roughly 19MB of data. So one Wix starter webpage “weighs” more than an entire (very successful) operating system. How crazy is that!?
This excessive bloat can lead to extremely slow load times, especially on entry-level smartphones and slower networks. Luu’s testing showed that on low-end devices like the Itel P32 and Tecno S8C, some websites took over 30 seconds to load or failed to load completely. Shockingly, rendering certain websites required more processing power than running the game PUBG at 40 fps.
The impact of slow load times on user experience and business metrics is well-documented. 47% of consumers expect a webpage to load in 2 seconds or less, and 40% will abandon a site that takes more than 3 seconds. A 1 second delay can result in a 7% reduction in conversions, potentially costing companies millions in lost sales.
So what’s causing all this bloat?
The main culprits are:
- Large, unoptimized images
- Excessive use of JavaScript, often from third-party scripts
- Overuse of web fonts
- Unoptimized or redundant CSS
- Auto-loading videos and animations
Many modern site builders make it easy to add these resource-intensive elements without considering their performance impact. As Luu notes, “page builders face a special problem: their developers don’t know what the final page will look like…Because many layout elements need to be supported a lot of unnecessary code is loaded.”
How to fix it on your site?
The good news is there are many established techniques for optimizing websites and reducing bloat:
- Compressing and resizing images, using modern formats
- Minifying JavaScript and CSS
- Lazy loading images and video
- Using a content delivery network (CDN)
- Implementing caching
Javascript has come a long way in the last few years and there is no need to include the next best JS framework just to do some trivial DOM manipulation. Maybe we all need to stop and consider if a few lines of vanilla JS could do the trick, or if that feature is even needed.
By putting these optimizations in place, and being mindful of adding resource-intensive elements in the first place, developers and designers can significantly improve page load times. This will provide a better experience for all users, regardless of device or network speed.
How RetroStack fights the bloat
We feel passionately about speed, performance and UX at RetroStack and have built the platform from the ground up to avoid the pitfalls that modern sites face. Just because we can send the equivalent of a fully fledged OS over the wire every time you want to read a blog article, doesn’t mean we should.
All of our templates are optimized to modern standards and use above mentioned optimization strategies to minimize the bloat. You don’t have to be a software engineer to have a performant static website or blog. Why waste resources and your users’ time.
A fast-loading website is no longer a nice-to-have, it’s a necessity. Bloated pages frustrate users, hurt conversions, and can negatively impact search rankings as Google uses page speed as a ranking factor. It’s time for the web to put performance first and push back against the bloat.