Code Optimisation and Performance

Overview

Performance is part of user experience. Anybody who has experienced slow internet connection will agree to this. While you cannot prevent external factors such as slow internet connection, it is possible to positively influence the performance of your project by adapting the best practices included in this section.

Guidelines

Compress and minify your CSS and JS

For better performance, minify and compress your cascading stylesheets and JavaScripts. Use the following tools:

Consider different ways to make it seem like your pages load faster than it actually does

  • Research the priority content that should load in your interface. If it’s a news article, the text content should load first, allowing the user to start reading before the experience has even finished loading.
  • Use skeleton screens
  • Provide a loading state (e.g. placeholder content) and a fallback (e.g. un-styled text) for all elements you design and use.
  • Consider browser caching and progressive jpegs

preloading-content.png

Customise and optimise your Meta Descriptions

A meta description or meta tag is an HTML tag that identifies the contents of a web page for the search engines.

meta

Ensure proper use of site URLs and domains

Site URL works with or without www. For example "www.stayintech.com" and "stayintech.com".

Use CSS to specify states for smaller, self-contained UI elements

CSS transitions and animations are ideal for bringing a navigation menu in from the side, or showing a tooltip. You may end up using JavaScript to control the states, but the animations themselves will be in your CSS.

Performance is part of user experience. Anybody who has experienced slow internet connection will agree to this. While you cannot prevent external factors such as slow internet connection, it is possible to positively influence the performance of your project by adapting the best practices included in this section.