In recent years, website designs have become more complex and multimedia intensive. High resolution Retina-ready hero images, video, parallax scrolling, animations, social media widgets and a plethora of other tools have been incorporated to create engaging and immersive online experiences. The goals are certainly noble – to create unique and engaging websites for our clients that will help them achieve their online marketing objectives. Significant improvements in bandwidth - both wired and cellular - and device capabilities have further encouraged us to push the envelope with highly dynamic online experiences.
The evolution of technology and design patterns has resulted in our industry going a bit overboard, too often building slow, bloated web pages to achieve this interactivity. While unheard of just several years ago, it’s now common for web pages to be several megabytes in size, an issue that has led to a negative impact on both our site visitor’s experience and our results (leads, conversions, sales, etc.). Slow website performance has been shown to impact both the abandonment rate of pages/sites and conversion rates. While studies differ as to how much, the consistent bottom line is that faster is better: faster load times correlate with more conversions and lower bounce rates.
It’s not just a user experience issue. Search engine optimization (SEO) is also an important consideration. As a reminder, Google has used website performance as a search ranking factor since 2010. Although it’s unclear how significant of a role performance plays in that algorithm today, any way we can optimize for Google’s algorithm matters.
Ultimately, our primary goal is to design and build websites that achieve marketing and business objectives, not just win awards (although that’s nice, too). I’m not suggesting that we step back and build sites that are flat or generic, but rather I’m advocating for striking the appropriate balance among performance, interactivity and visual flair. That’s not always easy. As our clients seek distinctive and engaging websites, our designers want to express their creative freedom and developers must execute on those design visions to create interactive, yet high performing websites. So the key question is: What can we do to effectively balance these sometimes competing goals?
First, what do we mean by a high performance website?
There are two key dimensions to a “high performance website”: true performance and perceived performance. When we say true performance, we’re referring to objective metrics based on the total size of the page, available bandwidth and code complexity, which then results in measuring how quickly the browser begins downloading and completes rendering the page. You can easily test true performance of your pages using available browser plugins and various online tools.
Perceived performance is a bit more subjective; it’s how quick a visitor thinks your page or site is; so the distinction here is appearance vs. reality. What we’re referring to by perceived performance is how quickly the visitor can see and interact with your content. So even if the browser is still loading code in the background or working on rendering components lower down the page below the fold, the visitor perceives that the page is fully loaded and the site is fast because he or she can immediately engage with it. Usability testing your site with target audiences is one of the most effective ways to test perceived performance.
So what’s really important – true or perceived performance?
Both are, but for different reasons. When it comes to Google’s analysis of a page’s or site’s speed, it’s all about real performance. The Google spider is identifying page size and download speed. So to maximize SEO for your site, you do need to pay attention to real performance. But when it comes to usability, it’s all about perceived performance. A site visitor only cares about what they see on the page and how they can interact with it. If there’s code or content that’s still downloading in the background or out of the visitor’s view, it doesn’t impact them; they’re not even aware of it.
Applying this to your website development projects
Let’s shift gears from the theoretical to how we can use this information to build better, higher performing websites.
Establish a performance “budget” for the site
The best way to stay on track is to establish goals that everyone can agree on before design and development begin. Identify maximum or average page size values for your website as well as maximum download times on common wired/Wi-Fi and cellular connections. You may ask what those maximums should be, but there’s not a one-size-fits-all answer. It really depends on the industry and objective of the website. For example, a website for a museum will have different performance targets than a transactional ecommerce site.
One of the most effective means of ensuring that a website is both engaging and performing well is close collaboration between designers and developers. That has become easier in recent years with a shift to more agile development approaches. But the key here is for designers and developers to work together during the design process to ensure that the components and interactions being designed don’t have a detrimental effect on performance.
This project phase is really where you strike that balance between engaging design and site performance, addressing questions like “is that slider with complex animations really worth the performance impact, or can we achieve the user experience objective another way?”
Take advantage of perceived performance
We don’t want to hobble our designers’ creativity and we absolutely still want to push the envelope with exciting, original design concepts. So as we build web pages, we want to ensure that we prioritize both content and code. Using techniques like asynchronous loading, or ensuring that page elements above the fold fully load prior to elements further down the page, can help to ensure that site visitors can begin interacting with the page as quickly as possible. This is a bit of smoke and mirrors, but it certainly helps the user experience in unavoidably complex and code-heavy websites.
The nitty gritty technical stuff
Getting back to true performance, which of course impacts perceived performance as well, you’ll want to make sure that you’re following general web development best practices. For instance –
- Load code/content asynchronously and avoid render blocking components. This is a big one for perceived performance. Code your pages so the visitor doesn’t have to wait for all assets to load before being able to see and interact with the page.
- Optimize/compress images to minimize page download size. This is more important now than ever as digital camera resolutions have increased and image sizes have gotten bigger. Optimize images to ensure size and resolution are no larger than needed for the particular application.
- Leverage browser caching. Configure your site and web server to enable browser caching of image and code assets to speed up the experience for repeat visitors.
- Make use of web server compression. This step reduces the size of the assets the site visitor’s browser needs to download.
You can use a number of free online tools to performance test your site’s pages. A particularly useful one is Google’s PageSpeed Insights, which provides great information on factors impacting a web page’s performance and how to address specific performance issues.
Putting it all together
Circling back to our overall objective, we’re out to create outstanding user experiences for website visitors, across all devices, in order to help our clients achieve their digital marketing goals. Finding the appropriate balance between design and interactivity demands on one hand, and performance and usability on the other, is one key consideration to doing that. That doesn’t mean building boring websites, but rather making the right design and development trade-offs. Please drop me a note at mailto:firstname.lastname@example.org if you have questions or would like to discuss any of this further.