How to speed up page loading

Short answer

Images weigh the most, so start with them: give the main image of the first screen a high priority, lazy-load all the others, and give every image its dimensions:

<img src="/media/photo-600x200.jpg" alt="A flower banner" width="600" height="200"
     fetchpriority="high" style="max-width: 100%; height: auto;">
 
<img src="/media/photo-400x250.jpg" alt="A flower" width="400" height="250"
     loading="lazy" style="max-width: 100%; height: auto;">

fetchpriority="high" tells the browser to download the banner before everything else. loading="lazy" postpones images below the screen until scrolling gets near them. width and height reserve the space, so the text does not jump when an image loads.

An image of the right size

Do not send a 2000-pixel-wide photo to a phone. srcset lists the files, and sizes hints how wide the image will be on screen:

<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 600px" alt="A flower" width="800" height="500">

Fonts and scripts

An important font can start downloading right away without waiting for the CSS, and scripts can be kept from stopping the page parsing:

<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
<script src="app.js" defer></script>

defer downloads the script in parallel and runs it once the HTML is parsed. Without it the browser stops at every <script>.

Long pages

content-visibility: auto lets the browser skip rendering blocks while they are far off screen. contain-intrinsic-size sets an approximate height so the scrollbar does not jump:

.section { content-visibility: auto; contain-intrinsic-size: auto 600px; }

Common mistake

Putting loading="lazy" on every image, including the banner at the top of the page. Then the browser postpones the most important image, and the page looks ready later. Lazy loading is only for what is below the first screen.