Estimated reading time: 4 minutes, 3 seconds
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!
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.
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:
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:
- Just one external CSS file, of a reasonable size so full rendering can start as quick as possible.
- 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.
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:
Illustration credits: Ebay, Patrick Steele-Idem
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?