感知效能
感知效能 是對網站效能、響應能力和可靠性的主觀衡量。換句話說，就是網站對使用者的速度感。它比實際執行速度更難量化和衡量，但可能更重要。
本文簡要介紹了影響感知效能的因素，以及一些用於評估和改善感知的工具。
| 先決條件 | 已安裝的基本軟體，以及對 客戶端 Web 技術 的基本瞭解。 |
|---|---|
| 目標 | 瞭解使用者對 Web 效能的感知。 |
概述
頁面載入和響應使用者互動的速度（以及流暢度）的感知，甚至比實際獲取資源所需的時間更重要。雖然你可能無法實際讓你的網站執行得更快，但你完全可以改善它對使用者的“感覺”速度。
提高感知效能的一般規則是，通常最好提供快速響應和定期狀態更新，而不是讓使用者等待操作完全完成（在提供任何資訊之前）。例如，在載入頁面時，最好在文字到達時顯示文字，而不是等待所有影像和其他資源載入完成。即使內容沒有完全下載，使用者也可以看到正在發生的事情，並可以開始與內容進行互動。
注意： 對於積極參與、分心或娛樂的使用者來說，時間似乎比被動等待發生的事情的使用者流逝得更快。儘可能積極地吸引和告知正在等待任務完成的使用者。
類似地，最好在使用者點選連結執行長時間執行的操作時立即顯示“載入動畫”。雖然這不會改變完成操作所需的時間，但網站感覺更具響應性，使用者也知道它正在處理一些有用的事情。
效能指標
提高效能
以下是一些幫助改善感知效能的技巧和竅門。
最小化初始載入
為了提高感知效能，請最小化原始頁面載入。換句話說，首先下載使用者將立即與之互動的內容，並在“後臺”下載其餘內容。下載內容的總量實際上可能會增加，但使用者只需要等待一小部分內容，因此下載速度感覺更快。
將互動功能與內容分離，並載入在初始載入時可見的文字、樣式和影像。延遲或延遲載入初始頁面載入時未使用或不可見的影像或指令碼。此外，您應該最佳化載入的資產。影像和影片應以最佳格式、壓縮並以正確的大小提供。
防止內容跳動和其他重排
導致內容被向下推或跳到不同位置的影像或其他資產，例如第三方廣告的載入，會讓頁面感覺仍在載入，這對感知效能不利。內容重排尤其不利於使用者體驗，尤其是在沒有使用者互動的情況下發生的。如果某些資產的載入速度比其他資產慢，並且元素在其他內容已經繪製到螢幕上後才載入，請提前規劃並在佈局中為它們留出空間，以避免內容跳動或調整大小，尤其是在網站變為可互動之後。
避免字型檔案延遲
字型選擇很重要。選擇合適的字型可以極大地改善使用者體驗。從感知效能的角度來看，“次優字型匯入”會導致文字樣式化或回退到其他字型時出現閃爍。
使回退字型具有相同的尺寸和粗細，以便在字型載入時頁面變化不那麼明顯。
互動元素具有互動性
確保可見的互動元素始終具有互動性和響應性。如果輸入元素可見，使用者應該能夠在沒有延遲的情況下與它們進行互動。使用者會在響應時間超過 50 毫秒時感到卡頓。當內容重繪速度低於 16.67 毫秒（或每秒 60 幀）或以不均勻的間隔重繪時，他們會感到頁面執行不佳。
使諸如自動補全之類的功能成為漸進增強：使用 CSS 顯示輸入模態框，使用 JS 新增自動補全功能（如果可用）。
使任務啟動器看起來更具互動性
在 keydown 上發出內容請求，而不是等待 keyup，可以將內容的感知載入時間縮短 200 毫秒。在 keyup 事件中新增一個有趣但不太突出的 200 毫秒動畫可以減少另外 200 毫秒的感知載入時間。你沒有節省 400 毫秒的時間，但使用者不會感覺到他們在等待內容，直到——好吧，直到他們真的在等待內容。