IMPROVING THE WEB ONE WEBSITE AT A TIME

This page is an evaluation of this website:

Museum of the Peace Corps Experience

This non-profit organization runs a museum based on objects gathered by Returning Peace Corps Volunteers (RPCVs). Because of their ties to national Peace Corps-related groups, they were encouraged to use a web development system that is far from efficient.

We converted a few pages and the spectacular improvements inspired us to continue. We shrank the code size by over 95 percent. Resizing images, using lighter-weight image formats, and using media queries to serve up properly-sized images reduced bandwidth needs significantly. Pages now load in about one-seventh the time over typical Internet connections.

Since they publish articles periodically, a templating system would make content creation easy.

Environment

The Museum's website is provided by a company called Silk Start. The website runs on an Amazon AWS platform that consists of four Nginx-based servers. Web development is done using Silk Start-provided tools.

Lighthouse

The difference between the Museum's existing website and the demonstration pages are summarized from the Lighthouse scores of the same RPCV story page. Note that we put our demonstration pages on a site called peace-corps-museum.com:

Lighthouse scores for old and new Museum websites

Page load times

The Chrome Developer Tools let us measure how long it takes for the browser to load pages. We measured the load times for the same story page. The Museum's webpage loaded in 3.53 seconds* initially and in 2.75 seconds subsequently. The demo page loaded in 0.35 seconds initially and 0.14 seconds subsequently.

* Although the page is loaded and the user can see it, the browser continues to execute processes for several more seconds. This is likely due to the Facebook widget at the bottom of the page.

Accessibility

This site is poorly-designed for accessibility. Little regard is paid to it, as is typical of most websites. Users with screen readers would likely find many of the audio cues unhelpful. When the user tabs to the point where he or she enters the world of the Facebook Feed widget—that's at the bottom of every page—they may think themselves lost.

That a web designer would add a feature (the Facebook Feed widget) that impacts accessibilty so greatly without testing it to see the impact is all too common in the industry. Our demonstration pages considered accessibility (we installed a screen reader on our computer) and coded audio cues that were helpful. We also eliminated the Facebook Feed widget on all but the Home page.

Resources

There are vast differences between the resources loaded by the Museum's existing webpages and those loaded by our demonstration pages. The tool used to make these measurements is the Network section of the Chrome Developer Tools.

Existing website

One of the more basic pages on the Museum's existing website loads 124 resources over (nominally) 10 seconds. And this is with the page having previously been loaded—as you can see from those being read from the memory cache.

Dev Toold Network display of old page

Demonstration Website

The same page on the demonstration website loads only 8 resources in nominally 0.14 seconds.

Dev Toold Network display of demonstration page

Summary

The amount of bloat on this site were the worst we've seen up close, but there are many more sites like it.