结论先行：首屏应先出文字再出图：关键文字随 HTML 直出，图片延后并预留尺寸，访客先读到"这家做什么"，页面也不会因等图而白屏。

首屏常被当海报来排，一张大图压在最前面。图没下完，文字也不出来，手机上的头三秒就这样过去了。

本文要点

• 首屏文字直出 HTML，不依赖脚本渲染出来；
• 首屏主图给固定宽高，避免加载完成后版面上跳；
• 首屏以外的图片与视频一律延后，不抢首屏带宽。

一、先文字的理由：文字才是被读和被搜的部分

访客在三秒内判断的是"这里有没有我要的东西"。判断依据是文字，不是画面质感，图片只负责让人愿意多看一眼。

搜索引擎与抓取工具读到的同样是文字。首屏文字直出，既快，也更容易被正确理解成"这家做什么"。

二、图片不是不要，是排在后面

字体同样算首屏资源。中文字体整包体积大，只取用到的字重，或先用系统字体兜底，比整包加载划算得多。

三、四个动作，改完能测出差别

• 把首屏大图换成压缩后的合适尺寸，别用原图直接上传；
• 给所有图片写宽高属性，减少加载完成后的跳动；
• 首屏以外的图片加延迟加载，视频先只放封面；
• 改完用手机在弱网下打开一次，看文字什么时候出现。

术语与定义

首屏

访客不滚动就能看到的区域，是判断"继续看还是返回"的关键窗口。

布局位移

图片或字体加载完成后页面元素突然跳动，多因未标注尺寸造成，会误触按钮。

常见问题

Q：首屏不放图会不会显得简陋？

A：不会。文字排清楚，配一张尺寸合适的图就够了。大图铺满的做法在手机上收益很低，还占带宽。

Q：延迟加载会影响图片被收录吗？

A：首屏主图不要延后，正文配图延后影响不大。图片能不能被收录，更取决于地址可访问与说明文字是否写清。

Q：改完多久能看出效果？

A：速度类改动当天就能测。用同一台手机、同一网络，在改前改后各打开一次，对比文字出现的时间。

延伸阅读

• 网站优化服务说明
• 企业网站建设服务
• 网站优化方法与操作

想让首屏先出文字，可致电 13913177687，或先看优化服务。