性能

为您的 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 运行所需的条件

7.1+

WordPress

Canvas 基于区块编辑器构建,因此需要支持站点编辑器的 WordPress。版本需为 7.1 或更高。

7.4+

PHP

PHP 7.4 或更高版本。使用最新的 PHP 版本是大多数网站成本最低、见效最快的提速方式。

7.1

最高测试版本

Canvas 已针对 WordPress 7.1 进行测试,每个 WordPress 版本发布后都会随之推出更新。

常见问题

关于性能

包括我们被问得最多的那一项,这也是本页没有评分的原因。

还需要缓存插件吗?

很可能会,这是实话。Canvas 负责主题和 WordPress 所负责的部分:页面加载哪些资源、字体和图片如何运行,以及数据库需要做多少工作。页面缓存、对象缓存和边缘分发由您的主机或缓存插件负责。它们是不同的任务,因此同时使用两者是常见做法。

开启这些功能会影响我的网站吗?

每个开关都可以撤销,其中最可能与其他插件冲突的开关默认关闭。每个开关都会说明其作用,以及何时无需改动;真正有风险的设置会在面板中明确提示。请逐个开启,并在每次开启后刷新前台页面。

我是否必须为每个区块配置资源加载方式?

不需要,无需查找或启用任何设置。这就是区块库的工作方式。每个区块声明其所需的 CSS 和 JavaScript,页面只加载实际渲染内容所需资源的合集。

演示站点交付时是否已完成优化?

全站导入演示站点时会采用该演示的主题选项,其中包括性能开关,因此演示站点会以构建和检验时所用的设置启动。之后您可以随时更改其中任何一项。

为什么本页面不公布速度评分?

由于我们自己的硬件上进行的模拟测试得分,无法反映您的主机、插件、图片或访问者的情况,因此我们公布的是每项优化的具体作用,方便您开启these优化并在自己的基础设施上测量网站性能。

一个快速且仍可编辑的网站

所有套餐均包含相同的区块库、相同的 35 项性能优化以及相同的按需加载资源功能。性能方面不设分级。