Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Delivering Performant Websites Consistently

Jonathan Fielding
July 12, 2017

Delivering Performant Websites Consistently

Jonathan Fielding

July 12, 2017


  1. A bit about me… • Engineering Manager at Beamly (WE

    ARE HIRING) • Author of ‘Beginning Responsive Design’ • Regular contributor to open source, including SimpleStateManager, Echo.js, CriticalJS, FT’s Polyfill Service, Doccy among many projects • Here as a warm up prior to the Pizza
  2. Today we are going to talk about processes in the

    context of a project at Beamly
  3. The second was to deliver a platform for the next

    generation of performant websites
  4. To start with I found 15 popular beauty brands and

    put their urls into WebPageTest
  5. The problem with this is while it shows us visually

    the difference it is easier to benchmark against improvements with metrics
  6. To create these metrics quickly I used “Web Page Test

    Bulk Tester” written by Andy Davies http://bit.ly/wpt-bulk
  7. Images JavaScript Fonts CSS Standard Beauty Difference Industry data taken

    from the HTTP Archive database on Google Big Query
  8. Images JavaScript Fonts CSS Standard 789kb 228kb 44kb 23kb Beauty

    1471kb 586kb 135kb 140kb Difference +86% +157% +207% +508% Industry data taken from the HTTP Archive database on Google Big Query
  9. Having identified some metrics, we can come back to these

    later to measure the success of the project
  10. CMS

  11. If you are building a Web App a framework will

    solve a lot of your problems
  12. Tim Kadlec “The purpose of a performance budget is to

    make sure you focus on performance throughout a project. The reason you go through the trouble in the first place though is because you want to build a site that feels fast for your visitors.” http://www.timkadlec.com/2014/11/performance-budget-metrics/
  13. In order for you to determine what your performance budget

    should be, you need to determine what you’re going to measure
  14. Therefore the maximum time it takes to get to our

    milestone forms our performance budget
  15. We had already agreed with our clients that we want

    our page to be interactive within 5 seconds on a slow 3G connection
  16. If our designers then decided they wanted to add web

    fonts to our website we then adjust our budget
  17. Once we had set upon a performance budget for our

    site we then looked at techniques we could use to achieve it
  18. One way was to lazy load our imagery so that

    the browser focused on loading the images that were in view first
  19. The developers paired with the designers to validate the way

    in which the site prioritised the content it loaded
  20. To help prevent this there are a number of tools

    you can use to monitor your budget
  21. Images JavaScript Fonts CSS Beauty 1471kb 586kb 135kb 140kb New

    Cover Girl Site 1400kb 33kb * 44.38kb 21.3kb Difference -4.8% -94% -67% -85% * excluding polyfills that are downloaded only in specific browsers
  22. But by iterating a process you can get to a

    state where your delivering performant websites every time
  23. A special thanks goes out to Charlie Fielding along with

    the folks at Beamly for being the guinea pigs for this talk