JavaScript is what makes a website respond: the menu that unfolds, the cart that updates, the filter that shows the right products without reloading the page. On most sites, it’s also the single biggest reason the page feels heavy on a phone.
You don’t need to be able to write JavaScript to own a good website. But it helps to know where it comes from, what it costs, and how you can see for yourself what your site sends. How much JavaScript you start with depends largely on your choice of platform and theme.
What JavaScript does on your site
A page consists of three layers. HTML is the content and structure: headings, text, images, forms. CSS decides how it looks. JavaScript is a programming language that runs in the visitor’s browser and can change the page after it has loaded: respond to clicks, fetch new data and show it, or check a form while it’s being filled in.
In an online store, it’s JavaScript that adds a product to the cart without changing page, updates the price when you choose another size, shows the shipping options at checkout and talks to the payment provider. Much of this could in principle be done with ordinary page loads, but it would feel slower to the customer.
The sound principle is called progressive enhancement: the most important things should work with HTML alone, and JavaScript adds the better layer on top. A contact form that can only be sent if a script has loaded correctly is a form that sometimes can’t be sent.
Where the JavaScript comes from
On a WordPress site, the owner has rarely written a single line of the JavaScript the site loads. It comes from the theme, from a page builder, from every plugin with a visible feature (sliders, forms, filters, the cookie banner), from WooCommerce itself, and from third parties like analytics tools, chat, reviews and ad pixels.
The problem is rarely the individual script, but the total. Many plugins load their files on every single page, including the ones where the feature isn’t used, so a form plugin can send its JavaScript to the product pages, and a slider to the checkout. Every new plugin is therefore also a decision about speed.
What it costs in speed
JavaScript costs three times. First the file has to be downloaded. Then the browser has to read and compile it. Finally it has to be run, and that happens on the browser’s main thread, the same one that draws the page and responds to clicks. While a heavy script runs, the page can look finished without responding when you tap it. That’s exactly what Google’s INP (Interaction to Next Paint) metric captures: how long it takes from a click or tap until the page shows a response.
The last two steps hit phones far harder than computers. The same file that runs in an instant on a new laptop can take noticeably longer on a cheap phone, and that’s often where your customers are. That’s why a page can score well when you test it in your office and still feel sluggish to customers.
A script in the page’s <head> without special attributes blocks: the browser stops building the page until the file has been downloaded and run. With defer, the file is downloaded while the page is being built and only run afterwards, in the order the scripts appear. With async, it’s also downloaded in parallel, but run as soon as it’s ready, regardless of order. That suits standalone scripts like analytics, but not scripts that depend on each other. In WordPress, a theme or plugin can ask for this directly, and at the same time only load the file where it’s used:
add_action( 'wp_enqueue_scripts', function () {
if ( ! is_front_page() ) {
return; // the slider only exists on the home page
}
wp_enqueue_script(
'home-slider',
get_theme_file_uri( 'js/slider.js' ),
[],
'1.0',
[ 'strategy' => 'defer', 'in_footer' => true ]
);
} );You’ll find more about making JavaScript, CSS and images lighter in the guide to loading JavaScript, CSS and images.
See what your site loads
You can get an overview yourself in a few minutes, without installing anything:
- Open a page in Chrome, right-click and choose Inspect. Go to the Network tab, choose the JS filter and reload the page. Now you can see every JavaScript file, where it comes from, and how big it is.
- Sort by domain. Files from your own domain come from the theme and plugins, often with the plugin’s name in the path. The rest are third parties.
- Open the Coverage tab (from the three-dot menu, More tools) and reload. It shows how much of each file was actually used on the page.
- Run the page through PageSpeed Insights, and look for the items about unused JavaScript and main-thread work. They point to the files that cost the most.
Do this on the home page, a product page and the checkout. A script that shows up on all three but is only used on one of them is a good place to start.
Third-party scripts
A script from another company runs with the same rights as your own code. It can read everything on the page, including what the customer types into a form, and it can change the page. So you’re trusting both the supplier and everyone who can change the file on their server. Only use services you actually use, and remove them when you stop: otherwise an old tracking script from a campaign two years ago just stays there.
Third parties also make your site dependent on their servers. If they’re slow, so is your site, if the script blocks. And scripts that set cookies for statistics or marketing may only be loaded once the visitor has said yes. A cookie banner that shows a choice but loads everything anyway doesn’t solve anything.
Security
The classic risk is called XSS (cross-site scripting): an attacker gets their own JavaScript onto your site, usually through a field or an address that the site displays without sanitizing it. Then the attacker’s code runs in your visitors’ browsers, with access to the same things as your own. The defense lives on the server. All input has to be checked and sanitized there, because JavaScript checks in the browser can be bypassed by anyone. Keep the theme and plugins updated, since many of the vulnerabilities fixed in updates are exactly of this type. And never put secret keys or passwords in JavaScript: anything the browser receives, the visitor can read.
When something stops working
If a button doesn’t respond, or the cart doesn’t update, open the console (Inspect, the Console tab). Red errors there tell you which file failed. One error in one script can stop other scripts on the page, so the error often shows up somewhere completely different from where it occurs. The most common causes are a recently updated plugin, two plugins that each load their own version of the same library, and optimization plugins that combine or defer files in an order they can’t handle. Turn the optimization off for a moment: if the page works then, you’ve found the spot.
Frequently asked questions
Can my website work without JavaScript?
Content, navigation and ordinary forms can and should work without it. A modern checkout with a payment provider requires JavaScript in practice. The goal isn’t zero JavaScript, but that what’s loaded gets used.
Is jQuery a problem?
Not in itself. Many WordPress plugins still use it, and then it has to be loaded. It becomes a problem when it’s loaded for just one small feature, or when several versions end up on the same page.
Why does PageSpeed say I have unused JavaScript?
Because files are downloaded on pages where only a small part of the code is used. That’s usually down to plugins that load everything everywhere. The fix is to load them where they’re used, or to replace plugins that can’t do that.
Want help?
We clean up JavaScript on WordPress sites and online stores, and we build the features that don’t exist as a good plugin. Read more about our development work.