如何平衡快速的网页加载速度和丰富的内容

已发表: 2021-07-19

快速的页面加载时间和丰富的交互式内容都是使网站成功的关键，但在两者之间取得平衡可能具有挑战性。

页面加载时间对网站的成功极为重要，这已经不是什么秘密了。谷歌的搜索算法有利于快速加载时间，而且还有大量研究表明页面加载时间的小幅增加会对转换产生负面影响。 Hallam 数字营销经理 Tom Whiley 去年写了一篇关于如何提高页面加载速度的优秀博客文章。虽然我们的托管合作伙伴 WP Engine 已制作了有关页面加载速度的出色信息图。

网站还需要丰富的内容、图像和交互性以鼓励转化。这不可避免地导致页面更大，这自然会减慢页面加载时间。

对速度的需求与对丰富内容的需求之间的冲突可能会使设计项目陷入停顿。因此，找到满足这两个要求的平衡点至关重要。

在此博客中，我将与您分享一种方法，可帮助您平衡这两个相互矛盾的挑战。

将页面速度与其目的相关联

在网站开发到相当成熟的阶段之前，无法预测加载时间，因此最好采用迭代方法来衡量和提高速度。

关键的出发点是确定网站的 SEO 登陆页面及其丰富的内容页面。然后，您可以专注于尽可能减少 SEO 页面的页面大小和加载速度。

同样，丰富的登陆页面可以为用户交互提供更多空间。

这是一个可以应用的粗略过程：

确定我们将成为降低加载速度的目标的关键着陆页。
围绕低加载时间的最佳实践进行设计。
围绕低加载时间的最佳实践确定功能。
开发页面。
衡量并寻找节省加载时间的机会。
根据需要重复 4-5。

这仅涵盖了故事的第一部分。然后需要持续监控关键 SEO 页面的页面加载时间，以确保它们仍按预期执行，尤其是在使用允许任何人编辑页面的内容管理系统时。

因此，在启动网站后，可以遵循两个简单的步骤：

每月检查关键登陆关键页面，以确保它们仍然有效。
使用页面速度监控工具，该工具会在页面性能低于商定水平时触发。

优化负载速度的设计注意事项

网站的设计在确定优化页面加载时间的可能性方面起着关键作用。对于网页，大小确实很重要。目标是理想情况下将页面加载时间保持在 500k 以下，但肯定最多不超过 1MB。

以下是一些可最大限度减少加载时间的步骤：

尽可能减少在关键着陆页上使用图像。当图像和设计的微妙使用可以产生相同的效果时，使用图像来使页面看起来很丰富就太容易了。
在使用图像的地方，应该对其进行优化，同时确保质量不会出现不可接受的下降。
利用针对自然搜索进行了优化的精益登陆页面，并将任何丰富的内容保留在不针对自然搜索的更深层次的页面上。
避免跨多个模板使用大量独特、复杂的布局。 HTML 标记越简单，文件就越小。
避免依赖于大量 Javascript 库的复杂交互元素。看到一些东西在屏幕上移动可能看起来很酷，但这真的有必要吗？

实施过程中的技术考虑

最后，我们可以进入页面加载速度的一些更具技术性的方面，这些方面需要被视为托管选择的一部分：

尽可能消除对第三方脚本的依赖。这些会导致问题，因为您不仅依赖于在页面加载之前加载这些脚本，而且有时它们也处于高负载下并且加载速度比平时慢。这可能导致“块状”加载时间。
使用延迟加载技术来确保当用户滚动到视图中时加载没有出现在折叠上方的图像。
更好地利用响应式图像。浏览器处理响应式图像的方式取得了一些进展，这意味着我们不需要提供适用于所有视口的单个大图像，并且可以为特定分辨率提供更好的图像。
确保在页面加载后加载嵌入的视频，而不是作为页面加载的一部分。这意味着用户将看到视频的预览图像，然后在点击链接后看到实际的视频。
避免 301 重定向的大型 htaccess 文件，并将规则组合到批量类别重定向中，而不是单个页面到页面重定向中。
将 CDN 用于图像。这将需要衡量，因为如果站点的用户群特别本地化，CDN 可能会损害性能。
最小化 CSS 和 Javascript 文件。在大多数情况下，您应该已经这样做了，但还有更多机会减少关键页面上的某些文件。这是决定安装任何新插件的核心部分。
放弃对旧浏览器的支持。较旧的浏览器需要有条件地创建特定的 CSS 和 JS 文件并将其加载到站点中。如果我们可以完全删除这些，就少了一个要求。
尽量减少您网站上使用的插件数量。我们经常继承遭受插件膨胀的网站。使用 CMS 时这不是一个新问题，但仍然是一个大问题。
消除对非必要托管要求的任何依赖，例如电子邮件签名的图像托管
运行数据库优化查询。如果您的网站已经存在一段时间，则可以使用多种数据库技术来优化查询运行的时间。

总之，创建高度优化的站点是规范、设计和实施之间的平衡。对我来说，关键因素是尽可能将高度优化的 SEO 页面与其他页面区分开来，并尽可能专注于优化这些页面。

如果您在 Web 开发方面需要帮助，请随时与我们联系。