Creating a perfect lighthouse score on Webflow

Hello All,

One of the frustrating things about Webflow/Web development is ensuring that sites are at peak performance, getting that coveted 100 Lighthouse score with all the marketing tools in the header.

A couple of days ago, Fireship introduced me to this library called Party-town; it runs header JS synchronously through a background web worker. This ensures your site is loaded as fast as possible, and it would be a great resource in the tool kit.

THE PROBLEM:

  1. I need to Install the Partytown library through an NPM package.

  2. Partytown uses a service work and can’t be hosted on an External CDN

The Investigation:

Before anyone says Webflow can’t do this, I’ve been told by a very reputable person in the community that their team is already using it, and it takes some out-of-the-box thinking to get it done. Unfortunately, the personnel that got it up and running are too busy to help me. But I was led into a direction to explore, and I’m calling on the Webflow Community for some serious help!

  1. Our main lead, and possible solution, is to run the package through Cloudflare

  2. I have no clue yet, and I need more suggestions :sob: :sob: :sob:

Any help would be tremendous!

Hey Elijah, very interesting, and I’ve no experience with party-town, or with methods of integrating NPM packages with Webflow. However I imagine the most likely way to do this would be using Cloudflare’s service workers, in a reverse proxy configuration.

This is the approach I’d investigate. This way, on a page request, cloudflare steps in, requests, and pre-pre-processes the Webflow page to effectively injects NPM-based party town. That will run and deliver the revised page with the code needed to execute headers JS via web workers on the client.

Unless you’re caching on cloudflare though, it seems unlikely that this added step will result in an appreciable performance benefit. And from a UX perspective, I don’t think it would be any faster. Even if you effectively make that header script non-blocking from lighthouse’s perspective, the user would still need all that CSS and JS to properly load before the page could display & respond properly.

Let me know what you discover if you dig further.

As an added note, if you’re looking for a dev to assist with this part, talk to Jeff (@webdev), he’s done a lot of work in maximizing performance on Webflow sites.

2 Likes

Have you ever encountered the solution for this problem? I’m digging in to it right now. If you do, please, would by a tremendous time saving for me. Thank you.

@Pedro_Picardi - What specific issue are you having? I ask because almost every site is different and performance is impacted by your specific choices.