编辑说明：本文为公司发展历程回顾系列内容，基于团队2023年官网性能优化实操整理，2026年7月修订发布。文中优化方法至今适用，供参考。
前几天帮一个客户查官网加载慢的问题，打开一看——首页图片没压缩，三张banner图加起来8MB多。这种事真的太常见了。
企业官网的性能优化说难不难，但很多团队就是没顾上做。今天就聊聊常见的性能问题和优化方法。
性能为什么重要
两个原因。
一是用户体验。公开数据显示，移动端页面加载超过3秒，超过一半的用户会直接离开。你花大力气做的官网，用户等不及打开就走了，多亏。
二是SEO。Google早在2021年就把"页面体验"信号纳入排名因素了，百度也明确表示过速度是排名参考之一。加载慢的网站，排名上会吃亏。
常见的性能问题
我经手过的官网，性能问题无非就那么几个：
图片没压缩，动辄几MB一张
CSS和JS文件没合并、没压缩，请求数多
服务器配置低，响应慢
没上CDN，所有资源都从源站拉
没有缓存策略，重复访问也要重新加载所有资源
下面逐个说怎么解决。
优化方法
图片优化
图片是拖慢网页加载的头号元凶。80%的性能问题出在图片上，不夸张。
格式上推荐用WebP。同样画质下，WebP比JPEG小25%-35%，比PNG小得多。现代浏览器都支持，兼容性已经不是问题了。用picture标签做兼容处理：
<picture> <source srcset="banner.webp" type="image/webp"> <source srcset="banner.jpg" type="image/jpeg"> <img src="banner.jpg" alt="产品banner" loading="lazy"> </picture>
懒加载也加上。首屏以下的图片不急着加载，用户滚动到附近再加载，首屏速度能快不少。用IntersectionObserver实现：
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
obs.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));HTML部分把img的src改成data-src：
<img data-src="product-2.jpg" alt="产品图" class="lazy">
之前给那个客户做了图片压缩 + WebP转换 + 懒加载，首页从7秒降到了2.3秒，效果立竿见影。
资源压缩与合并
CSS和JS文件，上线前一定要压缩。用构建工具的话（Webpack、Vite都行），生产模式自动帮你压缩。如果是传统项目手动管理，可以用gulp处理。
合并也要做。10个CSS文件就是10个HTTP请求，合成1个就只有1个请求。不过也别过度合并——把首屏不需要的CSS也塞进去，反而拖慢首屏。可以拆成critical CSS（内联在HTML里）和non-critical CSS（异步加载）。
CDN加速
CDN的原理很简单：把静态资源缓存到全国各地的节点上，用户访问时从就近的节点取，不用都回源站。对跨地域访问的效果很明显。
国内常用的CDN有阿里云、腾讯云、七牛云，价格都不贵。一个企业官网每个月CDN费用大概几十到一两百块，性价比很高。
缓存策略
上CDN之后记得配置缓存策略。Nginx的配置参考：
# 开启 gzip 压缩
gzip on;
gzip_types text/css application/javascript application/json image/svg+xml;
# 静态资源缓存
location ~* .(js|css|png|jpg|jpeg|gif|webp|svg|woff2)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}immutable这个值告诉浏览器：这个文件不会变，放心缓存。配合文件名加hash（比如 main.a3f5b2.js），更新资源时换个文件名就行，不用担心缓存问题。
服务器优化
服务器层面的优化，主要看技术栈。PHP的话开OPcache，Node.js用PM2做进程管理，数据库加索引、开查询缓存。
如果用的是云服务器，升级配置是最直接的办法——但先确认瓶颈在哪，别盲目升级。我见过一个客户CPU和内存都用不到30%，网站还是慢，最后查出来是数据库查询没加索引，一个查询跑了两秒。
性能检测工具
优化完了得测一下效果。常用工具：
Google PageSpeed Insights：Google官方工具，会给出具体优化建议，还能分别测移动端和桌面端的得分
GTmetrix：详细的瀑布图分析，能帮你找到具体哪个请求慢
百度移动端速度检测：国内访问的话，百度的工具更贴近国内用户的网络环境
建议优化前后各测一次，对比着看。目标的话，PageSpeed得分80分以上算还可以，90分以上就挺好。
性能优化不是一次性的活，上线后也要定期检测。内容多了、图片大了，速度可能又慢下来了。养成习惯，每月跑一次检测，有问题及时处理就行。