Mike Stop Continues

Speed Up the Headless Browser in Playwright

Mike Stop Continues's photo
Mike Stop Continues
·

4 min read

For developers immersed in web automation, Playwright is a vital ally... but it can be a pretty heavy process to run. As you begin to rely more on headless browsers, it becomes important to be able to make those scripts faster and more stable.

Thankfully, there are a lot of powerful levers to pull for performance in Playwright, depending on your situation. This article dives into some of the most potent levers--configuring the browser through Playwright config, CLI args, and feature flags.

If you find these tips powerful, but perhaps not right for your use-case, be sure to check out my top tips for removing network bottlenecks and heavy resource loading in this resource management deep-dive.

But without further ado, let's go through the big levers you can pull for performance in Playwright...

Disable All Javascript

JavaScript is the cornerstone of modern web interactivity, but it can become a liability in headless browser sessions that simply don't require it. By disabling JavaScript, you can significantly accelerate your scripts, skipping over:

  • Hydrating the React/Svelte/Vue app

  • Launching pop-ups

  • Loading third-party scripts

  • Replacing placeholder images with full-size images

  • Initializing auto-play videos

  • Triggering a waterfall of subsequent javascript requests

  • Destroying content by enabling a paywall

  • and on and on...

Here's how to switch it off for all pages loaded within a Playwright context:

const browser = pw.chromium.launch();
const context = browser.newContext({javaScriptEnabled: false});

If your use-case doesn't require JS to load on your target pages, this is a powerful technique. But be warned! Disabling javascript might trigger a website's anti-bot defense system. After all, many less-sophisticated web crawlers don't run javascript either.

Tweak Chromium CLI Args

By default, Playwright tries to ensure its headless browsers behave maximally similar to a user-driven browser.

But what if your use-case doesn't leverage every aspect of the browser's capabilities? If not, it may be worth exploring the CLI args your chosen browser makes available.

This is especially valuable for Chromium-based browsers, which provide dozens of options, including offering CLI access to feature flags (chrome://flags). This gives you tremendous control over the browser process.

Here are some of the best flags to draw from...

Disable Sandboxing

There's one surefire way to improve the performance of Chromium-based browsers no matter what your use-case is. That's to disable security sandboxing. But be warned--doing so may expose your execution context (Docker container, Lambda function, etc.) to malicious code.

Even if you aren't including user-generated data in your scripts, you may still be vulnerable to attack. After all, third-party dependencies may carry code designed to sniff for sensitive data and access. While this possibility is unlikely, it is important to be aware of the consequences.

Nevertheless, it's a powerful tool under the right circumstances.

const browser = pw.chromium.launch({
  args: [
    // Use with caution!
    '--no-sandbox',
    '--disable-setuid-sandbox',
  ],
});

Disable Visual Rendering Features

If you don't care about taking screenshots, recording videos, or generating PDFs, you can probably save big by disabling Chromium's visual components.

This trick is just as good as easy as the previous one, largely boiling down to a single switch:

const browser = pw.chromium.launch({
  args: [
    // Huge gains when you don't need visual output
    '--disable-gl-drawing-for-tests',
  ],
});

Pick the Right Flags for You

There are way more CLI args than I can possibly go through here, especially because which flags you set really depends on your use-case.

For example, there are flags for antialiasing, for memory allocation, for browser features (like extensions, alerts, etc.), and more. Which you switch really depends on what you're working on. And truth be told, most won't be as powerful as the few I've already listed here.

At any rate, experiment!

Next Steps...

With these strategies, you're positioned to extract the most out of Playwright and your headless browser environment. Saving even a few seconds per run amounts to hours, days, and years of cost-savings on server costs. And even better, it improves the stability of the features your users depend on.

All that said, Playwright offers many more options for optimization, such as blocking network traffic and preventing inline assets from loading. If you're eager to delve even deeper, see my comprehensive guide.

Happy automating!

playwrightJavaScriptautomationScrapingweb scraping