When you think about web performance, do you imagine a data center buzzing with the hum of endless rows of blinking servers? Do you feel the foundation of optimum performance rests on the shoulders of servers rather than in the creative hands of designers? Unless you’re well-versed in website infrastructure and operation, it’s easy to assume the responsibility of performance is primarily in the invisible hands of server health and resources.
While the stability and technology of a web server plays a direct role in overall web performance, both front and back-end components must work together to cultivate a powerful website. Considering this, let’s explore the many reasons why site design impacts web performance for the good and bad.
The Role of Animation in Web Performance
As our digital technologies become more powerful, and offered a myriad of unique stylistic and UX features, countless websites suddenly fell prey to a common foe: animation.
Now, don’t misread the above statement. Design enhancements, such as animation, aren’t inherently negative for the health and performance of a website. However, much like any other element within your website, it must be handled with care to prevent a negative design impacts web performance.
The biggest question you must answer is does the animation provide real meaning and purpose to the end-user, or is it being used to simply boost the visual appeal of the site? If you answered the latter, then seriously consider eliminating this element from your site. While it may provide a fun visual dynamic, these elements demand significant resources and can seriously diminish performance for visitors who have a slow or unreliable connection.
The Terror of Terrific Typography
Who doesn’t love a beautiful font? Throughout the past several years, tools such as Adobe TypeKit and Google Fonts have made it easier than ever to customize how visitors read your content. While this is an exciting opportunity to demonstrate your design skills, excessive custom fonts can seriously slow down your site’s performance.
The reason for this is because the majority of custom fonts aren’t native to any web browser. Thus, to render each page, and every font, a specific font file must be requested and downloaded on each page. As you can imagine, this can be seriously damaging to the overall performance of your website and how this element of design impacts web loading time.
Of course, this doesn’t mean you shouldn’t utilize custom fonts. While you should be wary and try and select standard web-safe fonts, if you do choose to utilize a custom font, limit the number of fonts to 3 or less.
Because there isn’t a font format that renders appropriately in every browser, it’s important to define a collection of multiple formats. By doing so, you’re allowing the browser to pick whichever font format it can support. This ensures a consistent visual experience for visitors while also minimizing the effort of browsers to identify and attempt rendering non-supported font files. It’s a good idea to use fonts from standardized libraries, such as WOFF 2.0, which is supported by a myriad of browsers and results in expedited font rendering.
