Guiding Light CR

Guiding Light CR's Webflow site was slow on both mobile and desktop. Render blocking scripts and unoptimized CSS delivery were dragging their PageSpeed score down to 55, which matters even more here since their service pages were actively receiving paid traffic from Google Ads. Slow load times on a page you're paying to send traffic to directly hurts conversion rate and wastes ad spend.

I built a Cloudflare Worker that sits in front of the site and rewrites the HTML response on the fly for specific pages, the homepage and a few landing pages, before it reaches the browser. It only triggers on GET requests where the Accept header includes text/html and the response's content type is also text/html, so it never touches non HTML requests like images, fonts, or API calls, and anything outside the targeted paths passes straight through untouched.

The core of it is a critical CSS injector. Each targeted page has its own handwritten critical CSS string tailored to that page's above the fold layout, covering the nav, hero section, fonts, and base resets. The Worker uses HTMLRewriter to prepend a critical CSS style block directly into the head, along with preload tags for the hero image with the correct srcset and sizes per page, and fetchpriority set to high on the LCP image specifically. That means the browser can paint the visible, above the fold content immediately using inlined CSS instead of waiting on Webflow's full external stylesheet to download and parse first.

Once that critical CSS is inlined, the actual Webflow stylesheet gets deferred. Every stylesheet link tag gets rewritten into the preload as style then swap to stylesheet pattern, with a noscript fallback for anyone without JS. That stylesheet still loads, just after the critical content is already painted, instead of blocking the initial render.

Scripts get handled with more nuance than a blanket defer. Webflow's own core JS and a couple of proxied third party scripts are held back entirely until the user actually interacts with the page, listening for mouse movement or touch, with a timeout fallback (500ms to 2000ms depending on the script) so they still load even if the visitor never moves their mouse. reCAPTCHA is deferred until the user clicks or focuses into a form field, since it's really only needed once someone's about to submit the contact form. jQuery and CloudFront hosted scripts get a straightforward defer attribute, while Finsweet and jsDelivr scripts get async instead, since those don't depend on DOM order the same way. Anything left unflagged still gets a defer attribute by default, so nothing render blocks unless it's explicitly supposed to run early. Google Maps scripts get the same defer treatment through a separate handler, since it's rarely part of the initial critical path.

PageSpeed score jumped from 55 to 90+ on both mobile and desktop. Since the pages affected were the ones actively receiving Google Ads traffic, the speed improvement translates directly into a better user experience for paid visitors and a stronger foundation for ad conversion rates.