Complete Guide to Web Performance Optimization: 15 Tips to Boost Website Loading Speed by 50%

Google's 2023 research data reveals a harsh reality: for every 1-second increase in page load time, mobile conversion rates drop by 20%. BBC found that for every additional second of load time, they lose an extra 10% of users. Amazon estimates that a 100-millisecond delay can lead to a 1% decrease in sales.

Performance is not a 'nice-to-have' but a core metric that directly impacts business. This article systematically outlines 15 proven optimization techniques, from the highest-yield image optimization to fine-grained runtime tuning, to help you build truly fast web applications.

Core Web Vitals: Performance Standards Defined by Google

Before optimizing, first understand the three core metrics (Core Web Vitals) that Google uses to evaluate user experience:

Metric	Full Name	Meaning	Good Standard
LCP	Largest Contentful Paint	Rendering time of the largest content element	≤ 2.5 seconds
INP	Interaction to Next Paint	Delay from user interaction to next frame rendering (replacing FID in 2024)	≤ 200ms
CLS	Cumulative Layout Shift	Cumulative layout shift (unexpected movement of page elements)	≤ 0.1

These three metrics directly impact Google search rankings. Optimizing them is both performance engineering and an SEO strategy.

Image Optimization: The Biggest Performance Gain

Images typically account for 50% to 70% of a webpage's total bytes, making them the most cost-effective direction in performance optimization.

Tip 1: Use Modern Image Formats

Format	Compared to JPEG	Compared to PNG	Browser Support
WebP	25~35% smaller	26% smaller	97%+
AVIF	50% smaller	50%+ smaller	90%+ (2024)
JPEG XL	35% smaller	-	Still in progress

<!-- 使用 picture 元素提供多格式回退 -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

Tip 2: Responsive Images (srcset)

<img
  src="photo-800w.jpg"
  srcset="photo-400w.jpg 400w,
          photo-800w.jpg 800w,
          photo-1600w.jpg 1600w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1600px"
  alt="响应式图片示例"
>

The browser automatically selects the most appropriate image based on device screen width and resolution, preventing phones from downloading 2MB desktop images.

Tip 3: Image Lazy Loading

<!-- 原生懒加载，现代浏览器支持 -->
<img src="below-fold.jpg" loading="lazy" alt="延迟加载图片">

<!-- 视口内的关键图片：显式声明 eager（默认行为）-->
<img src="hero.jpg" loading="eager" alt="首屏图片">

Lazy loading can reduce initial page data by over 50%, significantly improving LCP.

Tip 4: Set Explicit Image Dimensions

<!-- ✅ 正确：声明宽高，浏览器预留空间，避免布局偏移（CLS） -->
<img src="avatar.jpg" width="120" height="120" alt="用户头像">

<!-- ❌ 错误：图片加载后撑开布局，导致 CLS 分数飙升 -->
<img src="avatar.jpg" alt="用户头像">

Resource Loading Optimization

Tip 5: CSS/JS Minification and Code Splitting

Modern build tools (Vite, webpack, Next.js) automatically handle minification. Code splitting requires manual configuration:

// React 动态导入：按需加载组件
import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Code splitting can reduce first-screen JavaScript bundle size by 40% to 60%.

Tip 6: Inline Critical CSS

Inline the minimum CSS required for first-screen rendering directly into <head> to eliminate render-blocking:

<head>
  <!-- 内联关键 CSS（通常 < 14KB） -->
  <style>
    /* 首屏布局和核心样式 */
    body { margin: 0; font-family: system-ui; }
    .hero { height: 100vh; display: flex; }
  </style>

  <!-- 非关键 CSS 异步加载 -->
  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
</head>

Tip 7: Preload Critical Resources

<head>
  <!-- 预加载 LCP 图片（首屏最大元素） -->
  <link rel="preload" as="image" href="hero.webp" fetchpriority="high">

  <!-- 预加载关键字体 -->
  <link rel="preload" as="font" href="inter.woff2" type="font/woff2" crossorigin>

  <!-- 预连接第三方域名 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://cdn.example.com">
</head>

Tip 8: Font Optimization

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  /* swap: 先用系统字体显示文字，字体加载完成后替换 */
  /* 避免 FOIT（不可见文字闪烁） */
  font-display: swap;
}

Font subsetting: Include only actually used characters, compressing Chinese fonts from 5MB to under 100KB. Recommended tools: glyphhanger, fonttools.

Network Optimization

Tip 9: CDN for Static Resource Distribution

CDN (Content Delivery Network) caches static resources globally, allowing users to fetch from the nearest node, reducing latency from 200ms to 20ms.

Mainstream choices: Cloudflare (powerful free tier), Alibaba Cloud CDN, Tencent Cloud CDN. Platforms like Next.js and Vercel integrate CDN by default.

Tip 10: HTTP/2 and HTTP/3

Core improvements of HTTP/2 over HTTP/1.1:

Multiplexing: Multiple requests over a single connection, eliminating head-of-line blocking
Header compression (HPACK): Reduces transmission volume of duplicate request headers
Server push: Proactively pushes resources the client may need

HTTP/3 is based on the QUIC protocol (UDP), performing better in unstable network scenarios (mobile networks). Mainstream web servers (Nginx 1.25+, Caddy) already support it.

Tip 11: Caching Strategy

# Nginx 缓存配置示例

# 永久缓存（带内容哈希的静态资源）
location ~* \.(js|css|woff2)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}

# HTML 不缓存（需要及时更新）
location ~* \.html$ {
    add_header Cache-Control "no-cache";
}

# 图片：中等缓存时间
location ~* \.(jpg|webp|png)$ {
    add_header Cache-Control "public, max-age=86400";
}

Tip 12: Gzip / Brotli Compression

Brotli compression is 20~26% more efficient than Gzip, and modern browsers fully support it:

# Nginx Brotli 配置
brotli on;
brotli_comp_level 6;
brotli_types text/html text/css application/javascript application/json;

Text resources (HTML/CSS/JS/JSON) can be compressed to 60%~80% of their original size.

Runtime Optimization

Tip 13: Avoid Layout Thrashing

Layout thrashing occurs when code alternately reads and writes DOM styles within the same frame, forcing the browser to repeatedly recalculate layout:

// ❌ 错误：每次循环都触发强制重排
elements.forEach(el => {
  const height = el.offsetHeight;     // 读取（触发重排）
  el.style.height = height + 10 + 'px'; // 写入（使布局失效）
});

// ✅ 正确：批量读取，再批量写入
const heights = elements.map(el => el.offsetHeight); // 批量读取
elements.forEach((el, i) => {
  el.style.height = heights[i] + 10 + 'px';          // 批量写入
});

The library fastdom can automatically schedule read/write operations to avoid layout thrashing.

Tip 14: Virtual Lists for Long Lists

Rendering 10,000 items creates 10,000 DOM nodes, causing page lag. Virtual lists only render nodes within the visible area:

// 使用 react-virtual 库
import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }) {
  const parentRef = useRef(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50, // 每行预估高度
  });

  return (
    <div ref={parentRef} style={{ height: '500px', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map(item => (
          <div key={item.key} style={{ transform: `translateY(${item.start}px)` }}>
            {items[item.index].name}
          </div>
        ))}
      </div>
    </div>
  );
}

For 10,000 items, rendering changes from 10,000 nodes to only ~20 visible nodes, improving performance by dozens of times.

Tip 15: Web Workers for Compute-Intensive Tasks

JavaScript is single-threaded; CPU-intensive tasks block the main thread, causing unresponsiveness:

// main.js：在主线程创建 Worker
const worker = new Worker('worker.js');

worker.postMessage({ data: largeDataset });

worker.onmessage = (event) => {
  const result = event.data;
  // 在主线程更新 UI
  updateUI(result);
};

// worker.js：在 Worker 线程执行耗时计算
self.onmessage = (event) => {
  const { data } = event.data;
  // 执行耗时计算，不阻塞主线程
  const result = heavyComputation(data);
  self.postMessage(result);
};

Applicable scenarios: image processing, data encryption/decryption, large data sorting/filtering, Markdown parsing, etc.

Performance Measurement Tools

Tool	Purpose	Access Method
Lighthouse	Comprehensive score + optimization suggestions	Chrome DevTools → Lighthouse
PageSpeed Insights	Lab data + real user data (CrUX)	pagespeed.web.dev
WebPageTest	Multi-region testing, waterfall analysis	webpagetest.org
Chrome DevTools Performance	Runtime performance analysis, flame chart	F12 → Performance
web-vitals.js	Collect Core Web Vitals in real user environments	npm install web-vitals

FAQ

Q: How fast should first-screen loading be to be considered合格?

According to Google Core Web Vitals standards: LCP ≤ 2.5 seconds is "good", 2.5~4 seconds is "needs improvement", > 4 seconds is "poor". For e-commerce sites, it's recommended to keep Time to Interactive (TTI) within 3 seconds. Test under weak network conditions (3G) to pass for true compliance.

Q: What performance aspects can modern frameworks like Next.js automatically optimize?

Next.js automatically provides: image optimization (next/image component for automatic WebP conversion, lazy loading, size optimization), code splitting (automatic per-page splitting), font optimization (next/font for automatic subsetting + font-display: swap), static generation (SSG pre-rendering HTML), Brotli compression (when deployed on Vercel). However, manual handling is needed for: avoiding overly large client-side JS bundles, third-party script loading strategies, and data request caching strategies.

Q: Are optimization priorities the same for mobile and desktop?

No. Mobile additionally requires attention to: network bandwidth (4G/5G fluctuations require more aggressive caching and resource compression), CPU performance (mobile CPUs are 1/4 to 1/8 of desktop, requiring reduced JavaScript execution), touch interaction delay (avoid 300ms click delay with touch-action: manipulation). Google PageSpeed Insights shows separate scores for mobile and desktop; prioritize mobile—Google search has fully switched to mobile-first indexing.

Summary

Priority ranking of the 15 tips for reference:

Image format + lazy loading (highest gain, low implementation cost)
Set image dimensions (directly reduces CLS to zero)
Preload critical resources (immediate improvement in LCP)
Code splitting (reduces first-screen JS size)
CDN + Brotli + HTTP/2 (global optimization at the network layer)

The best workflow for performance optimization: measure first (Lighthouse) → identify bottlenecks (DevTools) → targeted optimization → verify results. Don't optimize based on feeling; let data speak.