a screenshot of the echo.chocatwnation.com page
Home » Portfolio Items » Marvel’s ECHO and the Choctaw Nation

Marvel’s ECHO and the Choctaw Nation

When the site was given to me, I had two goals: optimization and animation. None of the images were lazy-loaded or using srcsets, and none of the styles/css were being minified, bundled or tree-shaken.

As far as animation goes, I grabbed animate.css and minified it down to just what I needed.

By default, my teammates opt for grabbing bootScore, which—while a great starter theme—is way too much bloat for a single landing page. For example, my “remove bloat” commit on Github removed 45k lines and added 1.4k lines.

a screenshot of a GitHub commit that shows lines deleted and added

By the time I was done and the page launched, we went from loading 30Mb at the top of the page to 15Mb at the bottom of the page (after forcing the browser to load every asset). At the top of page (in not-Safari), only 3.1Mb are loaded.

All of that is boring, standard stuff, though.

The Big Win / Learning Point

The big win (or learning point) for this page was randomizing a large array of photos for the image carousel (near the bottom). It was the first time I’d ever touched the WP_FileSystem API, and I used it to cache a randomized array of photo-ids for the gallery to display.

a screenshot of the ECHO photo gallery

 

When we first built the site, it came with a predefined set of photos. Soon after it launched, we also got a decent number of new photos from members of the Choctaw Nation that went to the red carpet premiere in LA. In order to clue visitors in that there were new photos, it was decided that we should randomize the array of photos to display.

Since randomizing can be expensive and I didn’t want to it randomize upon every concurrent page visit, I reached for a caching method. The randomized array is stored for an hour, then regenerated once it goes stale. This way, only one unlucky visitor would get a long loading time—everyone else would have the benefit of a cached array and a new order of photos.