The two most important tasks to ensure your site remains fast are benchmarking and iterating on your site’s page load time. Quick performance wins can be celebrated today, but the health of your site will thrive with routine check-ins and deliberately balancing performance and aesthetics.
Benchmarking page load time
WebPagetest is many developers’ go-to tool for measuring performance. You can enter any live URL and choose a geographic location and which browser you want to test against. It’ll show you things like waterfalls, which diagram the images and other files that make up your total page load time and help you spot page load time issues.
Two additional tools that can analyze your site’s performance against a set of best practices and provides suggestions for improvement are YSlow and PageSpeed. As you get started with improving page load time, I recommend checking out all three of these tools to iron out performance basics on your site.
Get started right now by benchmarking your site’s page load time using WebPagetest. What does your score look like? What does it look like from other geographic locations? Are there assets that jump out as taking too long to load, or block other content from loading? Save these results (WebPagetest will save them for up to one year) to compare them to future results as you begin to improve your site’s page load time. If you create an account on WebPagetest and log in, your tests will be separate from everyone else’s, and you can make the results private.
Weigh aesthetics vs. performance
I recommend you get your designs into the browser as soon as possible. Photoshop is an unrealistic way of gauging how effective a design will be once it exists in its final environment, and you can start to see how large your page weight is and how your design decisions affect performance.
As you design and redesign your site, sometimes you’ll make choices that favor page load time; other times you’ll make choices that favor aesthetics. The key is to always be thinking in terms of engagement metrics and what will have the biggest impact. As you design, ask yourself questions like:
* What value does this large image add?
* Will three font weights really help drive conversions?
* What metric are we hoping will improve with this carousel?
Decide on basic engagement metrics to measure when you launch a new part of your site, redesign an element, or add an asset. Things like conversion rate, pages per visit, and bounce rate are good metrics to start with. Sometimes a small performance loss will be masked with a large engagement metric win; other times, a change to the site can result in additional page load time that will negatively impact engagement metrics.
Iterate
Continue to iterate on existing designs with performance in mind. If you want to make some aesthetic decisions that might negatively impact performance, A/B test them to see which one actually improves engagement metrics. Continue to benchmark and iterate on performance as well as engagement metrics as you make any changes to your design.
Page load times can quietly increase over time without anyone noticing, thanks to subtle changes to content like additional images or alterations to the infrastructure supporting your site. Be sure to check in with your main pages’ page load time routinely and, if possible, publish these results to your users. Having a public commitment to performance can have a positive impact by encouraging your development team to aim high, celebrate wins, and have a context for regressions.
Additional Resources
Patrick Meenan’s guide to reading and making sense of waterfalls
Test your page load time on mobile devices with MobiTest