Here is how to test Core Web Vitals scores and code changes using Cloudflare Workers as a reverse proxy<\/a> and WebpageTest. All these services are free and we’re certainly not the first to use them. Patrick Meenan<\/a>, WebpageTest developer, thought it all up. We’ll outline how to get started without all the heavy lifting.<\/p>\n The Cloudflare Workers app gives us our reverse proxy testbed and transforming code using the proxy environment. While a playground at cloudflareworkers.com exists, fragmented URLs at that address prevent us from testing without a Cloudflare account (the free one works). You do not need a WebpageTest account.<\/p>\n Once you’ve got a Cloudflare account, navigate to Workers and click to create a new worker with the Create a Service button. This will populate a sample JavaScript worker with a UI editor you can access with the Quick Edit button. Each worker you create gets a unique URL. You can rename it at any time. We set one up at: https:\/\/sel.deckart.workers.dev<\/a> for this purpose.<\/p>\n If you navigate, notice the “x-host header” requirement. The requirement limits requests to testing. We use a browser extension to modify requests, add the x-host header needed to supply the script with the host we want to test. Let’s modify requests in your browser so we can view the page, view-source, and run DevTools.<\/p>\n We’ll be using ModHeader<\/a> which supports major browsers. In our case, we installed the Chrome extension and added two custom headers as shown below. The x-host header provides the host we want to proxy for our test, and the x-bypass-transform header switches transformation on and off so we can test the difference.<\/p>\n With x-bypass-transform set to a “true” value, transformation is off. We can then view-source to look for tactics to test. With the x-host header in place as depicted above, you can navigate to the worker URL and you should be able to see Search Engine Land’s homepage, view its source code, and open DevTools.<\/p>\n The job for the worker is to obtain the header values and process requests accordingly. We’ll summarize the script below, leaving out a few details that are unimportant at this time.<\/p>\n If you’ve ever written a conditional control-flow block of code, then these tasks should be pretty easy to imagine writing yourself in JavaScript. The more interesting question then becomes: How are we going to transform HTML? That’s where the magic of HTMLRewriter() is. Copy the basic worker Gist<\/a> and replace your default worker with the raw source.<\/p>\n The basic worker script performs only one transformation. Preloading the LCP image we bumped its request a couple of places in the queue. That took mobile LCP load time from over 5 seconds to less than 4, about 500ms improvement. To reproduce this, our script needs to keep up with changes. The point is to get you ready for tests with SEO for Developers and your own work.<\/p>\nCloudflare and WebpageTest<\/h2>\n
Navigate Tests with ModHeader<\/h2>\n
![\"Chrome](\"https:\/\/searchengineland.com\/wp-content\/seloads\/2022\/01\/chrome-headers-proxy-sel-800x215.png.webp\")
Setting up your own Worker<\/h2>\n
\n
Setting up WebpageTest for comparisons<\/h2>\n
![\"Wpt](\"https:\/\/searchengineland.com\/wp-content\/seloads\/2022\/01\/wpt-custom-headers-800x295.png.webp\")
![\"Wpt](\"https:\/\/searchengineland.com\/wp-content\/seloads\/2022\/01\/wpt-script-proxy.png.webp\")
![\"Wpt](\"https:\/\/searchengineland.com\/wp-content\/seloads\/2022\/01\/wpt-sel-unscripted-643x600.png.webp\")
![\"Wpt](\"https:\/\/searchengineland.com\/wp-content\/seloads\/2022\/01\/wpt-sel-scripted-643x600.png.webp\")