Getting Started with Web Performance

Let’s Talk About Web Performance

How many times have you tried to go to a website and it took forever to load? Whether you sat and waited for the site to load, or just left, it’s clear that loading times are important, especially when considering slower network speeds on mobile devices. Slower page load times lead to increased bounce rates, and an overall poor user experience. The concept of building faster websites is known as “web performance”, and is measured by both page load speed and the user’s perceived load speed. This all basically boils down to how quickly the user can access content.

How Can We Improve?

Understanding what web performance is and how to measure it is only one side of the coin. We have to make an effort to improve the performance of the sites we build, and that starts with learning who performance affects and how.

Performance is Not Just a Developer Issue

While web performance does require effort from the development team, it is not exclusive to the developers. Performance affects everyone, so everyone on the team needs to work towards improving it – not just the engineers. If performance isn’t considered until build-out, we’ve already lost out on opportunities for improvement.

Design Implications

When the designers begin working on a new site, they should consider how each design decision will affect page load times. Avoid overcomplicating designs and don’t be a “reckless” designer. Don’t be afraid to talk with the development team to see how adding additional webfonts, carousels, etc. will affect page load time.

Performance is a Feature

A faster site means a better user experience and can lead to an increase in sales or other value metrics. We should be discussing web performance with our clients and selling it as a feature. If everyone on the team is onboard with improving performance, it will be easier to convince clients to be, as well.

Real World Data

Getting a client to understand why we can’t include three carousels and parallax on every page can be tough, but we should gather data to back up our claims and reasoning. Real world data could include their current site’s page load times, as well as competitors. Of course, you may not always be able to reach an agreement, but presenting actual data can help back your claims up.

Documentation

There are lots of different techniques for improving performance, so we need to test to see what works best for our workflow. Best practices should be documented for easier use in future projects.

Recognition

Recognize and celebrate everyone’s performance achievements. This can be done by showcasing our efforts to improve performance in company-wide meetings. Call out specific people who made improvements, outside of just the development team. Positive recognition will motivate more people to work towards improvement, and bring awareness to the issue.

Performance Gains

There are lots of ways to improve performance, some of which you might already be doing.

On the design side, we should try to:

  • Optimize images
  • Avoid creating overly complicated designs
  • Avoid relying on images for effects that can be recreated with CSS
  • Avoid using too many webfonts and font weights
  • Ensure styles are unified across all designs
  • Create a style guide to clarify styles and make the hand-off to the development team easier

And on the development side, we should try to:

  • Minify CSS and scripts so the browser can parse the data faster
  • Reduce the number of requests for various assets, including images, icons, CSS, and JS
  • Utilize CDNs (content delivery networks) wherever possible, especially for larger files such as videos
  • Conditionally load CSS and scripts
  • Utilize lazy loading on images
  • Load scripts asynchronously
  • Inline critical styles in the `head` when possible
  • Limit the use of third-party plugins where possible
  • Avoid using long, complicated selectors in the CSS

Your site’s web performance is not a secret. If a site is slow, users will notice. The client will notice. Other companies will notice.

Tools for Testing

There are a number of tools that can be used to test the performance of any site:

Additional Resources

This is just the tip of the iceberg, but you’re already on the right path by understanding that performance matters. Check out these additional resources, including blog posts and talks:

If you have comments or questions, you can always reach me via Twitter. Thanks for reading!
Posted on December 10, 2015 in Web Performance.