在我的網站上滾動時如何減少延遲？

Question

我目前的工作在我的網站：

http://unturned.de/

而且我注意到，有一定的滯後性，同時滾動。 我的猜測是，這可能是由於背景圖片，所以我已經將格式從.png更改爲.jpg

是否有其他方法可以減少延遲？

Answer 1

第一步是分析您的網站並確定究竟究竟是什麼滯後。您可以使用Chrome的開發者工具，但我更喜歡WebPageTest。爲您的網站，結果在這裏：

• http://www.webpagetest.org/result/141108_N8_G8C/

審查這些結果，看看哪些因子（S），你可以控制（取決於你的主機上），調整它們，並再次運行測試。還有Chrome的YSlow擴展。這些項目中的每一項都在網上進行了徹底的記錄，因爲這是Web開發的一個重要領域。

根據您的結果，我會嘗試以下方法：

• 減少HTTP請求的數量：

  • 縮減大小和壓縮JavaScript和CSS（查看YUICompressor和SASS/Compass） 。這可能也可能不是你需要的。您仍然可以通過編寫腳本來連接所有文件來限制請求數量。一定要確保以正確的順序進行，否則會得到意想不到的結果。

• 像optipng這樣的程序可以優化您的網站圖片。 TL; DR：圖像中有很多額外信息，並且您並不總是需要超高分辨率。確保圖像的大小適當（例如，不要將大圖像縮小爲128x128，使用imagemagick或其他東西來調整大小）。使用progressive JPEGs可以使的外觀加載速度更快，但圖像仍然需要同時下載。

• 設置緩存。緩存的話題可能會佔用大量的空間，這與你正在做的事情有關。下面的幾個資源：

  • https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
  • https://developer.yahoo.com/performance/rules.html
  • Web front end caching best practices for site?

• 使用CDN靜態資產，以我的經驗，通常是不值得發佈你的代碼的麻煩。有些東西，比如HTML背景視頻，常用的JavaScript庫（jQuery）和網頁字體很容易整合，並且通常會提供合理的好處。這很大程度上是由於CDN實施的緩存，以及與您的網站（可能）更接近您的客戶。

• 最後，剖析你的後端代碼。查看您可以靜態提供內容或從緩存中提供內容的位置。最大限度地減少數據庫點擊次數，訪問服務器等。這完全取決於您的網站如何工作。

希望能讓你開始！