如何将网站加载速度提升50%？前端性能优化全攻略

作者: 前端AC | 原文: https://juejin.cn/post/7478890202708115495

前言

在当今互联网时代，网站加载速度直接影响用户体验和SEO排名。根据Google的研究，页面加载时间每增加1秒，转化率就会下降7%。因此，优化网站性能是每个前端开发者的必修课。本文将为你提供一套完整的前端性能优化方案，帮助你将网站加载速度提升50%甚至更多。

1. 优化图片资源

图片通常是网站中最大的资源，优化图片可以显著提升加载速度。

1.1 使用现代图片格式

• 使用 WebP 格式替代JPEG和PNG，WebP在保证质量的同时，文件体积更小。
• 使用 <picture> 标签为不同设备提供适配的图片格式：

  <picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Description">
  </picture>

1.2 图片压缩

• 使用工具如 TinyPNG、ImageOptim 或 Squoosh 压缩图片。
• 在构建流程中集成自动化压缩工具，如 imagemin。

1. TinyPNG:
   https://tinypng.com
2. ImageOptim:
   https://imageoptim.com
3. Squoosh:
   https://squoosh.app
4. imagemin (GitHub 仓库):
   https://github.com/imagemin/imagemin

1.3 图片懒加载

• 使用

  loading="lazy"

  属性延迟加载非首屏图片：

  <img src="image.jpg" alt="Description" loading="lazy">

---

2. 减少HTTP请求

每个HTTP请求都会增加页面加载时间，减少请求数量是优化性能的关键。

2.1 合并文件

• 合并多个CSS和JavaScript文件，减少请求次数。
• 使用工具如 Webpack 或 Parcel 自动合并资源。

2.2 使用CSS Sprites

• 将多个小图标合并为一张雪碧图，减少图片请求：

  .icon {
    background-image: url('sprites.png');
    background-position: -10px -20px;
  }

2.3 内联关键资源

• 将关键CSS内联到HTML中，避免阻塞渲染：

  <style>
    /* 关键CSS */
  </style>

---

3. 优化JavaScript

JavaScript的加载和执行可能阻塞页面渲染，优化JavaScript至关重要。

3.1 异步加载脚本

• 使用

  async

  或

  defer

  属性异步加载非关键脚本：

  <script src="script.js" async></script>

3.2 代码拆分

• 使用

  Webpack

  的代码拆分功能，按需加载JavaScript模块：

  import('module.js').then(module => {
    module.init();
  });

3.3 减少第三方库

• 移除不必要的第三方库，或使用轻量级替代方案。

---

4. 优化CSS

CSS的加载和解析也会影响页面渲染速度。

4.1 删除未使用的CSS

• 使用工具如 PurgeCSS 删除未使用的CSS代码。

4.2 避免CSS阻塞渲染

• 将非关键CSS延迟加载：

  <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

---

5. 使用浏览器缓存

利用浏览器缓存可以减少重复请求，提升加载速度。

5.1 设置缓存头

• 在服务器配置中为静态资源设置缓存头：

  location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 365d;
  }

5.2 Service Worker

• 使用

  Service Worker

  实现离线缓存：

  self.addEventListener('install', event => {
    event.waitUntil(
      caches.open('v1').then(cache => {
        return cache.addAll(['/', '/styles.css', '/script.js']);
      })
    );
  });

---

6. 优化服务器性能

服务器响应时间直接影响页面加载速度。

6.1 启用Gzip压缩

• 在服务器中启用Gzip压缩，减少文件体积：

  gzip on;
  gzip_types text/plain text/css application/json application/javascript;

6.2 使用CDN

• 使用 CDN 分发静态资源，减少服务器负载和延迟。

6.3 优化数据库查询

• 减少数据库查询时间，提升服务器响应速度。

---

7. 监控与持续优化

性能优化是一个持续的过程，需要不断监控和改进。

7.1 使用性能监控工具

• 使用 Google Lighthouse、WebPageTest 或 GTmetrix 分析网站性能。

1. Google Lighthouse:
   https://developers.google.com/web/tools/lighthouse
   Lighthouse 是一个开源工具，集成在 Chrome DevTools 中，用于分析网页性能、可访问性、SEO 等。
2. WebPageTest:
   https://www.webpagetest.org
   WebPageTest 是一个功能强大的在线工具，提供详细的网页性能分析，支持多地点、多浏览器测试。
3. GTmetrix:
   https://gtmetrix.com
   GTmetrix 是一个流行的网页性能测试工具，提供页面加载速度、性能评分和优化建议。

7.2 设置性能预算

• 为关键指标（如加载时间、文件大小）设置性能预算，确保优化效果。

---

总结

通过以上优化策略，你可以显著提升网站的加载速度，改善用户体验和SEO排名。记住，性能优化是一个持续的过程，需要不断测试和调整。开始优化你的网站吧，让你的用户享受更快的加载体验！

---

参考资料:

• Google Web Fundamentals
• Lighthouse Documentation
• WebPageTest