打開一個栏目頁,正文只有几百字,但加上头图、配图、产品大图和一個视频,頁面体积轻松就上到几兆。图片和视频通常是頁面上最重的部分,也是最容易被忽略的部分:文件直接上传、原图不压缩、文件名是相机導出的编号、alt 空着、首屏大图還挂着懒加载。這些問题不會让站点立刻出故障,但會一层层拖慢加载、影响可讀性,也让蜘蛛在有限的抓取時間里多做無用功。
為什么把媒体资源單獨拎出来查
頁面模板、栏目结构、正文内容都有對應的自查項,媒体资源却常常散落在每個人的习惯里。編輯习惯用某個工具压缩,运营习惯從素材库直接拖图,開發习惯给所有图片统一加懒加载。三套习惯各自合理,叠在一起就可能出現:同一張图在列表頁被裁成三種尺寸、同一段视频在不同栏目重复上传、图片地址里混着中文和空格。抽出半小时集中检查一遍,比事後一張張替換省事得多。
体积與格式:先让文件變小
- 控制尺寸:按實际顯示宽度出图,不要用 2000 像素的原图去填 600 像素的容器,再靠 CSS 缩放。
- 選對格式:照片類内容優先考虑 WebP、AVIF 這類压缩率更好的格式,图标和纯色块用 SVG;需要兼容舊环境时保留原格式作為後备。
- 批量压缩:在發布流程里加一步压缩,而不是靠個人自觉。压缩後肉眼對比一次,確認锐度還能接受。
- 视频能外鏈就外鏈:自托管视频對带宽和服務器压力都不小,非必要不放在自己服務器上。
文件名與路径:地址要能讀、能维護
媒体地址同样属于 URL 的一部分,改起来成本不低。上传前把文件名改成能說明内容的英文短词,用连字符分隔,去掉空格、括号和中文。图片按栏目或用途分目錄存放,比如 /uploads/product/ 這样的结构,比上千張图全堆在一個目錄里更好维護。文件名一旦發布就尽量別改,改了就要记得處理舊地址的跳轉。
alt 與周邊文字:让图片有上下文
alt 的作用是描述图片内容,不是塞關鍵詞。寫清楚這張图在表達什么,装饰性图片留空即可。图片旁邊的正文、图注、标题會给它提供上下文,比在 alt 里堆词有效得多。检查时可以抽几個栏目頁,把图片遮起来看正文是否還讀得通。
懒加载:別把首屏大图也拖到最後
懒加载對長列表頁很友好,但首屏可见的那張主图如果也懒加载,用戶和蜘蛛看到的可能是一块空白。检查方式是關掉缓存打開頁面,看首屏图片是否立刻請求。另外,懒加载依赖 JavaScript 时,要確認图片地址最终會出現在 HTML 里,而不是只存在于脚本變量中。
图片與视频的抓取入口
如果站点有大量图片,可以在站点地图里补充图片地址,方便蜘蛛發現。视频頁建议给一個獨立的詳情頁,配上标题、简介和封面图,而不是把视频埋在某個列表里。检查时確認這些地址返回正常狀態碼,没有被 robots.txt 意外挡掉。
一份可以照着走的自查清單
- 抽查十個栏目頁,记錄頁面總体积和最大的三張图。
- 核對图片是否按顯示尺寸輸出,格式是否已压缩。
- 检查文件名與目錄,是否還有空格、中文和随机编号。
- 逐張確認 alt 是否描述了内容,装饰图是否留空。
- 關閉缓存重新加载,確認首屏图片不经過懒加载。
- 確認图片地址在 HTML 源碼中可见,而非脚本動態拼接。
- 检查图片站点地图和视频詳情頁,地址返回是否正常。
媒体资源自查不需要一次做完美,先把最大、最常被訪問的那批頁面理顺,再按栏目逐步铺開,效果會比一次性全站返工更稳。