外贸独立站，速度优化，常用的代码

这个独立站移动端打开速度要10秒，经过插入优化代码后，速度提高到3秒内。

以下是常用到的优化代码：

图片WebP 格式替代JPG/PNG：

<picture>

<source srcset="product.webp" type="image/webp">

<img src="product.jpg" alt="Product">

</picture>

启用图片懒加载：

<img> 标签加上 loading="lazy"

很多主题和插件会引入大量 CSS/JS 文件，合并压缩，启用Gzip：

gzip on;

gzip_types text/css application/javascript application/json;

gzip_min_length 1024;

启用浏览器缓存，浏览器直接从本地缓存读取资源，防止每次访问都重新加载：

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

expires 30d;

add_header Cache-Control "public";}

启用 对象缓存（如 Redis）：

define('WP_REDIS_HOST', '127.0.0.1');

启用 HTTP/2，提升多资源并发加载效率（Nginx 配置）：

server {

listen 443 ssl http2;

ssl_certificate /etc/ssl/cert.pem;

ssl_certificate_key /etc/ssl/key.pem;

...}

开启 Brotli 压缩：

brotli on;

brotli_comp_level 6;

brotli_types text/plain text/css application/javascript application/json image/svg+xml;

数据库调用数据异常，查询效率下降，在MySQL建立索引：

ALTER TABLE wp_posts ADD INDEX post_type_status_date (post_type, post_status, post_date);

Google Analytics、Facebook Pixel等第三方脚本过多，阻塞渲染。

启用异步加载：

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

启用延迟加载：

<script src="chat.js" defer></script>

嵌入的视频等大文件阻塞，启用大视频懒加载缩略图：

<iframe src="preview.jpg" data-XX/embed/xxx" loading="lazy"></iframe>