Pixel Pioneers Front-End Performance Workshop

Pixel Pioneers Front-End Performance Workshop

View profile for Joe Dyer
  • Posted
  • Author

Your website's speed is one of the easiest and most important benchmarks used to gauge how well it's performing as a whole for your business - but it can often be overlooked and only considered, later down the line once a website's been launched.

Nowadays, the cost of a user's attention is becoming increasingly more expensive and in recent years, the web industry has been increasingly making a point that website speed really does matter and for all the right reasons:

  • it makes your users happy (or less frustrated!)
  • it makes your site more accessible
  • is good for your business

There are a plethora of tools and techniques to measure a site's performance and as a developer, I'm always looking for the best and most up-to-date ways to do so. This keeps the production team, myself and the websites we build here at Conscious as zippy as possible!

As part of the annual 'Pixel Pioneers' web developer conference, Liam and I attended one of their workshops: "Front-end Performance: Building Faster Websites", taught by award-winning performance consultant, Harry Roberts, CSS Wizardry Ltd.

Harry, who's also earned the position as a 'Google Developer Expert', has over a decade of experience and has built up a seriously impressive list of clients he's helped over the years - notably, The United Nations, Google, the BBC, Financial Times and lots more! He regularly speaks at international tech events and shares his insights and expertise on his blog and Twitter.

What we did

I've been a follower of Harry on Twitter for some time, so it was strange seeing him in person! He was warm and welcoming; the atmosphere was relaxed but engaged. The other attendees were friendly and we were all just waiting to dive in!

The talk was an intensive full day's workshop, where we looked at in depth a range of topics, such as:

  • the impact of performance on a moral and business level
  • how data is really transferred on the 'network' and playing its strengths and weaknesses
  • optimising assets for the most effective delivery
  • tricking browsers to download things ahead of time
  • tools to measure performance
  • troubleshooting performance issues
  • future and cutting-edge performance tips and tricks

Best Takeaways

Everything taught at the workshop was fantastic, but if I had to give my top 3 takeaways it'd have to be:

  • in-depth and advanced look at www.webpagetest.org and how to troubleshoot and measure successful performance gains
  • advanced performance Chrome 'DevTools' set up and analysis
  • hosting static assets (fonts, JavaScript/CSS libraries) to cut down network bottlenecks

Things we can look at doing at Conscious

The most important thing is we will always continue educating on our clients on how important performance is and think carefully about 'what we actually need', before implementing potentially performance damaging features or requests.

We can definitely look into moving some of our sites often used assets to be self-hosted instead of hosted externally (via a CDN) - fonts and jQuery libraries should have improved performance wins, with less external requests and bottlenecks on the network.

Conclusion

Liam and I really enjoyed Harry's workshop and picked up lots of new tricks along the way. It was intense and there was a lot to take on. The highlight of the day was Harry making fun of Liam after announcing there was cake available upstairs in the staff kitchen - I've never seen him move so fast!