Performance audit of

by Alex Holachek

As an apprentice at Fresh Tilled Soil, I’ve been lucky enough to spend a lot of time learning about the craft of front end development. Beyond well-written HTML, JavaScript and CSS, there are a host of considerations that separate good front end code from mediocre work. Is every part of the web page accessible to screen reader users, for instance? Does the site load quickly, even on browsers with slower connections?

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 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 Here they are: (most times are in seconds).

Start Render Document Complete Fully Loaded SpeedIndex (ms) Dominant Asset Final Requests Total MB 1.894 5.311 5.883 5281 javascript 44 2.9 3.494 9.578 13.563 7392 images 180 4.7 3.186 8.336 8.42 4410 images 86 4.1 1.594 4.08 4.171 2388 images 71 1.6 0.995 5.881 32.425 7894 images 252 8.3

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 a 61/100 score for mobile and 78/100 for desktop.

The most important problem Pagespeed Insights identified for was render-blocking JavaScript. This means that the browser has to stop parsing the HTML every time it encounters a script tag, which can make the page render more slowly. A simple fix might involve adding the async parameter to all script tags, which tells the document parser it can continue working through the HTML document without waiting to fetch and execute each script.

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.

The first thing I did was check the page source of It turns out that the site is loading several unminified custom JavaScript files from its own domain. In addition, the site loads five separate CSS files.

One important rule for loading performance is to minify and concatenate JavaScript and CSS, preferably with an automated build process. This reduces file sizes as well as HTTP requests (an optimization that will become less important when HTTP2 reaches wide adoption).

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):

an animated gif showing the MFA website's landing page, with an image carousel

And here’s an image of the devtools network performance panel for the page load, with the page left open for about a minute:

an image of the devtools network panel summary with javascript

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).

On a hunch, I tried turning off JavaScript in the Dev Tools panel and reloading the page. The main carousel didn’t load but otherwise the page functionality was intact:

MFA site no javascript

And the performance profile is greatly improved–about 10 times smaller:

an image of the dev tools network panel for the mfa website with javascript turned off

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.

I’m sure there are further performance improvements to be made to the site – for instance, I’m still not sure of the purpose of those many hundreds of HTTP requests after the initial load – but replacing the image carousel with a more performant JavaScript version, and concatenating and making scripts async, would be the easiest “wins” in terms of page load speed and total data cost.

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.

About Fresh Tilled Soil

Fresh Tilled Soil is a Boston-based user interface and experience design firm focused on human centered digital design