網(wǎng)站頁面速度測試以及任何其他相關(guān)指標(biāo)過去都是只有開發(fā)人員關(guān)心的事情。但是 PageSpeed Insights 成為非編碼人員以清晰的數(shù)字談?wù)摼W(wǎng)站的一種方式。他們可以比較網(wǎng)站,并衡量隨時間的變化,寶安網(wǎng)站建設(shè)競爭對手的代理機(jī)構(gòu)可能會提取測試結(jié)果并聲稱您客戶的新的、昂貴的網(wǎng)站制作不佳。
此外,搜索引擎傾向于在其頁面速度算法中“試用”項目,這些項目最終成為 SEO 排名的關(guān)鍵決定因素。還記得“mobile-geddon”嗎?Mobile-geddon 是搜索引擎宣布沒有移動友好版本的網(wǎng)站排名低于移動友好版本的時候。這導(dǎo)致急于使網(wǎng)站在設(shè)備上更好地顯示,以避免搜索引擎優(yōu)化的后果。PageSpeed Insights 測試讓開發(fā)人員可以在搜索引擎的政策正式推出之前衡量他們的移動性能。
核心網(wǎng)絡(luò)生命力
寶安網(wǎng)站建設(shè)[敏感詞]試用的元素統(tǒng)稱為Core Web Vitals。該術(shù)語指的是三個元素:首次輸入延遲 (FID)、[敏感詞]內(nèi)容繪制 (LCP) 和累積布局移位 (CLS)。這些項目中的每一項在 PSI 結(jié)果頁面上都有一個藍(lán)色標(biāo)志。
首次輸入延遲是指用戶與您的網(wǎng)站交互之前的時間。如果腳本繼續(xù)在后臺加載,用戶可能無法立即單擊某些內(nèi)容。請注意,由于 FID 是關(guān)于真實世界的用戶,因此該指標(biāo)在實驗室數(shù)據(jù)中不可用。
[敏感詞]內(nèi)容繪制是指在視口中加載[敏感詞]項目(首屏)需要多長時間。這可以是背景視頻或英雄圖像。
累積布局偏移是指計算您的內(nèi)容從顯示后繼續(xù)加載的項目中意外“偏移”的程度。想一想有一個你想點擊的按鈕的網(wǎng)站,在你點擊之前,一個橫幅廣告會在上面彈出,按下按鈕。您很可能會點擊橫幅廣告而不是按鈕。這顯然是一種加重體驗,所以這個指標(biāo)是一種對抗它的策略。
寶安網(wǎng)站建設(shè)了解到搜索引擎相關(guān)報告稱,從 2021 年 5 月開始,在確定頁面排名時將考慮 Core Web Vitals 分?jǐn)?shù)。這使得現(xiàn)在是查看分?jǐn)?shù)并為下一次算法更新做準(zhǔn)備的[敏感詞]時機(jī)。
如何提高我的分?jǐn)?shù)?
您的網(wǎng)站頁面速度得分是否不像您希望的那樣綠色和閃亮?不要害怕——有各種各樣的提示和技巧可以提高你的分?jǐn)?shù)。
1、找一個好的托管服務(wù)提供商
您是否因減少初始服務(wù)器響應(yīng)時間而受到標(biāo)記?并非所有托管都是平等的。共享服務(wù)器上的廉價托管計劃不會像專用硬件那樣快速響應(yīng)。托管的價格差異很大,您很容易超支?;c時間查看可用的軟件包,然后選擇一個能夠充分支持您網(wǎng)站流量的選項。
2、確保支持并啟用GZIP
GZIP 是一種在服務(wù)器級別壓縮數(shù)據(jù)的方法。它允許更快地加載圖像、樣式表和腳本文件等常見資產(chǎn)。
3、壓縮和延遲加載您的圖像
網(wǎng)頁設(shè)計師和客戶通常希望上傳他們擁有的[敏感詞]質(zhì)量的圖像。不幸的是,這將完全扼殺網(wǎng)站的加載速度。即使資產(chǎn)在 Photoshop 中被壓縮,仍然可以通過TinyPNG或Smush等圖像壓縮工具發(fā)送。此外,盡可能多地延遲加載首屏下方的圖像。延遲加載將延遲加載圖像,直到用戶將視口滾動到圖像所在的位置。減少頁面加載所需的元素將極大地影響速度。插件選項可用于延遲加載,但您也可以通過在主題中使用延遲加載庫來添加本機(jī)支持。
4、使用自定義字體的“交換”選項
如果在加載自定義字體之前文本不可見,PageSpeed Insights 會標(biāo)記您。您可以通過加載系統(tǒng)字體并在資源準(zhǔn)備好后將其“交換”為所需字體來避免這種“不可見文本閃爍”(FOIT)。如果您正在加載 Google 字體,只需將 &display=swap 添加到 Google 字體 URL。如果您在樣式表中使用@font-face,您可以添加參數(shù)font-display:swap;。您還可以通過在標(biāo)題中預(yù)加載字體來更快地加載字體。使用 <link> 標(biāo)記中的 rel=”preload” 更早地獲取您的 .woff2 文件,即使在本地加載它們時也是如此。
5、合并和縮小 CSS & JS
您的主題是否結(jié)合并縮小了樣式表和腳本?偉大的!但這可能不足以安撫速度測試。使用插件,如WP Optimize,進(jìn)一步組合來自插件的文件并降低頁面加載時的請求總數(shù)。
6、檢查您的主題是否臃腫(未使用的代碼)
當(dāng)站點跨模板具有多個布局時,很難僅加載該特定頁面上使用的腳本和樣式。但是,您可以通過盤點實際使用的內(nèi)容來改進(jìn)一些刪除未使用的 JavaScript/CSS訂單項。也許您有一個您認(rèn)為需要但不需要的 JS 庫。插件也是如此 - 真正將活動插件縮減為僅您需要的插件。不要將插件用于您可以在主題中以本地方式提供便利的東西。
7、客觀地評估頁面的長度
如果您被標(biāo)記為避免過多的 DOM 大小,請問問自己:“此頁面上是否有太多內(nèi)容?” 許多人認(rèn)為尺寸過大意味著頁面很長,這是一種情況。但它也可以引用深層頁面或元素,例如嵌套畫廊、滑塊、手風(fēng)琴等。如果您知道一個頁面需要很多部分,請盡量保持它們的功能最小。如果您需要強(qiáng)烈的交互元素,請考慮將其放置在以它為主要內(nèi)容的頁面上。一旦對網(wǎng)站進(jìn)行編碼,除非您可以將整個元素移動到其他頁面,否則很難減小 DOM 大小。在項目的設(shè)計階段,您應(yīng)該牢記這一行項目。
8、維護(hù)您的重定向
如果資源 URL 已過期并且必須遵循重定向到其新位置,則您正在減慢加載所有頁面元素的過程。最常見的避免多頁重定向觸發(fā)器是必須從 http 重定向到 https。許多插件,甚至一些主機(jī),都有在頁面加載之前強(qiáng)制使用 https 的選項,這樣您就可以完全繞過重定向。
9、清點您的跟蹤腳本
您可以做所有其他事情,并且在您添加任何跟蹤腳本(分析、標(biāo)簽管理器、轉(zhuǎn)換像素等)的那一刻,您的網(wǎng)站頁面速度得分可能會直線下降。發(fā)生這種情況是因為第三方腳本通常無法通過大多數(shù) PageSpeed Insights 指標(biāo)。他們不必要地從一個 URL 重定向到另一個。他們不會縮小或緩存他們的資源。它們會立即加載到頁面上,而不是按需加載。具有諷刺意味的是,谷歌自己的分析 JS 在他們自己的測試中被標(biāo)記,但您可以影響存儲在第三方 CDN 上的文件。您可以做的是掌握腳本并刪除過期廣告系列的跟蹤元素。同樣,如果您正在運行 A/B 測試,請收集數(shù)據(jù),然后刪除測試腳本。在加載頁面之前必須修改輸出的任何內(nèi)容都會降低您的網(wǎng)站速度。
10、緩存
寶安網(wǎng)站建設(shè)在優(yōu)化了您可以控制的所有內(nèi)容后,找到適合您的緩存解決方案。緩存允許網(wǎng)站構(gòu)建和存儲預(yù)先構(gòu)建的文件,而不是在每次訪問時重新加載所有資產(chǎn)。一些托管服務(wù)提供商,例如WP Engine和SiteGround,作為您計劃的一部分提供了出色的服務(wù)器級緩存。還有一些選擇,比如Cloudflare,如果您的主機(jī)不提供緩存選項。此外,您可以找到許多 WordPress 插件來緩存您的網(wǎng)站。但是,請注意,其中一些插件實際上可能會降低您的 PageSpeed Insights 分?jǐn)?shù),因為它們需要更多時間來為新訪問者編譯網(wǎng)站。訪問者在點擊時會獲得更快的速度,但 PageSpeed Insights 機(jī)器人只會測試初始負(fù)載。
提高您的網(wǎng)站頁面速度以獲得更好的用戶體驗
顯然,在 PageSpeed Insights 測試中沒有[敏感詞]的解決方案??梢曰ㄙM很多很多時間來獲得幾分。
專注于您可以控制的元素,并確保您提供有意義的內(nèi)容。您的訪問者不太可能查看您的分?jǐn)?shù)。他們只是想感覺您的網(wǎng)站速度很快。你也應(yīng)該有這種感覺。畢竟,頁面速度只是一個數(shù)字。