如何給Elementor網(wǎng)站有效提升速度？13個(gè)黃金tips趕快利用起來！（4000字）

希望這會(huì)對(duì)你有所幫助（如果您有疑問，請(qǐng)?jiān)谖恼碌淖詈箅S時(shí)私信我們）。

1?激活Elementor Experiments

激活 Elementor 實(shí)驗(yàn)

前往 Elementor → 設(shè)置 → 實(shí)驗(yàn)，然后激活以下選項(xiàng)：

內(nèi)聯(lián)字體圖標(biāo)?– 字體圖標(biāo)（即 Font Awesome + eicons）將作為 SVG 內(nèi)聯(lián)加載，而無需加載整個(gè)庫(kù)。這意味著 PSI 中的 CSS 請(qǐng)求和渲染阻塞 CSS 問題更少。

延遲加載背景圖像?– 您最初必須使用帶有“l(fā)azy-bg”幫助程序類（或類似）的優(yōu)化插件，并將其添加到您的背景圖像中。這更容易。

優(yōu)化 DOM 輸出?– 地址通過刪除不必要的 div 包裝器來避免 PSI 中的 DOM 大小過大?項(xiàng)（elementor-inner、elementor-row 和 elementor-column-wrap）。

改進(jìn)的資源加載?– 僅在頁面上使用燈箱和全屏庫(kù)、對(duì)話框庫(kù)和共享鏈接庫(kù)時(shí)加載它們，從而減少您網(wǎng)站上的 JavaScript .

改進(jìn)的 CSS 加載?– 僅加載正在使用的小部件 CSS 和動(dòng)畫（同時(shí)加載它們），從而減少網(wǎng)站上的 CSS 和渲染阻塞資源。

使用數(shù)據(jù)共享?– 與插件開發(fā)人員共享數(shù)據(jù)需要少量用于發(fā)送數(shù)據(jù)的服務(wù)器資源。因此，我建議在所有插件中禁用此功能。

雖然有優(yōu)點(diǎn)和缺點(diǎn)缺點(diǎn)?對(duì)于每個(gè)外部 CSS 文件都可以緩存，并且它們不會(huì)增加 HTML 的大小。您可以測(cè)試您網(wǎng)站的結(jié)果，但我通常推薦外部文件。

3?禁用默認(rèn)的谷歌字體

在接下來的幾個(gè)步驟中，我們將在預(yù)加載時(shí)僅加載您需要的字體（本地使用 woff2）。第一步是禁用 Google Fonts 和 Font Awesome 圖標(biāo)。

更改字體/CSS 設(shè)置時(shí)，您應(yīng)該重新生成 CSS 和 CSS Elementor 的工具設(shè)置中的數(shù)據(jù)，然后在?瀑布圖（例如 GTmetrix 或 Chrome 開發(fā)工具）中測(cè)試結(jié)果。您可以立即判斷字體是否是本地托管的，使用更快的 woff2 格式，GTmetrix 中的棕色條表示阻塞時(shí)間，可以通過預(yù)加載來減少阻塞時(shí)間。

4?使用woff2在本地托管字體

如果 fonts.gstatic.com 或其他第三方字體加載到您的網(wǎng)站上，請(qǐng)將它們托管在本地。

第 1 步：轉(zhuǎn)至 Google Fonts 網(wǎng)站（或其他字體網(wǎng)站）并下載您的字體字體。確保僅選擇所需的權(quán)重，因?yàn)檫^多的權(quán)重會(huì)增加文件大小。

第 2 步：使用 CloudConvert 將它們轉(zhuǎn)換為 woff2（woff2 文件為 < a i=4>比 .ttf 小）。

順便說一下?

在WordPress建站｜如何在 WordPress 中添加自定義字體?中，給大家分享如何添加自己喜歡的自定義字體。

WOFF2 格式相比于 TTF 格式更為緊湊，文件尺寸更小。WOFF2（Web Open Font Format 2）是一種經(jīng)過優(yōu)化的字體文件格式，特別設(shè)計(jì)用于在網(wǎng)頁上加載字體，以提供更高的性能和更快的加載速度。

WOFF2 通過采用先進(jìn)的壓縮算法，能夠顯著減小字體文件的大小，而不影響字體質(zhì)量。這對(duì)于網(wǎng)頁性能和用戶體驗(yàn)而言是非常重要的，特別是對(duì)于移動(dòng)設(shè)備和慢速網(wǎng)絡(luò)連接的用戶。

因此，當(dāng)在網(wǎng)頁上使用自定義字體時(shí)，推薦使用 WOFF2 格式，以確保更高效的加載速度和更好的性能。這種格式的廣泛支持也使其成為當(dāng)前網(wǎng)頁設(shè)計(jì)中常用的字體格式之一。

第 3 步：上傳字體作為自定義字體 。如果您沒有使用 Elementor Pro，OMGF 會(huì)在您點(diǎn)擊“保存并保存”時(shí)自動(dòng)下載它們。設(shè)置中的“優(yōu)化”。它還可以提前加載字體（預(yù)加載它們），或者您可以選擇根本不加載它們。

5?預(yù)加載字體

最后一步是預(yù)加載字體首屏。

復(fù)制它們的文件名，然后預(yù)加載它們，您可以在大多數(shù)優(yōu)化插件中執(zhí)行此操作。如果您使用 eicons 和 Font Awesome Icons，您還應(yīng)該預(yù)加載它們。預(yù)加載字體后，您應(yīng)該會(huì)看到阻塞時(shí)間減少（在瀑布圖中顯示為棕色條）。

檢查您的控制臺(tái)報(bào)告是否有錯(cuò)誤，因?yàn)轭A(yù)加載未使用的字體會(huì)降低性能。

6?將Google字體加載保留為“Swap"

將 Google 字體加載設(shè)置為“swap”修復(fù)確保文本在網(wǎng)絡(luò)字體加載期間保持可見。但是，F(xiàn)ont Awesome 建議 font-display: block 因?yàn)樗顾鼈兎卿秩咀枞Ｄ€可以更改 Elementor Pro 自定義字體中的font-display 屬性。Zach Leatherman 如果您想深入了解每種定義和優(yōu)缺點(diǎn)，可以進(jìn)行詳細(xì)分析。

要添加字體顯示：Swap，請(qǐng)查找字體的 CSS 文件，或者使用?字符串定位器?搜索字體（如果您不這樣做）確定它位于哪里。然后只需將 font-display: swap 添加到字體即可。

7?禁用古騰堡的 wp-block-library

由于您使用的是 Elementor，因此您可以禁用 Gutenberg，它會(huì)向您的網(wǎng)站添加額外的 CSS 文件 (/wp-includes/css/dist/block-library/style.min.css)。您可以在源代碼中找到它：

您可以使用禁用古騰堡插件Disable Gutenberg或 Perfmatters 中的腳本管理器。如果您僅在網(wǎng)站的某些部分使用古騰堡，這兩個(gè)選項(xiàng)都可以讓您控制其加載位置。

8?在動(dòng)畫中使用transfer+translate

并不是說我認(rèn)可動(dòng)畫，而是使用transform + translate來防止布局變化 (CLS)。

您可以使用Happy Addons來添加這些內(nèi)容。CSS 變換可讓您更改動(dòng)畫的寬度/高度，而 CSS 翻譯可讓您移動(dòng)元素而不會(huì)導(dǎo)致布局變化。

對(duì)于外貿(mào)獨(dú)立站來說，不需要添加很多喧賓奪主的動(dòng)畫，建站過程中追求的功能一定要克制。

9?禁用不使用的插件

務(wù)必要控制WordPress建站的插件使用數(shù)量，曾經(jīng)看到一個(gè)客戶后臺(tái)的插件數(shù)量有100多個(gè)，后臺(tái)直接卡死，進(jìn)去都非常費(fèi)勁。

所以這里給到的建議：

• 使用插件要克制（這里控制在15個(gè)以內(nèi)）

• 相同功能的插件只使用一個(gè)，比如SEO插件，有SEO Yoast, Rank Math, All in One SEO等等，選擇安裝其中的一個(gè)就可以了。

• 有的一個(gè)All-in-one功能的插件，功能已經(jīng)有很多，就無需安裝重復(fù)功能的插件。
  

• 用不到的插件，一定要禁用disable掉

如果您只在特定頁面/帖子上需要它們，您可以通過在 Perfmatters 或 中卸載它們來減少 CSS/JavaScript 資產(chǎn)清理。我使用 Perfmatters 因?yàn)樗懈嗟膬?yōu)化。

啟用腳本管理器腳本管理器（設(shè)置 → Perfmatters → 附加 → 腳本管理器）后，轉(zhuǎn)至腳本管理器設(shè)置并啟用測(cè)試模式。這可以讓您測(cè)試腳本管理器，而不會(huì)破壞您的網(wǎng)站，但請(qǐng)記住在準(zhǔn)備發(fā)布更改時(shí)將其禁用。

查看腳本管理器并卸載未使用的插件（除了頁面、帖子、當(dāng)前 URL、正則表達(dá)式等之外的所有位置）。這顯然取決于您使用哪些插件以及在何處使用。

10?使用Webp圖片

谷歌SEO | 如何優(yōu)化圖片？中，跟大家介紹圖片優(yōu)化的重要性，包括三點(diǎn)：

• 圖片大小控制在200k以內(nèi)

• 添加Alt屬性（SEO優(yōu)化）

• Webp格式最佳

所以，強(qiáng)烈推薦大家在本地處理好Webp格式的圖片，在上傳到你的WordPress網(wǎng)站。

大家也可以移步查看：

https://kinsta.com/blog/webp/

您可以使用 Chrome 開發(fā)工具檢查圖像是否以 WebP 形式提供：

11?使用Optimole（或圖像CDN）來優(yōu)化圖像

Optimole 比其他插件做得更好，Cloudflare Mirage/Polish 甚至更好。

雖然大多數(shù)插件都會(huì)壓縮圖像并將其轉(zhuǎn)換為 WebP，但并非所有插件都支持 AVIF、移動(dòng)圖像調(diào)整大小或視口/網(wǎng)絡(luò)-基于優(yōu)化（例如在慢速連接時(shí)降低圖像質(zhì)量）。因此，如果您必須使用圖像優(yōu)化，我推薦 Optimole。

圖片 CDN 是首選，因?yàn)樗鼈儾皇褂梅?wù)器資源或占用存儲(chǔ)空間。相反，圖像會(huì)動(dòng)態(tài)優(yōu)化（通過您的 CDN，而不是您的服務(wù)器），無需進(jìn)行備份。

我有關(guān)于優(yōu)化圖像的完整教程：如果您仍需要幫助：

為什么 WooCommerce 在 Elementor 上速度緩慢？

Elementor 和 WooCommerce 都添加了額外的 CSS/JavaScript，同時(shí)增加了內(nèi)存使用量。使用足夠的主機(jī)和對(duì)象緩存（即 Redis）以及全頁緩存和 CDN 功能可以加快動(dòng)態(tài)內(nèi)容的交付。

往期推薦

獨(dú)立站的成本分析：2024年搭建一個(gè)屬于自己的網(wǎng)站需要多少錢？（5000字超詳細(xì)指南，建議收藏）

獨(dú)立站是做垂直細(xì)分還是綜合雜貨鋪？

帶你認(rèn)識(shí)WordPress后臺(tái)基本操作（2000字保姆級(jí)教程，建議收藏！）

如何禁止谷歌重寫標(biāo)題的10種方式？

什么是獨(dú)立站？獨(dú)立站的優(yōu)勢(shì)？

為什么老外都喜歡在獨(dú)立站上買東西？

如果有任何關(guān)于WordPress的問題以及建站咨詢，歡迎大家隨時(shí)溝通哦。

歡迎大家私信獲取《谷歌SEO頁面優(yōu)化清單》