移动端

为什么一个有很多图片的页面在手机上加载更慢

同一个在办公室 Wi-Fi 上瞬间加载完成的页面,在移动网络上却可能爬得很慢——纯粹是因为图片的重量。

这是什么

这项检查关注一个页面加载了多少图片,并标记那些数量异常多的页面,因为每多一张图片,就是浏览器在页面完全加载完成之前,必须单独下载的又一个文件。这不是说图片本身不好——它们往往对页面的设计和内容至关重要——而是专门针对一次性加载大量图片所带来的累积效应。

图片数量多的实际影响,在移动端要比在桌面端明显得多,因为移动网络(即使是好的)通常比家庭或办公室的 Wi-Fi 或有线连接更慢、更不稳定。

为什么重要

每一张图片都会增加访客设备在页面完全可用之前必须下载的总数据量,而在移动数据连接上,这段下载时间可能会比同一页面在快速桌面连接上几乎瞬间加载完成时明显拉长。一个在手机上等待一个加载缓慢、图片繁重的页面的访客,比起一个更轻、能更快变得可用的页面,明显更有可能在它加载完成之前就放弃并离开。

这是一种情况:修复并不一定意味着要删除访客关心的内容——它更多的是关于这些图片是如何被交付的(它们的文件大小,以及它们是否全部一次性加载),而不是需要把它们全部砍掉。

如何解决

  1. 统计页面上立即加载的图片数量,并找出文件大小异常大的图片(浏览器的开发者工具可以为每张图片显示这一点)。
  2. 在上传之前,使用免费的图片压缩工具压缩大图片——这通常能在几乎不损失可见质量的情况下大幅缩小文件体积。
  3. 为页面下方(滚动才能看到的部分)出现的图片添加懒加载,这样它们只有在访客真正滚动到附近时才会加载,而不是在页面首次打开时就一次性全部加载。
  4. 大多数现代网站建设工具和 CMS 平台都支持懒加载,通过一个简单的开关,或者默认自动支持——在手动添加之前,先检查你的图片或性能设置。
  5. 修改之后重新测试页面的移动加载时间,最好是在实际的移动连接上,而不是快速的办公室 Wi-Fi 上。

看看你自己的网站是否也有这个问题

Launch Readiness 会在几秒内检测你的网站是否存在此问题以及其他约 50 个上线前的问题——免费,无需注册。

立即免费检测