Designing for Performance

Chapter 2. The Basics of Page Speed

As you design a site, it’s important to know the basics of page speed so you can better understand what to optimize. Browsers fetch and display content in a fairly dependable manner; understanding how web pages are rendered will help you reliably predict how your design choices will impact your site’s page speed. We’ll aim to optimize for:

• The number of resources (like images, fonts, HTML, and CSS) loaded on a page

• The file size of these resources

• The perceived performance of your site by your users

In addition to what users see as their browser renders content, there are further improvements that you can make on the backend, including optimizing any work that the server needs to do to get the first byte back to the client. There’s more that goes into page load time than just what happens on the frontend of your site, such as making calls to a database or compiling templates into HTML. However, as Steve Souders says, “80 to 90% of the end user response time is spent on the frontend.” As this is where the vast majority of the user experience lives, we’ll be focusing on the frontend aspects of page load time.

How Browsers Render Content

Between the moment your users enter your site’s URL into their browser and the moment the page starts to reveal your site design, their browser and your web host negotiate all the data that they need to communicate to each other.

First, the browser sends out a request to get some content. The first time the browser makes ...