如何优化加载首屏可见内容?

SinoClick发表于:2022年09月05日 19:56:20更新于:2023年11月07日 18:54:40

概述

如果数据量超过了初始拥塞窗口,则数据需在服务器和用户浏览器之间进行额外往返。对高延迟网络的用户来说,其访问页面的速度加载会显着延迟。

解决方案

为了使页面加载更快,请限制呈现在页面首屏的内容数据(HTML 标记、图像、CSS、JavaScript)大小。

方法一:构建优先加载首屏内容的HTML

首先加载页面的主要内容。结构化您的页面,以便在服务器的初始响应时,优先发送呈现页面关键内容的数据,并推迟发送其余部分的数据。因此必须将 CSS 拆分为两部分:内联部分(用来设置内容中ATF部分的样式),以及可以延迟的部分。

可以考虑以下重组网页以加快加载速度的示例:

如果您的 HTML 在加载主要内容之前加载第三方小部件,请更改顺序以首先加载主要内容。

如果您的网站使用带有导航侧边栏和文章的两栏设计,但您的网页优先加载了侧边栏,请考虑改为先加载文章。

方法二:减少使用数量

如果您的网站为了能够在多种设备上正常运行,而经过重新设计,那么为了能够优先加载关键内容,请使用以下技术来减少呈现页面所需的数据量:

缩小资源:可以通过删除不必要的空格和注释来缩小 HTML、CSS 和 JavaScript。通过使用重命名资源中的变量名的工具,可以进一步优化。

尽可能考虑使用 CSS 而不是图像。

启用压缩:所有现代浏览器都支持并自动协商gzip所有 HTTP 请求的压缩。启用gzip压缩可以将传输响应的大小最多减少 90%,这可以显着减少下载资源的时间,减少客户端的数据使用量,并缩短首次呈现页面的时间。


专家服务

shopify用户可进入我们的网站诊断检测结果页面,点击“专家服务”,

限时1元购买我们的专家服务,获取技术专家的1对1配置服务!