Good-looking websites should be fast, too.

The homepage looks sharp on the designer’s laptop. On a visitor’s phone, the headline arrives late, the image pushes the button down and opening the menu feels slow. Both people are looking at the same website, but they are having different experiences.

Performance belongs in the design conversation. Images, video, type and interaction all have a cost. The aim is to spend that cost on the things that help someone understand the offer and use the page.

Give the first screen a budget

Decide what a visitor needs straight away. Usually that is the main message, one image that earns its place, and the navigation or next action. Give those elements priority. A video far down the page should not compete with the opening image for attention or bandwidth.

Start the review with the page itself. Identify the largest visible element, list the scripts that run immediately and ask which requests can wait. The right tradeoff depends on the page’s purpose. A product configurator has different needs from a short service page.

On this site, we keep the main reading and service pages separate from the 3D support experience. That lets us use a character where it serves a purpose without requiring every visitor to load the same experience.

Make images fit the space

An image should be large enough to look good at its displayed size. Sending the largest available original to every screen can add unnecessary weight. We prepare smaller versions and let the browser choose an appropriate source.

File size is only one part of the job. Check the crop, fine detail and colour after compression. Saving a few kilobytes is pointless if the export ruins the work.

Set aside the image’s space before it loads so the content below can stay in place. Load the important opening image promptly and allow less urgent imagery further down the page to arrive later. The browser image loading guide explains why the image visible at the top needs different treatment from offscreen images.

Let motion earn its place

A transition can explain a change or let someone inspect the work. Nobody should have to sit through an introduction to read the page. Ask what information the movement adds and whether the content still works when movement is reduced.

Our project galleries include still-image fallbacks. We also pause their sequences when they are outside the relevant viewport area. These are decisions about where to spend the visitor’s attention and the device’s work.

Apply the same review to third-party tools. Before adding another widget or tag, name the job it does, who uses its output and how you will check its impact. An unused tool is an easy candidate for removal.

Measure the experience, not one score

Core Web Vitals answer three questions: how quickly the main content appears, how responsive interactions feel and how much the layout shifts. Google’s good thresholds are LCP at or below 2.5 seconds, INP at or below 200 milliseconds and CLS at or below 0.1, assessed at the 75th percentile and separated by mobile and desktop.

Use a lab test to investigate a repeatable problem. Use field measurements, when available, to understand the experience real visitors have. A new or low-traffic page may lack enough field data; that absence is not proof that it passes or fails.

Test real tasks as well as the first load. Open the navigation, use a filter, fill a form and recover from an error. A fast screenshot does not prove the controls are responsive.

Keep it fast after launch

Performance can drift when someone replaces an image, adds a campaign tag or embeds a new tool. Give content editors export guidance and revisit the important pages after material changes.

A website can look distinctive and still load quickly, as long as someone decides what deserves the visitor’s time. Our website process brings those decisions into the build from the beginning.