网站性能优化：页面加载速度从5秒降到1秒的方法

页面打开超过3秒，一半用户会关页。速度优化不是玄学，就是压缩、缓存、延迟加载三板斧。

第一板斧，开Gzip压缩。HTML、CSS、JS这些文本文件压缩后体积能减小60%到80%。

# Nginx开启Gzip压缩（nginx.conf）

gzip on;

gzip_min_length 1k;

gzip_comp_level 6;

gzip_types text/plain text/css application/json

application/javascript text/xml

application/xml application/xml+rss

text/javascript image/svg+xml;

# 静态资源设置缓存（浏览器缓存）

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {

expires 30d;

add_header Cache-Control "public, no-transform";

}

第二板斧，图片延迟加载。页面上的图片不用一次性全部加载，滑到哪里再加载哪里。这对长页面特别有效。

<!-- 图片懒加载（原生HTML实现） -->

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"

data-src="/images/cover.jpg"

alt="文章配图"

class="lazyload" />

<script>

// IntersectionObserver实现懒加载

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const img = entry.target;

img.src = img.dataset.src;

observer.unobserve(img);

}

});

});

document.querySelectorAll('.lazyload').forEach(img => observer.observe(img));

</script>

第三板斧，PHP OPcache。如果用的是PHP程序（WordPress、织梦等），开OPcache能缓存编译后的字节码，减少PHP重复编译的开销。

# PHP OPcache配置（php.ini）

opcache.enable=1

opcache.memory_consumption=128

opcache.interned_strings_buffer=8

opcache.max_accelerated_files=4000

opcache.revalidate_freq=60

opcache.fast_shutdown=1

另外，大图片用WebP格式代替JPG，体积能小30%到50%。服务器开HTTP/2，多路复用连接，加载多个文件更快。这两个也很重要。