經(jīng)過(guò)搜索引擎的不斷更新完善?,F(xiàn)在的搜索引擎不再依賴實(shí)驗(yàn)室數(shù)據(jù),而是使用現(xiàn)場(chǎng)數(shù)據(jù)來(lái)衡量網(wǎng)站速度。通過(guò)從Chrome用戶體驗(yàn)報(bào)告(CrUX)數(shù)據(jù)庫(kù)中提取信息,搜索引擎能夠辨別出你的普通用戶找到你的網(wǎng)站的速度有多快。 這意味著,即使你的網(wǎng)站在你的網(wǎng)站是閃電般的快,訪客與舊的智能手機(jī)可能會(huì)遇到延遲-這可能會(huì)影響你的速度得分,并可能你的網(wǎng)站的排名。如果你還沒(méi)有,是時(shí)候加倍的速度優(yōu)化了。
北京網(wǎng)站優(yōu)化公司將打破搜索引擎的9個(gè)PageSpeed Insight規(guī)則,列出他們的最佳實(shí)踐建議,然后深入探討一些高級(jí)步驟,您可以采取這些步驟來(lái)進(jìn)一步優(yōu)化您的網(wǎng)站速度從而提升你的網(wǎng)站關(guān)鍵詞排名。
為什么重定。重定向延遲頁(yè)面呈現(xiàn)并降低移動(dòng)站點(diǎn)體驗(yàn)。每個(gè)重定向都會(huì)添加一個(gè)額外的超文本傳輸協(xié)議(HTTP)請(qǐng)求-響應(yīng)往返,有時(shí)還會(huì)添加許多其他往返,以執(zhí)行域名系統(tǒng)(DNS)查找、傳輸控制協(xié)議(TCP)握手和傳輸層安全性(TLS)協(xié)商。
小編的建議。創(chuàng)建一個(gè)響應(yīng)網(wǎng)站,從給定URL到最終登錄頁(yè)的重定向不超過(guò)一個(gè)。
高級(jí)建議。盡量避免重定向。但是,如果需要使用重定向,請(qǐng)根據(jù)需要選擇重定向類型:
301對(duì)302重定向。當(dāng)您刪除舊內(nèi)容并重定向到新內(nèi)容時(shí),或者當(dāng)您沒(méi)有其他頁(yè)面可重定向用戶時(shí),請(qǐng)使用永久重定向(301)。在進(jìn)行短期更改(例如限時(shí)優(yōu)惠)或?qū)⒂脩糁囟ㄏ虻教囟ㄓ谠O(shè)備的url時(shí),使用臨時(shí)重定向(302)。別擔(dān)心,不管怎樣你都不會(huì)失去鏈接權(quán)益!
JavaScript與HTTP重定向。JavaScript和HTTP重定向的主要區(qū)別在于,HTTP重定向會(huì)在服務(wù)器端造成一些延遲,而基于JavaScript的重定向會(huì)降低客戶端的速度(它們需要下載頁(yè)面,然后在觸發(fā)重定向之前解析并執(zhí)行JavaScript)。搜索引擎bot支持這兩種類型的重定向。
為什么重要。減小內(nèi)容的大小可以縮短下載資源所需的時(shí)間,減少客戶端的數(shù)據(jù)使用,并縮短頁(yè)面的呈現(xiàn)時(shí)間。 小編的建議。Gzip所有可壓縮內(nèi)容。您可以通過(guò)HTML5樣板項(xiàng)目找到大多數(shù)服務(wù)器的示例配置文件。
優(yōu)先刪除不必要的數(shù)據(jù)。壓縮是偉大的,但最好的優(yōu)化資源是一個(gè)資源不發(fā)送。定期檢查站點(diǎn)資源,并在壓縮之前消除不必要的數(shù)據(jù),以確保獲得最佳結(jié)果。
考慮Gzip編碼的替代方案。如果您想使用Gzip以外的工具,Brotli是一種無(wú)損壓縮算法,它結(jié)合了LZ77算法的現(xiàn)代變體、Huffman編碼和二階上下文建模。它受到所有現(xiàn)代瀏覽器的支持,其壓縮比可與當(dāng)前可用的最佳通用壓縮方法相媲美。Brotli壓縮速度非常慢,解壓速度也很快,因此您應(yīng)該在最高級(jí)別使用Brotli+Gzip預(yù)壓縮靜態(tài)資產(chǎn),在級(jí)別1–4使用Brotli壓縮動(dòng)態(tài)HTML。
對(duì)不同的資源使用不同的壓縮技術(shù)。壓縮可以應(yīng)用于HTML代碼,也可以應(yīng)用于頁(yè)面所需的各種數(shù)字資源,但是您需要對(duì)web字體、圖像、CSS等應(yīng)用不同的技術(shù)和算法,以獲得最佳效果。例如,如果您使用的是HTTP/2,那么對(duì)HTTP響應(yīng)頭使用HPACK壓縮將減少不必要的開(kāi)銷。
為什么重要。在北京網(wǎng)站優(yōu)化公司看來(lái)快速的服務(wù)器響應(yīng)時(shí)間是必要的;53%的移動(dòng)訪問(wèn)者會(huì)放棄3秒鐘內(nèi)無(wú)法加載的頁(yè)面。
高質(zhì)量的網(wǎng)站開(kāi)發(fā)是必不可少的,如果你想避免中央處理器(CPU)饑餓,緩慢的應(yīng)用程序邏輯,緩慢的數(shù)據(jù)庫(kù)查詢,緩慢的路由,緩慢的框架和緩慢的庫(kù)。
小編的建議。服務(wù)器響應(yīng)時(shí)間應(yīng)始終低于200ms。
測(cè)量服務(wù)器響應(yīng)時(shí)間和實(shí)際用戶測(cè)量(RUM)。使用像這樣的工具網(wǎng)頁(yè)測(cè)試.org、Pingdom、GTmetrix或Chrome開(kāi)發(fā)工具,以查明現(xiàn)有的性能問(wèn)題,并找出哪些因素會(huì)減慢您的內(nèi)容交付過(guò)程。請(qǐng)記住,即使您的測(cè)試顯示站點(diǎn)速度<200ms,使用慢速3G的老一代Android上的用戶可能會(huì)體驗(yàn)到400msrtt和400kbps的傳輸速度。這將對(duì)你的網(wǎng)站速度得分產(chǎn)生負(fù)面影響。要改善此用戶的體驗(yàn),您必須致力于:
第一幅有意義的畫(huà)作。
速度指數(shù)小于1250。
傳輸時(shí)間間隔(TTI)<5秒,重復(fù)訪問(wèn)<2秒。
優(yōu)化用戶體驗(yàn)。配置服務(wù)器時(shí):
使用HTTP/2(記住您的cdn也支持HTTP/2)來(lái)提高性能。
在服務(wù)器上啟用聯(lián)機(jī)證書(shū)狀態(tài)協(xié)議(OCSP)裝訂以加快TLS握手。
同時(shí)支持IPv6和IPv4。IPv6的鄰居發(fā)現(xiàn)(NDP)和路由優(yōu)化可以使網(wǎng)站速度提高10-15%。
通過(guò)更快的DNS查找、預(yù)連接、預(yù)回遷和預(yù)加載,添加資源提示以預(yù)熱連接并加快傳遞。
為什么重要。當(dāng)通過(guò)網(wǎng)絡(luò)獲取資源時(shí),客戶機(jī)和服務(wù)器之間需要更多的往返,這就意味著訪問(wèn)者需要更多的延遲和更高的數(shù)據(jù)成本。您可以通過(guò)實(shí)現(xiàn)一個(gè)緩存策略來(lái)緩解這個(gè)緩慢而昂貴的過(guò)程,該策略可以幫助客戶機(jī)確定是否以及何時(shí)可以重用它在過(guò)去返回的響應(yīng)。
小編的建議?;卮鹨韵聠?wèn)題的顯式緩存策略:
是否可以緩存資源。
誰(shuí)能把它藏起來(lái)。
它將被緩存多長(zhǎng)時(shí)間。
如何在緩存策略過(guò)期時(shí)有效地重新驗(yàn)證(如果適用)。
小編建議靜態(tài)資產(chǎn)的緩存時(shí)間最短為一周,最長(zhǎng)為一年。
使用緩存控制消除網(wǎng)絡(luò)延遲并避免數(shù)據(jù)費(fèi)用。緩存控制指令允許您自動(dòng)控制瀏覽器緩存響應(yīng)的方式(例如,“無(wú)緩存”和“無(wú)存儲(chǔ)”)以及緩存響應(yīng)的時(shí)間(例如,“最長(zhǎng)使用時(shí)間”、“最長(zhǎng)過(guò)期時(shí)間”和“最短刷新時(shí)間”),而無(wú)需與服務(wù)器通信。
使用etag實(shí)現(xiàn)有效的再驗(yàn)證。實(shí)體標(biāo)記(ETag)HTTP報(bào)頭傳遞一個(gè)驗(yàn)證令牌,如果資源自上次請(qǐng)求以來(lái)沒(méi)有更改,該令牌將阻止數(shù)據(jù)傳輸。這提高了資源更新檢查的效率。
請(qǐng)參考小編的建議以獲得最佳的緩存控制策略。谷歌已經(jīng)創(chuàng)建了一個(gè)清單和一個(gè)流程圖,可以幫助你在盡可能長(zhǎng)的時(shí)間內(nèi)緩存盡可能多的響應(yīng),并為每個(gè)響應(yīng)提供驗(yàn)證令牌:
經(jīng)驗(yàn)法則是可變(即,可能改變)資源應(yīng)該在很短的時(shí)間內(nèi)緩存,而不可變(即,靜態(tài))資源應(yīng)該無(wú)限期緩存以避免重新驗(yàn)證。
為什么重要??s小可以消除交付給訪問(wèn)者的資源中的冗余數(shù)據(jù),它可以對(duì)整個(gè)站點(diǎn)的速度和性能產(chǎn)生巨大的影響。
小編的建議。web資產(chǎn)中沒(méi)有冗余數(shù)據(jù)(例如HTML代碼中的注釋或空格符號(hào)、CSS中的重復(fù)樣式或不必要的圖像元數(shù)據(jù))。
在壓縮的同時(shí)使用縮小。乍一看,縮小聽(tīng)起來(lái)像是壓縮,但它的粒度要大得多。壓縮算法對(duì)于減小頁(yè)面大小非常有用,但大多數(shù)算法都不知道如何從CSS(/*…*/)、HTML()和JavaScript(//…)注釋中去除不必要的代碼,折疊層疊樣式表(CSS)規(guī)則,或者執(zhí)行許多其他特定于內(nèi)容的優(yōu)化。
對(duì)其他資源類型也應(yīng)用縮小。您可以縮小不僅僅是基于文本的資產(chǎn),如超文本標(biāo)記語(yǔ)言(HTML)、CSS和JavaScript。圖像、視頻和其他類型的內(nèi)容也可以根據(jù)您的需要進(jìn)行縮小。例如,圖像包含它們自己的元數(shù)據(jù)形式和各種有效載荷,如果要在照片共享網(wǎng)站上發(fā)布它們,則可能需要保留這些有效載荷。
自動(dòng)化縮小。使用工具來(lái)減輕縮小網(wǎng)站上成千上萬(wàn)(如果不是數(shù)百萬(wàn))不同資源的負(fù)擔(dān)。搜索引擎的PageSpeed模塊可以自動(dòng)完成這一任務(wù),并且可以與Apache或nginxweb服務(wù)器集成?;蛘?,您可以使用第三方工具,例如HTMLMinifier(用于HTML)、CSSNano或CSSO(用于CSS)和UglifyJS(用于JavaScript)。
為什么重要。圖像平均占網(wǎng)頁(yè)大小的60%,大圖像會(huì)使網(wǎng)站的爬行速度變慢。優(yōu)化圖像有助于減少文件大小,而不會(huì)顯著影響視覺(jué)質(zhì)量。
小編的建議。確保你的網(wǎng)站和圖片是響應(yīng)。使用圖像的相對(duì)大小,根據(jù)設(shè)備特性指定不同圖像時(shí)使用picture元素,并使用srcset屬性和x des
測(cè)量服務(wù)器響應(yīng)時(shí)間和實(shí)際用戶測(cè)量(RUM)。使用像這樣的工具網(wǎng)頁(yè)測(cè)試.org、Pingdom、GTmetrix或Chrome開(kāi)發(fā)工具,以查明現(xiàn)有的性能問(wèn)題,并找出哪些因素會(huì)減慢您的內(nèi)容交付過(guò)程。請(qǐng)記住,即使您的測(cè)試顯示站點(diǎn)速度<200ms,使用慢速3G的老一代Android上的用戶可能會(huì)體驗(yàn)到400msrtt和400kbps的傳輸速度。這將對(duì)你的網(wǎng)站速度得分產(chǎn)生負(fù)面影響。要改善此用戶的體驗(yàn),您必須致力于:
第一幅有意義的畫(huà)作。
速度指數(shù)小于1250。
傳輸時(shí)間間隔(TTI)<5秒,重復(fù)訪問(wèn)<2秒。
優(yōu)化用戶體驗(yàn)。配置服務(wù)器時(shí):
使用HTTP/2(記住您的cdn也支持HTTP/2)來(lái)提高性能。
在服務(wù)器上啟用聯(lián)機(jī)證書(shū)狀態(tài)協(xié)議(OCSP)裝訂以加快TLS握手。
同時(shí)支持IPv6和IPv4。IPv6的鄰居發(fā)現(xiàn)(NDP)和路由優(yōu)化可以使網(wǎng)站速度提高10-15%。
通過(guò)更快的DNS查找、預(yù)連接、預(yù)回遷和預(yù)加載,添加資源提示以預(yù)熱連接并加快傳遞。
為什么重要。在北京網(wǎng)站優(yōu)化公司看來(lái)當(dāng)通過(guò)網(wǎng)絡(luò)獲取資源時(shí),客戶機(jī)和服務(wù)器之間需要更多的往返,這就意味著訪問(wèn)者需要更多的延遲和更高的數(shù)據(jù)成本。您可以通過(guò)實(shí)現(xiàn)一個(gè)緩存策略來(lái)緩解這個(gè)緩慢而昂貴的過(guò)程,該策略可以幫助客戶機(jī)確定是否以及何時(shí)可以重用它在過(guò)去返回的響應(yīng)。
小編的建議?;卮鹨韵聠?wèn)題的顯式緩存策略:
是否可以緩存資源。
誰(shuí)能把它藏起來(lái)。
它將被緩存多長(zhǎng)時(shí)間。
如何在緩存策略過(guò)期時(shí)有效地重新驗(yàn)證(如果適用)。
小編的建議靜態(tài)資產(chǎn)的緩存時(shí)間最短為一周,最長(zhǎng)為一年。
使用緩存控制消除網(wǎng)絡(luò)延遲并避免數(shù)據(jù)費(fèi)用。緩存控制指令允許您自動(dòng)控制瀏覽器緩存響應(yīng)的方式(例如,“無(wú)緩存”和“無(wú)存儲(chǔ)”)以及緩存響應(yīng)的時(shí)間(例如,“最長(zhǎng)使用時(shí)間”、“最長(zhǎng)過(guò)期時(shí)間”和“最短刷新時(shí)間”),而無(wú)需與服務(wù)器通信。
使用etag實(shí)現(xiàn)有效的再驗(yàn)證。實(shí)體標(biāo)記(ETag)HTTP報(bào)頭傳遞一個(gè)驗(yàn)證令牌,如果資源自上次請(qǐng)求以來(lái)沒(méi)有更改,該令牌將阻止數(shù)據(jù)傳輸。這提高了資源更新檢查的效率。
請(qǐng)參考小編的建議以獲得最佳的緩存控制策略。谷歌已經(jīng)創(chuàng)建了一個(gè)清單和一個(gè)流程圖,可以幫助你在盡可能長(zhǎng)的時(shí)間內(nèi)緩存盡可能多的響應(yīng),并為每個(gè)響應(yīng)提供驗(yàn)證令牌:
經(jīng)驗(yàn)法則是可變(即,可能改變)資源應(yīng)該在很短的時(shí)間內(nèi)緩存,而不可變(即,靜態(tài))資源應(yīng)該無(wú)限期緩存以避免重新驗(yàn)證。
為什么重要??s小可以消除交付給訪問(wèn)者的資源中的冗余數(shù)據(jù),它可以對(duì)整個(gè)站點(diǎn)的速度和性能產(chǎn)生巨大的影響。
小編的建議。web資產(chǎn)中沒(méi)有冗余數(shù)據(jù)(例如HTML代碼中的注釋或空格符號(hào)、CSS中的重復(fù)樣式或不必要的圖像元數(shù)據(jù))。
在壓縮的同時(shí)使用縮小。乍一看,縮小聽(tīng)起來(lái)像是壓縮,但它的粒度要大得多。壓縮算法對(duì)于減小頁(yè)面大小非常有用,但大多數(shù)算法都不知道如何從CSS(/*…*/)、HTML()和JavaScript(//…)注釋中去除不必要的代碼,折疊層疊樣式表(CSS)規(guī)則,或者執(zhí)行許多其他特定于內(nèi)容的優(yōu)化。
對(duì)其他資源類型也應(yīng)用縮小。您可以縮小不僅僅是基于文本的資產(chǎn),如超文本標(biāo)記語(yǔ)言(HTML)、CSS和JavaScript。圖像、視頻和其他類型的內(nèi)容也可以根據(jù)您的需要進(jìn)行縮小。例如,圖像包含它們自己的元數(shù)據(jù)形式和各種有效載荷,如果要在照片共享網(wǎng)站上發(fā)布它們,則可能需要保留這些有效載荷。
自動(dòng)化縮小。使用工具來(lái)減輕縮小網(wǎng)站上成千上萬(wàn)(如果不是數(shù)百萬(wàn))不同資源的負(fù)擔(dān)。搜索引擎的PageSpeed模塊可以自動(dòng)完成這一任務(wù),并且可以與Apache或nginxweb服務(wù)器集成?;蛘撸梢允褂玫谌焦ぞ?,例如HTMLMinifier(用于HTML)、CSSNano或CSSO(用于CSS)和UglifyJS(用于JavaScript)。
為什么重要。圖像平均占網(wǎng)頁(yè)大小的60%,大圖像會(huì)使網(wǎng)站的爬行速度變慢。優(yōu)化圖像有助于減少文件大小,而不會(huì)顯著影響視覺(jué)質(zhì)量。
小編的建議。確保你的網(wǎng)站和圖片是響應(yīng)。使用圖像的相對(duì)大小,根據(jù)設(shè)備特性指定不同圖像時(shí)使用picture元素,并使用srcset屬性和x des
使JavaScript成為非呈現(xiàn)塊。將腳本標(biāo)記為async將告訴瀏覽器在等待加載和執(zhí)行腳本時(shí)不要阻止DOM構(gòu)造。但是,只有當(dāng)您知道在解析/構(gòu)造DOM樹(shù)時(shí)不需要更改DOM樹(shù)中的任何內(nèi)容時(shí),才應(yīng)該這樣做。
內(nèi)聯(lián)關(guān)鍵腳本和延遲非關(guān)鍵腳本。呈現(xiàn)頁(yè)面內(nèi)容所需的腳本應(yīng)該內(nèi)聯(lián),以避免額外的網(wǎng)絡(luò)請(qǐng)求。這些應(yīng)該盡可能小,以便快速執(zhí)行并提供良好的性能。非關(guān)鍵腳本應(yīng)該是異步的,并推遲到第一次呈現(xiàn)之后。請(qǐng)記住,異步腳本不能保證按指定的順序執(zhí)行。
將第三方JavaScript庫(kù)推遲到折疊之后。增強(qiáng)交互性或添加動(dòng)畫(huà)或其他效果(例如JQuery)的JavaScript庫(kù)通常不需要在折疊上方渲染。只要有可能,使這些JavaScript元素異步并將它們推遲到頁(yè)面。
結(jié)論:測(cè)試速度更新的結(jié)果
為了找出速度更新對(duì)SERP職位的實(shí)際影響,云無(wú)限團(tuán)隊(duì)和我進(jìn)行了兩個(gè)實(shí)驗(yàn),一個(gè)是在搜索引擎發(fā)布更新之前,另一個(gè)是在搜索引擎發(fā)布更新之后。
我們甚至在更新之前就發(fā)現(xiàn),移動(dòng)站點(diǎn)在serp中的位置與其平均優(yōu)化分?jǐn)?shù)之間的相關(guān)性已經(jīng)非常高(0.97),但是站點(diǎn)的第一個(gè)contentful paint(FCP)和DOM content loaded(DCL)度量(現(xiàn)在顯示在PageSpeed Insights上,位于頁(yè)面速度分?jǐn)?shù)之下)幾乎沒(méi)有相關(guān)性以你的立場(chǎng)為準(zhǔn)。
我們?cè)诟乱恢芎鬀](méi)有注意到任何重大的變化,這是可以理解的:更新需要時(shí)間才能充分發(fā)揮作用。移動(dòng)搜索引擎結(jié)果頁(yè)(SERPs)的優(yōu)化得分與位置相關(guān)度較高,而FCP/DCL與位置相關(guān)度較低。
近三個(gè)月來(lái),北京網(wǎng)站優(yōu)化公司了解移動(dòng)serp排名前30位的網(wǎng)站優(yōu)化得分均平均提高了0.83分。我們認(rèn)為這是全行業(yè)網(wǎng)站質(zhì)量的提升。
這告訴我們什么是一個(gè)快速,優(yōu)化網(wǎng)站的標(biāo)準(zhǔn)正在提高-你不能變得自滿。提高速度,就像SEO作為一個(gè)整體,是一個(gè)過(guò)程,如果你不不斷調(diào)整和改進(jìn),你就有被落在后面的風(fēng)險(xiǎn)。
Copyright 北京云優(yōu)化SEO團(tuán)隊(duì)