Bloated Web Pages

Have you noticed there are some web­sites on your phone brows­er that are real­ly slow? The brows­er may strug­gle to scroll, becom­ing all jerky. I’ve noticed web­sites on my old iPad2 caus­ing the brows­er to crash. Even though that iPad is very old by todays tech stan­dards, I used to be able to browse the web ok on very old PC hard­ware when I first got an inter­net con­nec­tion over dial up, though now every­thing is very slow.

The oth­er day my part­ner was brows­ing the web on her two year old Chrome­book, it strug­gled to run a num­ber of sites as they loaded ads, gifs, videos and tons of JavaScript to do absolute­ly noth­ing of value.

Every day I am frus­trat­ed at my phone as it chugs along try­ing to dis­play a blog post. The post is there behind a sea of JavaScript and auto-play­ing videos.

This all sounds a bit first world prob­lems, but it’s far, far worse for those in devel­op­ing nations. Do you know how bad satel­lite Inter­net is com­pared to what most of us have here in the west? It is awful.

The Web I Want by Chris James.

It’s not a new phe­nom­e­non, as the amount of extra assets that are being added to web­pages. I once read that most web pages now are larg­er in file size than the orig­i­nal Doom game. Its not just larg­er images (almost every arti­cle has a large pho­to­graph in its head­er, the hero image). There are web fonts to down­load, which cause the page text to flick­er or be blank until the font can ren­der the text.

The biggest cul­prit how­ev­er is the addi­tion­al Javascript, par­tic­u­lar javascript track­ers. This has become a big issue, not just with GDPR which is tech­ni­cal­ly what a fair few of the cook­ies that you as a site vis­i­tor are asked to con­sent to (for the record, I’m, cur­rent­ly only using the stats track­er here as of the post date). It’s also used to push a lot of ad block­ing and track­ing block­ing tools, some of which are now being baked into the lat­est browsers.

For me, this is some­thing I’m think­ing about a lot more, as a new project I will be start­ing is for web users based in low band­width coun­tries, and the require­ment is that it needs to work with­out cost­ing site vis­i­tors huge data usage bills.

Its not just sav­ing band­width though, hav­ing a fast web­site will also improve search rank­ing in Google and oth­er search engines, and web devel­op­ers are encour­aged to test their sites with Google Page­speed. That said, some of the tech­niques (adding styles inline for crit­i­cal con­tent) do go against web devel­op­ment best prac­tices from talk­ing to oth­er web devel­op­er friends.

One way is to com­plete­ly strip back on every­thing. This is the approach used by USA Today for it’s EU edi­tion, to be com­plaint with GDPR. This cer­tain­ly makes the site very fast, and is what I cur­rent­ly use to read up on news when need­ing a US based view­point. It does mean though on miss­ing out on cer­tain site fea­tures, such as cur­rent­ly the live stream fea­ture does not work.

For the less extreme, there are some stan­dard tech­niques, min­imis­ing CSS and Javascript resources, opti­mis­ing images and mak­ing the web­site utilise brows­er caching. All good web con­tent man­age­ment sys­tems will either have these fea­tures built in or avail­able as a plu­g­in. Theres also a case of ask­ing if an extra asset is need­ed. I’ve seen a lot of web sites now move away from web fonts, and using the sys­tem font as a default. Elim­i­nat­ing track­ing if its not real­ly need­ed can also go a long way. It may also save you some GDPR headaches lat­er on.

I’m cur­rent­ly research­ing dif­fer­ent tech­niques and best prac­tices in this space, which I will add as more resources in a future post.

Leave a Reply