Web design today relies on several aesthetic and development practices to create modern, trendy environments. It’s also well-known fact that high performance websites generate greater visitor involvement, higher conversions and more retention.
Considering the fact that each visitor has different factors that affect user experience, such as Internet connection speed, and keeping in mind that mobile browsing is becoming more popular, website performance has never been more important than it is now.
In this article we are going to cover a range of best practices (some new) to help you improve the performance of your website or web app, while keeping Design and User Experience in mind.
Forget About Image Sprites
Yes, I’m serious. No, I’m not crazy. Most websites use a wide range of icons to illustrate a section, to emphasize a flow action or to give context to specific content. One of the most widespread, rapidly developing website and web app trends of the last few years relates to the use of icon web fonts instead of image sprites. This is due, in part, to the explosion of flat design, which we previously discussed.
Icon fonts (we can extend these to include other visual content such as logos) are a new way to display icons in typographical form, instead of as a large image that contains those aesthetic resources. As a result, you get more control of how you want to display every icon since it behaves like a font face; this gives us an infinite number of possibilities, including changing
- all other CSS properties related to text management
Another advantage of icon web fonts is natural support for high pixel density displays, commonly known as Retina Displays. In the past while using image sprites, we had to maintain 2 separate files containing every single aesthetic resource and serve them depending on the device pixel density display; with this new technique, we forgot about that considering that font faces are, in short, a collection of vectors.
My advice is that you replace sprites with icon fonts -as we did in Making Sense’s new website– whenever possible.
Stay tuned; we are going to extensively cover this technique and its implementation in the near future.
Disable Hover Effects
A hover effect is a visual response triggered when you position your mouse pointer over a link of any sort of object that needs to interact immediately with the visitor. As Paul Lewis states in this great article, hover effects can cause a huge impact on our runtime performance.
In that article, he talks about how this affects performance and user experience, increasing fps -frames per second- to almost double its initial value. The development community has been working since Ryan Seddon came up with a great approach that is based on removing pointer events while the user is scrolling a page and restoring those back when they’re not.
I recommend you to take a look at Ryan’s article to help you reach your own conclusions on the matter.
Minify Almost Everything. Combine What You Can. Compress The Rest
Stylesheets can be minified following the same action, and the results are pretty much the same: smaller file sizes.
On the other hand, images can be compressed, with little or no loss of quality, using one of the many available image compressors. There are lots of online services that provide great and quick results such as Yahoo’s SmushIt, TinyPNG or Kraken. What do those services do? They trim image metadata that is not needed in a web environment. TinyPNG, as its name states, reduces PNG file size by converting 32 bit PNG files to 8 bit files with alpha channel resulting in much smaller file sizes while maintaining the same image quality.
In the recent launch of Making Sense’s new website, we made use of Kraken’s amazing web service to not only reduce image file sizes but to convert every single JPG image file to the interlaced progressive compression format, resulting in higher image quality by progressively enhancing every image in the download process.
What Are Your Thoughts?
As you can see, there are several methods and techniques that can significantly improve website and web app performance; you just have to find out which one is most likely to suit your needs.
We welcome your feedback on the comments section. You can also get in touch with us by filling out the form in the Contact section or by emailing us at firstname.lastname@example.org; we’ll be glad to advise you, regardless of your web development needs.