頁面速度及其重要性

沒有人喜歡加載緩慢的網站。 我們希望盡快獲得內容。 如果您像我一樣，當您在 Google 中進行搜索並且網站需要永遠加載時，您點擊後退按鈕並找到另一個結果。

Google 看到並理解這種行為。

如果您的網站加載緩慢，那麼是時候評估如何提高性能並更好地留住訪問者和排名。

看看統計數據

谷歌的最新研究表明，頁面加載到移動設備上的平均時間為 15 秒。 好消息是這個數字比上一年有所下降。

但是，如果加載時間超過 3 秒，仍有 53% 的移動用戶會離開頁面。 由於網絡上超過一半的流量來自移動設備，因此明智的做法是確保您的頁面加載時間不超過 3 秒。

頁面速度不僅對用戶體驗很重要，而且還應該從有機排名的角度來看待。

當頁面速度增加時，跳出率也會增加。 當頁面速度從 1 秒變為 3 秒時，平均跳出率增加了 32%。 而當頁面加載接近10秒時，跳出率可以高達123%。

讓我們加速那個網站

您現在已經閱讀了有關加載時間的統計信息。 這會讓您擔心自己網站的速度嗎？ 您想取悅您的用戶，以便他們留在您的網站上並進行購買嗎？ 你想讓你的頁面排名更高嗎？

谷歌曾公開表示，頁面速度是 2010 年在桌面上的排名因素。2018 年 7 月，他們宣布頁面速度將成為移動搜索的排名因素。

如果你想在 2019 年對你的網站進行排名，你的頁面必須要快。

每個人都喜歡快速的網站：您的訪問者、SEO、網絡開發人員和谷歌。 您應該盡一切可能使您的網站加載得非常快。

首先，在 Google 的 PageSpeed Insights 測試工具上檢查您的頁面速度，並查看有關如何改進的詳細報告和建議。 這是一個很好的第一次檢查，應該會給你一些關於從哪裡開始的有價值的信息。

在輸入中輸入 URL 後，您會在頂部看到總速度得分。 這是所有計時指標的加權分數。

在速度得分之後，您將看到不同時間的更詳細視圖。 其中一些可能會變得非常技術性，但我們將在下面討論它們。

使用 PageSpeed Insights，您必須手動運行報告並保留記錄。 一個名為 SpeedMonitor.io 的工具可自動執行此過程，並每晚根據 PageSpeed Insights API 檢查您的網站。 然後，您可以查看網站速度性能隨時間變化的歷史趨勢。

速度性能指標

讓我們看一下這些工具將向您展示的一些速度性能指標：

互動時間

這是頁面與用戶交互的時間。 一旦您在頁面上加載了圖像和文本，您就希望能夠與頁面進行交互。 但是，如果還有其他腳本、字體或樣式仍在加載，用戶可能很難滾動和交互。

為了提高您的互動時間，您應該考慮以下幾點：

- 當用戶向下滾動頁面時延遲加載圖像。

-首先將內容加載到首屏，以便用戶可以更快地與之交互。

速度指數

顯示頁面可見部分的時間。 它應該用作衡量網站整體性能的另一個指標，但它不應該是唯一需要關注的東西。 您的速度指數得分越低，您的網站運行速度就越快。

為了提高您的速度指數，您應該考慮查看您的關鍵渲染路徑，即優先顯示內容以及瀏覽器接收頁面資源所採取的步驟。

為了讓您的網站顯示元素，它必須加載關鍵資源，例如 HTML、CSS 和 Javascript 文件來加載頁面。 您應該專注於最大限度地減少加載頁面所需的關鍵資源數量。

-延遲加載圖像以僅顯示首屏所需的圖像

–僅加載您在加載時需要的 Javascript 文件

-將您的 CSS 文件合併為一個，以最大限度地減少多次調用

第一次內容豐富的油漆

瀏覽器首次呈現任何文本或圖像的時間。 First Contentful Paint 非常接近地表示用戶將如何查看您的頁面。 當內容（無論是文本還是圖像）第一次顯示給瀏覽器時，該時間稱為第一次內容繪製。 這向用戶表明該頁面正在按預期工作並正在加載。

為了改進您的 First Contentful Paint，您應該考慮以下幾點：

-最小化渲染阻塞資源，例如 CSS 和 Javascript

-異步加載第三方腳本，例如廣告跟踪器、社交分享按鈕、視頻嵌入等。

– 為您的回訪者使用 HTTP 緩存

-刪除未使用的 CSS 或 Javascript代碼

第一個字節的時間

瀏覽器從服務器獲取第一個字節的時間。 到第一個字節的緩慢時間 (TTFB) 通常超過 200 毫秒。 最好將其保持在此數字以下。 如果您的服務器以高 TTFB 響應，則可能是以下原因之一：

– 網絡連接不良

- 響應緩慢的服務器

要診斷您的第一個字節的緩慢時間，請首先在本地託管您的網站或頁面。 你還在獲得同樣高的 TTFB 嗎？ 如果是這樣，您應該考慮改進響應時間的方法。 在診斷高 TTFB 時，數據庫查詢、Web 服務優化和配置設置以及緩存都是要考慮的事情。

Apache 基金會發布了一個名為 PageSpeed 的模塊，它通過修改頁面上的資源來自動提高站點的速度。 您可以更改 Web 服務器配置文件中的內置過濾器。

例如，如果您想從站點中刪除不必要的空白區域或優化圖像，您可以使用眾多過濾器之一輕鬆完成。

什麼是關鍵渲染路徑？

關鍵渲染路徑是瀏覽器將 HTML、CSS 和 JavaScript 處理成有意義的視覺效果所採取的步驟。

作為用戶，當您加載頁面時，瀏覽器會獲取 HTML 並將其轉換為字節。 然後將字節轉換為令牌。 然後將令牌轉換為對象。 這稱為文檔對像模型 (DOM)。

然後，CSS 也會發生同樣的情況。 它被轉換成字節並最終轉換成稱為 CSS 對像模型 (CSSOM) 的樹形結構。

要改進關鍵渲染路徑，請查看以下內容：

– 可能阻塞初始渲染的關鍵資源數量

-異步加載Javascript 資源

–推遲任何對初始加載不重要的 JavaScript

- 在頁面加載中擁有更高的 CSS 資源

–不要使用 CSS 導入規則來避免額外的往返

結論

是時候認真對待網絡性能和頁面速度了。 要想在2019年排名，必須要有一個快速的網站。 希望這些技巧能讓您走上正確的道路。