如何加快使用 HivePress 构建的目录或市场网站
已发表: 2021-04-06如今,网站加载速度和整体性能对于良好的用户体验和搜索引擎排名至关重要。 最近,谷歌宣布将开始衡量网站的核心 Web Vitals,例如视觉稳定性分数和页面加载时间,以确定它们是否有资格获得排名信号提升。 此外,加载时间较长的页面往往具有较高的跳出率和较低的平均页面停留时间。
在本教程中,我们将解释如何通过设置缓存、优化样式和脚本以及优化媒体内容来提升您网站的性能。 我们将使用 LiteSpeed Cache 插件,这是一个多合一的网站加速解决方案,具有大量工具和功能,可让您的网站快速运行。
出于测试目的,我们将使用由 HivePress 和一些扩展以及其默认的 ListingHive 主题构建的 WordPress 目录网站。 但是,如果您的网站不是使用 HivePress 插件构建的,您可以对任何其他 WordPress 驱动的网站执行相同的步骤。
因此,让我们从 LiteSpeed Cache 安装开始。
安装 LiteSpeed 缓存
首先,您需要安装 LiteSpeed Cache 插件。 您可以通过转到插件 > 添加新部分直接从 WordPress 仪表板轻松完成此操作。 通过搜索栏找到它并继续安装。 安装完成后,只需单击“激活”按钮即可启用插件。
安装并激活后,您就可以开始优化您的网站了。 让我们先来看看基本的缓存设置。
缓存优化
为了调整基本缓存设置,请导航到LiteSpeed 缓存 > 缓存页面。 此页面中有许多不同的部分,但我们将仅介绍最重要的设置。
缓存设置
在这里,我们强烈建议对登录用户和 REST API 请求禁用缓存。 这是 HivePress 插件正常运行所必需的。 启用或禁用任何选项后,请不要忘记保存更改。

对象缓存
接下来,让我们启用对象缓存。 导航到对象部分并检查对象缓存是否在您的站点上可用。 连接测试应显示为“通过”。 如果是这样,您可以启用对象缓存,这将通过缓存重复的数据库查询来显着提高网站性能。
如果您的网站基于 OpenLiteSpeed 服务器或者您的托管服务提供商支持对象缓存,那么通过连接测试应该没有问题。

浏览器缓存
最后,导航到浏览器缓存部分并确保它已启用。 这将缓存用户浏览器中的所有静态内容,如样式、脚本和图像。

页面优化
下一步是导航到LiteSpeed Cache > Page Optimization部分,以优化样式、脚本和字体。
CSS 优化
让我们从CSS 设置部分开始。 在这里,我们建议打开CSS Minify和CSS Combine设置。
- CSS Minify – 如果启用此选项,所有多余的空白字符、换行符和其他不必要或多余的数据将从 CSS 文件中自动删除,而不会影响网站样式。
- CSS 合并– 通过启用此选项,所有单独的 CSS 文件将合并到一个 CSS 文件中。 这样,浏览器发送单个文件请求,而不是单独请求每个 CSS 文件,减少了 HTTP 请求的数量。

字体优化
如果您的网站使用 Google 字体,则有一些优化字体加载的选项。 在同一个CSS 设置部分,您可以向下滚动并将字体显示优化选项设置为交换,以便在自定义字体完全下载之前使用备用字体显示文本。


设置交换选项后,转到同一页面中的优化部分并打开异步加载 Google 字体选项,以便在页面呈现时在后台加载 Google 字体。
JS优化
现在让我们转到JS 设置部分来优化 JavaScript 文件。 在这里,我们建议遵循与 CSS 设置相同的步骤。 只需启用JS Minify和JS Combine选项,JS 文件也将被缩小并合并到一个文件中。
还有一个Load JS Deferred选项可以真正发挥作用。 启用此设置后,脚本将在后台加载,同时浏览器呈现页面布局和样式。 脚本通常比 HTML“重”,因此初始页面渲染不需要的脚本的加载和执行可能会延迟并稍后加载。 它允许访问者几乎立即使用该网站。
选中此选项后,请确保网站前端没有损坏,因为某些脚本可能需要在页面呈现之前加载。

媒体优化
最后,您需要优化您的媒体内容。 由于图像通常占网页内容大小的一半左右,将所有图像转换为 WebP 格式(平均比其他格式小 30%)可以显着提高页面加载速度。
在LiteSpeed 缓存 > 图像优化 > 设置部分,您可以通过启用创建 WebP 版本和图像 WebP 替换设置将您的网站图像转换为 WebP 格式。
检查这些选项后,导航到图像优化摘要部分以获取域密钥并通过单击“发送优化请求”按钮优化图像,直到图像优化分数达到 100%。

此外,如果您的网站上有任何嵌入内容(例如,YouTube 视频、Instagram 帖子或推文),最好仅在用户向下滚动到嵌入内容时加载,而不是在初始页面呈现期间加载。 它将使第一页渲染得更快并减少浏览器内存使用。
导航到LiteSpeed 缓存 > 页面优化 >媒体设置部分并启用延迟加载 iframe选项。

包起来
以下是我们按照本教程中的步骤优化网站性能后,在移动和桌面设备上的 Google PageSpeed 结果的屏幕截图。

而已! 如果您使用 HivePress (或任何其他基于 WordPress 的解决方案)构建目录或市场网站,您可以按照相同的步骤设置缓存、优化样式、脚本和字体,以及图像或嵌入等媒体内容。 因此,您将在 Google PageSpeed 上获得高分(从而提高您的 SEO 排名)并改善您网站的整体用户体验。
此外,请随时查看以下文章:
- 最好的 WordPress 目录插件
- 流行的 WordPress 目录主题
- 创建 WordPress 列表网站时的错误