Why I love WebPagetest.org
Over the last few years, web performance has become a top priority for me and the ecentricarts team. With time and attention at a premium, having a performant website is key to acquiring and keeping users.
If your site doesn’t load quickly, users will leave, and whatever you were trying to do — educate, inform, cajole to buy — fails. Fear not! Creating a highly performant site is possible, and there are now lots of tools to help you do it.
One of my favourites is WebPagetest. Plug a URL into this deceptively simple site and run a test. The results provide a developer with a wealth of information that can be used to make your site load faster, zippier, and let’s face it, more awesome cuz users will interact with it.
This wealth of information is the stuff of list making (my favourite thing to do).
5 things I love about WebPagetest
- Free! It is available open source on Github (you can contribute to it too!) You can set up your own private instance or just use the browser to run your tests.
- Grades! Simple high level grades help identify at a glance where you need to focus your performance improvement effort. Is your time to first byte poor? Have a look at the back end of the site. Are you getting an F in image compression? Optimize that content so your mobile users won’t curse you due to high bandwidth.
3. The waterfall view! See all the individual requests made to render the page in a browser.
How many requests are too many? Answer: It depends.
How many connections can your browser make concurrently from one domain? Answer: On average, 6.
How many of those requests are images and how much do they weigh? Perhaps your page suffers from image bloat.
From there, understand if you have issues with render blocking js, CSS, or fonts, or if your third party social sharing tools have gone crazy making too many requests behind the scenes. Every asset has a cost/weight. The waterfall view helps you see this. It is also customizable, so you can see the requests by mime type and even connection view. Super awesome.
- The green line represents when the browser starts to render the page
- The gold line indicates when the DOM is interactive
- The blue line indicates when the document is complete
Anatomy of a request
There are a number things that happen in sequence for a request to load in a browser. For each element in the DOM, a request goes out to the server. The server must perform the following:
- a DNS lookup
- TCP handshake/initial connection
- SSL negotiation
- Request — time to first byte
- Response — content downloaded
This is why you want to minimize the number of requests on your pages. Have you concatenated your CSS and Javascript files? Can you combine images into sprites? Do you need that video/image/audio/etc. to get your point across? WebPagetest shows you the connection view so you can better understand the impact of how your page is structured.
4. The Filmstrip View! See what your users see with thumbnails plotted on a scrubbable timeline. When you move the scrubber along the filmstrip, a red line overlaid on the waterfall gives a visual indicator of which requests are being executed when. This is really helpful to see the effect of individual requests on interface load.
Did you load a bunch of js before the page began to render? Eliminate any of that pesky render blocking js. If possible, load that asynchronously so a user might be able to interact with the most important elements of the interface sooner — e.g. the navigation or the page content.
Filmstrip view hammers home the perception side of performance. Perceived performance is about how fast a user thinks your page is, and is more experiential than metrics-driven. A user perceives a page to be fast when they can quickly perform the task they came to the site for, like accessing information, purchasing a product, etc.
WebPagetest also gives you the ability to make a video of the filmstrip. This is a useful visual to share with team members, so everyone can experience the same performance or lack thereof.
How long is too long to wait? It’s all about perception. For more on this, our Front End Developer Kathryn outlined the who, the what, the why, and the how of optimizing for performance in The need for speed: Optimizing your website for performance.
5. View all images. A lot of performance comes down to page weight and often the weightiest part of a page is images. In the age of responsive websites we can serve different images to different devices (yay, responsive images!), which can help fix the issue of downloading large scale/sized images to small devices — but this is only one part of the equation. We still need to optimize the images we serve.
WebPagetest allows you to view all images embedded in a page, presenting “optimized” versions of those images that could be swapped for existing ones. This view can be accessed from the waterfall view via a link below the waterfall labelled “View all images.” Clicking that will load a page with all the images being served. Clicking on “Analyze JPEG” will present a new page with the original image, a lossless, and a lossy compressed version of the image in your browser window. At the top are stats on Image type: Baseline or progressive, File size of the original, Optimized size (lossless), and Quality size (lossy) with the percentage you can save, leading to faster loading.
Bonus: if you have clients who publish content via CMS and are less familiar with optimized images, this is a great tool for them. Simply send them to WebPagetest, where they can download the optimized image and upload it to their CMS.
There are so many other great features of WebPagetest, I could go on forever. I encourage anyone building for the web to try out the tool and see where the performance bodies might be buried on your site.
Fix performance issues on your sites and your users will thank you.
