FrontEnders - Web Performance

On the strength of a glowing recommendation from Elaine about a FrontEnders meetup on accessibility, I was excited to attend the most recent FrontEnders meetup on the topic of performance. It was a fantastic meetup. In this article I’m going to share my thoughts on the talks and the setup.

Frontenders

FrontEnders is a new meetup covering topics that would fall under the umbrella of Frontend development. The first meetup was on the theme of accessibility and the second (the one I’m writing about today) was on the topic of performance.

It is hosted by Valtech from their offices near Angel in London.

It is organised by Gareth Joyce. Thanks so much for organising this Gareth, the community needs more events like this taking place and I’m sure this isn’t the easiest thing to organise.

I believe the plan is for there to be a meetup every few months, depending on speaker and topic availability.

Web Performance

I tweeted after the event that it feels like learning some of the topics discussed is like getting access to cheat codes to impress people.

Thanks to @ThisIsJoFrank and @richhiggins for speaking at #frontenders tonight.

Learned an absolute shed load, no idea why it isn't rammed with devs, using these techniques are like cheat codes for impressing clients and users! #perfmatters #webperf
Toby Osbourn (@tosbourn) December 7, 2017

I really believe this. We know that people like fast websites. We know that people spend more time and more money on fast websites. It follows that we should do all we can in order to make fast websites.

Learning what the latest best practice is, or what the current tooling can do for you can help make sure that your websites are held up as examples to be followed, whilst your competitors scramble to catch up. All whilst (hopefully) increasing value for your company.

I’ve written about web performance before in articles like reducing image sizes. It is something I care a lot about but not something I am as well versed in as I could be.

This is a long way of saying, I was excited to hear there was going to be a series of talks on the subject!

The Setup

The Valtech offices are nice, it is a good space with a decent area for watching presentations. As I mentioned they are based in Angel, which is easily accessible via The London Underground.

There were free drinks (diet coke, beer, wine) on arrival and things like bathrooms and guest WiFi were clearly marked out.

Three talks were scheduled, unfortunately one speaker had to pull out so we had two talks followed by pizza and chats.

We had to run shortly after the last talk finished so grabbed some pizza before heading to catch our tube back out West.

The Talks

Now, onto the meat of the meetup! The two talks we had were by Jo Franchetti and Rich Higgins.

Jo Franchetti is a developer advocate for Samsung Internet and Rich Higgins is a web developer at Co-Op Digital.

I really enjoyed both talks. The technical depth was completely spot on. Detailed enough that you could see the practical application of something without getting too stuck in the weeds.

If you get the chance to watch either of these speakers talk at another event you really should.

Intersection Observer

Jo Franchetti was up first with a talk about a relatively new JavaScript API called Intersection Observer.

From the spec;

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

This API lets you see when an element is coming into, or is in view in relation to a parent element.

A common use case would be asking if a certain <img> is actually visible on screen right now? If is isn’t, then why are we bothering to load it in immediately?

Jo took us through a live demo of the Intersection Observer in action and then showed how it works in practice on a production website.

We also went through a really basic code sample.

Browser support is spotty at best right now, fortunately there are polyfills and I am excited to play with this API in the future.

I had no idea about this API so I learned a lot.

As a complete aside from the Intersection Observer API, I also learned about Samsung Internet and their Android browser. I will certainly be installing it on my Android test devices and making sure it gets added to my list of browsers to test in.

You can view the slides from the Intersection Observer talk here.

Critical CSS in production

Next up was Rich Higgins talking about some of the work he has done to get Critical CSS to update automatically in a production environment.

The idea behind Critical CSS is that there is no point in blocking your web page from being painted waiting on a large CSS file coming down styling elements that don’t even appear above the fold on the first page load.

Instead you should work out what is the minimum amount of CSS required to show this above-the-fold content and get that into the browser as early as possible, then worry about grabbing everything after.

Critical CSS is something I’ve used a little in anger and have on a couple of production websites, I haven’t had to look at the issues that Rich specifically mentioned; namely what happens if you don’t have complete control over the templates to be rendered on screen.

Normally with Critical CSS you would add into your build step something that would generate the types of pages you want CSS generated for, let your package of choice calculate what CSS should be created and away you go.

If your templates can change this needs to be much more well thought out.

The solution they went for was to use a build server to ask their Django project to fire out some static HTML from the views they care about, and use these views as the input to generate some Critical CSS.

It was really interesting to hear how they approached the problem and to see how the solution was built upon with each iteration.

It was also interesting to find out that Co-Op Digital has started working in a GDS style. We’ve recently started a contract with a company that works in the same way.

You can view the slides from this critical CSS talk here.

Looking forward to the next one!

I’m really looking forward to the next instalment of FrontEnders.

Thanks again to all involved.