Making your website fast is extremely important for usability and probably one of the most important design considerations for the web.
“Good performance is good design” — Brad Frost
Why performance is important
None of us want to wait for websites to load. I’m pretty confident that all of us have closed a website because it was taking too long to load. That’s why performance matters.
The slower your website the less people will use it, the less purchases, and the more ire your users direct towards you. Also, Google is starting to penalize slow and non-mobile–friendly websites in search results, even marking them as “slow”.
Performance as a design constraint is important to consider, especially on mobile devices where the Internet connection is flaky and not near as fast as our home computers.
Remember we’re building websites for the World Wide Web: there are many places in the world with much slower connections than us.
There are lots of tools provided by browsers, online, and command line to help check the performance of our websites.
Browser developer tools
The browser’s developer tools have a few options: the network panel, the performance audit, and the connection emulator.
The Network panel shows a waterfall of all the different resources used to load the website with some important data across the bottom.
The Performance Audit panel will test the website for common performance issues and give you a report.
Simulating slower Internet
With the Chrome Developer Tools we can even simulate different Internet connections to see how our website performs.
It’s a good idea to test your website with a slower connection to see how it looks.
There are a bunch of tools to help you diagnose performance problems on your website, here are a few popular ones.
The most popular testing tool is Web Page Test—an open source suite of tools for testing performance. You can use the online version or create your own instances.
Another popular tool is Google’s Page Speed: an online tool or a browser extension. (Also check out Yahoo’s YSlow).
- Web Page Test
- Google PageSpeed
- Google Mobile-Friendly Test
- Yahoo YSlow
- Pingdom Website Speed Test
- What Does My Site Cost?
- CSS Stats
- Understanding webpagetest.org
Performance budgets are a good constraint to add to your web design to help push performance as an important factor.
There are lots of different metrics that can be used when creating your performance budget: load time, number of requests, page size, tool scores, etc. Pick the items that make the most sense for your situation and discuss them with your team.
Example performance budget
Here’s an example performance budget that might work for you:
- ❏ Load time: < 1s (1000ms)
- ❏ Speed index: < 800
- ❏ Page size: 800 KB transfer size maximum
- ❏ Requests: 15 requests maximum
- ❏ Pass: Google Mobile Friendly Test
- ❏ Page Speed: achieve green on Mobile & green on Desktop
- How to Make a Performance Budget
- Performance Budget Metrics
- How Speed Index on webpagetest.org works
Basic performance techniques
Here’s a list of things to help fix performance problems on your website, especially to speed up download time.
Use these in conjunction with a performance budget to get the fastest website possible.
The thing that affects the website’s performance the most is images—spend lots of time on optimizing images:
- Use as few images as possible
- Properly save them with “Save for Web” from Photoshop
- Smush them with ImageOptim or Spritebot
- Don’t make them bigger than they need to be in the design
A few other things you can do to your website to make it load faster are:
- Remove any unused or duplicate HTML & CSS
- Make sure there’s no broken links
- Put your CSS
<link>tag at the top of the HTML
- Be careful not to use too many font styles
- Ten Quick Fixes to Reduce Page Weight
- How to Lose Weight in the Browser
- 14 Rules for Faster-Loading Web Sites
- The Complete Guide to Reducing Page Weight
- Front-end performance for web designers and front-end developers
There’s a bunch more you can do to make your website super fast.
☛ Check out the other things you can do in the advanced performance tutorials.
- Performance: Browser developer tools
- Performance: Online tools
- Performance: Images
- Performance: Code
- Performance: Fonts
- Advanced Image Optimization
- Tips For Optimising SVG Delivery For The Web
- Let’s Do A Bunch of Simple Stuff to Make Websites Faster
- More Optimization Techniques for Improving Website Speed
- Rendering Performance
- Performance Calendar
- Hacker News broke our site – how Nginx and PageSpeed fixed the problem
- Caching Tutorial for Web Authors and Webmasters