Front-end Performance: Building Faster Websites Workshop 2019 is a workshop that was part of the New Adventures Conference 2019 in Nottingham.
Harry Roberts works as a performance engineer for some pretty major clients including Sky, BBC and Trainline – he really knows his stuff. This particular workshop was targeted at intermediate to advanced front-end developers, web designers, and software engineers, or anybody who writes code.
Who is Harry Roberts?
Harry is an award-winning Consultant Performance Engineer from the UK. With a client list ranging from the United Nations to Google, the BBC to the Financial Times, he has helped some of the world’s largest organisations make their websites faster.
He also holds positions as a Google Developer Expert, where he shares web performance research and findings, and as Performance Ambassador for SHIFT Commerce, where he aims to make ecommerce faster from the inside out.
He writes about all things front-end performance at csswizardry.com, speaks at tech events all across the globe, and regularly shares his insights on his twitter @csswizardry.” – New Adventures
So, naturally, we sent our devs to soak up Harry’s brilliant knowledge.
“He said he’d keep talking until we got thrown out – and we got thrown out.”
Michelle Stone,
Head of Development,
ExtraDigital.
What we learnt
We won’t give the WHOLE day away, but we will discuss some of the highlights from the day.
Throughout the day, Harry discussed and let us pick his brain about;
- how the network really works, and how to design around it;
- how to keep websites fast whilst keeping clients and stakeholders happy;
- how to optimise our assets for faster delivery;
- how to trick the browser into delivering assets with different priorities;
- how to measure and profile performance wins and losses;
- a whole host of tips, tricks, and techniques to help us deliver the same experiences in record times;
- a bunch of fascinating little factoids and trivia which help shine a light on what’s really going on under the hood;
- how to prepare for the web (and its users) of tomorrow;
- lots of naughty little micro-optimisations, just for fun;
It was a pretty full on day looking into website performance – from the ground up. We delved into networks, how things are delivered, the order and priority things should be delivered — potential causes of bottlenecks, and what we can do to mitigate that.
We started with setting up a clean Chrome profile for our testing and installing tools to help with these tests. From there we learned how to use the tools and interpret the data they provide. Harry described his usual workflow which is to run through and get the quick and dirty data and highlight/make notes on anything that bears further inspection. Once we had highlighted a few things, we hypothesised and confirmed the issues.
A case given as an example was where a refactored site that was being tested was generating anomalous readings for the favicon. It turned out that the asset was actually missing and returning a 404 page instead. This was discovered when spotting a too large filesize being reported which then subsequently highlighted incorrect 404 error reporting on the server as well.
A lot of changes in how we now need to code for speed are to due to the changes in the internet itself. HTTP/1, the protocol by which the internet delivers web pages to the browser, is now 20 years old and starting to show its age.
HTTP1.1 is limited to processing one request per TCP connection, forcing browsers to use multiple TCP connections to process multiple requests simultaneously. But too many connections in parallel are what leads to the congestion and downgrade of network performance. We have learned to code in a certain way to work with these restrictions.
HTTP/2, however, can use a single TCP connection to transmit multiple data streams that do not block each other. Since HTTP/2 supports queries multiplexing, headers compression, priority and more intelligent packet streaming management we see reduced latency and accelerated content download on modern web pages. Something everyone should be ‘up to speed on’ ;). Punny, no?
“I learned loads, my brain exploded, and now I am trying to make sense of all the info that was crammed in my head. Excited to convert the whole day into real results!”
Michelle Stone,
Head of Development,
ExtraDigital.
We would recommend attending this workshop and any of Harry’s in the future. Not only do you learn loads, but it’s a chance to network with one of the brightest minds in the industry! PLUS – there’s the buffet and endless tea and cookies going for them!
Web Development with ExtraDigital
- Rapid development of bespoke database driven websites
- Online payment
- Registration and bookings systems
- eCommerce
- Multilingual – with websites in Arabic, Chinese, Russian and 15 other languages
- Social media integration
With ten years’ experience of building websites to a high specification, we can tackle most projects.
Our clients include the Government (Defra), Education providers, Public service providers such as the police, healthcare providers, international companies such as Alcoa, Smalley, travel and tourism companies and businesses and organisations from many different sectors. We work to ISO 9001 to ensure high quality. Accessibility and search engine optimised code is standard for all websites.
Talk to one of our website project managers today and see how ExtraDigital can support you to create the website you really want. Call 01227 68 68 98
