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