Speed Up Your Website by Fixing Images and Fonts

See what the first screen actually downloads

Image optimization can turn into score-chasing: install a plugin, compress every picture, see the score rise, and stop. Visitors notice something else—how long it takes to read the headline, whether an arriving image pushes the text down, and whether scrolling still stutters. Reload with mobile-network throttling in the browser's network panel and sort requests by transferred size. The largest image and unnecessary font files are usually easy to spot.

Record three baseline figures: total first-screen transfer, the largest single resource, and the number of font files. Test with an empty cache as well as your normal connection; a first-time search visitor will not have your local cache.

Export images for the size at which they appear

A screenshot displayed at 720px wide in an article rarely needs to be uploaded at 4000px. Allow enough resolution for high-density screens, but remove unnecessary transparent margins. AVIF or WebP often works well for photographs; inspect the legibility of text in interface screenshots. Maintainable SVGs are usually suitable for logos and icons. Compare actual file sizes at similar visual quality rather than treating any format as a universal answer.

Record an image's aspect ratio. Supply width and height in HTML or use CSS aspect-ratio so the browser reserves space before the file arrives. Otherwise, loading the image can push paragraphs and buttons down the page.

Serve a smaller file to a smaller screen

Use srcset to offer different widths and sizes to describe how wide the image will appear. An incorrect sizes value may still make a phone download the desktop file, so inspect the request chosen at several viewport widths.

<img
  src="guide-800.webp"
  srcset="guide-480.webp 480w, guide-800.webp 800w, guide-1280.webp 1280w"
  sizes="(max-width: 720px) 100vw, 720px"
  width="1280" height="720"
  alt="Mobile layout of an article editor"
>

Describe the image's purpose in its alt text; do not stuff it with search terms. Use an empty alt for a purely decorative image so a screen reader does not repeat surrounding content.

Do not lazy-load the image visitors see first

loading="lazy" suits images outside the initial viewport. The main image visible on load should be discovered promptly. Applying lazy loading to every image can delay the largest visible element. A carousel usually does not need to download its second and third slides immediately. If its first image is only decorative, removing it may save more than changing its format.

An image CDN can help with resizing and format conversion, but retain the originals, transformation rules, and a portable source path. If the database stores only one provider's temporary transformed URLs, migration becomes harder.

Keep Chinese web-font choices restrained

Chinese fonts contain many glyphs, so a full file can be much larger than a Latin font. First ask whether the page needs a downloadable Chinese font at all. A system-font stack is usually faster and fits each platform. If a custom brand font is necessary, load only the weights actually used; do not import the entire 100–900 range by default.

Provide a similar fallback font to reduce width changes when the custom font arrives. Choose a suitable font-display behavior and observe whether a slow connection shows fallback text promptly or leaves it blank. Subsetting may work for fixed logo lettering, but a subset that is too small for dynamic article text will cause missing characters to switch fonts unpredictably.

Remove duplicate and unnecessary resources

Check whether third-party components bring their own fonts or icon libraries. Two icon fonts, three analytics scripts, and several chat widgets can outweigh careful image compression. Remove resources with no clear user value before tuning minor compression settings.

For long-lived static assets, use filenames with content hashes so a changed file gets a new URL. Do not cache HTML indefinitely; it tells the browser which asset versions to load. After deployment, verify in a private browser window and on a real phone rather than relying only on a warm local cache.

What counts as done?

The first screen no longer downloads obviously oversized images; images do not shift the article when they arrive; phones request suitable widths; below-the-fold images load later; and every font file and weight has a reason to exist. Keep before-and-after network records so later changes can be checked for regressions. Next, tackle another component that can appear successful while silently failing: the contact-form reliability guide.