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

• colors
• sizes
• line-heights
• 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.

Javascript At The Bottom

Granted, this issue isn’t new, but it’s incredible how many websites are still not deferring parsing of JavaScript. To give some context to this issue, let me explain further. When you request to see a website, the browser has to parse a lot of content including stylesheets, JavaScript files, images and all the files associated with the page you requested, but the download of those assets does not occur all at the same time: a browser can download 3 files from a single server at a time. If you place JavaScript files at the top, the browser has to wait until all those files are downloaded to show you any content.

This technique proposes to place JavaScript at the bottom of your markup, precisely just before closing the body tag for the browser to render all the content as quickly as possible and only after that, download and execute JavaScript content.

Minify Almost Everything. Combine What You Can. Compress The Rest

This tip includes all types of files: Javascript files, stylesheets and, of course, images. In terms of Javascript and stylesheets, and based on ideas we’ve already discussed, the bigger the files are, the longer the user has to wait until anything can be rendered.

In a nutshell, minifying and compressing Javascript involves trimming every single comment and spaces between characters to reduce bandwidth consumption by your website or web application. This single action can reduce file size up to 90%. Amazing, isn’t it?

Stylesheets can be minified following the same action, and the results are pretty much the same: smaller file sizes.

Both Javascript and CSS files can also be merged into a single files; this helps us reduce the number of HTTP Requests, that is, the number of times we ask the server to send a file to the front end for the browser to fetch it. Of course there are cases where this technique can have a downside: if the combined size of your files is too large, they can cause a huge delay in the front end. You and your team should evaluate if this is applicable in your case.

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 hello@makingsense.com; we’ll be glad to advise you, regardless of your web development needs.