如何平衡快速的網頁加載速度和豐富的內容

已發表: 2021-07-19

快速的頁面加載時間和豐富的交互式內容都是使網站成功的關鍵，但在兩者之間取得平衡可能具有挑戰性。

頁面加載時間對網站的成功極為重要，這已經不是什麼秘密了。谷歌的搜索算法有利於快速加載時間，而且還有大量研究表明頁面加載時間的小幅增加會對轉換產生負面影響。 Hallam 數字營銷經理 Tom Whiley 去年寫了一篇關於如何提高頁面加載速度的優秀博客文章。雖然我們的託管合作夥伴 WP Engine 已製作了有關頁面加載速度的出色信息圖。

網站還需要豐富的內容、圖像和交互性以鼓勵轉化。這不可避免地導致頁面更大，這自然會減慢頁面加載時間。

對速度的需求與對豐富內容的需求之間的衝突可能會使設計項目陷入停頓。因此，找到滿足這兩個要求的平衡點至關重要。

在此博客中，我將與您分享一種方法，可幫助您平衡這兩個相互矛盾的挑戰。

將頁面速度與其目的相關聯

在網站開發到相當成熟的階段之前，無法預測加載時間，因此最好採用迭代方法來衡量和提高速度。

關鍵的出發點是確定網站的 SEO 登陸頁面及其豐富的內容頁面。然後，您可以專注於盡可能減少 SEO 頁面的頁面大小和加載速度。

同樣，豐富的登陸頁面可以為用戶交互提供更多空間。

這是一個可以應用的粗略過程：

確定我們將成為降低加載速度的目標的關鍵著陸頁。
圍繞低加載時間的最佳實踐進行設計。
圍繞低加載時間的最佳實踐確定功能。
開發頁面。
衡量並尋找節省加載時間的機會。
根據需要重複 4-5。

這僅涵蓋了故事的第一部分。然後需要持續監控關鍵 SEO 頁面的頁面加載時間，以確保它們仍按預期執行，尤其是在使用允許任何人編輯頁面的內容管理系統時。

因此，在啟動網站後，可以遵循兩個簡單的步驟：

每月檢查關鍵登陸關鍵頁面，以確保它們仍然有效。
使用頁面速度監控工具，該工具會在頁面性能低於商定水平時觸發。

優化負載速度的設計注意事項

網站的設計在確定優化頁面加載時間的可能性方面起著關鍵作用。說到網頁，大小真的很重要。目標是理想情況下將頁面加載時間保持在 500k 以下，但肯定最多不超過 1MB。

以下是一些可最大限度減少加載時間的步驟：

盡可能減少在關鍵著陸頁上使用圖像。當圖像和設計的微妙使用可以產生相同的效果時，使用圖像來使頁面看起來很豐富就太容易了。
在使用圖像的地方，應該對其進行優化，同時確保質量不會出現不可接受的下降。
利用針對自然搜索進行了優化的精益登陸頁面，並將任何豐富的內容保留在不針對自然搜索的更深層次的頁面上。
避免跨多個模板使用大量獨特、複雜的佈局。 HTML 標記越簡單，文件就越小。
避免依賴於大量 Javascript 庫的複雜交互元素。看到一些東西在屏幕上移動可能看起來很酷，但這真的有必要嗎？

實施過程中的技術考慮

最後，我們可以進入頁面加載速度的一些更具技術性的方面，這些方面需要被視為託管選擇的一部分：

盡可能消除對第三方腳本的依賴。這些會導致問題，因為您不僅依賴於在頁面加載之前加載這些腳本，而且有時它們也處於高負載下並且加載速度比平時慢。這可能導致“塊狀”加載時間。
使用延遲加載技術來確保當用戶滾動到視圖中時加載沒有出現在折疊上方的圖像。
更好地利用響應式圖像。瀏覽器處理響應式圖像的方式取得了一些進展，這意味著我們不需要提供適用於所有視口的單個大圖像，並且可以為特定分辨率提供更好的圖像。
確保在頁面加載後加載嵌入的視頻，而不是作為頁面加載的一部分。這意味著用戶將看到視頻的預覽圖像，然後在單擊鏈接後看到實際的視頻。
避免 301 重定向的大型 htaccess 文件，並將規則組合到批量類別重定向中，而不是單個頁面到頁面重定向中。
將 CDN 用於圖像。這將需要衡量，因為如果站點的用戶群特別本地化，CDN 可能會損害性能。
最小化 CSS 和 Javascript 文件。在大多數情況下，您應該已經這樣做了，但還有更多機會減少關鍵頁面上的某些文件。這是決定安裝任何新插件的核心部分。
放棄對舊瀏覽器的支持。較舊的瀏覽器需要有條件地創建特定的 CSS 和 JS 文件並將其加載到站點中。如果我們可以完全刪除這些，就少了一個要求。
盡量減少您網站上使用的插件數量。我們經常繼承遭受插件膨脹的網站。使用 CMS 時這不是一個新問題，但仍然是一個大問題。
消除對非必要託管要求的任何依賴，例如電子郵件簽名的圖像託管
運行數據庫優化查詢。如果您的網站已經存在一段時間，則可以使用多種數據庫技術來優化查詢運行的時間。

總之，創建高度優化的站點是規範、設計和實施之間的平衡。對我來說，關鍵因素是盡可能將高度優化的 SEO 頁面與其他頁面區分開來，並儘可能專注於優化這些頁面。

如果您在 Web 開發方面需要幫助，請隨時與我們聯繫。