The short answer: before showing the page, the browser has to download the CSS and discover which images and fonts it needs. Two hints in the page code can save it that time: preload (“go and fetch this file now, you will need it”) and preconnect (“open the connection to this server now”). Used sparingly they help; overused, they get in the way.
What each one does
| Hint |
When to use |
Example |
| preconnect |
When the page fetches things from another server (fonts, statistics) and needs them straight away. |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| preload of an image |
For the big image at the top of the page, which the browser would only discover late (for example, if it comes from a CSS rule). |
<link rel="preload" as="image" href="/images/top.webp" fetchpriority="high"> |
| preload of a font |
For the main text’s font, so unstyled text does not show and then swap. |
<link rel="preload" as="font" type="font/woff2" href="/fonts/text.woff2" crossorigin> |
The crossorigin is required on fonts, even from your own site: without it, the browser loads the file twice. These lines go inside <head>.
CSS that blocks the page
The browser shows nothing until it has downloaded the CSS that is in the <head>. If the file is big, the page stays blank for that time. What helps:
| 1 |
Load less CSS. Many themes and plugins bring stylesheets for things your site does not use. Remove the plugins you do not need.
|
|
| 2 |
Put the critical CSS in the page itself (only what is needed for what shows first) and load the rest afterwards. Doing this by hand is work; some cache plugins do it for you. LiteSpeed Cache has CSS options in its optimisation page: see LiteSpeed Cache for WordPress.
|
|
| 3 |
Test one at a time. A badly done CSS optimisation can show the page unstyled for an instant. Change one thing, look at the site on a phone and measure.
|
|
The usual mistakes
| Mistake |
Consequence |
| Preloading many files |
They all compete for the same connection and what really matters arrives later. |
| Putting lazy loading on the top image |
It delays the biggest visible thing. See Lazy loading images and videos. |
| Preloading a file the page ends up not using |
The browser warns in the console and the request was wasted. |
|
Does your site take long to show the top of the page and you do not know why? Open a ticket with the address.
Open a support ticket
|
RECOMMENDED PRODUCT Web hosting with cPanel Domain and SSL included, daily backups and the panel you already know. from $6.59/mo (3-year plan, with coupon) See plans |
Português
English
