The browser is holding the page back
A browser won't draw a page until it has every stylesheet listed in the page's head. If it drew first and styled later, your visitor would see plain unstyled text jump into place, which looks worse. So it waits, and every one of those stylesheets is a file the visitor's phone has to download before anything appears.
Scripts in the head cause the same delay unless they are marked to defer. When the browser reaches one, it stops reading the page, downloads the script, runs it, and only then carries on. A tag manager, chat widget, or analytics snippet in the head adds a pause before the first word shows up.
Fonts are the third cause, and the easiest to miss. The page can be drawn and still show no text, because the text is set in a web font that hasn't arrived yet. Most browsers hide that text for up to three seconds rather than show it in a fallback font.
What the free audit shows you
The free audit runs the same browser measurement Google uses. Two numbers matter here. First Contentful Paint is when the first text or image appears. Largest Contentful Paint is when the main content of the page appears. If the first number is over about 1.8 seconds, your visitor was looking at a white page.
Under the numbers is a list of the files the browser waited for, with the time each one cost. On most organization sites the list is short: the theme stylesheet, two or three plugin stylesheets, a font from a font service, and one script that should have been at the bottom of the page.
Fix one: show the text in a fallback font
A web font can tell the browser what to do while it loads. The setting is called font-display. The value swap means: show the text right away in a fallback font, then switch when the real font arrives. Visitors see words on the first paint instead of an empty column.
Show the code Hide the code CSS, 5 lines
@font-face {
font-family: "Source Serif 4";
src: url("/fonts/source-serif-4.woff2") format("woff2");
font-display: swap;
}If your font comes from a font service, the same setting is usually a parameter on the link the service gave you. If it comes from your theme, it's one line in the theme's font declaration. Hosting the font file on your own site also saves the phone a separate connection to another server, which is often the slowest part.
Fix two: scripts at the end, or deferred
A script that doesn't change how the page looks belongs at the end of the page, or in the head with the defer attribute. Defer tells the browser to download the script in the background and run it after the page is drawn. Analytics, chat, tag managers, social embeds and video players all qualify. Almost nothing on an organization site needs to run before the first paint.
On WordPress, most of these scripts come from plugins, and most plugins give you no setting for where their script goes. A caching or performance plugin can defer them all at once. Test the site after you switch that on, because a script that another script depends on can throw errors if it runs out of order.
Fix three: fewer stylesheets on pages that do not use them
A contact form plugin loads its stylesheet on every page, not only the contact page. Slider, events calendar and gallery plugins do the same. A site with twelve plugins can request twelve stylesheets before drawing a page that uses none of them. Each file is small, but together they add up to the wait.
The clean fix is to load each plugin's files only on the pages that use them. Some plugins have that setting. For the rest, a performance plugin can do it page by page, or the theme can load them only where needed, which is a few lines of code for whoever maintains the site. Before any of that, it is often worth removing the plugins nobody remembers installing.
What not to do
Don't chase the score. A page that paints in under a second on a phone is done, even if the measurement tool still lists suggestions.
And don't paste all your styles into the page itself to save requests. A stylesheet built into every page can grow to tens of kilobytes and gets sent again on every visit, while a linked file is cached after the first one. We made exactly that mistake on LFW.com and fixed it this week.
Leland Fiegel