What are the main ways to optimize frontend performance?

Question

IT Interview Practice · Accepted Answer

**Optimize the part of the user journey that is actually slow, then measure whether the change helped.** A smaller bundle is useful only when it improves the experience or reduces relevant costs.

Suppose customers on ordinary phones open a product page, see its main image late and experience a delay when choosing a variant. Loading and interaction are separate problems; one optimization may not fix both.

## 1. Establish the symptom with representative measurements

Choose a journey, device and network condition that matter to the product. Use real-user measurements to find the affected population and controlled browser tests to reproduce the problem. A powerful development laptop can hide delays experienced by customers.

- LCP measures when the largest visible content element is rendered, helping assess loading experience.
- INP describes responsiveness to user interactions across the page visit.
- CLS measures unexpected layout shifts, such as content moving when an image appears.

These [Core Web Vitals](https://web.dev/articles/vitals) describe different aspects of experience. Pair them with the actual task, such as successfully selecting a variant and adding it to the cart, so improving one number does not hide broken behavior.

## 2. Find what delays the important content

Inspect the request waterfall: the timeline showing when resources are discovered, downloaded and completed. For our product page, the main image might start loading only after JavaScript downloads and an API request finishes.

```text
HTML -> JavaScript -> Product API -> Main image
```

Compressing the image helps its download, but discovering it earlier can remove earlier waiting time. Consider rendering useful product content in the initial HTML through server rendering or static generation where appropriate. Check freshness, server cost and the JavaScript still needed to make that content interactive.

## 3. Reduce unnecessary transfer and execution

Once the critical path is understood, remove work that does not help the current screen. Prefer changes tied to a measured delay over applying every optimization indiscriminately.

- Serve appropriately sized images and suitable formats. Load offscreen images lazily, but do not delay the main image the user is waiting to see.
- Split code by route or feature so a product page does not load an unused administration interface.
- Remove unnecessary dependencies and review third-party scripts, which can cost both network time and main-thread work.
- Compress suitable text responses and cache versioned static assets. Define separate safe policies for personalized data.

Smaller files reduce transfer, but browsers still need to parse and execute code. Check both the network and CPU effects before declaring the change successful.

## 4. Fix slow interaction at its cause

If variant selection is delayed, profile the main thread, which handles much of the page's scripting and rendering. A long calculation can prevent it from responding even after all files have loaded.

Break long work into smaller pieces or move suitable computation to a worker. For frequently changing inputs, avoid unnecessary requests and prevent an older response from overwriting a newer selection. Use memoization when measurement shows repeated computation is costly, not as a default decoration.

For very long lists, rendering only the visible portion can reduce work, but preserve keyboard navigation and accessibility. Reserve space for images and other delayed content to prevent layout jumps. These changes solve different symptoms, so verify each against the original problem.

## 5. Verify the complete journey after the change

Repeat the same controlled test, then watch real-user results after release. Check product correctness, keyboard access, cart completion and any increased backend load as well as performance metrics.

Set practical budgets for the resources that matter and monitor regressions. A good lab score alone is insufficient if real customers still wait or cannot complete their task. **The final result should be a faster, stable and usable journey, supported by measurements before and after the change.**

1. Establish the symptom with representative measurements

2. Find what delays the important content

3. Reduce unnecessary transfer and execution

4. Fix slow interaction at its cause

5. Verify the complete journey after the change

相关问题