減少博客頁面加載時間的17個有效技巧

已發表: 2020-11-10

想像一下訪問一個站點，每個頁面需要花費幾秒鐘來加載。

令人沮喪，不是嗎？

事實是，許多博客作者在加載精美的視覺元素（從圖像輪播到交互式窗口小部件）時忽略了其網站的加載速度。

那不是打動你的聽眾的方法。

他們需要的是一個博客，它可以快速加載，最大程度地提高可讀性並提供他們想要的信息。

讓我們討論如何給他們他們想要的東西。

博客加載速度優化的終極指南

1.為什麼頁面加載速度很重要
- 1.1保留更多流量
- 1.2增加轉化
- 1.3更高的搜索引擎排名
2.如何測試網站加載速度
3.如何減少博客加載時間
- 3.1刪除不需要的插件
- 3.2尋找功能更強大的插件
- 3.3升級您的託管計劃
- 3.4選擇一個更好的主題
- 3.5優化圖像
- 3.6禁用熱鏈接
- 3.7投資CDN
- 3.8最小化您的代碼
- 3.9避免渲染阻塞資源
- 3.10減少首頁上的帖子數量
- 3.11不要向讀者投放廣告
- 3.12清理服務器
- 3.13啟用網站緩存
- 3.14使用GZIP壓縮
- 3.15優化您的網站數據庫
- 3.16優化用戶評論
- 3.17在首頁上進行重點優化
4。結論

為什麼頁面加載速度很重要

除了改善的用戶體驗之外，從營銷的角度來看，快速的加載速度還具有許多好處。

保持更多流量

統計數據顯示，大約40％的用戶將離開網站，該網站在三秒鐘或更短的時間內無法加載。如果我們談論的是移動用戶，這個數字將躍升至53％。

您不知道為什麼您的博客的跳出率如此之低。

如果您繼續忽略博客的加載速度，則基本上可以將流量潛力減少一半。

增加轉化

您是否知道加載時間延遲一秒鐘會導致轉化率下降7％？

綜上所述，每次獲得價值100美元的轉化後，您要損失7美元。

它可能看起來並不龐大，但請記住，您的競爭對手的網站只有幾步之遙。

一旦讀者轉向擁有更好用戶體驗的其他博客，他們可能永遠也不會回頭。

更高的搜索引擎排名

如果您不知道，那麼在用戶體驗方面，像Google這樣的搜索引擎就非常特別。

這就是為什麼他們認為加載速度不僅對於台式機，而且對於移動網站都是重要的排名因素。

如果您不熟悉SEO或Search Engine Optimization一詞，建議您開始學習此文章。

現在，讓我向您展示實現一流博客性能的下一步：測量博客的實際加載速度。

如何測試網站加載速度

您可能認為您的網站已經足夠快地運行，但是只有Google的PageSpeed Insights之類的工具可以證明這一點。

簡而言之，它是一種性能優化工具，可以分析您的網站速度，檢測影響速度的問題，並提供建議列表以及有用的資源。

要使用PageSpeed Insights，請繼續並輸入博客的URL，然後單擊“分析”。

只需給PageSpeed Insights幾秒鐘即可發揮其魔力。

完成後，您會發現第一件事是對網站性能的深入評估，包括速度得分，影響加載速度的因素以及估計的延遲或註冊用戶輸入之前的延遲。

您還可以通過切換到“移動”標籤，將PageSpeed Insights用於移動性能。該工具應立即為您提供其他報告，以反映您的博客在智能手機和平板電腦上的表現。

找到你的速度分數了嗎？

從現在開始，我建議您使用它們作為衡量網站性能的主要手段。

您的目標很簡單：根據需要執行盡可能多的優化，以達到速度得分範圍的“快速”目標。

讓我告訴你我在說什麼。

您可能會在某個地方讀到至少85的速度得分就足夠了，考慮到即使是像Facebook這樣的大型網站，其得分也都低於90，這實際上是正確的。

但是，作為一個試圖在您的利基市場中嶄露頭角的新興品牌，決不能選擇“足夠好”。

您應該始終把握機會，幫助您在競爭中脫穎而出。

這些機會之一就是通過提高加載速度來改善網站上的用戶體驗。

準備採取下一步行動？然後讓我們開始吧。

如何減少博客加載時間

既然我們已經介紹了頁面加載速度優化的“為什麼”，那麼該討論“如何”了。 ”

如果您對Web開發了解一兩件事，執行PageSpeed Insights中顯示的建議應該可以助您優化性能。您應該可以在“實驗室數據”部分的下面找到它們。

自然，您在PageSpeed Insights上獲得的建議取決於您網站的整體狀態。但是，大多數常見的優化建議將包含在我下面匯總的策略列表中。

事不宜遲，以下是邁向更快，更有利可圖的博客的可靠途徑：

1.刪除不需要的插件

博客發布平台和諸如WordPress之類的內容管理系統通常支持大量現成的插件，這使得實現各種功能變得容易。

您可以使用在線預訂小部件，創建自定義加入表單，構建令人印象深刻的登錄頁面-無需始終編寫任何代碼。只需使用集成的搜索欄即可快速找到滿足您需求的插件。

談論便利。

但是，利用插件可能是一把雙刃劍。

您不僅可以使用所需數量的插件來加載您的網站。

一頁中的插件太多會佔用服務器資源，並使您的網站緩慢爬網。

如果您從沒有過多關注插件庫，則可能會安裝具有相似核心功能的冗餘插件。

您會認為，如果您要安裝多個相同類型的插件，WordPress會警告您。

不幸的是，事實並非如此。

看看我可以塞入WordPress儀表板的許多表單構建器：

好消息是，可以通過停用不再需要的插件來輕鬆解決相似插件之間的衝突。

為此，請從信息中心中展開“插件”菜單，然後轉到“已安裝插件”。 在此處，選擇所有不需要的插件，然後從“批量操作”下拉菜單中應用“停用”或“刪除”命令。

除了類似插件之間的衝突之外，某些插件（尤其是未經當前版本WordPress測試的插件）可能會使您的儀表板陷入困境。

您可以通過一次安裝一個插件來避免這種情況，同時避免使用“未經測試”的插件。

如果您在WordPress儀表板上遇到較長的加載時間，崩潰或其他問題，請停用最後安裝的插件。如果問題仍然存在，則可能是其他插件引起的。

到那時，您可以停用所有插件並一一打開，直到找到罪魁禍首。完成後，請考慮尋找替代插件或將其更新到最新版本。

2.尋找功能更多的插件

在使用插件時，讓我們簡單介紹一下您的插件選擇。

在WordPress中，插件越少越好。

盡可能地尋找可以戴很多帽子的插件，而不是為要實現的每個功能安裝一個新的插件。

例如，與其使用單獨的插件來進行聯繫方式，星級，評論和登錄頁面設計，不如使用Elementor Page Builder這樣的插件將所有這些功能整合為一個。

從CMS中刪除多餘的插件後，讓我們看看另一個可能導致您的網站運行緩慢的因素。

3.升級您的託管計劃

對於新博客來說，為您的網站提供一美元的託管計劃確實令人難以抗拒。

但是一旦您開始每月產生數百甚至數千的訪問者，您就會理解為什麼託管公司以這個價格點提供計劃。

經常出現速度變慢，停機，客戶支持不佳的情況-這些都是選擇便宜的Web託管解決方案的弊端。這主要是因為一美元託管服務通常使用功率不足的基準服務器硬件。

“如果您對寫博客很認真，那麼您的網站應該比最便宜的託管計劃更好。” – Ankit Singla

做您的研究並尋找大量正面評價支持的網絡託管公司，例如：

藍主機
HostGator
SiteGround
WPXHosting

如有疑問，可以使用類似Pickuphost的工具來測試您正在考慮的任何主機的速度。您需要做的就是從下拉菜單中選擇託管服務提供商，選擇服務器位置，然後單擊“開始測試”。

理想情況下，您應該選擇目標受眾附近的服務器位置。

您可能還會注意到，大多數託管公司提供多種計劃，包括共享計劃，虛擬專用服務器或VPS和專用計劃。

對於大多數博客而言，VPS託管計劃應該足以滿足您網站的帶寬需求。另一方面，如果您還沒有成群的流量，共享託管計劃也可能是可行的。

我建議您首先從共享主機開始，並在博客流量增加後升級到採用VPS的計劃。

選擇專用託管的唯一原因可能是您的站點還具有包含數百種產品的在線商店。在這種情況下，即使是VPS主機也可能沒有保持數字商店正常運行所需的帶寬容量。

4.選擇一個更好的主題

說到帶寬，您可以通過選擇一個更簡單，簡約的主題來降低網站的帶寬需求。

WordPress用戶應該立即了解我在說什麼。

畢竟，WordPress主題庫已經有幾個免費的簡約主題。甚至第三方主題設計器都具有大量輕量級主題，可以改善您網站的性能。

此處的關鍵是尋找不帶有不必要的視覺細節的主題，例如圖像滑塊，動畫和CSS效果。

您可以通過預覽主題來自己檢查這些元素，這是大多數主題市場（包括WordPress主題目錄）中的主要功能。

Studiopress的Genesis兒童主題是我最喜歡的WordPress主題之一。他們提供了數十種簡約的，適合移動設備使用的主題，這些主題也與Gutenberg編輯器兼容，後者是WordPress 5.0及更高版本的默認內容編輯器。

更重要的是，這些主題將幫助您加快網站的加載速度。

要了解有關Genesis主題及其好處的更多信息，您絕對應該查看此評論。

5.優化您的圖像

並非所有影響網站性能的視覺元素都包含在主題中。

您上傳到網站的每張圖片，無論是網站的徽標，特色圖片，按鈕還是信息圖表，都會增加博客的帶寬要求，從而影響性能。

但是，由於視覺內容是每個博客中的必備內容，所以您也不能僅停止使用圖片來增添內容趣味性。相反，您可以使用Kraken.io之類的圖像壓縮工具來減小圖像的大小，而不會明顯改變質量。

Kraken.io帶有免費的基於雲的無損壓縮工具，可以批量優化圖像。只需將圖像拖放到工具中或上載壓縮文件夾即可啟動壓縮過程。

不要忘記將壓縮模式設置為“ Lossless ”，這樣最終的圖像就不會顯得模糊。

對於自託管的博客作者，您可以使用WP Smush之類的插件提高WordPress速度，以一次性壓縮媒體庫中的所有圖像。只需點擊信息中心中的“ Smush”和“立即批量Smush”即可開始。

WP Smush還為您提供了一個選項，可以在圖像上傳後立即自動對其進行壓縮。要啟用此功能，請在插件界面“設置”部分下打開“自動雜音” 。

請記住，如果您喜歡視覺內容，就像我一樣，圖像壓縮只是您應該做的一件事。因此，我懇請您閱讀有關圖像優化和SEO的詳細指南。

6.禁用熱鏈接

即使進行了無損壓縮，由於熱鏈接，圖像仍會佔用服務器資源並降低站點速度。

這是一種常見的做法，其中另一個站點直接鏈接到您的圖像或文件-允許他們在自己的頁面上顯示這些資源。

當然，以正確的方式在其他網站上共享您的內容非常有用。但是，通過熱鏈接，這些站點最終會通過從站點中提取內容來使用您所支付的帶寬。

這就是為什麼熱鏈接通常也稱為帶寬竊取。

您可以通過在“ .htaccess文件”中添加以下代碼來徹底停止熱鏈接：

gzip on;
gzip_disable“ msie6”;
gzip_vary on;
gzip_proxied任何；
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types應用程序/ javascript應用程序/ rss + xml應用程序/vnd.ms-fontobject應用程序/ x-font應用程序/ x-font-opentype應用程序/ x-font-otf應用程序/ x-font-truetype應用程序/ x-font-ttf應用程序/ x-javascript應用程序/ xhtml + xml應用程序/ xml字體/ opentype字體/ otf字體/ ttf圖像/ svg + xml圖像/ x-icon文本/ css文本/ javascript文本/純文本/ xml;

對於那些不知道在哪裡可以找到其網站的.htaccess文件的用戶，可以在您的託管帳戶的控制面板上找到該文件。

您需要做的是尋找託管服務的“文件管理器”，然後導航到網站的根文件夾。您的.htaccess文件應在此處，帶有類似於記事本的圖標：

7.投資CDN

完成圖像壓縮和防止熱鏈接？

好。

如果我告訴您有辦法使圖像加載更快，該怎麼辦？

借助內容交付網絡或CDN，您可以利用代理服務器的整個網絡來加快網站數據向用戶的傳輸速度。

最好的部分是，CDN服務提供商可以看到他們的服務器分佈在全球的關鍵位置。這顯著減少了來自遙遠地區的訪客通常會遇到的延遲問題。

就像網絡託管服務商一樣，在為博客選擇CDN時需要小心。

不用擔心-我為您可以使用的WordPress博客創建了最佳CDN服務列表。

我可以親自擔保MaxCDN，就成本和功能而言，它是迄今為止最好的CDN之一。

8.最小化您的代碼

圖像並不是唯一會增加網站帶寬要求的東西。

HTML，CSS和JavaScript之類的代碼也可能會導致網頁大小增加。

解決辦法？通過刪除代碼中任何不必要的字符（例如空格，多餘的行和註釋）來最小化它們。

這些字符無論如何都不會影響代碼的功能，但是會增加文件的大小。反過來，瀏覽器在加載頁面時將花費更長的時間來下載和運行代碼。

請稍等-這是否意味著您必須仔細閱讀站點上的每個代碼才能逐一刪除不必要的字符？

冷靜。

就像圖像壓縮一樣，可以使用一些工具來自動執行此過程。

例如，Minify Code是一個免費工具，可以在幾秒鐘內修剪代碼。它適用於您網站上可能包含的所有JavaScript，CSS和HTML文件。

如果您使用WordPress，另一種方法是使用W3 Total Cache之類的插件，該插件可以一舉將您的代碼資產減至最少。

安裝後，在主儀表板上單擊“性能” ，然後單擊“縮小”以查看您的選項。

我建議打開以下設置來優化網站代碼以提高性能：

HTML縮小設置
JS縮小設置
CSS縮小設置

閱讀此W3 Total Cache教程，了解所有最佳設置。

9.避免渲染阻止資源

由於我們的主題是代碼，因此讓我們深入研究更高級的內容。

如果您運行PageSpeed Insights並被告知“消除渲染阻止資源”，則可能需要動手編寫一些代碼，以最大程度地提高博客的性能。

簡而言之，渲染阻止資源是阻礙網站核心HTML內容加載的代碼。這意味著除非加載有問題的資源，否則不會加載您的徽標，菜單，帖子和頁面的其他基本元素。

阻止渲染的資源可以是樣式表，HTML導入和各種腳本。 PageSpeed Insights應該為您提供以下代碼的完整列表：

為了處理阻止渲染的資源，最簡單的步驟是將JavaScript移至網站HTML的底部，即緊接在“ </ body>”標記之前。

您也可以使用“ defer”屬性僅在HTML完全加載後才加載腳本。這可以通過在“ <script>”標記中插入defer =“ defer”來完成。

請查看這篇文章，以獲取有關渲染阻止資源以及如何對其進行優化的更多信息。

當然，如果您不喜歡使用代碼，總是可以從Web開發人員那裡獲得幫助。或者，您可以使用Autoptimize之類的插件將腳本自動推遲到網站的頁腳中-另一個WordPress速度優化插件可以使您的工作輕鬆一百倍。

10.減少首頁上的帖子數量

接下來，讓我們討論一下首頁上顯示的帖子數。

像WordPress和博客發布平台這樣的CMS通常具有過多的主題，可以展示一開始的博客文章。

如果您為每個帖子使用高質量的特色圖片，則用戶將不可避免地需要更多時間來加載您的主頁。

我個人只在首頁上顯示四篇文章，以作充分考慮：

當然，在加載圖像時，瀏覽器可能會拉出您博客文章的標題（有時包括說明或內容的前幾行）。但這仍然降低了您網站上用戶體驗的整體流暢性。

從好的方面來說，大多數網站平台和CMS允許您減少首頁上顯示的帖子數量。

由於您需要調整的設置因平台而異，因此讓我們看一下如何在WordPress上完成設置。

在主儀表板上，單擊“設置”，然後轉到“閱讀”部分。

您應該立即看到“最多顯示博客頁面”設置。隨意將默認值調整為任何較小的數字，並檢查是否可以提高網站的加載速度。

11.不要用廣告氾濫讀者

儘管首頁上的帖子預覽可能會對您的加載速度產生負面影響，但至少它們對讀者的體驗有積極的幫助。

但是，廣告通常不會。

雖然確實可以肯定的是，廣告對於通過博客獲利絕對有用，但是如果您破壞了他們在單個頁面上使用多個廣告的體驗，那麼讀者可能會不喜歡它。更重要的是，在網站的每個角落設置廣告會導致其性能下降。

就是說，最好是讓您的受眾群體專注於博客的重要元素，並儘量減少廣告。

我不願意為了增加收入而犧牲讀者的體驗，因為您在我的網站上看到的廣告絕對為零。

如果您是我，那麼我將優先考慮會員鏈接作為我的主要獲利策略。這些是上下文鏈接，指向對用戶有幫助的產品或服務。

您如何通過會員營銷賺錢？

好問題。

如果您有興趣，可以參考我的會員營銷指南。

12.清理服務器

至此，您應該已經掌握了加載速度與網站上混亂程度之間的相關性。

這很簡單：如果您保持博客的簡約和簡潔，瀏覽器將不需要花費很多時間來加載所有內容並將其呈現給用戶。

在網站上添加更多元素時，無論是視覺內容，腳本還是廣告，請務必謹慎。同時，請確保您的託管帳戶仍具有足夠的磁盤空間，以使您的網站平穩運行。

您的託管帳戶應具有一個內置工具，可讓您跟踪整體磁盤使用情況。為了給您一個想法，這是SiteGround的“磁盤空間使用情況”工具的屏幕截圖：

如果您的託管帳戶空間不足，可以執行以下操作：

將備份移至本地驅動器
較舊的網站往往在其託管服務器中存儲了千兆字節的備份。將它們下載到本地驅動器並將其從服務器中刪除是釋放空間的好方法。
刪除閒置帳戶
如果託管計劃中有閒置帳戶，請永久刪除它們，以節省大量磁盤空間。由於這是一個不可逆的過程，因此請考慮在刪除之前先創建該帳戶的本地備份。
刪除.TMP文件
您的網站平台或CMS可能會通過插件更新和會話數據跟踪等任務生成臨時文件。刪除它們應該是安全的，但是出於安全考慮，創建“ tmp”文件夾的脫機備份也不會受到損害。

如有疑問，請聯繫您的託管服務提供商的客戶支持，以了解如何節省磁盤空間。

13.啟用網站緩存

壓縮圖像，減少代碼，減少廣告，清理託管帳戶-使用這些策略，您網站的加載速度應與以往一樣快。

但是暫時不要放鬆。我們還有其他一些策略可以討論，可以進一步提高您網站的加載速度。

使用網站緩存，您的博客幾乎可以瞬間加載，以供回頭客使用。

網站緩存通過啟用臨時存儲數據（包括腳本，圖像，媒體文件和其他形式的可下載內容）來工作，從而減少了瀏覽器必鬚髮出的HTTP請求的數量。

若要實現網站緩存，長方法是在網站的.htaccess文件頂部插入以下代碼：

##過期訓練##
<IfModule mod_expires.c>
有效期至
ExpiresByType圖片/ jpg“訪問1年”
ExpiresByType圖片/ jpeg“訪問1年”
ExpiresByType圖片/ gif“訪問1年”
ExpiresByType image / png“使用1年”
ExpiresByType text / css“訪問1個月”
ExpiresByType text / html“訪問1個月”
ExpiresByType應用程序/ pdf“訪問1個月”
ExpiresByType text / x-javascript“訪問1個月”
ExpiresByType應用程序/ x-shockwave-flash“訪問1個月”
ExpiresByType圖片/ x圖標“訪問1年”
過期默認為“訪問1個月”
</ IfModule>
##過期訓練##

如果需要，可以在某些緩存過期之前設置不同的時間限制。例如，如果要將PNG圖像緩存的過期時間減少到1個月，只需將“ ExpiresByType image / png”行修改為：

ExpiresByType image / png“訪問1個月”

同樣，WordPress用戶可以使用工具輕鬆實現此優化策略。實際上，我們已經經歷了您需要的插件-W3 Total Cache。

返回WordPress儀表板的“性能”子菜單，轉到“頁面緩存”，勾選“緩存帖子頁面”複選框。

14.使用GZIP壓縮

關閉W3 Total Cache並繼續執行本指南中剩餘的策略之前，您還應該做一件事。

從“性能”子菜單中，轉到“瀏覽器緩存”，然後選中“啟用HTTP（gzip）壓縮”選項。

GZIP壓縮通過減小基於文本的文件的大小來提高下載速度-與將本地文件壓縮為壓縮文件夾的過程沒有太大不同。 GZIP壓縮被廣泛用於網站速度優化的主要原因是，從1.1版本開始，HTTP本身就支持GZIP壓縮。

如果您不使用WordPress或任何其他具有GZIP相關插件的平台，則需要使用傳統方式啟用它：修改網站的.htaccess文件。

因為您已經知道可以在哪裡找到.htaccess文件，所以剩下的就是激活網站上GZIP壓縮的代碼。

繼續-複製並粘貼。

Apache服務器

<IfModule mod_deflate.c>
＃壓縮HTML，CSS，JavaScript，文本，XML和字體
AddOutputFilterByType DEFLATE應用程序/ javascript
AddOutputFilterByType DEFLATE application / rss + xml
AddOutputFilterByType DEFLATE application / vnd.ms-fontobject
AddOutputFilterByType DEFLATE應用程序/ x字體
AddOutputFilterByType DEFLATE應用程序/ x-font-opentype
AddOutputFilterByType DEFLATE應用程序/ x-font-otf
AddOutputFilterByType DEFLATE應用程序/ x-font-truetype
AddOutputFilterByType DEFLATE應用程序/ x-font-ttf
AddOutputFilterByType DEFLATE應用程序/ x-javascript
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE應用程序/ xml
AddOutputFilterByType DEFLATE字體/ opentype
AddOutputFilterByType DEFLATE字體/ OTF
AddOutputFilterByType DEFLATE字體/ ttf
AddOutputFilterByType DEFLATE image / svg + xml
AddOutputFilterByType DEFLATE圖片/ x-icon
AddOutputFilterByType定義文字/ css
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType DEFLATE文本/ javascript
AddOutputFilterByType定義文本/純文本
AddOutputFilterByType DEFLATE text / xml
＃刪除瀏覽器錯誤（僅適用於真正的舊瀏覽器）
BrowserMatch ^ Mozilla / 4 gzip-only-text / html
BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip
BrowserMatch \ bMSIE！no-gzip！gzip-only-text / html
標頭附加隨用戶代理而變化
</ IfModule>

NGINX服務器

gzip on;
gzip_disable“ msie6”;
gzip_vary on;
gzip_proxied任何；
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types應用程序/ javascript應用程序/ rss + xml應用程序/vnd.ms-fontobject應用程序/ x-font應用程序/ x-font-opentype應用程序/ x-font-otf應用程序/ x-font-truetype應用程序/ x-font-ttf應用程序/ x-javascript應用程序/ xhtml + xml應用程序/ xml字體/ opentype字體/ otf字體/ ttf圖像/ svg + xml圖像/ x-icon文本/ css文本/ javascript文本/純文本/ xml;

請記住，對於NGINX用戶，您需要將代碼粘貼到“ .conf”文件中以實現GZIP。