頁面速度優化:指標,工具和改進方法-星期五最佳白板

[ad_1]

頁面速度一直是SEO工作的關鍵部分,並且隨著越來越多的公司轉向在線運營,優化變得比以往任何時候都更加重要。 但是,這是一個複雜的主題,往往非常技術性。 關於您網站的頁面速度,最重要的事情是什麼,您應該如何加以改進? 為了幫助您回答這些問題,我們將分享這一受歡迎的《星期五白板》(最初於2019年2月發行)一集,其中小甜甜布勒(Britney Muller)講述了您需要了解的入門知識。

單擊上方的白板圖像,在新選項卡中打開高解析度版本!

視頻轉錄

嘿,莫茲迷。 歡迎使用《星期五白板》。 今天,我們將討論所有有關頁面速度的問題,並深入了解為什麼對您而言,在工作時進行思考和進行工作如此重要。

在最基本的層次上,我將簡要解釋一下如何載入網頁。 這樣一來,我們就可以解決所有這些問題的原因。

網頁的載入方式

用戶訪問瀏覽器,放入您的網站,並且有一個DNS請求。 這指向您的域名提供商,例如GoDaddy,這指向您的文件所在的伺服器,這很有趣。 因此,DOM開始載入所有HTML,CSS和JavaScript。 但是,這種情況很少會提取所有需要的腳本或代碼來呈現或載入網頁。

通常,DOM需要從您的伺服器請求其他資源以使所有事情發生,而這正是事情開始真正減慢您的站點速度的地方。 我希望擁有這樣的背景知識能夠幫助我們對其中的一些問題進行分類。

可能會使您的網站變慢的問題

最常見的罪魁禍首是什麼?

  1. 首先是圖像。 大圖像是網頁載入緩慢的最大原因。
  2. 託管可能會導致問題。
  3. 插件,應用程序和小部件以及基本上所有第三方腳本都可能減慢載入時間。
  4. 您的主題和其他任何較大的文件也會使速度變慢。
  5. 重定向,到達網頁所需的跳數會使速度變慢。
  6. 然後是JavaScript,我們將在稍後介紹。

但是所有這些都是罪魁禍首。 因此,我們將介紹一些資源,一些指標以及它們的含義,然後討論今天可以提高頁面速度的一些方法。

Page Speed工具和資源

我在這裡列出的主要資源是Google工具和Google建議的見解。 我認為關於這些的真正有趣之處在於,我們可以了解到頁面速度方面他們所關注的問題,並真正開始看到了向用戶的轉變。 無論如何,我們應該考慮一下。 但是首先,這將如何影響訪問您網站的用戶,其次,我們又如何獲得谷歌認為其質量更高的雙重好處?

我們知道Google建議網站載入兩到三秒之間的任何時間。 顯然,越快越好。 但這就是範圍的所在。 我也強烈建議您對此採取有競爭力的看法。 讓您的競爭對手使用這些工具中的一些,並根據您所在行業中的競爭基準確定您的速度目標。 我認為這是種很酷的方法。

Chrome用戶體驗報告

這是Chrome的實際用戶指標。 不幸的是,它僅適用於較大的流行網站,但是您會從中獲得一些非常好的數據。 它位於BigQuery *上,因此需要一些基本的SQL知識。

*編者註:為了準確起見,我們已經編輯了這份筆錄。 布蘭妮在視頻中說「 BigML」,但打算說BigQuery。 很難一次性拍攝高級主題的「白板」! 🙂

燈塔

我最喜歡的燈塔之一Lighthouse可直接在Chrome開發工具中使用。 如果您在網頁上,然後單擊「檢查元素」並打開Chrome開發工具,則在最右邊的選項卡上顯示「審核」,您可以在瀏覽器中直接運行Lighthouse報告。

我喜歡它,它為您提供了非常具體的示例和修復程序。 一個有趣的事實是它將自動出現在模擬的快速3G上,並注意到他們專註於3G上的移動用戶。 我喜歡將其切換為應用快速的3G,因為它可以讓Lighthouse實際運行該負載。 它需要更長的時間,但似乎更加準確。 很高興知道。

Page Speed見解

Page Speed Insights真的很有趣。 他們現在已經合併了Chrome用戶體驗報告。 但是,如果您不是大型網站之一,它甚至都無法衡量您的實際頁面速度。 我們將研究您的網站的配置方式,並據此提供反饋並進行評分。 只是一些要注意的好東西。 它仍然提供良好的價值。

測試您的移動網站的速度和性能

我不知道這個標題是什麼。 如果您這樣做,請在下方留言。 但是它位於 testmysite.thinkwithgoogle.com。 這真的很酷,因為它可以測試您網站的移動速度。 如果向下滾動,它將直接將其與您的企業或網站的投資回報率聯繫起來。 我們看到Google利用了真實的指標,將其與您失去的人口百分比相關聯,因為您的網站運行速度很慢。 這是一種讓我們所有人參與其中並爭取其中一些改進的絕妙方法。

平度GTmetrix 是非Google產品或非Google工具,但也非常有幫助。

網站速度指標

那麼有哪些指標呢?

什麼是第一塗料?

第一個油漆是他在屏幕上第一個非空白油漆。 這可能只是第一個像素變化。 最初的更改被視為第一個油漆。

什麼是第一美滿的油漆?

第一個有意思的繪畫是第一個內容出現的時間。 這可能是導航欄或搜索欄的一部分,也可能是它的一部分。 -這是第一個令人滿意的塗料。

什麼是第一個有意義的油漆?

首先有意義的繪畫是主要內容可見時。 當您得到諸如「哦,是的,這就是我來到此頁面的目的」的反應時,這是第一個有意義的畫。

什麼時候進行互動?

互動的時間就是視覺上可用和吸引人的時間。 因此,我們都進入了一個網頁,看起來已經完成了,但是我們還不能完全使用它。 這就是該指標的來源。那麼,什麼時候對用戶可用? 同樣,請注意,即使這些指標也是以用戶為中心的。 真的,真的很整潔。

載入的DOM內容

DOM內容已載入,這是HTML完全載入並解析後的時間。 因此,有一些非常好的人需要關注並只是一般地注意。

提高頁面速度的方法

HTTP / 2

HTTP / 2絕對可以加快速度。 至於程度,您必須進行某種研究和測試。

預連接,預取,預載入

預連接,預取和預載入對於加速站點非常有趣且重要。 我們看到Google在其SERP上執行此操作。 如果您檢查一個元素,則可以看到Google預取了一些URL,以便在單擊某些結果時可以更快地獲取它。 您可以類似地在您的網站上執行此操作。 它有助於載入和加速該過程。

啟用緩存並使用內容分發網路(CDN)

緩存是如此重要。 一定要進行研究,並確保已正確設置。 與CDN相同,在加快站點速度方面非常重要,但您要確保CDN的設置正確。

壓縮影像

您今天加速網站的最簡單且可能最快的方法實際上就是壓縮這些圖像。 這是一件容易的事。 有各種各樣的免費工具可供您壓縮。 最適 是一個。 您甚至可以在計算機上使用免費工具,「另存為Web」並正確壓縮。

縮小資源

您還可以縮小資源。 所以了解什麼真的很好 縮小,捆綁和壓縮,這樣您就可以與開發人員或與網站上其他任何人進行更多的技術對話。

因此,這是頁面速度的高級概述。 還有很多要討論的內容,但是我很想聽聽您的意見以及您在下面的評論部分中提出的問題和評論。

非常感謝您查看本版的「星期五星期五」,很快將再次與大家見面。 非常感謝。 再見。

視頻轉錄 通過 Speechpad.com

今年7月在MozCon Virtual上獲得更多SEO見解

不要錯過Britney和我們其他人提供的獨家數據,技巧,工作流程和建議 出色的演講者 在今年的MozCon Virtual上! 塞滿了SEO業界最高思想領導者,這將使MozCon首次完全實現遠程友好。 就像您最喜歡的Whiteboard Fridays上有20多種維生素一樣,並且尺寸翻了一番,此外還有互動式問答,虛擬網路以及對視頻包的完全訪問許可權:

在MozCon Virtual上保存我的位置!

我們等不及要在這裡見到你!

相關文章