Bootstrap Beats Tailwind on Mobile Core Web Vitals

Ask a room of developers which CSS framework is lighter and most will point to Tailwind, which ships only the utility classes a page actually uses instead of Bootstrap's larger default bundle. So the field data lands as a surprise: sites built with Bootstrap pass Google's Core Web Vitals more often on mobile than sites built with Tailwind, and it is not close.

Speed decides more than developer preference. A slow page loses visitors before it finishes loading, converts fewer of the ones who stay, and ranks lower in Google. Core Web Vitals put numbers on that experience: how fast the main content appears, how quickly the page answers a tap, and how steady the layout stays while it loads. Falling short of them costs traffic and sales every day the problem sits unfixed.

The comparison here comes from Google's real-user field data, the Chrome UX Report readings gathered from actual visitors on their own devices, not a single lab run on fast hardware.

We detected the CSS framework on each site from HTTP Archive's technology crawl and joined it to the Chrome UX Report, Google's record of Core Web Vitals as real Chrome users experience them. That produced roughly three million mobile origins with a field reading, grouped by whether they run Bootstrap or Tailwind. A site passes Core Web Vitals when it is good on all three metrics at once at the 75th percentile of its visitors: Largest Contentful Paint under 2.5 seconds, Interaction to Next Paint under 200 milliseconds, and Cumulative Layout Shift under 0.1. Passing means the page is genuinely fast for three-quarters of the people who load it, measured on mobile, where the bar is hardest and most browsing happens.

Bootstrap sites pass Core Web Vitals on 45.7% of mobile origins. Tailwind sites pass on 36.8%. The framework everyone calls heavier wins by nearly nine points on real phones.

That result runs straight against the intuition in every Tailwind tutorial. If CSS weight decided Core Web Vitals, the leaner framework would win. It loses, and it loses on the metric where CSS has no direct say at all, which is the first sign that the stylesheet is not really what is being measured here. Something travelling alongside each framework is doing the work.

Look at where the gap sits and the mystery resolves. It is almost entirely responsiveness. Bootstrap sites are good on Interaction to Next Paint 89.2% of the time. Tailwind sites only 73.7%, a 15.5-point difference. CSS does not affect Interaction to Next Paint at all; that metric is about JavaScript running on the main thread. So the numbers cannot be about the stylesheets. They are about what each framework travels with.

Tailwind is the styling default of the modern JavaScript ecosystem, the natural choice for React, Next.js, Vue and their tooling. A Tailwind site is very likely a single-page app. Bootstrap is the styling default of the classic server-rendered world: WordPress themes, Rails and Django apps, plain HTML. A single-page app downloads a JavaScript bundle, boots a component tree, and re-renders on every state change, and that main-thread work is exactly what a phone registers as lag when you tap. A Bootstrap page tends to hand the browser finished HTML and ask for very little in return. As our framework studies show, the single-page-app stacks are exactly the ones that struggle with Interaction to Next Paint on mobile. The CSS framework is just the visible badge of an architecture chosen a layer above it.

The clinching evidence is desktop. There the ranking flips: Tailwind sites pass 58.2%, Bootstrap 55.7%. On a desktop CPU the single-page-app responsiveness penalty vanishes, both frameworks land good-INP in the high 90s, and Tailwind's other advantages, often newer and better-built sites, nudge it ahead.

The framework did not change between mobile and desktop. Only the hardware did. A CSS choice cannot behave one way on a phone and the opposite way on a laptop; a JavaScript-execution difference does exactly that. The mobile gap is a JavaScript story wearing a CSS label.

Buckets are non-exclusive. Per-metric good rates are among origins where the metric is reported.

Do not choose a CSS framework for Core Web Vitals reasons, because it is the wrong lever. The whole mobile gap sits in responsiveness, where Bootstrap is good on INP 89.2% of the time and Tailwind only 73.7%, and INP is governed by main-thread JavaScript that no stylesheet touches. If you run a Tailwind-and-React stack and fail on mobile, the work is in your JavaScript execution: cut hydration and defer the non-critical scripts that keep the main thread busy when a visitor taps.

And do not read the 45.7% as 'Bootstrap is fast,' since more than half of Bootstrap sites still fail. Those sites score better because they tend to be simpler, server-rendered pages, the same classic-architecture edge that jQuery sites showed in our earlier study. The clincher is desktop, where the ranking flips to Tailwind at 58.2% against Bootstrap's 55.7%: the framework never changed between the two, only the hardware did. Pick your styling tools for design, keep the phone's main thread light, and the field pass rates follow.