一份来自Google官方研究（Google/SOASTA Research, 2017）指出，网站页面加载时间与跳出率存在着非常大的关联：
- 页面加载时间从 1秒 → 3秒，跳出率增加了 32%
- 从 1秒 → 5秒，跳出率增加了 90%
- 从 1秒 → 6秒，跳出率增加了 106%
- 从 1秒 → 10秒，跳出率高达 123%
因此，在网站正式上线之前，提升页面加载速度是我们首要做的优化。
1、Google Pagespeed Insights
Google PageSpeed Insights 是 Google 官方提供的一款免费网站性能测试工具，它会从页面加载速度、交互延迟、视觉稳定性等多个维度出发，给出一个整体的性能评分（Performance Score），并结合优化建议帮助站长提升网站体验。在 PSI 报告中，你将看到以下几项关键性能指标（组成 Performance 分数）：
- FCP（First Contentful Paint，首次内容绘制）
- LCP（Largest Contentful Paint，最大内容绘制）
- CLS（Cumulative Layout Shift，累计布局偏移）
- TBT（Total Blocking Time，总阻塞时间）
- Speed Index（速度指数）
这些指标共同决定了你网站的Performance 性能评分（0–100 分），是衡量用户加载体验的核心参考。
Google Pagespeed Insights的优点：
- 聚焦 Performance（性能体验）：针对页面加载速度和响应速度精准评分
- 结合了真实用户数据（CrUX）：评估你网站在真实环境下的表现
- 推荐优化措施较为直接：详细列出影响性能的每个资源和加载问题
- 对SEO有重要参考意义：Performance 分高，通常意味着更佳的用户体验与页面排名潜力
使用方法：
- 访问https://pagespeed.web.dev/
- 输入网址
- 点击Analyze
2、什么是FCP/LCP/TBT/CLS/SI？
FCP(First Contentful Paint)首次内容绘制
FCP是指用户点击页面后，浏览器首次渲染出内容（例如文字、图片、SVG等）所用的时间。用于反映页面是否很快就开始有东西显示。
| 移动端FCP时间 | 评级 |
|---|---|
| 0-1.8秒 | 绿色（快） |
| 1.8-3秒 | 黄色（中等） |
| 大于3秒 | 红色（慢） |
| 桌面端FCP时间 | 评级 |
|---|---|
| 0-0.9秒 | 绿色（快） |
| 0.9-1.6秒 | 黄色（中等） |
| 大于1.6秒 | 红色（慢） |
优化方式：
- 压缩并优先加载关键 CSS
- 使用较小尺寸图片和 WebP 格式
- 延迟加载第三方 JS 脚本
影响性能程度：10%
LCP（Largest Contentful Paint）最大内容绘制
LCP是指页面中最大的可见内容出现在屏幕上的时间，例如hero图（最醒目、最上方的那一张大图，通常出现在banner区域）或者大标题。
| 移动端LCP时间 | 评级 |
|---|---|
| 0-2.5秒 | 绿色（快） |
| 2.5-4秒 | 黄色（中等） |
| 大于4秒 | 红色（慢） |
| 桌面端LCP时间 | 评级 |
|---|---|
| 0-1.2秒 | 绿色（快） |
| 1.2-2.4秒 | 黄色（中等） |
| 大于2.4秒 | 红色（慢） |
优化方式：
- 使用 preload 提前加载大图或主标题字体
- 禁用懒加载首屏图像
- 减少 render-blocking 资源
- 图片尺寸适配移动端（避免加载过大）
影响性能程度：25%
TBT（Total Blocking Time）总阻塞时间
指从FCP开始到页面变得可交互之间，所有任务阻塞主线程的总时间，用于衡量JS运行是否阻塞了页面响应用户的速度。
| 移动端TBT时间 | 评级 |
|---|---|
| 0-200毫秒 | 绿色（快） |
| 200-600毫秒 | 黄色（中等） |
| 大于600毫秒 | 红色（慢） |
| 桌面端TBT时间 | 评级 |
|---|---|
| 0-150毫秒 | 绿色（快） |
| 150-350毫秒 | 黄色（中等） |
| 大于350毫秒 | 红色（慢） |
优化方式：
- 延迟执行 JS（Delay JS Execution）
- 拆分大文件、去掉无用 JS
- 减少第三方追踪脚本
影响性能程度：30%
CLS（Cumulative Layout Shift）累计布局偏移
CLS是指页面加载过程中内容“跳动”或“移动”程度的累积得分，用于衡量视觉稳定性，避免按钮或段落在加载时突然跳动。
| CLS评分 | 评级 |
|---|---|
| 0-0.1 | 绿色（优） |
| 0.1-0.25 | 黄色（需要改进） |
| 大于0.25 | 红色（差） |
优化方式：
- 为图片、视频等设置明确的 width 和 height
- 避免懒加载时的尺寸闪动
- 不插入广告或 iframe
影响性能程度：25%
SI（Speed Index）速度指数
SI是指页面在加载过程中可视内容逐步出现的速度，它不是看某个单点，而是从用户视觉角度衡量页面变得完整的流畅程度。
| 移动端SI时间 | 评级 |
|---|---|
| 0-3.4秒 | 绿色（快） |
| 3.4-5.8秒 | 黄色（中等） |
| 大于5.8秒 | 红色（慢） |
| 桌面端SI时间 | 评级 |
|---|---|
| 0-1.3秒 | 绿色（快） |
| 1.3-2.3秒 | 黄色（中等） |
| 大于2.3秒 | 红色（慢） |
优化方式：
- 优先加载首屏关键内容
- 延迟加载非关键资源
- 压缩与优化图片尺寸
影响性能程度：10%
3、Wordpress网站如何提升Performance评分？
（1）选择优秀的服务器环境（推荐 Hostinger + LiteSpeed）
网站的加载速度上限，首先取决于你的服务器基础设施。一个优秀的服务器不仅仅意味着“带宽充足”，还应关注如下几点：
- 是否配备 高性能存储（如 NVMe SSD）
- 是否支持 对象缓存（Redis 或 Memcached）
- 是否支持 HTTP/3 + QUIC
- 是否有良好的 与缓存插件的集成支持
推荐：Hostinger + LiteSpeed Web Server
如果你的服务器使用 LiteSpeed Web Server，可以搭配官方开发的 LiteSpeed Cache 插件，获得深度缓存优化。它支持：
- 页面级缓存（比普通插件更底层）
- 自动整合图片懒加载、延迟 JS、关键 CSS 等
- 与 QUIC.cloud CDN 完美配合
推荐使用 Hostinger 的中高阶方案，默认支持 LiteSpeed Server，并已内置 Redis、HTTP/3、Opcache 等加速特性，无需额外配置即可使用。
当然，如果你使用的是 Nginx 或 Apache，也可以选择 FlyingPress、WP Rocket 等优化插件。只是在集成深度与兼容性方面，LiteSpeed 搭配 LiteSpeed Cache 更胜一筹。
（2）精简插件
WordPress的插件库非常丰富，所以很容易诱导开发者每次想要增加功能，就习惯性的在插件库里面进行搜索并安装插件，在装了数十个插件完成网站开发之后，发现网站的性能难以提升，不论使用了多少优化手段（例如压缩图片、使用cdn、开启object cache等）都无法有效提升性能表现，主要是由于以下三个原因导致：
- 很多插件会自动在页面中插入自己的 CSS、JS、字体文件等（无论你是否真的使用它的功能），比如表单插件、社交分享、幻灯片等，可能让每个页面都多出几十 KB 的资源，这些资源会导致：渲染阻塞（Render-blocking），FCP、LCP、Speed Index 分数下降。
- 后台插件逻辑（如数据库查询、REST API请求）会加重php执行与内存使用，特别是性能监控、安全、防垃圾、自动翻译类插件，会降低服务器响应速度。
- 插件之间可能存在资源冲突或重复，例如两个插件加载同一类资源（如两个图标库、两个表单库）导致页面重复加载资源从而降低SI，抑或是CSS/JS冲突从而导致CLS（页面跳动）。
因此，如果想要优化WordPress网站的速度，精简插件这一步，是所有优化手段中的最容易实现、最具性价比的一步。
（3）压缩图片像素及文件尺寸
一定要严格控制上传图片的像素和文件大小，同时又需要兼顾清晰度。推荐使用画图软件、图片压缩软件或者Wordpress插件来压缩图片像素及文件尺寸。
图片像素建议：
- 网站banner图，推荐像素1600*800或者1600*900。
- 网站元素图，建议单边像素800-1000。
- 产品图，建议单边像素800-1000。
- logo，建议单边像素300左右。
- 网站favicon（小图标），建议单边像素50-100。
- 网站的一些svg图标，建议单边像素300左右。
（4）图片转格式
使用图片格式转换的软件，将jpg、jpeg、png格式转换为webp格式，此类格式图片在保持高画质的同时，体积比jpg、jpeg、png小25%-70%，因此意味着更快的加载速度。
建议使用既可以压缩图片像素同时又可以转换格式的软件，在本地完成压缩及格式转换，再上传至网站。
（5）控制图片在页面的尺寸
在上传图片至网页时，除了banner图片，其余图片都使用编辑器将像素设置为large或者medium large甚至medium，这可以确保不论该图片是多少像素，在页面上都按照我们设置的像素进行显示。例如，下图使用elementor pro编辑器，控制图片显示像素为large 1024 x 1024。
（6）首页 Banner 使用静态图像，避免 Slides 与视频
首页的首屏（Hero 区域）是决定 LCP（最大内容绘制）与 Speed Index 的关键区域。很多站长喜欢用轮播图（slides）、视频背景甚至动态画面作为首页 Banner，实际上这会大大拉低网站性能评分。
为什么 Slides 与视频不推荐：
- 轮播图（Carousel） 通常加载 2–5 张图像，会显著增加首屏图片总资源体积
- 视频背景 会引入大量 JS 控制逻辑和视频文件本身，严重阻塞首屏渲染
- 即使使用懒加载，首屏资源仍需优先加载，影响 LCP 和 FCP
优化建议：
- 使用一张尺寸适配、文件压缩良好的 静态 WebP 格式图片 作为首页 Banner 图
- 为该图设置Lazy Load Image Excludes避免懒加载，以提升浏览体验和LCP 分数
- 避免在首屏区域使用任何幻灯片插件、背景视频组件
通过静态 Banner 的替代方式，不仅提升 LCP，也能减少 JS 执行与样式偏移（CLS），让首页首屏更加稳定、快速。
（7）字体、图标本地化
手动下载字体文件，并上传至网站服务器，并禁用google font。例如，如果使用elementor pro编辑器，可以直接将字体文件上传至custom fonts。
手动下载各类svg格式的图标，控制好下载时的尺寸，直接上传至网站的媒体文件库并调用，而不是使用编辑器自带的图标库。
以上两种方式都可以减少对外部资源的加载，以此提升加载速度。
（8）对象缓存
对象缓存会把 WordPress 中数据库查询的结果缓存起来，下次访问时就能直接从内存中读取，避免重复执行数据库操作，提升网站响应速度。例如，WordPress 每次加载页面时会向数据库请求“文章内容、设置项、用户信息”等，启用对象缓存后，这些结果会被暂存在 Redis 或 Memcached 中，读取速度快很多。
如何操作？
首先确保网站使用的云服务器支持Redis或者Memcached，首选Redis。
打开云服务器的后台，例如hostinger，登录后台，并在Overview中，确保服务器已经开启Object cache，如下图所示：
随后登录Wordpress后台，安装Litespeed cache插件——点击Cache——点击Object——选择Enable redis，随后使用Query Monitor监测，确保Object cache已开启。
再以Siteground为例，登录服务器后台确保开启Memcached，随后在Wordpress安装Siteground开发的Speed Optimizer插件，开启Memcached即可。
假如是自己安装的面板，需要手动安装redis扩展。
（9）Opcache
WordPress的后端语言是php，Opcache是php层面的缓存器，它让 PHP 文件不重复解析，能提升加载效率。市面上很多服务器例如hostinger以及siteground在一键部署WordPress时都会默认开启，但如果是自己搭建的面板，需要手动安装opcache的扩展并启用，如下图所示：
（10）CDN
CDN（内容分发网络）会将网站的静态资源（如图片、CSS、JS 文件）复制到全球各地的节点服务器上，当用户访问网站时，会从离用户最近的节点加载这些资源，从而加快加载速度，尤其对海外访问提升明显。
操作方式：
- 很多主流的Wordpress服务器例如Hostinger和Siteground都提供免费CDN方案，可以直接在后台Performance选项里面启用。
- 可使用 Cloudflare 免费 CDN 方案，通过更换域名服务器（nameserver）至Cloudflare即可启用。
- 高级选项如 BunnyCDN、KeyCDN、Quic.Cloud（LiteSpeed 专属）也值得考虑。
- 对于 WooCommerce 或内容频繁更新的网站，可配置 CDN 缓存排除规则，避免缓存动态页面。
（11）图片懒加载
懒加载是指页面首次加载时只加载可视区域的图片，其他图片在用户滚动到相应位置时再加载。这样可以大幅减少首屏加载资源，加快首屏渲染速度，提升 FCP、LCP 和 Speed Index。
操作方式：
- WordPress 5.5+ 默认开启图片懒加载。
- 若使用 Elementor，可在编辑器设置中开启或关闭图片懒加载。
- 建议仅对非首屏图片开启懒加载，首屏 banner、hero 图不建议懒加载。
（12）页面缓存
页面缓存指将整个页面渲染后的 HTML 缓存到服务器内存中，用户再次访问时无需重新执行 PHP 和数据库查询，直接返回缓存内容，大幅提升响应速度。
操作方式：
- 推荐使用 WP Rocket、LiteSpeed Cache、FlyingPress 等插件开启页面缓存。
- 结合对象缓存使用效果最佳。
- 可设置排除某些页面（如购物车、用户中心）避免缓存错误。
（13）CSS文件优化
优化 CSS 文件可以减少渲染阻塞，加快页面绘制速度。
操作方式：
- 合并多个 CSS 文件，减少请求次数（不推荐过度合并，会影响懒加载和页面控制）
- 使用“延迟加载 CSS”功能（如 WP Rocket 的 Delay CSS）
- 移除未使用的 CSS：可通过 PurgeCSS 等工具或插件自动检测并删除冗余 CSS 样式
（14）JS文件优化
JavaScript 文件优化是提升 TBT 和 INP 的关键措施。
操作方式：
启用延迟执行 JavaScript（Delay JS Execution）：延迟非首屏 JS 的加载时间
启用“JS Defer”（延后执行），确保 JS 不阻塞 HTML 渲染
排除关键脚本（如 elementorFrontendConfig）防止交互失效
减少第三方脚本调用，例如热力图、广告、聊天插件等
（15）预加载缓存
预加载缓存功能可以在用户访问之前，提前将页面缓存生成好，当访问时无需等待，提升初次加载速度。
操作方式：
- 在 WP Rocket 或 LiteSpeed Cache 中开启“Preload”功能
- 提前加载字体、主图、首屏 JS（使用 preload 或 preconnect 标签）
- 可手动指定 sitemap.xml，系统会定期自动预缓存核心页面
网站性能优化是一场系统性工程，特别是对于使用 WordPress + Elementor 的网站来说，合理使用性能优化工具（如 WP Rocket、LiteSpeed Cache、Perfmatters 等），加上良好的图片资源管理和缓存策略，才能真正实现打开速度 1~2 秒以内的目标，从而提升用户体验和 SEO 表现。
