网站在移动端的表现对用户体验和搜索引擎排名皆很重要。可以组合利用多项策略来确保页面在移动设备上快速加载。
阅读本文后,您将能够:
复制文章链接
网络正在移动化。Statista 的数据显示,全球 51% 的网页浏览量来自于移动设备。在亚洲和非洲等一些地区,这个百分比还要更高,而且不管是哪个地区,每年都有稳步增长。
主流搜索引擎意识到了这一趋势,因而优先考虑移动端加载时间较短的站点。移动用户的带宽可能有限,但仍然希望快速找到信息。这些用户往往不够耐心,因此加载缓慢的网站具有较高的跳出率。(“跳出率”是仅浏览单个页面后即离开的网站访问者的百分比)。
Google 和其他网站速度权威机构认定,移动站点的最长加载时间应为三秒左右。三秒之后,用户留存率会急剧下降。搜索引擎将“惩罚”加载缓慢的站点,进一步降低它们在搜索结果中的排名,特别是面对移动用户时。
移动连接三秒加载限制不是非常宽容,但有一些切实可行的策略来缩短移动加载时间。
有诸多因素会影响移动性能,因此可以通过多种策略和最佳实践来缩短加载时间。
为确保加载时间更快,所有网站文件都应制作得尽可能小。图像通常是请求的文件中最大的,可以通过使用图像优化器或转换为轻量级图像格式(例如 SVG)来缩小图像。
也可以通过极简化来缩小 HTML、JavaScript 和 CSS 文件的大小。代码极简化意味着从代码中删除所有空白和注释,并以尽可能紧凑的方式进行重组。这会将文件大小减至最小。尽管会使代码几乎对人类不可读,但 Web 浏览器仍然可以正常执行代码。
除了创建更小的文件外,总体文件数量也应保持最少。加载网站时每多一个文件都意味着请求和响应变多,而这些往返都会延长加载时间。站点上若有多个 JavaScript 和 CSS 文件,则应将所有 JavaScript 代码合并为一个文件,CSS 同样如此。如果页面只需很少的 JavaScript 或 CSS,那么使用内联样式* 可以显著缩短加载时间。
*通常,Web 开发人员在不同的文件中编写 HTML、JavaScript 和 CSS 代码。使用称为“内联样式”的技巧,开发人员可以将 JavaScript 和/或 CSS 代码与 HTML 写在同一文件中。
通常,当用户访问网站时,用户的设备必须与 Web 服务器通信以获取网站文件。如果 Web 服务器位于旧金山,而用户位于伯克利(10 英里外),则速度应该很快。但是,如果用户在东京(5,000 英里外)呢?这意味着每个请求和响应都必须穿越数千英里,大幅加剧网站加载的延迟。
缓解此问题的常用方法是利用内容交付网络 (CDN)。全局 CDN 在网络边缘缓存内容。也就是说,CDN 拥有许多缓存服务器,遍布于世界各地的数据中心。任何接入互联网的人都不会离数据中心太远。这些数据中心服务器可以与源 Web 服务器通信以缓存网站数据,以便访问使用 CDN 的网站的用户可以从当地的数据中心获取网站文件。这可确保用户拥有快速的请求响应时间,无论他们身在何处。
API 调用是从外部资源获取数据的 HTTP 请求。例如,诸如 Rotten Tomatoes 之类的电影评论网站可能会对 Fandango 这样的票务服务进行 API 调用,以便浏览 Rotten Tomatoes 的用户可以查看当地的电影放映时间。虽然 API 调用有助于打造可靠的体验并减少多余的工作,但也会带来新的 HTTP 请求,而这会减慢加载时间。
可以缓存 API 调用,最大程度减少这些额外的 HTTP 请求。在上面的电影放映时间示例中,Rotten Tomatoes 每天只需获取一次洛杉矶电影放映时间。他们可以将站点配置为每天缓存一次这个 API 调用。这样,如果每天有 10,000 个洛杉矶用户访问 Rotten Tomatoes,只有第一个用户必须等待对 Fandango 的 API 调用。
在加载网页时,用户立即看到的通常只是冰山一角;他们必须向下滚动才能看到页面的其余部分。滚动之前出现在用户屏幕上的内容称为“首屏”内容。Web 开发人员在编写代码时,应采用首屏内容始终最先加载的方式。有一种技巧可以实现这个目标,称为延迟加载,它通过在用户向下滚动页面的同时动态加载非首屏内容来工作。
由于各种原因,一些网站会在页面加载时创建重定向。例如,改换过名称或或品牌的网站上通常使用 301 重定向。这种做法应尽可能避免,因为重定向会消耗宝贵的加载时间。
随着移动浏览渐成趋势,拥有高性能移动站点变得越来越重要。快速的移动站点将获得更高的参与度和转换率,其 SEO 也会加强。网站所有者应实施以上部分或全部策略,从而获得这些益处。