24種優(yōu)化網(wǎng)頁速度的終極方法

時(shí)間：2023-09-22 21:18:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-22 21:18:02 來源：網(wǎng)站運(yùn)營(yíng)

24種優(yōu)化網(wǎng)頁速度的終極方法：采自：?？松瓟?shù)字營(yíng)銷 24種優(yōu)化網(wǎng)頁速度的終極方法

什么是網(wǎng)頁速度？
網(wǎng)頁速度是衡量頁面內(nèi)容加載的速度。
頁面速度可以用“頁面加載時(shí)間-LCP”(在特定頁面上完全顯示內(nèi)容所需的時(shí)間)或“首字節(jié)時(shí)間”(瀏覽器從網(wǎng)頁服務(wù)器接收第一個(gè)字節(jié)的信息所需的時(shí)間)來描述。
快速加載頁面可以提高用戶體驗(yàn)，增加頁面瀏覽量，并且有助于網(wǎng)站的 SEO。在這篇文章中，我們將分享最有用的網(wǎng)頁速度優(yōu)化技巧，以提高網(wǎng)頁性能速度。

如何衡量網(wǎng)頁速度？
鑒于我們優(yōu)化速度是為了展示給谷歌和訪客。 所以你可以首選 Google 的 PageSpeed Insights 來評(píng)估你的頁面速度。





PageSpeed Insights Speed Score 整合了來自 CrUX (Chrome 用戶體驗(yàn)報(bào)告)的數(shù)據(jù)，并報(bào)告了兩個(gè)重要的速度指標(biāo): First Contentful Paint (FCP)和 DOMContentLoaded (DCL)。
當(dāng)然都是數(shù)值越小越好。





除此之外還有很多速度測(cè)試工具，?？松瓟?shù)字營(yíng)銷常用的有：
GTMETRIX: 顯示北美地區(qū)的頁面打開速度。
Uptrends：顯示全球各個(gè)地區(qū)和城市的打開速度。

為什么優(yōu)化網(wǎng)頁速度很重要？
有四個(gè)原因：

• 谷歌表示，網(wǎng)站速度(以及網(wǎng)頁速度)是其算法用來對(duì)網(wǎng)頁進(jìn)行排名的信號(hào)之一。研究表明，Google 可能在考慮頁面速度的時(shí)候，會(huì)專門測(cè)量第一個(gè)字節(jié)的時(shí)間。
• 另外，頁面速度慢意味著搜索引擎可以使用分配的抓取預(yù)算抓取更少的頁面，這可能會(huì)對(duì)索引產(chǎn)生負(fù)面影響。
• 頁面速度對(duì)于用戶體驗(yàn)也很重要。加載時(shí)間較長(zhǎng)的網(wǎng)頁往往有較高的跳出率和較低的平均頁面時(shí)間。較長(zhǎng)的加載時(shí)間也會(huì)對(duì)轉(zhuǎn)化產(chǎn)生負(fù)面影響。
• 影響業(yè)務(wù)成功試想一下如果你的頁面15秒才能打開，相信99%的客戶在網(wǎng)頁打開前就已經(jīng)放棄了，那1%可能只是你自己。根據(jù)統(tǒng)計(jì)，至少要確保你的頁面在3秒鐘內(nèi)打開，才不至于產(chǎn)生太多的跳出。如果客戶都跳出了，也就不會(huì)有業(yè)務(wù)的產(chǎn)生。

什么是好的頁面速度？
在開始優(yōu)化你網(wǎng)站速度之前，最好要設(shè)定一個(gè)目標(biāo)。
如果不確定可接受的頁面速度是多少，那可能會(huì)很難做。
根據(jù)谷歌的說法，最佳實(shí)踐是三秒。
不幸的是，根據(jù)其最近的基準(zhǔn)報(bào)告調(diào)查結(jié)果，大多數(shù)網(wǎng)站都遠(yuǎn)未達(dá)到這一點(diǎn)。
在對(duì)跨越 126 個(gè)國家/地區(qū)的 900,000 個(gè)移動(dòng)廣告登陸頁面的分析中，谷歌發(fā)現(xiàn) 70% 的頁面需要將近 7 秒的時(shí)間才能顯示首屏的視覺內(nèi)容。
在他們包括的所有行業(yè)中，沒有一個(gè)行業(yè)的平均水平接近他們推薦的 3 秒。



完全加載移動(dòng)登錄頁面所需的平均時(shí)間為 22 秒，但如果移動(dòng)網(wǎng)站的加載時(shí)間超過 3 秒，則 53% 的訪問會(huì)被放棄。
此外，隨著頁面加載時(shí)間從 1 秒變?yōu)?10 秒，移動(dòng)用戶彈跳的概率會(huì)增加 123%。





這意味著網(wǎng)站所有者通常有很多工作要做，以使他們的網(wǎng)站達(dá)到谷歌眼中的標(biāo)準(zhǔn)。
但是從好的方面來說，這也意味著如果你投入工作使你的網(wǎng)頁速度達(dá)到一個(gè)可接受的水平，那么你在用戶體驗(yàn)方面就遠(yuǎn)遠(yuǎn)領(lǐng)先于其他人。
當(dāng)你改進(jìn)網(wǎng)站時(shí)，你可以使用 Google 的建議和基準(zhǔn)來設(shè)定你的目標(biāo)和衡量你的表現(xiàn)。
畢竟，作為世界上最大的搜索引擎，谷歌可以對(duì)你的成功產(chǎn)生重大影響。所以用他們的標(biāo)準(zhǔn)作為你的標(biāo)準(zhǔn)絕對(duì)不是個(gè)壞主意。

網(wǎng)頁速度優(yōu)化最佳實(shí)踐
1.選擇合適的網(wǎng)站服務(wù)器。
便宜的服務(wù)器可能雖然經(jīng)濟(jì)。但經(jīng)常在速度加載方面不盡人意。
?？松瓟?shù)字營(yíng)銷目前使用的是siteground服務(wù)器（首年優(yōu)惠價(jià)格80美元左右），但是可以確保網(wǎng)站速度更快，所以值得投資。
以下是我們幾個(gè)用siteground服務(wù)器搭建的網(wǎng)站速度測(cè)試截圖。








再例如，?？松瓟?shù)字營(yíng)銷自營(yíng)的玻璃行業(yè)外貿(mào)網(wǎng)站，2021年之前采用的是bluehost服務(wù)器。平均打開速度為3.5秒左右。
換到siteground服務(wù)器后，平均速度1秒以內(nèi)。



網(wǎng)站跳出率更是從原來的70%降到了2%。





2. 優(yōu)化圖片
圖片在網(wǎng)頁中對(duì)頁面打開速度的影響是一個(gè)主要的因素。
往往一個(gè)頁面的尺寸大小很大程度上取決于該頁面圖片的大小。
因此要確保對(duì)圖片進(jìn)行壓縮然后再上傳到網(wǎng)站頁面。
這里有個(gè)壓縮圖片的工具，推薦給大家：tinypng (可以提供免費(fèi)一次最多20個(gè)圖片的在線壓縮服務(wù)）





如果你使用的是wordpress網(wǎng)站，還可以使用圖片壓縮插件，如shortPixel。
通常使用的圖片格式要確保:png 格式的圖片少于16種顏色通常更好，而 jpeg 格式的圖片通常更適合拍攝照片。
另外埃克森數(shù)字營(yíng)銷通過自身經(jīng)驗(yàn)發(fā)現(xiàn)：同樣尺寸的圖片使用webp格式的圖片所占用的儲(chǔ)存最小。

3.使用CDN
CDN可以幫助把你的內(nèi)容發(fā)送到網(wǎng)站訪客居住地最近的服務(wù)器，以這種方式使你的網(wǎng)站加載更快。 常用的CDN工具如：cloudflare。





4.數(shù)據(jù)庫優(yōu)化
隨著網(wǎng)站的使用數(shù)據(jù)庫會(huì)積累很多垃圾文件，這樣會(huì)拖慢網(wǎng)頁打開的速度。
所以需要定期對(duì)數(shù)據(jù)庫進(jìn)行優(yōu)化。
例如，?？松瓟?shù)字營(yíng)銷在wordpress網(wǎng)站中使用了wp-optimize插件對(duì)數(shù)據(jù)庫進(jìn)行優(yōu)化。
僅需2分鐘左右，可以將數(shù)據(jù)庫的文件有效變小，從而提升網(wǎng)頁打開速度。
如果你是用的其他建站程序，可以搜索適合的服務(wù)器優(yōu)化工具或者第三方服務(wù)。





5.使用瀏覽器緩存
瀏覽器會(huì)緩存大量信息(樣式表、圖片、 JavaScript 文件等等) ，這樣當(dāng)訪問者返回站點(diǎn)時(shí)，瀏覽器就不必重新加載整個(gè)頁面。
使用 YSlow 這樣的工具來查看你是否已經(jīng)為緩存設(shè)置了過期日期。
在許多情況下，除非站點(diǎn)設(shè)計(jì)經(jīng)常變化，否則一年是一個(gè)合理的時(shí)間段。





6.刪除渲染阻塞 JavaScript
瀏覽器在呈現(xiàn)頁面之前，必須通過解析 HTML 來構(gòu)建 DOM 樹。如果你的瀏覽器在這個(gè)過程中遇到一個(gè)腳本，它必須停止并執(zhí)行它，然后才能繼續(xù)。
7.減少重定向
每當(dāng)一個(gè)頁面重定向到另一個(gè)頁面時(shí)，訪問者將面臨額外的時(shí)間，等待 HTTP 請(qǐng)求-響應(yīng)周期完成。
例如，如果你的移動(dòng)重定向模式是這樣的:
example. com-> www.example. com-> m.example. com-> http://m.example.com/home
這兩個(gè)附加的重定向都會(huì)使你的頁面加載變慢。





8.縮小 CSS，JavaScript 和 HTML
通過優(yōu)化代碼(包括刪除空格、逗號(hào)和其他不必要的字符) ，可以顯著提高頁面速度。還要?jiǎng)h除代碼注釋、格式和未使用的代碼。推薦使用 CSSNano 和 UglifyJS。
9.使用加速插件
如果你的網(wǎng)站是用wordpress程序，你可以使用WP-Rocket插件來對(duì)網(wǎng)站進(jìn)行加速。
WP-Rocket工具是迄今為止埃克森數(shù)字營(yíng)銷使用過的最好用的加速插件。





10.優(yōu)先優(yōu)化移動(dòng)端頁面打開速度
谷歌現(xiàn)在的速度排名因素為移動(dòng)優(yōu)先，所以要優(yōu)先確保你的網(wǎng)站在移動(dòng)端打開速度很快。
例如為移動(dòng)端：

• 剔除任何不必要的內(nèi)容
• 簡(jiǎn)化你的設(shè)計(jì)
• 更新你的 WordPress 插件
• 等等。

11.減少插件使用數(shù)量
在wordpress網(wǎng)站中，插件的原則是Less is More！
很多人喜歡安裝各種各樣的插件以實(shí)現(xiàn)各種花哨的功能。
殊不知他們?cè)跔奚W(wǎng)站的打開速度。
各種插件在網(wǎng)站的加載會(huì)大大拉慢頁面打開的速度。
因此插件的使用原則是越少越好，能用代碼解決的，盡量不要使用插件。
例如埃克森數(shù)字營(yíng)銷的這個(gè)網(wǎng)頁僅僅使用了6個(gè)插件:



以下是網(wǎng)頁打開速度截圖:





12.減少廣告
很多網(wǎng)站為了營(yíng)收，接入了大量的外部廣告，這同樣會(huì)減慢頁面打開速度。
13.DIY速度優(yōu)化
在線業(yè)務(wù)所有者和網(wǎng)站管理員通過改進(jìn)和優(yōu)化決定頁面速度的網(wǎng)站設(shè)計(jì)關(guān)鍵元素，使他們的網(wǎng)站打開速度保持最佳結(jié)果。
例如：
?？松瓟?shù)字營(yíng)銷在設(shè)計(jì)網(wǎng)頁中，盡量減少模塊來提升速度。
兩個(gè)元素使用兩個(gè)block,的響應(yīng)時(shí)間要比使用一個(gè)block的響應(yīng)時(shí)間長(zhǎng)。
下面是關(guān)于我們?nèi)绾伟讶齻€(gè)模塊的元素優(yōu)化到一個(gè)模塊中來提升網(wǎng)頁速度的視頻：
一段視頻：

https://www.zhihu.com/video/1553776368873279488


14.使用最新版本的PHP
PHP 7的發(fā)布帶來了巨大的性能提升！
它應(yīng)該優(yōu)先于許多你可能在 WordPress 網(wǎng)站上進(jìn)行的小型優(yōu)化。


15.選擇和你客戶最近的服務(wù)器位置。
例如你使用siteground服務(wù)器，你的客戶主要在美國，那么在選擇siteground位置的時(shí)候可以選擇USA。


16.選擇輕量化wordpress主題
如果你的網(wǎng)站正在使用wordpress程序，那么選擇一個(gè)輕量級(jí)的主題有助于提升網(wǎng)頁打開速度。
埃克森數(shù)字營(yíng)銷使用過的輕量化主題有：astra， oceanwp, Hello。
當(dāng)然還有很多其他輕量話主題，你可以去探索一下。


17.使用外部托管平臺(tái)
例如視頻是用戶喜歡的網(wǎng)站多媒體元素，但是在網(wǎng)頁中上傳視頻會(huì)大大降低網(wǎng)頁打開速度。
解決辦法是可以將視頻發(fā)布到y(tǒng)outube，然后嵌入到網(wǎng)頁，這樣就不會(huì)影響到自己網(wǎng)頁的打開速度。


18.找出拉慢網(wǎng)速的插件
使用New Relic找出拉慢速度的插件。 然后停用或卸載。


19.將不用的插件反激活或卸載
例如，網(wǎng)站在建站過程中可能會(huì)用到“under construction”插件。
那么等到網(wǎng)站建設(shè)完畢后，此類的插件完全可以直接卸載掉。否則會(huì)營(yíng)銷的網(wǎng)頁打開的速度。


20.禁用 pingbacks 和 trackbacks
pinbacks和 trackbacks 是 WordPress 的兩個(gè)核心組件，每當(dāng)你的博客或頁面收到鏈接時(shí)，它們都會(huì)提醒你。
這可能聽起來很有用，但是你也可以通過谷歌網(wǎng)站管理員工具和其他服務(wù)來檢查你網(wǎng)站的鏈接。
保持 pingbacks 和 trackback 處于開啟狀態(tài)還會(huì)給服務(wù)器資源帶來不必要的壓力。


這是因?yàn)槊慨?dāng)有人試圖鏈接到你的網(wǎng)站時(shí)，它就會(huì)從 WordPress 來回生成請(qǐng)求。
當(dāng)用 DDoS 攻擊一個(gè)網(wǎng)站時(shí)，這個(gè)功能也被廣泛濫用。
你可以關(guān)掉。


WP-dashboard → Settings → Discussion。
只需取消選中“允許來自其他博客的鏈接通知(pingbacks 和 trackbacks)”這將幫助你加快 WordPress 的運(yùn)行速度。





21 .最小化 HTTP 請(qǐng)求
據(jù)雅虎稱，一個(gè)網(wǎng)頁80% 的加載時(shí)間都花在了下載頁面的不同部分上，比如圖片、樣式表和腳本。
每個(gè)元素都會(huì)發(fā)出一個(gè) HTTP 請(qǐng)求，因此頁面上的組件越多，頁面呈現(xiàn)所需的時(shí)間就越長(zhǎng)。
最小化網(wǎng)站http請(qǐng)求的第一步是計(jì)算出網(wǎng)站當(dāng)前生產(chǎn)了多少，以此作為基準(zhǔn)。
如果你使用 Google Chrome，你可以使用瀏覽器的開發(fā)工具來查看你的網(wǎng)站發(fā)出了多少 HTTP 請(qǐng)求。
右鍵單擊要分析的頁面，單擊“ Inspect”，然后單擊“ Network”選項(xiàng)卡。(如果您沒有看到“ Network”選項(xiàng)卡，那么您可能需要將左邊框拖動(dòng)到左側(cè)，以擴(kuò)展 Developer Tools 側(cè)欄。)



減少這些數(shù)量的請(qǐng)求將加快你的網(wǎng)頁速度，查看你的文件，看看是否有任何不必要的。
22.延遲 JavaScript 加載
延遲文件意味著在其他元素加載完成之前不能加載文件。
如果你推遲大文件，比如 JavaScript，可以確保你的其他內(nèi)容可以毫不延遲的加載。
如果你有一個(gè) WordPress 站點(diǎn)，可以使用上面提到的 WP Rocket 插件來輕松啟用延遲的 JavaScript 加載。
只需選中“ Load JS files deferred”旁邊的框，就可以開始了。
如果你有一個(gè) HTML 站點(diǎn)，你需要在 標(biāo)簽之前放置一個(gè)調(diào)用外部 JavaScript 文件，它看起來像這樣:



23.最小化到第一個(gè)字節(jié)的時(shí)間
除了完全加載頁面所需的時(shí)間，你還需要看看開始加載所需的時(shí)間。
到第一個(gè)字節(jié)(TTFB)的時(shí)間，是瀏覽器從服務(wù)器獲取第一個(gè)字節(jié)數(shù)據(jù)之前必須等待的時(shí)間。
谷歌推薦的 TTFB 小于200毫秒。
與大多數(shù)站點(diǎn)所有者關(guān)注的許多前端性能因素不同，這是一個(gè)服務(wù)器端的問題。
當(dāng)用戶訪問你的網(wǎng)站時(shí)，他們的瀏覽器會(huì)向承載它的服務(wù)器發(fā)送一個(gè) HTTP 請(qǐng)求。
初始請(qǐng)求和數(shù)據(jù)的第一個(gè)字節(jié)之間需要執(zhí)行三個(gè)步驟:

1. DNS 查找
2. 服務(wù)器處理
3. 響應(yīng)

你可以使用 Chrome 的開發(fā)工具或第三方工具查看網(wǎng)站需要多長(zhǎng)時(shí)間完成這個(gè)過程。
如果使用開發(fā)工具，請(qǐng)記住響應(yīng)時(shí)間可能會(huì)受到 Internet 連接的影響，這一點(diǎn)非常重要。
因此，你自己的連接越慢，你的服務(wù)器響應(yīng)就顯示得越慢。要在 Developer Tools 中訪問此信息，請(qǐng)單擊“ Network”選項(xiàng)卡并將鼠標(biāo)放在“ Waterfall”列的頂部項(xiàng)目上。







如果你有一個(gè) WordPress 網(wǎng)站，你的頁面很可能是動(dòng)態(tài)的。
這意味著在交付之前，它們需要與 PHP“構(gòu)建”的數(shù)據(jù)庫進(jìn)行交互。可以通過啟用緩存來減少這個(gè)過程所需的時(shí)間。
24.測(cè)試插件
當(dāng)你想要提高網(wǎng)站速度時(shí)，有兩種不同的方法來判斷哪些插件正在影響它。
首先是有選擇地禁用插件，然后測(cè)量你的網(wǎng)站的性能。
如果你有很多插件，這可能是一個(gè)冗長(zhǎng)乏味的過程，但是它會(huì)告訴你每個(gè)插件的不同之處。
首先，在啟用所有插件的情況下運(yùn)行速度測(cè)試。你可以使用諸如 GTmetrix、 Pingdom 或者其他你喜歡的網(wǎng)站速度工具來實(shí)現(xiàn)這一點(diǎn)。
然后，一次只停用一個(gè)插件，重新測(cè)試一下你的速度。
在每次測(cè)試之后，記下你的頁面加載時(shí)間，以及你停用了哪些插件以獲得更快的速度。
如果你有很多插件，這個(gè)過程可能需要一段時(shí)間。
幸運(yùn)的是，還有一個(gè)選擇: 安裝另一個(gè)插件。
Plugin Performance Profiler 是一個(gè)很好的選擇，可以用來識(shí)別那些在你的站點(diǎn)上拉慢網(wǎng)頁速度的插件。
另外，這比手動(dòng)停用單個(gè)插件和運(yùn)行網(wǎng)站速度測(cè)試要快得多，也容易得多(而且一旦你使用完它，你就可以隨時(shí)停用它)。
一旦你安裝了插件，進(jìn)入你的設(shè)置頁面并運(yùn)行網(wǎng)站掃描。
這將花費(fèi)你幾分鐘的時(shí)間，然后向你展示一個(gè)報(bào)告，詳細(xì)說明每個(gè)插件在你的網(wǎng)站上是如何表現(xiàn)的。





在報(bào)告頂部的插件加載時(shí)間告訴你站點(diǎn)上所有插件的累計(jì)加載時(shí)間，以及它們占總加載時(shí)間的百分比。
你還可以看到一個(gè)詳細(xì)的時(shí)間表，上面有每個(gè)插件的信息，你的主題，以及每個(gè)頁面的核心。
將幫助你準(zhǔn)確地確定在加載緩慢的頁面上出現(xiàn)了什么問題。



如果你發(fā)現(xiàn)任何插件在你的評(píng)估放慢你的網(wǎng)站，是不必要的，只需停用和刪除他們。
總結(jié)
降低網(wǎng)站加載時(shí)間的最大好處是，它將極大地幫助提高訪問者的體驗(yàn)。
無論是使用移動(dòng)設(shè)備還是個(gè)人電腦，情況都是一樣的。此外，它還將提高你在 serp 中的排名。
畢竟，減少主機(jī)的帶寬使用和客戶端更快的站點(diǎn)加載速度只會(huì)讓你在短期和長(zhǎng)期都受益。
現(xiàn)在輪到你來加速自己網(wǎng)頁的打開速度了。