5 unknown techniques to increase website performance
UX

5 unknown techniques to increase website performance

5th October 2015

Many articles have been written about optimising website loading times, since search engines have been using pagespeed as a factor in their algorithms. With Google moving more towards are a more user signal based algorithm, perceived performance will be one of the factors that will become more important during the upcoming years. It’s never to early to start optimising for a better user experience so below you can find five lesser known techniques to create a better user experience and increase conversion!

Font loading

Most websites nowadays use non-standard, custom made fonts to add something special to the design and the overall user experiences. There are a few common issues with loading custom fonts that influence performance negatively:

  • Takes additional downloading
  • Takes additional connections if the files are hosted externally
  • Takes additional scripts like Modernizr.js, Cufon, sIFR
  • Can block the rendering of the page
  • If implemented incorrectly, it shows white spaces where there should be text after initial page load causing flickering
  • Most browsers (except Internet Explorer) have a fallback mechanism of a font doesn’t load within 3 seconds.

Luckily there are a few solutions: originally the Guardian came up with a technique using JavaScript to load and store their custom made fonts and render a system font in first instance. Users can start reading immidiately, even with slower (mobile) connection speeds. After the initial page load, it starts rendering the custom font. If you use JavaScript, you can store fonts in LocalStorage (not to be mixed up with traditional caching) and also known as HTML5 Storage. This means for consecutive visits, no blinking will occur. Dillon de Voor, from Spilgames, has built a few example scripts that you should definitely should have a play with: Non-blocking web fonts using LocalStorage

non-blocking-web-fonts-using-localstorage__the-guardian

Progressive JPGs

Research shows that for JPGs, files bigger than 10kb should be saved as progressive instead of baseline format to increase user experience. Using a progressive JPG means the browser starts rendering earlier, before the complete file has downloaded. The following illustration shows the difference:

baseline_vs_progressive

Image credits: Six Revisions, Catalin Rosu

Filesizes will be slightly bigger compared to baseline JPGs, but the effects are minimal compared the better visual experience. Current adoption rates are somewhere between 5 and 7% depending on which reports you read. All modern photo editing software can save JPGs in progessive format nowadays, but if you want to easily process all your JPG images to a progessive format, use a tool like ImageOptim for Mac and FileOptimizer for Windows.

CSS Delivery optimisation

Looking across source codes of many popular websites in competitive niches on a daily basis, I noticed CSS optimisation is rarely a priority. In the most ideal situation, the best CSS setup would be according to the following rules:

  1. Just one external CSS file, of a reasonable size so full rendering can start as quick as possible.
  2. Inline CSS into HTML using tags for above the fold content so the browser can render without having to download the CSS file first.

Most templates right now work with one general CSS file and one or two additional CSS files. This means we need to separate the CSS based on what is needed for above the fold content and secondary content. CSS needed for above the fold content is called Critical CSS. Critical CSS can be extracted with a tool like: Filamentgroup Critical CSS or webbased Critical Path CSS Generator Jonas Ohlsson

Progressive HTML rendering

Most website consists out of specific elements, all loaded inline. Progressive Enhancement, a technique known as progressive rendering could increase perceived performance.

progressive-rendering

Basically every element is flushed indepently to the browser so it can be rendered without having to wait until the complete document has loaded. Google’s Ilya Grigorik has written a great guide on how to develop web documents that take this process into account: Optimizing Performance – Critical Rendering Path

Ebay has written a great case study on this topic: Ebay Tech blog: Async Fragments: Rediscovering Progressive HTML Rendering with Marko Elements like the top menu, search results, left filter menu and footer can be flushed at separate blocks instead of loading them all at once. That means that during the time the top menu is flushed and rendered, the server has time to come up and push the search result block live. Illustrative example setup:

out-of-order-flush

Illustration credits: Ebay, Patrick Steele-Idem

Progress indicators

Adding a visual progress indicator, like Facebook and Amazon have on the top of their page, will increase customer satisfaction and will increase perceived performance. By using a progress bar, it gives more space to load a heavy page without losing on customer expectations. There are some things you shouldn’t do, like implementing a progress bar containing percentage numbers. Progress bars that speed up towards the end are considered more satisfying by users. More information and best practises: What are the best practices for using a progress bar?

Tags

Written By
Jan-Willem Bobbink got addicted with online marketing in 2004, since he build his first international webshop when he was 16. He is currently working as Freelance SEO for global clients and is ambassador for Majestic. His blog can be found at Notprovided.eu. and he shares his cycling adventures at CATW!
Recap Friends of Search 2016  #FOS16
Latest Post from Jan-Willem
UX Recap Friends of Search 2016 #FOS16
16th February 2016
  • This field is for validation purposes and should be left unchanged.