WP Rocket 教程:配置和加速 WordPress

hegengfang666@gmail.com

Updated on:

wprocket

在本WP Rocket 教程中,我们将结束配置 WP Rocket 插件并加速 WordPress 网站的方法。WP Rocket 是一款适用于 WordPress 的高级缓存插件,有助于提高网站的整体性能。

随着网页核心要素越来越重要,速度已经成为排名的因素之一,你的网站需要足够快才能在搜索引擎结果页面 (SERP) 中获得排名。

此外,在本教程中,您将了解有关

  1. WP Rocket 概述
  2. 新用户的配置。
  3. 关键 CSS、压缩和数据库
  4. 延迟加载图像和 iframe
  5. 替代插件列表

什么是 WP Rocket?

WP Rocket 是一款 市面上最流行的WordPress 缓存插件之一,可以提高网站速度,开箱即用,无需任何技术即可安装和配置。

速度为何如此重要?

拥有一个快速的网站非常重要,主要有两个原因:

  • 它可以让你的网站在 Google 等搜索引擎上获得更好的排名。搜索引擎希望将最好、最快的网站显示在搜索结果的顶部。速度慢的网站排名往往较低。
  • 它为你的访客提供更好的体验。人们不喜欢等待很长时间来加载网页。如果你的网站速度很慢,访客很可能会离开并转到其他地方。

WP Rocket 教程 – 设置


大多数人都知道 WP Rocket 是一款加速 WordPress 网站的高级工具。在本 WP Rocket 教程中,我们将尝试涵盖所有可能的设置,以满足网页核心要素的要求。


此外,我已经使用 WP Rocket Caching 插件几年了,它对我的​​网站速度提升有很大的帮助。

让我们探索一下这个强大的插件里面有什么特异功能。

1.仪表板

WP Rocket 仪表板部分
WP Rocket 仪表板部分


在仪表板部分,你可以看到许可证类型和到期日期。在右侧边栏,你可以看到这些快速选项。

  • 查看你的许可证信息和到期日期。
  • 利用快速选项,如清除缓存、清除使用的 CSS。


删除所有缓存文件:如果你想清除缓存,那么你可以使用此选项。

删除使用的 CSS 缓存:使用此选项可以清除使用的 CSS。

2.缓存


缓存 – WP Rocket 教程及缓存设置


移动缓存:启用移动缓存以启用移动设备的缓存。

仅当你对移动版本使用不同的主题时,才为移动设备启用单独的缓存文件,但一般情况下你不需要启用它,因为当今大多数主题都是自适应的。

用户缓存:当且仅当你拥有用户特定或受限的内容时才启用用户缓存。

缓存寿命:缓存的寿命将在特定时间段后删除。时间段可以以小时为单位设置,此处 0 表示缓存保留无限时间。

3.文件优化

WP Rocket 文件优化部分
WP Rocket 文件优化部分


缩小 CSS 文件:删除空格和注释以减小 CSS 文件的大小。

优化 CSS 样式文件:生成关键路径 CSS 以加快初始渲染速度,并异步加载剩余 CSS。(启用它)

压缩 JavaScript 文件:删除空格和注释以减小 JS 文件的大小。(启用)

合并 JavaScript 文件:首先启用 Minify JS 选项,然后 WP Rocket 将根据与延迟 JavaScript 执行选项的兼容性启用或禁用。

延迟加载 JavaScript:延迟加载 JavaScript 有助于消除网站上阻止渲染的 JS,并可以改善加载时间以及修复 Google Page Speed Insights 中的问题。

延迟 JavaScript 执行:WP Rocket 的最新版本具有延迟 JavaScript 执行的功能。如果你想延迟 JavaScript 的时间段直到用户点击交互,这是最好的功能之一。在这个选项中,你可以延迟 AdSense 脚本、Facebook Pixel 脚本、wpdiscuz、font awesome 等。

一定要合理地使用它,基本上,在延迟 Google AdSense 脚本的同时,它可能会影响你的收入。

4.媒体

延迟加载 WP-Rocket 部分
延迟加载 WP-Rocket 部分


延迟加载:基本上,此处的延迟加载选项有助于在用户即将进入或在视口时缩短加载时间。启用延迟加载图像、CSS 背景图像,并启用 iframe 和视频以用缩略图替换视频。


图像尺寸:通过启用添加缺失的图像尺寸来修复图像元素没有明确的宽度和高度问题。

5.预加载


预加载


预加载缓存:预加载会从站点地图中的链接生成缓存。如果你有很多页面,请禁用此选项。

预加载链接WP Rocket 的最佳功能之一是链接预加载,当用户将鼠标悬停在链接上时,链接预加载会通过下载页面来加快页面速度。

预取 DNS 请求:通过预取 DNS 更快地加载外部站点,在这里你可以预取 Jetpack、buysellads、gravatar、Disqus、font-awesome、Blogspot 等等……

预加载字体:预加载 CSS 文件中指定的字体。OTF、TTF、SVG、WOFF 和 WOFF2 是 WP Rocket 支持的字体扩展。字体必须本地托管或在 CDN 中指定。

6.高级规则

高级规则
高级规则


永不缓存 URL:如果你使用自定义登录、购物车、客户、结帐页面等,则使用此选项排除不需要缓存的 URL。

永不缓存 Cookies:每个链接插入一个永远不会缓存的 Cookie。

永不缓存用户代理:用户代理通常是指User-Agent, 是用户访问网站时网络浏览器向网站服务器发送的一串文本,包含有关用户的浏览器、操作系统、设备类型以及其他可以帮助网站服务器优化内容的详细信息以及用户特定设备和浏览器的功能。我们应该排除那些永远不应缓存的用户代理。

始终清除 URL:指定在发布、编辑或更新你的内容或网站时应始终清除的 URL。

缓存查询字符串:此高级设置有助于缓存查询字符串。

7.数据库

数据库
数据库


帖子清理:处理内容时,你可能会有帖子的旧版本,或者可能有自动草稿。清理它。
评论清理:清理垃圾评论或垃圾评论。
瞬态文件清理:瞬态文件基本上是临时文件。使用 WP Rocket 定期清理这些文件。
数据库清理:清理你的网站中可能包含无用数据表的数据库。
自动清理:安排数据库自动运行清理。

8.CDN

内容分发网络 (CDN)
内容分发网络 (CDN)


通过实施 CDN,你可以将内容从原始服务器复制到本地服务器,从而帮助提高你网站在全球范围内的速度。

在这里,WP Rocket 为其用户提供 RocketCDN,价格从每月 7.99 美元起,在我看来相当昂贵。

如果你正在寻找可在网站上设置的替代 CDN,那么 Rocket CDN 有很多替代方案,例如 Bunny CDN、Cloudflare 等。

9.心跳



减少或控制心跳有助于节省服务器资源,即有助于节省CPU使用率并节省带宽。

因此,在此处启用控制心跳选项并点击保存更改。

10.附加组件

附加组件
附加组件



在本 WP Rocket 教程部分中,我们将介绍附加组件部分。

如果你想修复 GTMetrix 中的杠杆浏览器缓存问题,那么一键 Rocket 插件有助于改善浏览器缓存。

Varnish: WP Rocket 可帮助自动清除 Varnish 缓存。请确保你的主机与 WP Rocke 兼容才能使用此功能。
WebP 兼容性:如果你以 webp 形式提供图像,请启用此选项。
Rocket Add-ons:如果你是 Cloudflare 和 Sucuri 用户,请尝试打开附加 Rocket Add-ons 功能。

通常,对于 Cloudflare 设置,首先,要将其集成到 WP Rocket,你需要你的 Cloudflare 电子邮件、全局 API 密钥和域。

对于 Sucuri,你只需要提供一个 API 密钥来同步 Sucuri Cache。

11.图像优化

图像优化
图像优化


WP Rocket 有自己的图像优化插件 Imagify,可以帮助压缩图像以加快网站速度。

我通常会在将图片上传到我的网站之前使用Squoosh、TinyPNG等在线工具对其进行优化。我还使用 Bunny Optimizer 将所有图片转换为 WebP 格式。

或者,为了进行优化,你可以使用Imagify。RocketCDN 最近与 Bunny CDN 合作,通过压缩图像和节省带宽来加速你的网站。

12.工具

工具
工具


在工具菜单下,你可以找到导出、导入、回滚设置等。

  • 导出设置:如果你想与他人分享你的 WP Rocket 设置,那么你只需导出设置即可。
  • 导入设置:基本上,当有人为你提供 WP Rocket 设置时,你可以将这些设置导入到你的网站。
  • 回滚:此功能可帮助你从当前版本回滚到以前的版本。
  • 启用 Google 字体优化:通过预加载基本字体和子集来优化 Google 字体以加快加载速度。
  • 更新包含和排除列表:管理哪些资源被预加载、预取或排除在优化之外。


13.教程

WP Rocket 教程部分
WP Rocket 教程部分


在最后的菜单部分,你可以找到有关 WP Rocket 插件的各种视频教程,例如网站的最佳设置、网站速度测量、文件优化、预加载、附加组件等。

总结:


在本WP Rocket 教程中,你学习了如何配置和设置付费的 WP Rocket WordPress 插件。

我们不应该过于重视测速分数,但网站应该足够快以容纳访问者并满足网页核心要素的要求。

请记住,专注于良好的用户体验,而不仅仅是获得完美的分数。

阅读完本文后,希望你会尝试使用 WP Rocket 来加速你的 WordPress 网站。

步骤 3:使用新元素部分添加块


现在,转到外观 > 元素 > 单击添加新元素 > 选择元素类型为块。添加标题并开始设计顶部栏。

步骤 4:在 GeneratePress 主题中设计顶部栏部分

  • 首先,添加一个容器块。
  • 在容器块内,添加一个水平和垂直间隙为 20 的两列网格
  • 现在,进入网格容器,在两个容器上添加 Generateblocks按钮,并删除颜色
  • 现在,在左侧添加一个电话号码,并在右侧添加一个图标和一个电子邮件,并使它们可点击。你可以在 iconmonstr 或任何其他网站上获取SVG 内联图标。
  • 最后一步也是最重要的一步是你需要调整布局 > 显示。对于桌面:将电话号码的显示设置为Flex并将内容对齐 flex-start ,将电子邮件地址的显示设置为Flex并将内容对齐 flex-end。对于移动设备:将电话号码和电子邮件的显示设置为Flex并将内容中心对齐

步骤 5:管理显示规则


转到“显示规则”并选择“位置”为“整个站点”

现在转到侧边栏上的Element选项卡。选择元素类型为HookHook 名称为before_header

步骤 6:点击发布按钮


最后,转到你的主页,并在你的网站顶部查看包含你的电话和电子邮件地址的顶栏。

总结:


通过遵循上面概述的步骤,你可以在 WordPress 网站的 GeneratePress 页眉顶部添加电话号码和电子邮件。

除此之外,你还可以在 Generateblocks 插件的帮助下在 GeneratePress 主题的顶部添加任何其他内容,如联盟营销文本和按钮、任何通知栏等。

发表评论

内容列表