網站速度優化初學者指南 修復慢速網站

已發表: 2020-04-16

不確定如何提高網站的整體速度?

網站速度是現代 SEO 的基礎部分,相信我; 它對排名有直接而顯著的影響。

如果您曾經訪問過我的網站 TheGuideX,您會注意到我的網站加載時間不到 1 秒(我還在下面附上了 GTmertix 結果)。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
使用 GTmetrix 工具的 TheGuideX.com 速度報告

根據 GTmetrix,TheGuideX.com 的 PageSpeed 得分為 100%,YSlow 得分約為 95%,加載時間為 0.9 秒,只有 23 個 HTTP 請求。 這是驚人的。

…這是 TheVPNCoupon.com 的另一份報告,我在該網站上發布了有關 VPN 的博客。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
TheVPNCoupon.com 使用 GTmetrix 工具的速度報告

根據 GTmetrix,我的另一個博客 (TheVPNCoupon.com) 的 PageSpeed 得分約為 99%,YSlow 得分為 95%,有 23-HTTP 請求,而且這個網站的加載時間也低於 1 秒(儘管加載這個只需要 800 毫秒)網站)。

加載時間低於 2 秒的網站被認為是可接受的加載速度。 但我們始終建議您盡可能優化您的網站,以獲得更好的加載速度。

那麼我該怎麼做才能優化我的網站速度呢? 它是否需要任何技術或開發技能來優化您的網站?

答案是不; 您不需要任何技術或開發技能來優化您的網站。 您可以使用一些 WordPress 插件和 CDN 輕鬆完成。 為了優化您的網站,首先,您需要一個更好的網絡託管計劃。

大多數業餘博主在這裡都失敗了,當他們要求我優化他們的網站時,我注意到他們在他們的網站上使用廉價的共享託管計劃,而使用廉價的託管計劃永遠無法使網站快速運行。

如果您對 VPS 有基本的了解,我建議您首先將您的網站轉移到 DigitalOcean 或 Cloudways,如果您想要基於 cPanel 的託管,您可以更改為 SiteGround。

使用“ TheGuideX ”優惠券在 Cloudways 上免費獲得 30 美元

此外,請確保在您的網站上使用 CDN。 如果您正在尋找免費的 CDN 提供商,那麼我會向您推薦 Cloudflare。 您還可以將 ImageKit 用於圖像 CDN(我在我的網站上使用它,它可以幫助我實時優化圖像)。

在我們深入研究速度優化技術之前,首先我們學習

目錄

為什麼速度很重要?

那麼您等待網站加載多長時間?

好吧,根據統計數據,我們中的一半人,即使是我,我也不想等待兩秒鐘讓網站加載。

這就是為什麼我想確保我的網站在一秒鐘內或盡可能快地加載。 今天,我將分享完全相同的方法,我在我的網站上使用它來優化它的速度。

但是為什麼網站的速度很重要? 幾分之一秒有什麼不同?

答案? 它有很大的不同!

但它如何產生很大的不同? 讓我們看一份詳細的報告,以了解有關速度為何重要的更多信息。

1. 緩慢的網站會扼殺轉化:

緩慢的網站可能會扼殺您的網站轉換。

讓我們想像一下,如果您是一個電子商務網站,並且您的網站加載大約需要四秒鐘。 根據各種報告,如果加載時間超過 3 秒,40% 的人會離開您的網站。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
速度慢會降低轉化率

因此,從這個意義上說,如果您的網站每月收到大約 1,00,000 次訪問量,並且加載您的網站大約需要四秒鐘,那麼有多達 40,000 人可能會放棄您的網站。

這樣一來,您將失去 40% 的用戶,因此也會影響網站的整體轉化率。 這樣,網站速度對於提高轉化率非常重要。

2. 我們期望速度和用戶體驗:

正如我上面已經提到的,如果加載時間超過三秒,40% 的人會離開你的網站。 說到我,我總是離開網站,加載需要兩秒或更長時間。

WTH 等待兩秒鐘加載網站?

如果我不能等待兩秒鐘,那我就不能指望我的讀者停留這麼久。

良好的用戶體驗涉及兩個主要因素:

  1. 為訪問者提供他們正在尋找的東西,以及
  2. 快給他們。
how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
網站加載速度慢

以下是有關 Google 新頁面體驗的更多排名因素,您可以考慮在您的網站上進行優化。

一旦訪問者感到困惑和沮喪,就意味著我們做錯了什麼,沒有什麼比加載時間慢更令人沮喪的了。

如果您真的想提高網站的整體性能,那麼網站加載速度應該是您的首要任務。

3. 網站速度影響您的 Google 排名:

最後但並非最不重要的一點是,它在谷歌排名中占主導地位。

谷歌已經承認他們正在努力讓整個網絡變得更快。 他們的使命是使網站超級快速、更可靠、更有用。

沒有良好的加載速度是不可能的,他們優先考慮加載速度快的網站。 據我所知,他們在 2010 年宣布,他們會稍微偏愛加載速度快的網站。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization

根據 SERoundtable 的報告,如果你的網站加載內容的時間超過 2 秒,那麼谷歌可能會限制它發送到你網站的爬蟲數量。

如果您的網站屬於這種情況,那麼 Google 不太可能更喜歡並獲取您的最新博客文章或註意到任何最近的更新。 它肯定會損害您的網站。

所以速度很重要,它會影響您的網站轉換; 它影響用戶體驗,也影響搜索引擎排名。

最佳

到目前為止,我相信您已經了解了快速加載網站的重要性。

現在,在我們繼續使用特定技術來幫助您優化網站的整體速度之前,讓我們花點時間來回顧一下可以幫助您分析網頁速度的工具。

網站速度測試工具

好的,所以網站速度優化很重要! 現在,你怎麼知道你在哪裡?

也就是說,您的網站速度慢嗎? 是在中間,還是快如閃電(那麼恭喜,您可能可以停止閱讀了!)。

唯一知道的方法是測試您的網站。 有很多網站可以衡量我們的網站速度,但在本指南中,我只會分享一些我個人喜歡使用的工具。

1.GTmetrix

GTmetrix 是檢查網站性能的最佳工具之一。 該工具對於臨時用戶和開發人員來說是一個不錯的選擇。

GTmetrix 提供了用戶友好的設計和一系列有用且深入的優化。 要使用此工具,只需放置一個網站鏈接,然後單擊“分析”按鈕。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
TheGuideX 的 GTmetrix 報告

當您單擊“分析”按鈕時,需要幾秒鐘甚至一分鐘的時間才能對您的網站進行詳細分析。

你會得到很好的總結,包括:

  • 滿載時間
  • HTTP 請求
  • 總頁面大小
  • PageSpeed 分數
  • Y慢分數
了解如何使用真正重要的提示 #speed up #WordPress 網站點擊鳴叫

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
GTmetrix 為您的網站提供優化建議

如果您深入了解 GTmetrix 結果並展開“推薦”部分,它將顯示針對您網站的推薦。 您也可以點擊“這是什麼意思?” 了解有關這些錯誤和優化的更多信息。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization

除了“建議”之外,它還顯示您的網站使用的每個外部和內部文件的 DNS 查找時間。 如果您是開發人員或具有技術技能,它將幫助您進一步優化您的網站。

2. Pingdom

Pingdom 是另一個最有效和最偉大的 WordPress 速度優化工具。 如果您是初學者或開發人員,此工具將幫助您有效地測試您的網站並幫助您提出優化網站的建議。

要使用此工具,請輸入您的網站地址,然後選擇“測試位置”。 選擇測試位置後,單擊“開始測試”按鈕,它將開始分析頁面。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
TheGuideX 的 Pingdom 報告

與 GTmetrix 類似,如果您深入挖掘,它會向您展示各種優化您的網站的建議。 再往下,您可以找到有關您網站上的特定請求和瀑布分析的信息。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization

該工具對於即興網站速度非常有幫助 - 但它需要一些高級知識才能從中受益。 您還可以閱讀 KeyCDN 發布的有關瀑布分析的帖子,以了解更多信息。

3. 谷歌 PageSpeed Insights

另一個測試您的網站的最佳工具是 Google 的 PageSpeed Insight。 該工具只是為您提供優化網站的建議,但不會分享您網站的速度測試結果。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
TheGuideX 的 Google PageSpeed Insight 報告

不過,情況發生了變化。 現在,Google 將共享First Contentful Paint (FCP)DOM Content Loaded (DCL)的頁面加載時間。 您可以在此處的 Google 官方開發者頁面上了解有關這些速度指標的更多信息。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization

如果您的頁面速度得分較低並且加載時間很短,那麼本指南適合您! 您可以一直閱讀本指南,以在 Google PageSpeed Insight 和其他網站上正確優化您的網站。

您還可以查看我們關於解決 Flash of Invisible Text (FOIT) 的其他指南,以優化您網站的字體。

4.網頁測試

最後但並非最不重要的用於檢查網站速度的工具是 WebPageTest。 就功能深度和它提供的數據而言,該工具是最先進的 WordPress 速度測試工具之一。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
TheGuideX 的網頁測試結果

當您使用 WebPageTest 工具檢查您的網站速度時,您可以使用一些高級設置來分析您的網站。 您可以使用這些高級設置來;

  • 模擬慢速連接
  • 選擇設備類型和瀏覽器
  • …配置更多

如果您查看來自 Google 搜索的 John Mueller 的這條推文,他還推薦使用 WebPageTest 工具來檢查網站加載速度。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
約翰推薦 WebPageTest

如果您對這些選項感到困惑,我建議您嘗試“簡單測試”選項卡。 總體而言,此工具最適合測試您的網站速度,如果您是開發人員,它將對您修復網站有很大幫助。

最佳

到目前為止,我們已經了解了擁有快速加載網站的重要性以及檢查網站速度的工具。

現在,是時候分享正確優化網站的技術了。

在本教程中,我不僅會分享使用緩存插件優化 CSS、JS、HTML 或像其他人一樣使用 CDN 的步驟,還會分享最容易進行這些優化的方法正確。

這些方法簡單明了,有例子;

但在繼續使用這些方法之前,我建議您首先使用 Updraft Backup 插件備份您的 WordPress 網站,該插件可在 WordPress 存儲庫免費獲得。

備份 WordPress 網站後,我們可以繼續優化網站。

那麼如何...

優化您的網站

現在等待結束了!

在這裡,我將分享我一直在我的網站上使用的方法來優化它。 您可以使用相同的技術來優化您的博客、微利基以及您的電子商務商店。

1. 選擇快速且值得信賴的虛擬主機

因此,第一步是選擇一個值得信賴且快速的網絡託管服務提供商。

正如我已經提到的,當人們要求我優化他們的網站時,我注意到他們在他們的網站上使用廉價的共享託管計劃,而使用廉價的託管計劃永遠無法使網站快速運行。

因此,如果您使用任何便宜的共享託管計劃,那麼我肯定會建議您首先從當前的網絡託管服務提供商轉移到任何受信任的提供商。

如果您要求我提供一個快速且最佳的網絡託管平台,我將始終推薦 DigitalOcean – 但它需要一些技術技能來管理您的 DigitalOcean droplet。 儘管它很簡單,而且為了更方便,您可以使用服務器上的任何控制面板(我個人在所有項目中都使用 DigitalOcean)。

這些面板可以包括 ServerPilot、VestaCP 等等——但我始終建議使用 ServerPilot,因為它是安裝 WordPress 最簡單的控制面板之一(您可以單擊此處在 ServerPilot 上獲得 10 美元的免費信用額度)。

在 DigitalOcean 上免費獲得 100 美元

如果您是初學者並且想要基於 cPanel 的主機,那麼您也可以使用 SiteGround。 SiteGround 是小型企業和網站的最佳和值得信賴的網絡託管服務提供商之一。

1.1 推薦主機

數字海洋

當談到最快和最可靠的網絡託管服務提供商時,沒有人能擊敗 DigitalOcean。 它們是託管 WordPress 博客的最佳選擇之一。

儘管您必須使用一些面板來輕鬆管理您的服務器。 它可以包括 ServerPilot、ServerAvatar、EasyEngine、VestaCP 等等。 您可以使用其中任何一個,但我建議您嘗試使用 ServerPilot。

在 DigitalOcean 上免費獲得 100 美元
雲道

我確實相信 DigitalOcean 有時更難管理,尤其是當您是初學者時。 因此,除了 DigitalOcean,您還可以嘗試 Cloudways,它是市場上另一家出色的網絡託管服務提供商。

他們以驚人的價格提供託管網絡託管計劃,包括免費 SSL 證書、免費網站遷移和 24/7/365 支持。 您還可以使用“ TheGuideX ”優惠券獲得 3 個月的免費託管託管計劃。

在 Cloudways 上免費獲得 30 美元
場地地面

SiteGround 與任何完美的網絡託管一樣接近,您可以獲得 - 速度、正常運行時間、支持、功能和定價都是驚人的。 我在我的一些微利基博客上使用它們,並且我的服務器響應時間 <200ms 和完美的 GTMetrix 和 Pingdom 報告。

當您購買 1-3 年的促銷計劃時,SiteGround 是最好的託管,但它很昂貴,因為它不想像 EIG 託管那樣過度擁擠他們的服務器。

Grab 從 SiteGround 開始 @ 每月只需 3.95 美元

1.2 不推薦託管

便宜的共享主機

如果您希望您的網站快速和優化,那麼永遠不要使用廉價和共享的託管計劃。 大多數廉價的網絡託管服務提供商都沒有得到適當的優化,他們只是過度擁擠他們的服務器來賺取幾塊錢。

所以他們永遠不會讓你的網站快速。 如果您想要一個快速加載的網站,我將始終建議您與廉價託管服務提供商保持六英尺的距離。

…以及所有 EIG 主機

Endurance International Ground, Inc. (EIG) 是網絡託管行業的知名企業之一。 他們管理著超過 75 家託管公司。

它可以包括一些最受歡迎的網絡託管品牌,例如 HostGator、iPage 等——但我絕不建議您嘗試這些網絡託管平台。

2.選擇優化的WordPress主題

為您的 WordPress 網站選擇主題時,必須選擇一個針對速度進行了優化的主題。 一些漂亮且令人印象深刻的主題編碼不佳,可能會使您的網站變得非常緩慢。

如果您沒有在您的網站上使用優化的主題,那麼這些速度優化方法對您有用的機會就更少了。

我通常更喜歡使用具有簡單乾淨 UI 的主題,而不是喜歡一些華麗的、巨大的動畫和具有復雜佈局的主題。 您始終可以使用可靠且優質的 WordPress 插件添加這些功能。

如果您需要任何主題推薦,我建議您更喜歡 StudioPress、MyThemeShop 和 GeneratePress 的高級 WordPress 主題。 這些市場的主題針對速度和 SEO 進行了優化和編碼。 (我個人更喜歡在我的網站上使用 GeneratePress 主題)

單擊此處獲取 GeneratePress

您還可以查看 Astra,這是另一個針對速度和 SEO 優化的主題。 與 GeneratePress 類似,此主題也帶有許多自定義選項,並且是 WordPress 存儲庫中下載次數最多的主題之一,活動安裝量超過 70 萬。

2.1 推薦主題

生成新聞

GeneratePress 是最好的、輕量級和 SEO 友好的主題之一,可在 WordPress 市場免費獲得。

主題是高度可定制的,您可以創建任何類型的網站,無論是博客網站、亞馬遜附屬網站還是商業網站。 借助其高級插件,您可以自定義網站上的任何內容。

據 WordPress.org 稱,GeneratePress 主題在超過 2,00,000 多個網站上活躍,整個主題的大小不到 30kb。 我強烈推薦這個主題用於任何類型的網站。

獲取 GeneratePress 高級插件
阿斯特拉

與 GeneratePress 類似,Astra 是另一個可在 WordPress 市場免費獲得的最佳主題。 該主題有超過 700K+ 的活動安裝,並且該主題可以與包括 Elementor、Thrive Architect 等在內的每個頁面構建器一起使用。

Astra 是易於設置的主題之一; 它還帶有各種預建模板可供選擇,並進一步使您能夠自定義它們以及使自己成為獨特的設計。 您可以使用他們的高級插件做更多事情。

主題的大小只有 50KB,而不是 JQuery,它只建立在 vanilla JS 上,因此不再有任何類型的渲染阻塞問題。

獲取 Astra Premium 附加組件
StudioPress(創世紀)

StudioPress 是最受歡迎的高級 WordPress 主題市場之一。 所有 StudioPress 主題都是移動響應的,並具有乾淨、輕量級的代碼,可確保您的網站針對速度進行了優化。

他們為速度構建了 Genesis 框架,當您使用它時,您會立即註意到這一點。

獲取 StudioPress 主題

到目前為止,我們已經討論了值得信賴的快速網絡託管服務提供商和快速可靠的 WordPress 主題。

這兩件事對於進入第三步至關重要,即使用一些 WordPress 插件優化您的博客/網站。

3. 使用 WordPress 插件進行優化

因此,在我們討論使用一些插件優化您的 WordPress 網站之前,我們假設您已經處理了兩件事;

  • 你在一個足夠快的主機上。
  • 您正在使用快速、優化和乾淨編碼的 WordPress 主題

如果您勾選這兩個框,您可以使用各種插件進行 WordPress 優化,並探索全面的方法來加快您的網站加載速度。

3.1 使用 WP Rocket 優化您的網站

所以我們用於 WordPress 速度優化的第一個插件是 WP Rocket。

WP Rocket 是最好的 WordPress 緩存插件之一,它有助於加快您的網站加載速度。 它是一款適合初學者的工具,具有大量自定義功能,只需單擊幾下即可提高您網站的性能。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP Rocket(主頁)

該插件可以幫助您優化;

  • 優化網頁,
  • 創建頁面緩存,
  • 壓縮網站的HTML、CSS、JS,
  • 結合 CSS 和 JS 文件,
  • 為圖像和視頻啟用 LazyLoad,
  • 以及更多優化調整。

所以現在,我們已經了解了使用這個插件的基礎知識。 現在我們將向您展示如何使用 WP-Rocket 緩存插件正確優化您的網站。

如果您使用任何其他緩存插件,我幾乎不會建議您轉向 WP-Rocket。

它是最簡單但最好的緩存插件之一,即使您不需要像使用其他緩存插件那樣搞亂它們的設置。 只需單擊一下,您就可以開始了。

獲取 WP 火箭

所以…

如何有效使用 WP-Rocket?

您會在 WP-Rocket 插件中找到許多功能,您是否想過您必須在您的網站上激活哪些設置以使其快速運行?

在 WordPress 網站中安裝並激活 WP-Rocket 插件後,轉到“設置”>“ WP Rocket ”以打開配置頁面。

現在,單擊“緩存”設置以使用 WP-Rocket 插件設置網站緩存。 (它會顯示這樣的東西)

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP Rocket(緩存設置)

首先,您必須啟用“移動緩存”,如果您正在為電子商務設置緩存,則啟用“登錄用戶緩存”設置。

注意:大多數現代主題都支持響應式設計,因此您無需在“緩存”頁面中啟用“單獨的移動緩存”選項

然後將“緩存壽命”設置為“ 10 小時”。

完成緩存設置後,我們將移至“文件優化”,我們可以在其中縮小 HTML、CSS、JS、延遲 JS 和合併 CSS 和 JS。

這些設置是 WP-Rocket 最重要的設置之一。 它還將通過結合您網站的 CSS 和 JS 來幫助您減少 HTTP 請求。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP Rocket(文件優化)

當您單擊“文件優化”部分時,您將獲得各種選項來縮小 HTML、CSS、JS 並將它們組合到更少的文件中。

在“基本設置”中,選中“縮小 HTML”、合併 Google 字體文件”、刪除查詢字符串”這三個選項。 它不會影響您的網站——但是當您激活“ CSS 文件”和“ JS 文件”設置時,請確保它不會破壞您的網站。

有時這些設置會破壞您的前端設計,如果它破壞了您的主題設計,請取消選中這些框,它將修復您的網站。

現在檢查CSS 文件中的“縮小 CSS”、“組合 CSS”和“優化 CSS 交付”選項,以縮小 CSS 並將它們組合成更少的文件。 它還將解決您網站上的“消除渲染阻塞 CSS ”問題。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP Rocket(文件優化)

同樣,在JS Files部分中,單擊“Remove JQuery Migrate”、“Minify JS”、“Combine JavaScript Files”、“Load JavaScript Deferred”,然後在 JS deferred 部分下啟用“Safe Mode for JQuery”。

文件優化中完成這些設置後,請清除緩存並確保它不會通過訪問主頁或網站的任何頁面來破壞您的網站。

如果這些設置破壞了您網站的整體外觀,那麼我建議您禁用這些設置並檢查您的服務器和主題是否與 WP-Rocket 插件兼容。

文件優化設置之後,您將獲得管理延遲加載媒體的設置。 單擊媒體選項以更改媒體設置;

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP Rocket(媒體設置)

在此選項中,您將獲得在圖像和視頻上啟用延遲加載的選項,您還將獲得禁用嵌入、表情符號和啟用 WebP 兼容性的選項。

我建議您啟用圖像、iframe 和視頻的延遲加載設置。 您還可以將 YouTube 視頻或 iframe 替換為圖像(相信我,它會讓您的網站快速運行)。

您還將獲得禁用表情符號和嵌入的選項,大多數這些對我們沒有用,並且通過禁用嵌入,您將節省您的網站資源,因此我建議您啟用這些設置。

正如您在上圖中看到的,我沒有使用 WebP 緩存,如果您在網站上使用 WebP 圖像,您可以啟用它以獲得更好的媒體緩存。 您可以在此處了解有關 WebP 的更多信息。

媒體設置後,您將獲得在您的網站上啟用預加載的選項。

為什麼現金預加載對於提高網站性能至關重要?

預加載可確保您的訪問者立即獲得更快的緩存版本。 WP Rocket 會自動處理此問題,您的主頁和在其上找到的所有鏈接都將被預加載

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP Rocket(預加載緩存)

如果預加載很慢並且根本沒有完成,那麼有兩個可能的原因。 確保檢查 PHP 執行時間和玉米作業設置以解決此問題。

完成預加載設置後,您將獲得配置高級設置的選項。 從高級設置中,您可以輕鬆管理一些設置,包括禁用自定義 URL 或自定義 cookie、用戶代理的緩存以及清除所需的 URL。

在此之後,您將獲得管理數據庫優化和 CDN 的選項,但我們將在此處跳過此設置。 我們使用WP-Optimize插件來有效地優化數據庫,我們將在後面的 CDN 部分向您展示如何實現 CDN。

同樣,在這些設置之後,您將獲得一個管理 WordPress Heartbeat API 的選項。 基本上,WordPress Heartbeat API 為服務器和瀏覽器之間的實時數據傳輸和同步提供了連接。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP Rocket(心跳設置)

仍然無法理解心跳設置? 這裡我分享幾個涉及心跳設置的例子;

  • WordPress 編輯器中的自動保存和修訂,
  • 帖子鎖定 - 當一位編輯處理特定帖子時,它會禁用其他作者的後期編輯。

如果您使用的服務器資源較少,您可以禁用它以節省資源,但對於小型網站,這不是主要問題。

現在,WP-Rocket 插件中最後但並非最不重要的設置是它們的附加設置。 如果您在您的網站上使用 Facebook Pixel 和 Google Analytics,它將幫助您將它們本地存儲在您的服務器上以優化網站速度。

您可以簡單地啟用它來改善您網站上的 Leverage 瀏覽器緩存問題。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP Rocket(附加組件)

另一個很棒的插件可以包括直接從 WP-rocket 儀表板將您的網站與Cloudflare 和 Sucuri集成。 每當您清除網站上的內容時,它將幫助您清除和清除這些 CDN 提供商上的緩存。

相信我; 這些是使您的網站真正快速的最佳設置之一。 如果您想讓您的網站快速加載,我建議您啟用這些設置。

截至目前,我們已經使用 WP-Rocket 插件實現了一些優化。

現在我們將使用其他一些插件,如 WP-Optimize 用於數據庫優化和 AssetCleanUp Pro 用於進一步的速度優化。

最佳

3.2 使用 Asset CleanUp Pro 優化您的網站

一旦您使用 WP Rocket 優化了您的網站並檢查了 GTmetrix 和 Pingdom 結果,您將看到頁面加載速度的即時改進。

但是我們還沒有在這裡完成,我在上面已經提到我們必須盡可能優化我們的網站。

因此,現在我們將使用其他一些插件,例如 Asset CleanUp Pro 來進一步優化我們的網站(您也可以使用 Asset CleanUp 的免費版本進行優化,但我建議您購買付費版本)。

抓取資產清理專業版

該插件可以幫助您修復網站上的Flash of Invisible Text (FOIT)問題,它還可以阻止對XML-RPC 文件的訪問並做更多的事情。

由於我們已經使用 WP Rocket 優化了我們的網站,因此 HTML、CSS 和 JS 以及其他一些設置的修改被阻止,我們無法啟用它們(這是一件好事!)

但是在“Live Site”上使用這個插件之前,我建議你去“ Asset CleanUp” ,然後點擊 Test Mode”來啟用測試模式。

在您完成插件設置並卸載無用的 CSS 和 JavaScript 時,啟用測試模式可以幫助您的訪問者在沒有任何資產清理設置的情況下瀏覽您的網站!

啟用測試模式後,現在單擊優化 CSS選項,然後向下滾動到緩存動態加載 CSS設置,然後啟用它。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
AssetCleanUP(優化 CSS)

完成後,單擊“保存”按鈕。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
AssetCleanUP(優化 JS)

同樣,在優化 JS 部分中,啟用緩存動態加載的 JavaScript。

這些選項將幫助您緩存 CSS 和 JS 的動態值。 雖然,使用 WP-Rocket 後,您不會在 WordPress 中遇到這些問題。

完成這些設置後,點擊“ CDN ”選項後的“ Site-Wide Common Unloads ”設置。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
資產清理(站點範圍的常見卸載)

在這裡,您會找到一些禁用EmojisEmbedsDashiconsGutenberg CSS Block LibraryJQuery MigrateComment Reply Site-wide 的選項。

如您所見,我們已經使用 WP-Rocket 插件刪除了 Emojis、Embeds 和 JQuery Migrate。 因此,為了防止過度衝突,我們不會啟用這些設置。

但是,如果您沒有在博客上使用 Gutenberg,Dashicons 圖標,那麼您可以禁用它們。

如果您不將 WordPress 用作博客,不希望訪問者留下評論,或者您已將默認 WordPress 評論替換為 Disqus 或 Facebook 等評論平台,那麼您還可以禁用“評論回复站點-寬“從設置。

現在,我們將轉到“ HTML Source Cleanup ”部分,我們可以從該部分中刪除 <head> 部分中未使用的元素。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
資產清理(HTML 源代碼清理)

從這些設置中,我們可以從 <head> 部分中刪除不需要的元素。

不用擔心!

刪除這些元素根本不會影響您的網站。

我從這些設置中刪除了幾個選項,包括評論 RSS、元生成器標籤、WordPress 版本標籤、REST API 和 RSD 鏈接。

您可以從您的網站中刪除這些設置,它不會損害您的網站。 您也可以僅在不使用RSS 提要鏈接時刪除它。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Asset Cleanup Pro(本地字體優化)

如果您使用的是Asset Cleanup Pro的高級版,您可以將“ Apply font-display CSS ”值從“ Don't apply ”更改為“ Swap”。 這可以防止您的網站出現不可見的文本問題。 您可以單擊此處了解有關此問題的更多信息。

您還可以在預加載部分輸入本地字體文件的 URL 以立即加載它。 當我們預加載一個字體文件時,我們顯式地增加了資源的優先級。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Asset Cleanup Pro(谷歌字體優化)

本地字體優化設置之後,您會在“谷歌字體”中看到類似的選項。 環境。

只需在字體顯示設置中選擇“交換”選項並啟用預連接。 啟用預連接選項將提示並指示瀏覽器在加載 CSS 時預連接到 Google 字體,從而節省加載時間。

您還可以啟用組合多個請求設置以將多個字體請求組合成更少的請求。

僅在使用 Asset CleanUp Pro 的必要頁面上使用插件和工具。

到目前為止,我們已經使用 Asset CleanUp 進行了一些優化,以提高網站的加載速度——但在這個插件中還有一些我們不知道的驚人功能。

這些功能可以包括在網站的特定帖子中加載插件。

簡單來說,假設您在您的網站上使用“聯繫表格 7 ”(用於創建聯繫表格的最流行的插件)並在您網站的特定“聯繫頁面”上使用它。

但是這個插件的主要問題是它在你網站的<head>部分加載它的 CSS 和 JS 文件,因此它在所有頁面(包括聯繫頁面)上增加了兩個請求——但我們只需要它加載特定頁面,這就是聯繫頁面

例如; 如果您檢查 TheVPNCoupon,我在聯繫頁面和其他帖子/頁面(如“最佳動畫電影”)上使用“聯繫表格 7”插件,我沒有使用任何联系表格 -但它仍然加載 CSS 和 JS這些頁面上的聯繫表格 7插件(您可以在下圖中查看)。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
加載聯繫表格 7 的不必要文件

但是你怎麼能解決這個問題呢?

解決方案非常簡單,您只需發布帖子或頁面,然後再次單擊“編輯帖子/頁面”選項,然後此插件將加載 WordPress 帖子儀表板中的所有文件。

然後從 Asset CleanUp 選項中卸載特定的 CSS & JS 文件

例如; 如果我正在使用“聯繫表格 7 ”插件在我的網站上創建“聯繫我們”頁面,那麼我將在頁面​​準備好後發布該頁面,然後再次單擊“編輯頁面”選項.

一旦我們點擊編輯頁面,它將顯示當有人加載聯繫人頁面時請求或加載的所有文件。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Asset CleanUP(優化插件請求)

現在我們將對設置進行一些更改,並從除聯繫人頁面之外的所有頁面卸載聯繫表單 7 的 CSS 和 JS (您可以執行我們在上圖中所做的相同設置)。

最佳

3.3 優化網站圖片

如您所知,圖像優化是降低網站速度的最重要因素之一。 它是減慢網站速度的主要來源,因此我們總是必須在將圖像上傳到您的網站之前對其進行壓縮。

即使您在 TheGuideX 上查看我們的任何博客文章,

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization

…圖像比我網站上的其他任何東西都重。

因此,優化圖像應該會顯著提高您的網站速度,而且確實如此。

我們都知道圖像對於任何網站都是必不可少的,但不建議使用高質量的圖像。 因此,我們必須確保我們上傳的圖像得到適當的優化。

您應該以這樣一種方式壓縮圖像,它不會降低圖像的整體質量,而只會減小圖像的大小。

為此,我創建了一個關於圖像優化的網站,您可以在將圖像上傳到 WordPress 之前使用該網站優化您的圖像

要正確優化圖像,您必須遵循以下五個步驟;

  • 上傳大小合適的圖片。
  • 使用在線圖像優化網站來壓縮圖像(推薦:TinyPNG 和 ImageOptimizer.org)。
  • 使用 WordPress 插件進行進一步優化(建議:“通過 TinyPNG 壓縮 JPEG 和 PNG 圖像”)。
  • 使用正確的圖像格式。
  • 使用 CDN 處理圖片(推薦: ImageKit)
使用正確的圖像格式類型

網絡上最常用的兩種圖像類型是 JPG 和 PNG。

他們不一樣;

  • JPEG :JPEG 圖像在網站上用於更複雜的圖像,其中包含大量顏色信息。
  • PNG :PNG 圖像非常適合顏色信息很少的圖像和圖形。
JPEG 圖像示例
how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
JPEG 圖像示例
圖像細節
圖片格式JPEG
圖片大小2.893kb
優化的圖像尺寸607kb
圖像壓縮百分比79%
圖片描述具有大量顏色信息的複雜圖像。
PNG圖像示例
how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
PNG圖像示例
圖像細節
圖片格式PNG
圖片大小716kb
優化的圖像尺寸173kb
圖像壓縮百分比75%
圖片描述帶有少量顏色信息的簡單圖像

在上面的例子中,我展示了一個 79% 圖像壓縮率的 JPG 圖像和一個具有相似壓縮級別的 PNG 圖像——但是 JPEG 圖像的壓縮大小比 PNG 圖像的原始大小要大得多,因為它們的複雜性和很多顏色信息。

因此,下一次,每當您在網站上上傳圖片時,請確保您使用的是正確的圖片格式。

最佳

3.4 使用 WP-Optimize 優化數據庫

到目前為止,我們已經使用 WP Rocket 和 Asset CleanUp 優化了我們的網站,但是如果您仍然覺得您的網站需要更多時間來加載,那麼您可以優化您的數據庫並刪除帖子的修訂。

有時當我們更新網站內容或在 WordPress 編輯器上編寫內容時,它會自動將修訂後的內容保存在我們的數據庫中。

因此,優化數據庫是提高網站速度的另一個非常有用且重要的過程。

為此,我們將使用一個名為“ WP-Optimize”的免費 WordPress 插件。 該插件由 Team Updraft 開發,他還開發了一個很棒的插件,我建議使用它來備份您的網站。

要使用這個插件,只需從 WordPress 倉庫安裝“WP-Optimize”插件。

但在進行數據庫優化之前,我始終建議您先進行備份。

安裝插件後,我建議您備份您的數據庫,然後轉到“ WP-Optimize ”>“數據庫”。 當您在數據庫頁面上時,單擊“運行所有選定的優化”,它將開始優化數據庫。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP-Optimize(數據庫優化)

優化您的數據庫需要幾分鐘時間,一旦完成,它將刪除所有帖子修訂、垃圾評論、待處理評論、引用、已刪除的帖子和自動草稿。

不用擔心!

您的帖子和草稿將保持安全。 它不會刪除您網站上發布的任何帖子或任何草稿帖子,但只會刪除修訂。 所以你是安全的。

建議:我每天都使用這個插件來刪除垃圾郵件和待處理的評論。 它還可以幫助我刪除後期修訂並有效地優化數據庫。

即使在我寫這篇文章的時候,WordPress 已經在一個數據庫中保存了超過 40 多個修訂,這讓我的文章編輯器頁面非常慢——但是在使用這個插件之後,一切都得到了修復。 然後,我再次開始寫這篇怪物文章。

最佳

3.5 不要在您的網站上使用這些插件

某些插件會降低您的網站速度並導致 CPU 使用率過高。 我總是建議您不要在您的網站上使用繁重的插件。

這些插件可以包括;

  • 斷鍊檢查器
  • 噴氣背包
  • 類似帖子
  • 相撲
  • 添加這個
最佳

在這一步中,我們使用了一些 WordPress 插件來有效地優化我們的網站,如果您檢查您網站的 GTmetrix 和 Pingdom 結果,您會看到性能立即提高。

但速度優化不僅僅是通過使用一些插件或快速加載 WordPress 主題來優化網站。

如果您想提高網站的整體性能,還有很多事情要做。 例如,在您的網站上使用 CDN 並從最近的可用服務器提供文件、圖像或數據。

4. 使用內容交付網絡 (CDN)

在我解釋如何使用 CDN 來提高網站性能之前,首先我們將了解什麼是 CDN 以及它如何幫助提高網站性能。

那麼什麼是 CDN 或內容交付網絡?

根據 Akamai 的說法,CDN(內容交付網絡)是一個高度分佈式的服務器平台,通過縮短服務器與用戶之間的物理距離,有助於最大限度地減少加載網頁內容的延遲。 這允許世界各地的用戶查看相同的高質量內容,而不會降低加載時間。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
CDN 的工作原理(圖片來源:CrazyEgg)

那麼它如何幫助提高網站的性能呢?

答案是; 每當您訪問一個網站時,它都會向遠程服務器發出請求,而該服務器會返回數據。 數據傳輸是通過公共互聯網完成的,它會導致一些延遲。

而如果我們減少你的本地機器到服務器的距離,那麼它肯定會減少延遲時間並提高網站的性能。

例如; 如果您來自印度並訪問我們的網站 TheGuideX,那麼您的本地計算機會從服務器請求資源。 如果我在靠近美國的服務器上託管我的網站。 在這裡,請求資源大約需要 200-300 毫秒,並且會導致一些延遲。

但是,如果我的網站數據將從位於孟買的數據中心(或您的數據中心機櫃)提供給您的本地計算機,該怎麼辦。 它將請求時間從 200-300ms 減少到 30-40ms 。 這樣,我們絕對可以通過顯著減少距離來避免這些延遲。

所以現在我們已經了解了在我們的網站上使用 CDN 以及如何提高我們網站的整體性能。

現在我們將討論一些 CDN 來提高我們網站的性能;

4.1 在網站上使用 Cloudflare

大多數人在他們的網站上使用的第一個 CDN 是 Cloudflare。

Cloudflare 建立了一個龐大的全球數據中心網絡,可以緩存更靠近用戶的靜態內容,並通過最快、最可靠的私有骨幹鏈路提供動態內容

在您的域名上設置 Cloudflare 非常簡單; 您只需將您的域名服務器從當前主機更改為 Cloudflare,然後您就可以直接從 Cloudflare 輕鬆管理您的 DNS。

您可以按照此視頻在您的域名上設置 Cloudflare。 Cloudflare 在您的域名上啟用後,我們將進行一些更改以優化我們的網站性能。

一旦 Cloudflare 在您的域名上處於活動狀態,請登錄您的 Cloudflare 帳戶,然後從儀表板中選擇您的網站。

現在,轉到 SSL/TLS 頁面並將 SSL 設置為Flexible 。 您還可以將 SSL 設置設置為完整- 但在將 SSL 設置設置為完整之前,請確保您的網站已使用 SSL。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Cloudflare SSL 設置

如果您對此不確定,我建議您將 SSL 設置設置為靈活。 在靈活模式下,數據僅在用戶本地機器與 Cloudflare 之間進行加密(本地機器(安全)-> Cloudflare(不安全)-> Web 服務器)。

但如果使用完整SSL 設置,數據會從本地計算機加密到您的服務器(本地計算機(安全)-> Cloudflare(安全)-> Web 服務器

在您的網站上設置 SSL 後,轉到 SSL 中的Edge 證書設置並激活“始終使用 HTTPS”、 “ TLS 1.3 ”,並啟用“自動 HTTPS 重寫”。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Cloudflare(始終使用 HTTPS)

現在我們已經使用 SSL 在我們的網站上設置了 SSL。 在這一步之後,點擊速度設置,然後點擊速度設置下的優化

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Cloudflare(速度優化設置)

進入 Speed 中的優化頁面後,為 JavaScript、CSS 和 HTML 啟用Auto Minify

然後在您的網站上啟用Brotli壓縮。 Brotli 是 Google 開發的一種壓縮算法,最適合文本壓縮。

以下是在您的網站上使用 Brotli 壓縮的一些功能;

  • 使用 Brotli 壓縮的 JavaScript 文件比 gzip 小 14%。
  • HTML 文件比 gzip 小 21%。
  • CSS 文件比 gzip 小 17%。

注意:圖像不應該被 gzip 或 Brotli 壓縮,因為它們已經被壓縮了,再次壓縮它們會使它們的大小變大。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Cloudflare(速度優化設置下的 Rocket Loader)

在您的網站上啟用Brotli壓縮後,您可以向下滾動到Rocket Loader選項,然後啟用它。 默認情況下,此設置已啟用,但有時此插件與WP Rocket插件衝突並可能導致問題。

現在我們移動到 Cloudflare 中的緩存設置,然後將緩存級別設置為“標準”,將瀏覽器緩存 TTL分別設置為“ 1 年”。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Cloudflare(緩存設置)

啟用這些設置後,向下滾動到Always Online並單擊以啟用它。 通過這些設置,如果您的服務器出現故障,Cloudflare 將從緩存中為您網站的靜態頁面提供服務。

您可以在此處了解有關推薦設置的更多信息。

現在最重要的是使用 Cloudflare 在我們的博客上設置頁面規則

為此,請在 Cloudflare 中打開頁面規則設置。 使用 Cloudflare 的免費計劃,我們只能創建 3 頁規則,如果您想創建超過 3 頁的規則,您必須從 Cloudflare 購買更多的頁面規則。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
我在我的網站上使用的頁面規則

如上圖所示,我在我的網站 TheGuideX 上創建了一個 3 頁規則來提高其性能。 這些 3 頁規則是有助於優化我們網站的最重要規則之一。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Cloudflare(創建頁面規則)

現在第一件事是單擊以藍色顯示的“創建頁面規則”按鈕。 一旦我們點擊它,它將打開一個頁面,我們可以在其中創建我們的第一個頁面規則。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
創建我們的第一個頁面規則

如上圖所示,在第一個字段中,我們必須輸入必須應用頁面規則設置的頁面的 URL,然後我們必須從下拉菜單中選擇設置。 完成後,單擊Save and Deploy按鈕以啟用這些頁面規則。

Cloudflare 的首頁規則

所以第一條規則是;

  • 網址:example.com/wp-login.php
  • 規則(從下拉列表中選擇) :安全級別,然後選擇我受到攻擊

例子;

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Cloudflare(首頁規則)

本頁規則的使用

此頁面規則為您的 wp-login.php 文件添加了額外的安全層。 每當有人嘗試登錄您的 WordPress 儀表板時,它都會首先檢查瀏覽器的完整性,並防止對您的網站進行暴力攻擊。

我們還可以使用一些插件來防止我們的網站受到暴力攻擊,但是這些類型的插件需要大量的網站資源,並且會降低您的網站速度。 因此,我們使用 Cloudflare 來防止我們的登錄頁面遭到惡意嘗試。

Cloudflare 的第二頁規則

第二條規則是;

  • 網址:example.com/wp-admin/*
  • 規則(從下拉列表中選擇) :禁用性能

例子;

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Cloudflare(第二頁規則)

本頁規則的使用

此頁面規則禁用 wp-admin 文件夾內的性能。 禁用它將禁用站點後端的 Minification、Rocket Loader、Mirage 和 Polish。

Cloudflare 的第三頁規則

第三條規則是;

  • 網址:example.com/wp-content/*
  • 規則 1 :瀏覽器緩存 TTL => 一年
  • 規則 2 :始終在線 => 開啟
  • 規則 3 :緩存級別 => 緩存所有內容
  • 規則 4 :邊緣緩存 TTL => 一個月

例子;

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
Cloudflare(第三頁規則)

本頁規則的使用

第三個頁面規則在 wp-content 文件夾內工作,它緩存 wp-content 文件夾內的所有內容,瀏覽器緩存過期 TTL是 Cloudflare 指示訪問者的瀏覽器緩存資源的時間。

在時間到期之前,瀏覽器會從本地緩存中加載資源,從而有助於加快網站速度。

邊緣緩存 TTL是一項設置,用於控制 Cloudflare 服務器在請求新副本之前緩存資源的時間。

如果您使用 Cloudflare 在您的網站上實施了相同的設置,那麼您的網站很有可能在 GTmetrix 和其他頁面速度測試工具上開始表現良好。

到目前為止,我們剛剛共享了一個 CDN 來提高我們網站的整體性能。 現在我們將分享更多可以與 Cloudflare CDN 一起使用的 CDN。

最佳

4.2 使用 ImageKit 進行圖像優化

現在我們將使用 ImageKit 實時優化我們的圖像。 它是實時圖像優化和轉換 CDN 網絡之一,可幫助網站減小照片的實際大小,而不會對圖像的可見視覺質量產生任何實際影響。

在這個 CDN 中我最喜歡的最好的事情之一是與 WordPress 等應用程序的快速集成。 它確實提供了合理的定價,我發現它是一個更好的選擇,可以更好地優化圖像。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
ImageKit 定價

ImageKit 提供三種 CDN 定價,您可以根據您的網站要求進行選擇(我在我的網站上使用的是永久免費計劃)。

免費獲取 ImageKit

選擇定價並註冊到他們的平台後,您必須創建一個End Point 。 創建End Point後,您將獲得CDN URL (查看下圖)

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
ImageKit(創建端點)

如您所見,我為TheGuideX域名創建了一個基於Web 服務器的 CDN URL。 我的 CDN 網址是https://ik.imagekit.io/tgx/

如果可以在 https://theguidex.com/rest/of/the/path/image.jpg 訪問原始圖像,

然後可以通過 ImageKit.io URL https://ik.imagekit.io/tgx/rest/of/the/path/image.jpg 訪問相同的主圖像

一旦我們獲得 ImageKit URL,我們必須在我們的 WordPress 網站上啟用它。 為此,我們必須通過訪問WordPress 管理面板 > 設置 > WP Rocket > CDN 打開 WP Rocket CDN 設置,

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
WP Rocket(CDN 設置)

進入 CDN 頁面後,我們必須為我們的網站啟用CDN ,然後在字段中輸入 ImageKit 的 URL,並在“ reserve for”設置中將其更改為圖像。

一旦你這樣做了,WP Rocket 只會將圖像的 URL 從https://theguidex.com名稱重寫為https://ik.imagekit.io/tgx。 因此,您的圖像將開始從 CDN URL 實時加載。

進行這些更改後,我們現在將在 ImageKit 中進行一些優化調整,以實現更好的壓縮和圖像交付。

對於這些優化調整,我們再次登錄 ImageKit Dashboard,然後單擊Image Settings。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
ImageKit(圖像設置頁面)

進入圖像設置頁面後,您可以根據需要自定義設置。

如您所見,我已啟用“使用最佳格式進行圖像交付” ,並將圖像質量啟用為 70%。

您也可以根據需要進行設置,但我建議您不要將圖像大小減小到 70% 以下。

如果需要,您還可以啟用數據保護程序的設置。 如果您網站的用戶在其瀏覽器上使用流量節省程序模式,ImageKit 將使用不同的方法,包括降低質量和不支持自動 DPR,從而使圖像更輕且加載更快。

優化設置旁邊,您將獲得網絡優化選項。 在網絡優化設置中,您將獲得根據用戶的網絡類型提供圖像質量的選項。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
ImageKit(網絡優化)

大多數情況下,人們使用 4G 設備。 仔細檢查您的分析以了解有關網絡類型的更多信息。 如果您發現人們使用較慢的網絡訪問您的網站,那麼您可以從此處手動設置圖像傳輸質量。

所以這些是 ImageKit 最重要的設置,但是你可以從他們的Image Settings頁面做更多的設置。

這些設置可以包括手動設置移動和桌面設備的圖像高度和寬度,保存圖像的副本等,但我們不會在本文中討論這些設置,它們對我們沒有用處。

現在我們將轉到在我們的網站上使用 CDN 的第三部分。 在這一步中,我們將向您展示如何在我們的 JS 和 CSS 網站上實現和使用 Cloudfront。

最佳

4.3 為 JS 和 CSS 使用 Amazon Cloudfront

如您所知,Amazon CloudFront 是您獲得的最受歡迎的 CDN 之一,全球最大的網站都依賴於 Amazon CloudFront CDN 服務。

他們在全球部署了 61 台服務器,能夠在特定位置更快地傳輸和傳遞網站圖像。

首先,點擊“ Get Started with Amazon Cloudfront”並使用您現有的 Amazon ID 在他們的網站上註冊,或者您也可以使用新的電子郵件 ID 在他們的平台上註冊。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
AWS Cloudfront(創建分發)

登錄到 Amazon AWS 帳戶後,搜索 Cloudfront(您也可以單擊此處直接訪問 Cloudfront 頁面),然後單擊“創建分發” ,然後選擇Web 屬性並單擊“開始”。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization

原始域名中,輸入您的域名。 在這種情況下,我的域名是https://theguidex.com,所以我輸入的是theguidex.com (沒有 www 或 https)。

在它旁邊,您必須輸入原始路徑,輸入 wp-content 文件夾的路徑,然後在 SSL 協議中選擇TLSv1並在原始協議中選擇“匹配查看器”

現在,向下滾動到“分發設置” ,然後在價格類別中選擇“使用所有邊緣站點”並設置默認的 CloudFront SSL 設置。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
AWS 分佈

您還可以設置S支持的HTTP 版本並將其更改為“HTTP/2、HTTP/1.1、HTTP/1.0”。 完成這些設置後,單擊“創建分發”。

在 Cloudfront 中創建發行版需要幾分鐘時間,一旦創建,您必須等待大約 5-6 小時(在我的情況下,需要 7-8 小時才能正常工作)。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
雲端分發

再次轉到 Cloudfront 分發頁面並檢查您的分發是否正確啟用(它將顯示在狀態部分下的綠色文本中)。

啟用後,單擊您的源域的ID

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
AWS Cloudfront(獲取 CDN)

當您單擊分發 ID 時,它將打開我在上圖中顯示的類似頁面。 複製域名(如紅框所示)並粘貼到 WP Rocket 的 CDN 部分。

將域名粘貼到 WP Rocket 中後,選擇保留的to => “ Javascript/CSS ”。

現在您已成功在您的域名上設置 AWS Cloudfront。

最佳

這些設置足以讓您的網站提高其在 Google PageSpeed Insight、GTmetrix 和 Pingdom 中的性能。 您現在可以看到網站性能的即時增長。

不過,如果您不確定如何提高網站速度,或者您需要網站速度優化服務,您可以通過[電子郵件保護]電子郵件與我聯繫。

到目前為止,我們已經做了幾乎所有可能的事情來優化我們的網站速度——但是如果你是一個高級用戶,那麼我將分享更多的方法來幫助你提高你的網站速度。

但是,如果您是初學者或者您沒有任何技術知識,那麼我建議您聯繫您的託管支持以管理此類內容。

微調 WordPress 以提高速度(高級)

在這個微調 WordPress 速度優化方法中,我們分享了一些高級技巧,這些技巧可以驚人地優化您的網站速度。

1.使用最新的PHP版本

因此,優化網站的第一種方法是使用最新的 PHP 版本。 較新的 PHP 7 比它的前輩快兩倍。 這是您的網站必須利用的巨大性能提升。

為什麼要使用最新版本的 PHP?

如果您不知道為什麼要在您的網站上使用最新版本的 PHP,那麼這裡就是答案,WordPress 主要是用 PHP 語言編寫的,而 PHP 是一種服務器端語言。

因此,如果您在您的網站上使用最新的 PHP 版本可以提高您網站的性能。 PHP最新穩定版本為v7.4; 我什至在這個網站上使用這個版本的 PHP。

您可以通過安裝和激活版本信息插件來查看您的站點使用的 PHP 版本。

2. 限制後期修改

有時我們忘記使用像 WP-Optimize 這樣的插件來優化我們的數據庫,正如我上面提到的,當我寫這篇文章時,它已經在我的數據庫中保存了 40 多個修訂。

有時,自動保存這麼多修訂可能會將您網站的性能降低到最差的水平。 您可以輕鬆限制 WordPress 為每篇文章保留的修訂數量。

將這行代碼添加到您的 wp-config.php 文件中。

 定義('WP_POST_REVISIONS',4);

3. 禁止盜鍊和盜取您的內容

有時,如果我們在我們的網站上創建高質量的內容,它會被使用 RSS 竊取,有時其他網站會直接從您網站上的 URL 提供您的圖片,而不是將它們上傳到他們自己的服務器。

這樣,它會損害您的網站,因為他們正在竊取您的網站帶寬,而您不會從中獲得任何好處。

所以,在這種情況下,我們必須使用 .htaccess 代碼來阻止圖片的盜鏈,以節省您的網站資源和帶寬。 代碼如下;

 #禁用帶有禁止或自定義圖像選項的圖像熱鏈接
重寫引擎開啟
重寫條件 %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?theguidex.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
重寫規則 \.(jpg|jpeg|png|gif)$ - [NC,F,L] 

注意:不要忘記將 theguidex.com 更改為您自己的域名。

如果您沒有在您的網站上使用 RSS 提要,您也可以禁用它。

4. 使用 DNS 級別的網站防火牆

速度優化的另一個最重要因素是使用 DNS 級別的網站防火牆。 如果您還記得,我在 theguidex.com/wp-login.php 上創建了 Cloudflare 頁面規則,以提高我的登錄頁面的安全性。

好吧,我還在我的網站上使用高級版 Wordfence,這是一個很棒的插件,它有助於實時阻止威脅、暴力攻擊,但毫無疑問; 這是一個沉重的插件,我需要大量的網站資源來對抗威脅。

為了防止高 CPU 資源使用率,我在我的網站上使用了 DNS 級別的網站防火牆。 因此,請確保您使用 DNS 級別的防火牆來提高您網站的性能並阻止 DNS 級別的威脅。

5. 減少數據庫調用

這一步稍微複雜一些,它需要技術知識來減少主題中的數據庫調用。 有許多編碼不佳的主題不遵循 WordPress 指南,並且對數據庫進行了太多不必要的調用。

這些主題可能會減慢您的網站速度並減少它可以減少數據庫調用並提高您網站的整體性能。

甚至一些乾淨編碼和優化良好的主題也會進行不必要的數據庫調用以從數據庫中獲取基本信息。 因此,創建一個子主題並靜態添加此基本信息以減少數據庫調用的次數。

6. 將評論拆分成頁面

如果您在博客上收到很多評論,那麼首先,恭喜! 這是建立大量觀眾的一個很好的跡象。

但缺點是,加載包含所有評論的帖子會減慢速度。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
將評論拆分到不同的頁面

在這種情況下,您可以將評論分成不同的頁面,以進一步提高網頁的速度。 這個過程很簡單,只需轉到設置»討論並選中“將評論分成頁面”選項旁邊的框。

7. 檢查 GZIP 壓縮

GZIP 壓縮是提高網站速度的另一個最關鍵因素。 如果您在您的網站上使用 wp Rocket 插件,那麼它會自動為您啟用它。

GZIP 壓縮在服務器端啟用,它有助於壓縮 HTML、JS 和 CSS 文件的大小。 它不適用於圖像,因為它們已經以不同的方式壓縮。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
檢查 GZIP 壓縮

您可以使用檢查 GZIP 壓縮等工具來檢查您的網站是否使用 GZIP。

如果您的網站沒有使用 GZIP,那麼您可以在 .htaccess 文件中使用此代碼在您的網站上啟用 GZIP - 但請確保在使用此代碼之前在您的網站上使用 apache 服務器。

 # 壓縮 HTML、CSS、JavaScript、文本、XML 和字體
  AddOutputFilterByType DEFLATE 應用程序/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/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 image/x-icon
  AddOutputFilterByType DEFLATE 文本/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE 文本/javascript
  AddOutputFilterByType DEFLATE 文本/純文本
  AddOutputFilterByType DEFLATE 文本/xml

  # 刪除瀏覽器錯誤(只有非常舊的瀏覽器才需要)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] 無 gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  標題追加不同的用戶代理

8. 使用預取

資源預取是另一種提高網站性能的重要優化技術。 我們可以使用它來告訴瀏覽器用戶將來可能需要哪些資產——甚至在他們需要它們之前。

作為開發人員,我們比瀏覽器更了解應用程序。 因此,我們使用這些信息來通知瀏覽器有關核心資源的信息。

例如,

 <鏈接rel = 預取 href =  image.png  >

9.減少網絡字體的使用

有時為了讓文本更吸引人,我們會使用幾種網絡字體——但使用太多網絡字體的最大缺點是會增加頁面的渲染時間。 這還會向外部資源添加額外的 HTTP 請求。 一般來說,您希望將 HTTP 請求保持在最低限度。

how to optimise website, optimise the loading time of blog, optimize wordpress website, optimize wordpress website speed, slow loading wordpress, speed optimization, website optimization wordpress, Wordpress speed optimization
限製網頁字體

正如您在上圖中看到的,我在我的網站上只使用了四種我真正需要的網絡字體。 您還應該確保您的博客沒有使用大量不必要的網絡字體來減少頁面的呈現時間。

最佳

現在輪到你了

在優化 WordPress 博客的各種方法中,我分享了一些優化技術,我個人在自己的網站上使用這些技術來優化速度。 這些方法簡單易行。

現在是您花一個小時提高 WordPress 網站速度的時候了。

相信我,一旦你用這些方法仔細優化了你的博客,你的網站的性能將會提高,它也會提高網站的整體加載時間。

我希望這篇文章能讓你清楚地了解一些提高 WordPress 博客速度的有效方法,如果你覺得這篇文章有幫助,請在評論部分告訴我們。 如果您使用其他方法來優化您的網站,請在下面的評論部分告訴我。