Tightening the Belt

If you make web pages and you haven’t seen Maciej Ceglowski’s The Website Obesity Crises, you should carve out an hour and watch it. Here’s a text version if you prefer reading.

In 2016 the average web page size was 2.3 megabytes. Holy crap. At that size you’re giving every mobile user an exceptionally slow kick to the crotch. That’s fine if it’s your personal or business site and you can’t be bothered, but if you’re the government and people don’t have a choice about where they get your services, some care is in order.

You’re probably thinking two things.

  • Not many mobile users come to my GIS site.
  • Mapping sites are a bloated turd sandwich and there’s nothing to be done for it.

Neither of these things is likely true.

GeoPortal is one of my children. It’s your typical government mapping site. In the last month there were 23,892 sessions. 31% were from iOS and Android. About 1/3 of my users are mobile. That number is going nowhere but up.

When it comes to page bloat, GeoPortal was already quite good, but I’ve been going through it with a fine-tooth comb. There were lots of savings to be had. Many of those savings came from throwing things out of Material Design Lite, which, as it turned out, included every last bit of Javascript, and a lot of CSS.1

How many megabytes would you being willing to pay for this work of art? Do I hear 2 megabytes? 3?

Imgur

567kb

That’s JS, CSS, images, map tiles/fonts/sprites, all the reporting components you see on the left. Everything. Render time to a functional page is < 1 second (the map fills in after). Before you pout about the tiny map size, making the map full screen only bumps it up to 664kb.

I cut no features. And I still have over 500 unused CSS classes to hunt down.

My next step? I might make the map optional (gasp!). In this app it’s nice but ancillary, and GL JS takes over half of that 567kb. Maybe a page tear on the content div with a small map clip image behind it, click it and the content div shrinks and the map is loaded and rendered? I’m not sure if I’m Zen enough for that yet, but I’m headed in that direction.

1 Recently I had to make a [not-really-GIS site](http://livablemeck.com/), and when I get assignments like that, I try new stuff to make it interesting. For this project it was getting into [Jekyll](https://jekyllrb.com) and doing all the CSS from scratch (minus [normalize](https://necolas.github.io/normalize.css/) of course). This turned out to be easy and fun, particularly getting into flexbox. Now I look at sites I've done with MDL and Bootstrap with mild regret.