One of our recent apprentice challenges was to create a performance budget for a website and make recommendations on how to improve its loading time.
I chose to audit the website for the Museum of Fine Arts in Boston, one of my favorite places to visit. I compared its performance to that of four other art museum websites.
Setting Benchmark Values with Webpagetest.org
Webpagetest.org is a site audit site focusing on page load times and asset sizes and distributions. Notably, it provides a metric called the speed index, which does some fancy computations to tell you the average time by which the above-the-fold content is visible on the page.
The first part of the challenge involved building a competitor performance audit by identifying similar websites and analyzing their key performance metrics using Webpagetest.org. Here they are: (most times are in seconds).
|Start Render||Document Complete||Fully Loaded||SpeedIndex (ms)||Dominant Asset||Final Requests||Total MB|
As you can see, the MFA website has the worst speed index out of any of the sites.
Even more concerning is that, while its initial render time is not terrible, the total page weight is about twice as large as all other websites, with far more requests. Clearly, there are some things that stand to be improved.
Getting Automated Suggestions with Pagespeed Insights
Google’s Pagespeed Insights gives your site a simple x/100 performance score and suggests concrete fixes for automatically detected performance issues.
Pagespeed Insights gave mfa.org a 61/100 score for mobile and 78/100 for desktop.
Viewing Page Source
While the automated suggestions of Pagespeed Insights can be helpful, they often don’t begin to resolve the true performance issues. It’s up to the developer to start digging deeper.
Using Chrome’s Developer Tools
Next, I reloaded the page in Chrome with the network panel open. This ended up being by far the most helpful step. The open network panel allows you to inspect new assets as they are loaded. Here’s a GIF of the front page (note the animated slideshow):
And here’s an image of the devtools network performance panel for the page load, with the page left open for about a minute:
That’s a large number of requests and a whole lot of data to render a pretty simple page with an image carousel.
(As an aside, I recently learned the ‘DOMContentLoaded’ event is triggered when the HTML page has been fully parsed, and the ‘Load’ event is for when all assets including images and stylesheets have been fetched).
And the performance profile is greatly improved–about 10 times smaller:
Solving the Key Performance Problems
I decided to focus on the carousel since disabling it had such a massive effect on page performance. I loaded the page again with the network panel open, then sorted the assets by size by clicking on the “size” tab.
The biggest files fetched are large .ts files. A .ts file is a video format, so I downloaded one and played it in Quicktime to see what it was. It turns out all the video files are merely pictures from the carousel with the zoom and pan effect applied directly on them.
I realized that you don’t need to deliver heavy videos to get this simple effect. I decided to write my own slideshow script as an example that uses scale and translate transforms to get the slide and zoom effect that the MFA website uses videos to achieve. It is certainly not perfect, but it is performant, as each image is only requested when it is about to be shown. Here is the demo.
This exercise was a fantastic opportunity to really delve into performance, and I’m sure I will be referring our readings for the challenge frequently in the future.