推薦的 Web 效能時間：多長時間算太長？

載入目標

“一秒內”經常被吹捧為最佳載入時間，但這到底意味著什麼？一秒鐘應該被視為指示使用者已發起新內容請求並將載入的最大時間限制，例如瀏覽器顯示頁面標題和頁面背景顏色。

從請求中檢索的第一個資源通常是 HTML 文件，然後該文件會呼叫其他資源。正如 關鍵渲染路徑 描述中所述，在收到 HTML 文件時，瀏覽器會立即開始處理，並渲染接收到的內容，而不是等待其他資源載入。

是的，一秒鐘的載入時間是一個目標，但很少有網站能達到。期望不同。在公司網路上的“Hello World”預計會在幾毫秒內載入，但使用者在西伯利亞北部邊緣網路上使用五年前的裝置下載貓咪影片，可能會覺得 20 秒的下載速度很快。如果您等待三到四秒鐘而沒有向用戶傳達載入正在進行並顯示一些進度，那麼普通的網站將會失去潛在訪客，並且這些訪客將需要很長時間才能回來，如果他們會回來的話。

在最佳化效能時，請設定一個雄心勃勃的首次載入目標，例如在移動 3G 網路上 5 秒，在辦公室 T1 線路上 1.5 秒，併為後續頁面載入設定更具雄心勃勃的頁面載入目標，利用服務工作執行緒和快取。對於初始頁面載入、載入其他資源、響應使用者互動以及確保流暢動畫，有不同的建議時間。

空閒目標

瀏覽器是單執行緒的（儘管支援 Web Workers 的後臺執行緒）。這意味著使用者互動、繪製和指令碼執行都在同一個執行緒上。如果執行緒忙於執行復雜的 JavaScript，主執行緒將無法響應使用者輸入，例如按下按鈕。因此，指令碼執行的範圍應有限，分為可以在 50 毫秒或更短時間內執行的程式碼塊。這使得執行緒可用於使用者互動。

動畫目標

為了使滾動和其他動畫看起來流暢且響應迅速，內容重繪應以每秒 60 幀（60fps）的速度發生，即每 16.7 毫秒一次。16.7 毫秒包括指令碼、重排和重繪。請注意，渲染一幀大約需要 6 毫秒，剩下大約 10 毫秒用於其餘部分。任何低於 60fps 的幀率，尤其是參差不齊或變化的幀率，都會顯得卡頓。

響應目標

當用戶與內容互動時，在 100 毫秒內（最好是 50 毫秒內）提供反饋並確認使用者的響應或互動非常重要。50 毫秒感覺是即時的。使用者互動的確認通常應該感覺是即時的，例如滑鼠懸停或按鈕按下，但這並不意味著完成的響應應該是即時的。雖然慢於 100 毫秒的響應可能會在使用者互動和響應之間產生脫節，但 100 到 200 毫秒的過渡響應可能有助於使用者注意到他們發起的互動所產生的響應，例如開啟選單。如果響應需要超過 100 毫秒才能完成，請提供某種形式的反饋，告知使用者互動已發生。