Two kinds of late arrivals
Text and pictures make up most of what a visitor sees, and both are usually separate files that the browser has to fetch after it reads the page’s HTML. If those files arrive late, one of two things happens: the content is missing for a while, or the content appears and then something else moves. Fonts and images fail in different ways, so it helps to treat them separately.
How fonts cause trouble
A web font is a file containing the shapes of the letters. When a page asks for a custom font, the browser needs to download it before it can draw text in that style. While it waits, browsers handle the gap in one of two general ways:
- Invisible text. The browser hides the text until the font arrives. Visitors see blank space where words should be. This is sometimes called a flash of invisible text.
- Fallback text, then a swap. The browser shows the text immediately in a default font, then switches when the custom font is ready. This is sometimes called a flash of unstyled text.
Neither is ideal. Invisible text delays the moment the visitor can actually read, which can hurt how fast the main content appears. A swap keeps the page readable, but if the two fonts are different widths, lines wrap differently and the page jumps. That jump is counted as layout shift in the Core Web Vitals measures.
Common font mistakes
- Loading many weights and styles (regular, italic, bold, light, and so on) when the design uses only a few.
- Loading fonts from a separate server, which adds the time needed to connect to it.
- Using large font files that include characters the site never uses.
- Starting the font download late, because the browser only discovers it after reading a style file.
- Relying on icon fonts for a few symbols, which means downloading a whole file for a handful of shapes.
General fixes for fonts
- Use fewer font families and weights. Each one is another file.
- Serve fonts from your own site where practical, which avoids an extra connection.
- Use modern compressed font formats that browsers widely support.
- Ask the browser to show fallback text while the font loads, using the font-display setting in the stylesheet. Many sites choose this so that text is never hidden.
- Pick a fallback font close in size and proportions to the custom one, so the swap barely moves anything.
- Consider whether a system font would do. It loads instantly because it is already on the device.
Where there are special trade-offs, such as a brand font that must always appear, test the result on a slow connection instead of assuming.
How images cause trouble
Images are typically the heaviest items on a page, so they affect speed more than anything except scripts. They cause two main problems.
Delay
A large image takes a long time to download, particularly on a mobile connection. If that image is the biggest thing at the top of the page, the visitor stares at an empty space or a half-built layout. Typical causes:
- Original camera or design files uploaded at full size and shown small.
- Formats that are heavier than necessary for the content.
- Many images loaded at once, competing for bandwidth.
- The top image treated like any other, and so fetched late.
Jumping
If the browser does not know an image’s size in advance, it cannot leave room for it. It lays out the text first, then when the image arrives it pushes everything down. This is one of the most common reasons for a poor layout stability score, and it also frustrates readers who lose their place.
General fixes for images
- Set width and height. Giving each image its dimensions (or an aspect ratio in the stylesheet) lets the browser reserve the space before the file arrives.
- Resize to the displayed size. An image shown 600 pixels wide rarely needs to be thousands of pixels wide. Providing a few sizes and letting the browser pick the best one helps phones in particular. More detail on this is in the article on image optimization.
- Compress. Moderate compression often reduces file size greatly with little visible change. Check the result by eye.
- Use suitable formats. Newer formats are often smaller than older ones for photos, but check browser support and keep a fallback if needed.
- Lazy load images below the first screen. This delays downloading pictures until the visitor scrolls near them, saving data and speeding up the first view.
- Do not lazy load the main top image. That image should load early, because delaying it directly slows the first view. Some sites also give it a higher priority hint so the browser fetches it sooner.
- Reserve space for embeds and ads. Videos, maps and advertisements behave like images: if their size is unknown, they push content when they appear.
How to spot the problems
You can notice most of these issues without special tools:
- Reload a page while throttling the connection in your browser’s developer panel to simulate a slow network, then watch what happens.
- Look for text that appears a moment late or changes shape.
- Watch for a page that moves under your finger while you try to tap something.
- Check which element is the largest on the first screen and how big its file is.
- Review the list of files in the network panel, sorted by size, to find the biggest images and fonts.
Measurement tools can give numbers, but real-visitor data may differ from test results, as the article on lab and field data explains. A problem that is subtle on your fast office connection can be obvious on a phone with a weak signal.
Priorities
If you only have time for a few changes, the following usually give the best return for the effort:
- Add dimensions to every image.
- Resize and compress the largest images, starting with the one at the top.
- Reduce the number of font files and make sure fallback text shows while they load.
- Lazy load images below the fold, but not the main one at the top.
After making changes, retest on a phone-sized screen and a slower connection, and repeat the check a few weeks later against real-visitor measurements. Fonts and images are rarely the only cause of a slow page, but because they are so visible, they are a good place to start.