推薦的網頁效能計時：多久算太久？

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

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

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

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

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

為了使滾動和其他動畫看起來流暢且具有響應性，內容重繪應以每秒 60 幀 (60fps) 的速度發生，即每 16.7 毫秒一次。16.7 毫秒包括指令碼、重排和重繪。請意識到文件大約需要 6 毫秒才能渲染一幀，剩下大約 10 毫秒用於其他操作。低於 60fps 的任何內容，尤其是不均勻或變化的幀率，看起來都會很卡頓。

當用戶與內容互動時，務必提供反饋並確認使用者的響應或互動，並且在 100 毫秒內完成，最好在 50 毫秒內完成。50 毫秒感覺很及時。對使用者互動的確認通常應感覺很及時，例如懸停或按鈕按下，但這並不意味著完成的響應應是即時的。雖然低於 100 毫秒的反應可能會在使用者互動和響應之間造成脫節，但 100 到 200 毫秒的響應轉換可能有助於使用者注意到其互動所觸發的響應，例如選單開啟。如果響應需要超過 100 毫秒才能完成，請提供某種形式的反饋以告知使用者互動已發生。