Exploring site speed optimisations with WebPageTest and Cloudflare Workers

Click for: original source

One of the common questions often asked by clients is “What difference will the changes you’re recommending make to our site’s speed”? By Andy Davies.

WebPageTest and DevTools can give us clues that we’re heading in the right direction but there’s a gap that neither of them quite fill – a reliable testing environment that allows us to experiment and make changes to the page being tested.

Service Workers are often described as a programmable proxy in the browser – they can intercept and rewrite requests and responses, cache and synthesise responses, and much more. Cloudflare Workers are a similar concept but instead of running in the browser they run on CDN edge nodes.

In addition to intercepting network requests, there’s a HTMLRewriter class that targets DOM nodes using CSS selectors and triggers a handler when there’s a match. The handlers can alter the matched elements, for example changing attributes, or even replacing an elements contents.

The article walks you through:

  • Example usage of service workers explained
  • Example Transforms
  • Testing
  • Gotchas

Even though author has only used the combination WebPageTest and Cloudflare Workers with a few sites, it’s clear that it’s a powerful combination and it’s likely to become a regular part of my client workflow. You will get interesting links for further reading and code examples explaining concepts in the article. Excellent!

[Read More]

Tags nodejs web-development performance code-refactoring javascript