首頁主視覺在手機上隱形好幾秒
- 現象
- 進場動畫從透明開始,又設定成動畫開始前先維持起始狀態;手機主執行緒忙碌時,動畫拖到很晚才啟動,主視覺就一直是透明的——當時行動版 PageSpeed Insights 量到 4.7 秒,最大內容繪製落在動畫啟動那一格。
- 修法
- 進場動畫只保留位移、不再改透明度;元素排版完成就能畫出來,位移照樣在第一個動畫影格播放。
- 自己驗證
- 在 DevTools 的 Performance 面板開啟 CPU 4× 降速,錄一次首頁載入:主標題在第一次繪製就可見,而不是等動畫播完才出現。 開作品試試 →