By Eric Karkovack, Specky Boy
Web design is a field that requires both technical knowledge and a sense of style. We not only have to envision the perfect page; we also have to build it.
This Yin and Yang is a challenge. How do you create a website that looks beautiful while also maintaining peak performance?
Over the years, it seems like the balance has been tilted toward the former. I’ve faced it in my own journey. For example, even though I know that massive image is going to bog down load times, it just looks so good.
But, on the modern web, is any visual enhancement worth implementing if it means taking a significant performance hit? Given the right approach, you shouldn’t have to.
Performance is as Important as Ever
It feels a bit ironic. Hardware continues to evolve in more powerful ways. Even mobile phones have multiple processor cores and tons of memory. Not to mention that broadband has become increasingly widespread.
Yet, we’re still told to eke out every possible millisecond of load time. Why?
It comes down to two reasons: short attention spans and Google. First, users don’t tend to stick around for a slow website to load. They’ll just find whatever they’re looking for elsewhere.
And with Google’s Core Web Vitals now influencing search rankings, well, performance is a pretty big deal. It could be the difference between getting found or forever lost in the nether regions of search engine results.
Plus, the web is no longer a novelty. To think that users will wait around for your fancy intro presentation (#RIP Flash) is unrealistic.
People visit your website for a specific purpose. Therefore, anything that gets in their way is probably not worth implementing.
Modern CSS and JavaScript Techniques Provide Solid Alternatives
As a designer, it’s easy to get into the habit of using bulky media files to enhance the look of a website. This has been the way of doing things for decades. Whether it’s a full-screen image or a video background, these items can be transformative. However, they can also hamper performance.
Thankfully, modern CSS and JavaScript can offer better alternatives. Each has features that can either replace media or make these files easier for browsers to digest.
Visual effects like CSS gradients and blend modes are great examples. They look just as good as anything you can whip up in Photoshop, yet without all the excess bloat.
If you’re looking to add movement, CSS animation and JavaScript libraries such as GSAP can fit the bill. Not only can they produce jaw-dropping looks, but these techniques are also lightning-quick.
In addition, lazy loading offers a nice compromise – at least for media that isn’t within the initial viewport of your page. Elements including images and iframes will only load when needed. This saves on load time while still enabling the use of these assets. Native browser support makes implementation easier than ever.
Smart use of these techniques can help you avoid dragging down performance for the sake of looks. Instead, you’ll achieve a more sustainable balance.
Beauty and Performance Can Coexist
A website is more than just its looks, content, or functionality alone. It’s a cohesive user experience. That means each of these facets must come together to serve users.
In order to effectively do so, a website must also prioritize performance. Years ago, it might have been easier to get away with a great-looking site that was slow to load. Before powerful devices and fast internet, speed wasn’t necessarily a user expectation.
That’s changed dramatically. We now live in an on-demand world, one where everything we need is just a click away. If your website doesn’t deliver on that promise, it’s going to be difficult to build a lasting relationship with visitors.
Web designers need to change along with those expectations. In practice, it requires us to think long and hard about what visual elements we create and how we implement them. Doing things as we’ve always done them may no longer be viable.
Instead, everything must be done with an eye towards optimal performance. It’s a challenge, for sure. The good news is that we have the right tools and technologies to make it happen.
