Categories


Tags


【白皮书4.0解读】页面加载速度的重要性

导语:2018年8月,百度搜索资源平台发布的《百度移动搜索落地页体验白皮书4.0》(简称《白皮书4.0》),为帮助大家更好地理解白皮书4.0,我们推出了《白皮书4.0专题解读》,将对大家感兴趣的点进行详细解读,敬请关注。

《白皮书4.0》中强调“页面的首屏内容应在1.5秒内加载完成”。为什么会提出页面的首屏内容应在1.5秒内加载完成呢?通过哪些方式可以加快加载速度呢?《百度移动搜索落地页体验白皮书4.0专题解读》之《页面加载速度的重要性》,将为你解答。

一、用户期待的速度体验

移动互联网时代,用户对于网页的打开速度要求越来越高。百度用户体验部研究表明,页面放弃率和页面的打开时间关系如图1所示。

图 1 页面放弃率和页面的打开时间关系

根据百度用户体验部的研究结果来看,普通用户期望且能够接受的页面加载时间在3秒以内。若页面的加载时间过慢,用户就会失去耐心而选择离开,这对用户和站长来说都是一大损失。

二、“闪电算法”的支持

为了能够保障用户体验,给予优秀站点更多面向用户的机会,“闪电算法”在2017年10月初上线。闪电算法的具体内容如下:

移动网页首屏在2秒之内完成打开的,在移动搜索下将获得提升页面评价优待,获得流量倾斜;同时,在移动搜索页面首屏加载非常慢(3秒及以上)的网页将会被打压。

首屏作为直面用户的第一屏,其重要性不言而喻。根据百度用户体验部的研究结果,《白皮书4.0》提出,首屏内容应在1.5秒内加载完成。

三、技术建议

广大站长优化页面首屏加载时间,优化的技术建议包括但不限于:

资源加载:

1.将同类型资源在服务器端压缩合并,减少网络请求次数和资源体积。

2.引用通用资源,充分利用浏览器缓存。

3.使用CDN加速,将用户的请求定向到最合适的缓存服务器上。

4.非首屏图片懒加载,将网络带宽留给首屏请求。

页面渲染:

1.将CSS样式写在头部样式表中,减少由CSS文件网络请求造成的渲染阻塞。

2.将JavaScript放到文档末尾,或使用async方式加载,避免JS执行阻塞渲染。

3.对非文字元素(如图片,视频)指定宽高,避免浏览器重排重绘。

四、结语

当然,整站的加载时长对用户的体验都有莫大的影响。提高全站的速度体验才是我们应该一起追求的目标。站点可以结合自身情况升级技术栈,也可以使用通用加速方案(如MIP、AMP)对网页进行综合加速。

来源:百度搜索资源平台 百度搜索学堂


Public @ 2009-07-22 16:19:38

移动站点流量异常排查官方文档-移动站点流量异常追查

移动站点流量异常追查主要涉及以下几个方面: 1. 网站流量监控:通过网站流量监控工具,了解网站的访问量、来源、停留时长等信息,找出流量异常的具体时间段和访问来源。 2. 站点可用性监控:通过站点可用性监控工具,了解网站的响应时间、错误率等信息,找出流量异常与站点可用性之间的关系。 3. 网站访问分析:通过网站分析工具,了解网站访问者的地区、设备、操作系统等信息,找出流量异常的具体访问者和访问

Public @ 2023-04-27 07:50:08

白皮书5.0解读—内容模块之间为何要设置合理间隔

在白皮书5.0中,将内容模块之间设置合理间隔的目的主要有以下几点: 1. 提高读者的阅读体验:如果将内容模块紧密排列在一起,读者在阅读时很容易出现视觉疲劳和难以区分不同模块的情况,而设置合理间隔可以使得读者在阅读时更加轻松,更加容易理解每个模块的内容。 2. 增强页面的可读性:合理的间隔可以让页面更加清晰、明了,让读者更容易看懂、理解内容。 3. 强调阅读重点:通过适当地设置内容模块之间的间

Public @ 2023-06-10 20:00:21

【白皮书4.0解读】图片交互如何做会更好?

导语:2018年8月,百度搜索资源平台发布的《百度移动搜索落地页体验白皮书4.0》中提到图片页资源标准:“详情页中主体内容包括图片的情况下,图片应能点击调起大图、缩小放大功能使用自如,手势支持顺滑,图集能自由切换。”对于这一标准,有哪些案例可以参考呢?对于基础的点击调起大图功能,应该如何实现呢?《百度移动搜索落地页体验白皮书4.0专题解读》之《图片交互如何做会更好?》,将为你解答这些疑问。一、为什

Public @ 2021-12-07 16:19:39

轻松实现移动端网站视频转码

为了方便用户在手机端的浏览,越来越多的pc端网站走上移动化之路,而手机端的访问,因为系统环境的不一样,可能会导致很多差异化的东西,特别是视频,pc端的视频如果直接在移动端访问,很多时候是访问不了的。如何改变pc端对应的移动端网页中访问视频的代码,使其支持移动端的观看。今天我们特别邀请到游迅网 SEO总监陈洲分享如何轻松实现移动端网站视频转码!下面以优酷视频为例进行说明,如何让网站pc端的优酷视频资

Public @ 2021-06-03 16:19:25

更多您感兴趣的搜索

0.513534s