Five things slowing your website down, and how to fix them in code

A slow site loses visitors and search engines alike. The good news: most slowness comes from a handful of recurring causes, and each has a small fix. Here are the ones we see most, with code.

1. Images larger than needed

Loading a photo at 4000 pixels wide when it shows at 400 on a phone is the most common mistake. Give the browser the sizes and alternatives so it can pick the right one:

<img
  src="villa-800.webp"
  srcset="villa-400.webp 400w, villa-800.webp 800w, villa-1600.webp 1600w"
  sizes="(min-width: 960px) 50vw, 100vw"
  width="800" height="600"
  loading="lazy"
  alt="Terrace facing the sea"
/>

width and height reserve space so the page does not jump while loading. loading="lazy" defers images outside the screen. Do not use lazy on the main image at the very top of the page.

2. Text waiting for the font

A font from an external server can delay the text. Serve the font from your own site and show a fallback until it loads:

@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-display: swap;
}

body {
  font-family: "Brand", system-ui, sans-serif;
}

Make sure the font file includes the characters your language needs; if not, the browser borrows those letters from another font and the line breaks.

3. Scripts that block the page

Chat widgets, analytics and ad scripts can stall the page. Load them so they do not block rendering:

<script src="/analytics.js" defer></script>
<script src="/chat.js" async></script>

defer runs the script after the page is painted, in order. async is for independent scripts. Removing a script you do not really need beats both.

4. No caching

Letting the visitor’s browser keep unchanging files makes the second visit almost instant. An example for an Apache server in .htaccess:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/css   "access plus 1 month"
</IfModule>

Adding a version or hash to the file name (style.a1b2c3.css) lets you keep the cache long without risk.

5. Unused CSS and JavaScript

Ready-made themes and plugins load hundreds of kilobytes your site never uses. Measure first; the Coverage tab in the browser’s developer tools shows which lines never run. Then keep only what is needed:

// Load a heavy component only when it is needed
button.addEventListener('click', async () => {
  const { openMap } = await import('./map.js');
  openMap();
});

Measure first

Work with measurements, not guesses: Google PageSpeed Insights and the browser’s Lighthouse show how much each step will gain. Changing one thing at a time and measuring again is the safest way to tell what works from what does not.

If you wonder why your site is slow, write to us; we will tell you what to fix first, with the measurements to back it up.