preloader

Flying Scripts: Which Scripts to Delay and Which to Leave Alone

Flying Scripts delays JavaScript until user interaction, which improves Time to Interactive and Total Blocking Time scores. But delaying the wrong scripts breaks functionality. Here is a practical guide to which scripts to target.

How Flying Scripts Works

Flying Scripts replaces src attributes on script tags with data-src attributes, preventing the browser from loading those scripts during initial page render. When a user moves their mouse, scrolls, clicks, or touches the screen, Flying Scripts restores the src attributes and the scripts load normally. From the user perspective, the scripts load when they start interacting with the page.

Good Candidates to Delay

These scripts are non-essential for initial page render and are safe to delay for most sites:

  • Live chat widgets — Intercom, Drift, Tidio, Crisp. These only matter when the user wants to chat, which is always after initial interaction.
  • Social media embeds — Twitter/X widget scripts, Facebook SDK (when used for like buttons or comments).
  • Analytics — Google Analytics/GA4, Hotjar, Microsoft Clarity. Delaying analytics means users who bounce immediately without any interaction are not tracked, but engaged users are. This is acceptable for most sites.
  • Advertising scripts — Google Ads remarketing tags, Facebook Pixel. These can be delayed without affecting page functionality.
  • Review platform embeds — Trustpilot widget scripts, Google Reviews widgets.
  • Video embeds — YouTube, Vimeo player scripts when videos are below the fold.

Scripts to NOT Delay

Delaying these breaks functionality:

  • jQuery — Many plugins depend on jQuery being available immediately. Never delay jQuery.
  • Navigation scripts — Scripts that power dropdown menus, mobile navigation toggles, or mega menus. Users need these on first interaction.
  • WooCommerce scripts — Cart fragments, variation selection, add-to-cart. These need to work immediately on shop pages.
  • Form scripts — Gravity Forms, WPForms, Contact Form 7 validation scripts.
  • Slider scripts — If a slider is in the hero section, its script needs to run on page load.
  • Cookie consent scripts — These must run before any other tracking scripts and cannot be delayed.

Configuring Flying Scripts

Go to Settings, then Flying Scripts. In the Script identifier keywords field, enter strings that appear in the src URL of scripts you want to delay. One per line or comma-separated. Examples:

googletagmanager
intercom
tidio
crisp.chat
drift.com
hotjar
clarity.ms
facebook.net/en_US/fbevents
trustpilot

Test after adding each keyword by loading the page with the browser developer tools Network tab open. Verify the targeted scripts are not loading until you interact with the page.

Testing and Validating

After configuration, test these things:

  1. Check mobile navigation works on first tap.
  2. Verify Add to Cart works on WooCommerce pages.
  3. Submit a contact form to confirm validation works.
  4. Check that live chat appears after mouse movement.
  5. Run PageSpeed Insights to confirm TBT and TTI improvements.

For comprehensive performance optimisation including script auditing, bundle analysis, and Core Web Vitals improvement beyond standard plugin configuration, a WordPress performance developer can identify and resolve site-specific bottlenecks.

Keep Reading

Previous Post Feedzy Feed-to-Post: Automating Content Import From RSS Feeds Next Post Measuring Core Web Vitals Before and After Flying Scripts

Need Help With Your WordPress Site?

If you need help with WordPress fixes, plugin issues, theme customization, or development work, feel free to get in touch.

Get a Free Estimate