为您的 WordPress 网站提供 35 项性能优化
使用 Canvas 构建的页面只会下载其所渲染区块的 CSS 和 JavaScript,不会加载其他内容。此外还提供 35 项优化,每项都可通过开关进行控制,默认设置保守,并附有清晰的功能说明。
更新于
按区块加载资源
大多数主题只附带一个大型样式表和一个大型脚本,因此每个页面都要为主题中的每项功能承担加载成本。Canvas 将其 314 个区块各自所需的 CSS 与 JavaScript 对应起来,然后加载页面实际渲染内容所需资源的并集。
- 定价页面从不加载滑块脚本
- 没有表单的页面永远不会加载表单处理程序
- 编辑器加载区块样式的方式也相同
- 无需配置,也无法被意外关闭
明确声明,而非猜测
每个区块声明自己的资源。资源映射保存在区块内,因此不存在需要有人记得更新的集中列表。
兼容核心区块
核心区块和第三方区块保留各自的加载行为。Canvas 不会接管它们的资源,也不会与 WordPress 争抢这些资源。
模板同样计入
页眉、页脚、页面标题和滑块同样是区块,因此仅使用简单页眉的页面不会加载超级菜单代码。
无需购买
按条件加载并非高级功能或附加组件。它是该库在所有套餐中,以及许可证过期后都采用的工作方式。
按影响对象分组的 35 项优化
没有什么神秘之处,也没有任何隐藏的功能。每一项都会对 WordPress 发送的页面做一件具体、可验证的事。
加载 7
让 CSS 和 JavaScript 不再阻塞首次渲染,并提前开始加载下一页。
- 异步加载非关键样式表
- 延迟执行非关键 JavaScript
- 延迟 JavaScript,直至首次交互
- 预加载首屏可见区域中最大的图片
- 为页面将使用的来源预先建立连接
- 为第三方主机启用 DNS 预获取
- 预判式加载,在点击前即提前获取下一页
字体 3
在网页字体仍在加载时,文本依然清晰可读;而 Google 字体根本无需发起第三方请求。
- Add font-display swap to your web fonts
- 预加载首屏所需的字体
- 从自有服务器提供 Google 字体
媒体 6
图片是大多数页面中占用空间最大的内容,也是最容易出错的地方。
- 对首屏以下的图片进行延迟加载
- 对 iframe 和嵌入内容进行懒加载
- 设置 WordPress 生成的 JPEG 质量
- 限制上传图片的最大宽度
- 控制 WordPress 生成的响应式图片集
- 控制是否生成哪些图片尺寸
清理 8
WordPress 内置了许多功能:每个网站都要为其付出代价,却很少有网站真正使用。
- 从静态资源中移除查询字符串
- 禁用表情符号脚本和样式
- 禁用 oEmbed 发现功能和嵌入脚本
- 在前端禁用 Dashicons
- 禁用 XML-RPC
- 禁用 RSS 订阅源
- Remove jQuery Migrate
- 禁用自我引用通告
数据库 5
网站变慢的后台因素:修订版本、自动保存,以及从不停止的心跳请求。
- 限制文章保留的修订版本数量
- 设置自动保存间隔
- 限制频率或禁用后台心跳
- 清理数据库中的修订版本、瞬态数据和垃圾评论
- 限制仅已登录用户访问 REST API
WooCommerce 5
商店会在网站的每个页面上加载其脚本,包括那些不销售任何商品的页面。
- 在无商店内容的页面上移除 WooCommerce JavaScript
- 关闭订单归因追踪
- 阻止 cart fragments 脚本在每个页面上轮询
- 在非账户页面不再加载密码强度库
- 在结账页面之外移除内置的 Select2 库
内容分发网络重写 1
将样式表、脚本、图片和字体指向您已付费使用的内容分发网络,在页面渲染时改写其地址即可。Canvas 不提供内容分发网络,也不会通过我们的服务器转发您的流量。
共 35 个开关,其中 WooCommerce 的五个开关仅在 WooCommerce 启用时出现。关于商店集成的更多说明。
每一项都是开关,默认设置相当保守
Canvas 会自动开启对任何网站都安全的选项,其余选项交由您自行决定,并在控件旁边写明原因。通常不明智的那一项设置会在面板中直接说明,即您做决定的当下就能看到。






SEO 与无障碍基础
一个加载迅速却无法被阅读、抓取或用键盘操作的页面,算不上完成。所有这些功能都内置于主题本身,每个套餐均包含,没有任何功能需要升级后才能使用。
来自您内容的元数据
标题、描述、社交卡片、规范网址、robots 规则和站点地图,均根据页面渲染结果自动生成。您的内容无需另行维护第二份副本。
16 种结构化数据类型
Organization, WebSite, WebPage, Person, breadcrumbs, Product, Brand, Offer, Review and rating, address, geo coordinates, opening hours and site search, emitted where they apply.
语义化地标
页眉、导航、主要内容和页脚等地标区域,指向正文的跳转链接,按顺序排列的标题,以及所有可聚焦元素上清晰可见的焦点状态。
键盘导航菜单
菜单、超级菜单、侧边面板和模态框均可通过键盘打开、移动和关闭,且动效会遵循访客的“减少动态效果”设置。
无障碍功能、安全功能和数据导出从来不属于高级功能。即使许可证已过期,它们仍然可用,因为网站无法正常使用属于支持问题,而不应是许可证决策。
我们的验证方法
关于速度和无障碍访问的宣称很容易提出,也很容易核实。我们会核实自己的说法,下面说明具体方法。
页面会在真实浏览器中与设计稿进行对比
每个演示页面都会在浏览器中渲染,并与其所依据的设计稿进行对比,测量文档高度、区段宽度、计算后的间距,以及由 JavaScript 驱动的内容。这些内容仅在脚本运行后测量,绝不在首次绘制时测量。
本网站会在三种屏幕宽度下进行检测
本站每个页面都已通过 axe-core 按 WCAG 2.1 A 和 AA 级标准检测,测试视口宽度为 1440、1024 和 390 像素,并辅以 axe 未涵盖的检查:仅有一个 h1,标题层级从不跳级,包含四个地标区域,跳转链接可用,无水平溢出,无小于 12 像素的文字,链接可作为文本被识别,且触控目标至少为 24 像素。
Canvas 运行所需的条件
WordPress
Canvas 基于区块编辑器构建,因此需要支持站点编辑器的 WordPress。版本需为 7.1 或更高。
PHP
PHP 7.4 或更高版本。使用最新的 PHP 版本是大多数网站成本最低、见效最快的提速方式。
最高测试版本
Canvas 已针对 WordPress 7.1 进行测试,每个 WordPress 版本发布后都会随之推出更新。
关于性能
包括我们被问得最多的那一项,这也是本页没有评分的原因。
还需要缓存插件吗?
很可能会,这是实话。Canvas 负责主题和 WordPress 所负责的部分:页面加载哪些资源、字体和图片如何运行,以及数据库需要做多少工作。页面缓存、对象缓存和边缘分发由您的主机或缓存插件负责。它们是不同的任务,因此同时使用两者是常见做法。
开启这些功能会影响我的网站吗?
每个开关都可以撤销,其中最可能与其他插件冲突的开关默认关闭。每个开关都会说明其作用,以及何时无需改动;真正有风险的设置会在面板中明确提示。请逐个开启,并在每次开启后刷新前台页面。
我是否必须为每个区块配置资源加载方式?
不需要,无需查找或启用任何设置。这就是区块库的工作方式。每个区块声明其所需的 CSS 和 JavaScript,页面只加载实际渲染内容所需资源的合集。
演示站点交付时是否已完成优化?
全站导入演示站点时会采用该演示的主题选项,其中包括性能开关,因此演示站点会以构建和检验时所用的设置启动。之后您可以随时更改其中任何一项。
为什么本页面不公布速度评分?
由于我们自己的硬件上进行的模拟测试得分,无法反映您的主机、插件、图片或访问者的情况,因此我们公布的是每项优化的具体作用,方便您开启these优化并在自己的基础设施上测量网站性能。
