Building a faster news website

Some insight into why I built 2G News, a news website which uses a 2G mobile phone as it’s lowest form factor and progressively enhances from there up where possible.

Little background

I’ve been building websites since I was 13 (1999 ish), in notepad and hosted on GeoCities to begin with, then selling some Playstation 1 games to rent a server of my own, where I started to explore CGI scripts and the world of PHP/MySQL.

After those geeky kid days I turned it into a career, building online adverts in Flash along with microsites for advertisers at a newspaper publisher, eventually running their flagship website. Then deciding to go it alone working freelance mainly as a front end developer, creating WordPress websites for businesses, building online applications with CodeIgniter and creating UI elements with jQuery.

Now I work at an address technology company handling marketing and customer experience, which entails front end dev work, design, input into product development, user research and observation to improve our UX and much more (including managing our office refurbishment recently).

User Centred Design

Through all of this I’ve always been keen to build experiences that people use and hopefully enjoy using. From nice looking digital adverts that loaded fast and didn’t distract too much from the content they were reading. Through to admin tools where people find what they are after without too much trouble.

For a long time I didn’t realise this had a name, I just considered it as part of good design, after all design is about something that works as much as looks nice. Of course now we have a phrase for this sort of design within the realm of web design (or digital design) now — User Centred Design (UCD).

Load times

One aspect of UCD that has held my attention (maybe a slight obsession) for a while now has been load times, mainly webpage loading times. This has lead me to read about and explore many different solutions to this. Especially since time and time again the speed at which a webpage loads crops up high on people’s issues with using websites.

Alongside getting nice (positive or constructive) feedback from users of experiences I’ve created, I get a great amount of joy from making changes to a website that causes a page speed over time graph to drop lower consistently, even if one small change might not be noticeable to the user.

All the small changes you can make add up to noticeable differences for the user in load time and often the amount of data they consume too, since the most effective improvement is often to simply pass smaller files to them.

Common page speed solutions

• Only use the code you really need such as removing legacy CSS
• Minify and combine your CSS, JS and even HTML
• Use multiple domains for content (Soon to be replaced by HTTP2)
• Use GZIP compression, ideally without manual processes
• Make use of CDNs to bring content closer to users
• Lazy load content as you need it
• Improve server side code to respond quicker

Bonus — Lastly a slightly sneaky one, distract your users with other things while you load more content, using placeholders or low res images to get the page in front of them, then improve it from there.

So almost time to get to the point

Despite being an Apple fan boy for a long time, in the last few years I’ve been trying other devices regularly. Switching between iOS, Android and Windows across mobile, tablet and desktop devices. Each for prolonged periods on a day to day basis, such as using a Samsung Galaxy for 6 months.

This has partly been down to wanting to look to other product design and UI design philosophies for inspiration about what might be best for a user, and also because whilst in the early days of smartphones iOS was miles ahead of the others, that gap is much tighter than it once was and really not wide enough to be worth £100s between devices.

When switching from Apple to Microsoft for daily use phone, the lack of apps in the app store came as a blessing in disguise, I grew to like that my phone demanded less of my attention. So much so, I started thinking about ditching a smart phone entirely, so entered the 2G Nokia 215 for a mere £20.

Partly due to wanting a (almost) distraction free phone and also down to an idea that had been bubbling away in my head about web development. This idea was that as front end developers we are often setting the bar too high for a minimum technology stack (device performance, display size, browser feature support and connection speed) for our end users.

So the idea for 2G News was hatched

With my Nokia 215 as my daily use phone, I found I still wanted to be able to check in with the world at times, mainly checking news and sport headlines occasionally, however most websites have suffered from a lot of bloat through the years, even with attempts to progressively enhance them.

So I decided to build something I could use to check headlines and summaries across a few subjects quickly, then if needed I could load the full article (although typically I would seek out a better device for reading, 240x320 at 2.4 inches isn’t fun for long form text or even nice photos).

I also decided to switch to a much lower data plan so I would feel the pain if I was being data hungry with the website, as many users around the world are in a similar situation.

So I started thinking about how to architect it based on the page speed solutions I mentioned earlier. The initial key things were:-

• Strip back to very basic HTML elements, as few attributes as possible
• Use minimal CSS (very function over form)
• Minify and compress everything I can
• Avoid JS altogether for front end
• Build the server app on Node JS so I can use a small Heroku Dyno
• Add a CDN layer on top via Cloudfront to cache the content
• Must work on Opera Mini (Nokia 215’s only browser)
• No client side analytics, just good old fashion server logs will do

Content

As far as the underlying content went, initially I toyed with RSS feed’s from several websites I visit regularly, however decided I needed something more flexible, also different websites had slightly different formats for the content.

So I decided on using a single source via an API, which lead me to The Guardian’s Open Platform, which handily has a nice free tier too.

This allowed me to strip down the responses to just the content I was after and the fields I needed, to help speed up parsing by the server.

What’s more because The Guardian have implemented Google’s Accelerated Mobile Pages markup, I could link to these so that they would load quickly on mobile devices too.

Beyond 2G mobile devices

Whilst testing the site I realised that on non 2G devices, the site loaded stupidly fast, feeling almost instant as you moved between pages.

So I decided to add some progressive enhancement to add some additional features on other devices, mainly adding images and a different layout for desktop users.

I decided to do this server side, using Cloudfront’s device detection headers (and a Node package to sniff user agents if someone ended up skipping past the CDN somehow) to render some different template files for desktop.

10k Apart

After building the site and using it personally for a few weeks, as a frequent reader of A List Apart I came across the 10k Apart contest, something I’d some how missed previous versions of.

So I decided to enter 2G News, which meant a little bit of tweaking to ensure the initial page loads were under 10k, which lead lazy loading of images on desktop, using native JS because I’ve grown tiresome of the wasteful practice of loading jQuery for only one or two features.

I also started to refactor some of the code as the source for my node app would need to be available via a public GitHub repo. Which was a good exercise that I often don’t get chance to do.

Footnote

Of course one of the biggest reasons 2G News loads so much faster than other news websites is a lack of advertising, which is often the biggest impact on load times. They can be made smaller however often the advertiser doesn’t care about file size.

The second is any form of client side tracking, as currently I don’t have satisfy anyone (execs or advertisers) with engagement metrics based on number of pages per visitor or time spent on the page.