Maker Series Recap: Tim Kadlec on Performance

A slow site isn’t tolerated in our busy world. We expect immediacy from websites and move on when the expected milliseconds of wait time isn’t met. This can result in lost revenue, high bounce rates, and lowered customer satisfaction. The Build Right Maker Series recently hosted performance expert Tim Kadlec to give insight on how to make website performance a priority—and provide tools to make websites faster.

Meet Tim

I first heard of Tim Kadlec when I worked at the University of Notre Dame. Tim had reached out to a coworker about adding some of the work we did on the University’s latest website redesign to his upcoming book, Implementing Responsive Design. So, finally meeting Tim in person was a thrill for me, and I was delighted to attend the workshop. In addition to being an author, Tim is a web developer and consultant specializing in improving website performance and educating the impacts of poor performance. We were honored to have Tim present our second Maker Series workshop of 2015.

Milliseconds Matter

One of the most striking aspects of the workshop was the focus on milliseconds, not seconds or even bytes. A lot can happen in just a few hundred milliseconds. Tim presented a stat from Walmart, where they found for every 100ms they were able to shave off of load time, they saw a 1% increase in revenue. For such a huge retailer, that’s a lot of money. Additionally, Google added a 500ms artificial delay in load time and saw a 25% decrease in searches.

As the workshop went along, it was incredible to learn how quickly we humans process information. For example, we notice differences in time when the difference is 20% or greater. So if your website loads in 10 seconds, an 8 second load time would be a noticeable speed increase for your regular visitors. Tim recommended this 20% rule when it comes to starting to set performance budget goals.

Performance Budget Measurements

“The goal [of performance budgets] is to make sure that the person who is accessing your site, can accomplish what they came to do on your site as quickly and seemlessly as possible with as little friction as possible.” —Tim Kadlec

Tim presented four metrics he recommends using: Quantity Based, Rule Based, Milestones, and Speed Index. Quantity Based metrics are set to keep file size, number of requests, and so on low. Rule Based metrics are where a checklist and grading system is applied to a webpage to test things like load time. While both Quantity and Rule Based metrics are easy to understand, they do not provide an accurate picture of the user experience. Even a site that meets the criteria of these metrics can feel slow.

Milestones are a metric that gets a bit closer to understanding and measuring what a user experiences. Milestones measure how long certain key points on the page render. For example, Twitter watches for how long until the first tweet appears in a user’s feed. The one drawback of milestone timings is that it is limited to a fraction of user experience. This brought us to Tim’s favorite metric, Speed Index.

Speed Index looks at the entire process from start to finish. Then it provides a score based on how quickly the majority of the content renders—the lower the score, the better. While Speed Index is very closely tied to the user experience, it is a difficult metric to explain and have buy-in from stakeholders. The key to explaining Speed Index is as a representation of perceived performance. This is the closest we can get to measuring how fast the site feels. Speed Index requires additional tools like RUM-SpeedIndex and works by essentially looking at a video of the page load and then calculating the render time. Speed Index is a step in the right direction as it attempts to get the whole of time instead of snippets of time as other metrics do, but it is limited to a single page, not the entire site.

Using A Budget

Tim’s recommendation for setting a performance budget was to utilize a mixture of the metrics and to approach cutting away cruft by using the 20% rule. The 20% rule allows for noticeable improvements to speed and uses conservative numbers to cut. So if your page load is coming in around 1.5Mb, scale it back to 1.2Mb. A large part of making these small steps in performance is to help build a culture that values performance. This takes time because for a long time, as an industry, performance has not been valued.

Once a budget is set, it is used to inform design and development, but it is also used to enforce and help embrace constraints. Tim quoted Katie from an article she wrote that I felt defined embracing constraints:

“I worried a budget would restrict my vision and suck the life out of any potentially-totally-awesome ideas I may have had. But, as us designers do, I learned to love the challenge of solving a problem within a set of strict parameters. ” —Katie Kovalcin

Questions and After Party

One of my favorite aspects of the Maker Series is the opportunity to meet and spend the day with the speakers. While workshops at conferences offer much of the same information, they lack the intimacy I’ve seen from a dedicated workshop event. During the afternoon question-and-answer session, truly anything goes. What is so wonderful about that time is the size of the audience. A small audience means questions became conversations. Attendees were able to share their own stories and get inspiration and advice from both Tim and other attendees. The conversation continued through the afternoon and evening as the workshop transitioned to a more relaxed and informal time to just chill and get to know each other better.

Resources Galore

Tim had a lot of information to present, far too much to even attempt to try and explain in this humble summary. I highly recommend the next thing you do is listen to the podcast Tim is doing with our own Katie Kovalcin, Path to Performance, and check out some of the resources he shared during the day to refine your performance:

Articles and Books

• “How to make a performance budget” by Dan Mall

• “Designing and Engineering Time: The Psychology of Time Perception in Software” by Steven Seow

• “7 Alternatives to Popular Web Typefaces for Better Performance” by Katie Kovalcin

Tools

• Webpage Test

• PageSpeed Insights

• YSlow

• RUM-SpeedIndex

• Perf.js

• PerfBar

• webpagetest-mapper

• WebPageTest Bulk Tester

• grunt-perfbudget (Tim’s Grunt Task)

• SpeedCurve

Collaborative Notes from the Maker Series