Experience Design

STLUX Recap: Getting Started with Website Performance

Back again with another recap of the STLUX conference sessions!  My previous post in this series covered Practical Interaction Design for Developers, a session by David Ortinau.  Where that session discussed how developers can educate themselves about user actions and expectations in regards to the design, this session covers another aspect of a user’s expectations for your site: its performance.  Given by Duncan Jimbo, here are my notes from Getting Started with Website Performance.

What is website performance?

The Digital Essentials, Part 3
The Digital Essentials, Part 3

Developing a robust digital strategy is both a challenge and an opportunity. Part 3 of the Digital Essentials series explores five of the essential technology-driven experiences customers expect, which you may be missing or not fully utilizing.

Get the Guide

Website performance is the delay perceived by a user between an action and a response.  Your website’s performance is your business, because poor performance costs you money.
Nearly 60% of users expect a site to load in 3 seconds or less, and 71% of mobile users expect the same results or faster than its desktop counterpart.

How can I improve my site’s performance?

To start, make performance a goal during the Discovery phase of your project. It’s best to begin thinking about your website’s performance before you begin development.
Consider setting a performance budget (that you can measure in seconds, kB, etc).  This enforces you to discuss HOW to display your content, not WHAT content to display.
It’s important to know that a user’s machine can only download four pieces of your site (resources) at a time, and 80% of the response time occurs on the front-end.  Some ways to cut down on front-end load times are as follows:

  • Cut down the number of resources downloaded by concatenating (and minifying) CSS and Javascript files
  • Optimize images (ImageOptim) and use image sprites
  • Load CSS before Javascript
  • Consider the effect of any third party plugins you are using
  • “Lazy load” non-critical content
  • Conditionally load content for responsive web design
  • Use sub domains to serve CSS and Javascript (this is a handy way to download more than four resources at once)
  • Use a CDN to delivery files or content

There is an app called Slowy that will allow you to simulate different connection speeds and test your site for how it responds to slower connections, and testing is crucial to fixing any problem.
But above all, the most important thing you can do for improving your website’s performance is to try to create a culture of performance thinking in your company.

About the Author

I'm a front-end developer working at Perficient Digital, and I'm passionate about HTML, CSS, and grilling chicken.

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories