Web performance is a fundamental element of an exceptional user experience. When a website takes too long to load, users are likely to abandon it in favor of a competitor’s site that offers the same functionality. For example, a site that requires 10 seconds to load due to excessive JavaScript bundling risks losing business to a competitor whose site loads in under a second. Potential customers will grow frustrated and leave before the Document Object Model (DOM) is even ready.
Recently, I stumbled upon a fascinating YouTube video by Wes Bos featuring an “old” website and showcasing its impressive loading speed. You can visit McMaster-Carr’s website to experience it yourself.
After spending a couple of minutes reviewing the page’s source code, I believe the site might be using the old ASP.NET, though it’s difficult to confirm without further context. However, they are using optimization and development techniques and some code that would be considered old by today’s standards.
The Web Should Never Break a Website
This website highlights the critical importance of maintaining backward compatibility when introducing new elements to the web. Even seemingly straightforward updates to web technology can disrupt millions of websites. Consider that they continue to use the XMLHttpRequest object, which remains fully functional. If the XMLHttpRequest object were suddenly deprecated and removed from the web browsers, it could break millions of existing sites.
It is fascinating that they are still using direct DOM manipulation instead of embracing the React bandwagon. Nothing is inherently wrong with React, but if a system isn’t broken, it’s better to keep and maintain it rather than “fix it” unnecessarily. I also noticed their use of iframes, a historical approach to simulating Ajax or desktop applications by updating only the iframe content instead of the entire page.
New Developers Should Be Aware of These Techniques
One striking aspect of the video was the comments section, where users expressed surprise at the site’s implementation. For example, some were surprised that the website was prefetching the DNS, while others were surprised by the use of sprites. This suggests that time flies, and what was once a normal or best practice can be lost to newer generations of developers. Sprites, for instance, were a way to reduce HTTP requests to the server by combining multiple images into a single file. While still effective, this technique is less popular today because HTTP/2 allows multiple requests to be performed over a single connection.
This observation brings to mind the enduringly relevant works (and recommended reads) by Steve Souders, “High Performance Websites” and “Even Faster Web Sites.” Many modern developers find themselves perplexed because they jump straight into using React or other front-end frameworks and libraries without a solid grasp of the foundational languages: HTML, CSS, and JavaScript.
In the past, learning began with a solid foundation in pure HTML, where one focused on understanding the semantics and purposes of the markup. This was followed by enhancing the design with CSS and then introducing interactivity with JavaScript. Today is quite different, with some web designers and developers lacking even basic knowledge of HTML and CSS. It is my hope that we can return to those foundational days and prioritize mastering the essentials before constructing more complex structures on top of them.
I offer a tip of the hat to those engineers and the company in general who, despite outside pressure to implement the newest “shining object,” continue to deliver the best possible user experience in terms of performance.