慢,通常不是伺服器的問題,是第一屏在等東西。

兩則真實修正,證據是你可以自己做的檢查。下面的量測由你的瀏覽器在這一頁即時讀出,不是預先寫好的數字。

這一頁的數字,是你的瀏覽器剛量的。

量的是你正在看的這一頁。每次重新整理都可能得到不同的數字——這正是重點:你可以自己重跑,不必只相信我們寫下的結果。

最大內容繪製 LCP
量測中…
首次內容繪製 FCP
量測中…
累計版面位移 CLS
量測中…
第 0 片是否預先載入
量測中…
中文字型切片

量測中…

兩個地方,各修一次。

每則只留三行:現象、修法,以及你可以自己驗證的方法。

01hao-code 首頁

首頁主視覺在手機上隱形好幾秒

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

02hao-code 首頁與導覽

中文字到齊前,首屏標題會再重畫一次

現象
中文字型依使用頻率切成多個檔案;首屏標題與導覽有 17 個字被排進較晚下載的切片,慢速網路下最晚約 4.6 秒才到,字到齊時整段標題重畫,最大內容繪製跟著延後。
修法
產生字型切片時,先把首屏會用到的每一個字排進最先下載、而且預先載入的第 0 片,其餘再依頻率排序;總字數不變。
自己驗證
DevTools 的 Network 面板篩選 noto-slice,網路節流選 Slow 4G 重新整理首頁:第 0 片最先開始下載(由預先載入觸發),首屏標題不會在後續切片到達時換字。也可以直接看本頁上方的即時量測表。 開作品試試 →

你的網站會怎麼處理。

三步,對應「RWD 與網站修正」本來就承諾的範圍:先重現、再逐項處理、最後留下驗證紀錄。伺服器調校、CDN 與整站重構不在這項服務內,另行評估。

  1. 先量,不先改

    在你回報的裝置與瀏覽器條件下,先找出最大內容元素是誰、它在等什麼——圖片、字型、腳本或動畫。範圍確認之前不動程式。

  2. 一次改一個原因

    只處理剛剛找到的那一個原因,改完在同一個條件下重量一次。修完會回頭確認原本正常的地方沒有被改壞。

  3. 把量測步驟寫進交付紀錄

    記錄用哪個裝置、哪個網路條件、看哪一個數字,之後改版可以重跑同一套檢查,不必重新猜。

手上有慢下來的頁面嗎?

把網址、慢的頁面、在什麼裝置與網路下慢告訴我們,先量測、再一起界定範圍。

開始討論專案

先提供這些,討論會快很多

  • 網站或系統要解決什麼問題,給誰用
  • 預計要有哪些內容或功能,現有素材到哪個程度
  • 一到兩個參考網站,以及你喜歡或不喜歡的地方
  • 希望上線的時間,以及預算大概的區間