wordpress 外贸建站
WordPress外貿行銷網站一站式解決方案
38417867     [email protected]

如何在不使用外掛的情況下提高 WordPress 速度

» 如何在不使用外掛的情況下提高 WordPress 速度

無需插件即可提高 WordPress 速度

它只會讓您想要提高 WordPress 網站的速度。它顯著改善了非常重要的事情，例如使用者體驗和搜尋引擎優化。

有些人可能會通過添加更多插件來解決網站速度慢的問題，但這很少是絕對的解決方案。讓我們討論如何在不使用更多 WordPress 插件的情況下提高網站速度，然後討論何時應該實際引入插件。

如何在不使用插件的情況下提高 WordPress 網站速度：

  1. 運行速度審核以測量網站之前的速度得分。
  2. 優化媒體庫中的所有圖像，並在必要時在網站建構器中更新它們
  3. 通過縮小優化 HTML、CSS 和 JS 文件，並僅在需要時加載它們
  4. 將必要的代碼添加到 .htaccess 文件以利用瀏覽器緩存
  5. 停用或卸載不必要的 WordPress 插件
  6. 減少不必要的複雜頁面元素的數量
  7. 在新選項卡中運行另一個單獨的速度審核以衡量改進！

1. 首先，進行速度審核

為了衡量您網站的性能，我們需要捕獲網站速度得分的初始值或之前的值。為此，我們可以使用免費的在線工具（網站）來為我們做到這一點。

當談到網站速度優化時，我發現有兩種工具是最好的，可以為您提供最有用的信息；Google 的 PageSpeed Insights 和 GTMetrix。這些工具中的每一個都會為您提供網站性能的速度評級，並提供建議，告訴您需要優化網站的哪些方面以獲得更高的分數。

Google 的 PageSpeed Insights 工具有很多用處。它很簡單，首先為您提供最重要的速度改建議。更不用說它是由 Google 製作的，它可以讓您更好地了解 Google 在 SEO 方面如何專門加快您網站的速度值。

GTMetrix是另一種流行的速度工具，具有更多的技術界面，針對更高級的用戶。我個人發現 GTMetrix 可以更公平地表示您的網站速度。我喜歡將其視為 Google 的工具，它會根據網站的整體速度（以加載秒數計算）為您提供分數，但 GTMetrix 傾向於更多地判斷您是否進行了優化。

首先通過其中一種速度工具運行您的網站。當您在另一個選項卡中處理網站時，請在新選項卡中保持此審核打開狀態。這兩種工具都非常適合為您提供洞察力，無論您選擇哪一種，如果您實施以下優化，您的分數都會提高。

關於速度測試和審核的注意事項

注意#1：在追求高速度分數之前您應該知道的一件事是，這些工具只是幫助您診斷潛在問題以提高速度。是的，就速度結果而言，越高越好，但您不太可能發現 60% 與 70% 的分數之間存在顯著差異。只要您的網站利用率高於 75%，您就做得很好。超出這個範圍越高越好。不要擔心沒有達到 90% 以上，因為這對於大多數 WordPress 網站來說是不現實的，具體取決於您的主題和必要插件的數量。

注意#2：速度審核的結果可能因測試而異。這可能是由於多種不同的原因造成的，例如您的托管速度在一天中的不同時間會有所波動。非高峰使用時間可以為您提供比高峰使用時間更好的結果。

注意#3：您的移動速度得分低於桌面速度得分是正常的，尤其是使用 Google Page Speed Insights 時。這是因為使用 Google 的工具，移動分數會故意模擬在比台式機慢的移動電話連接上加載您的網站。

2. 無需插件即可優化圖像

優化圖像對於速度優化的重要性：8/10

這是網站速度審核中最常見的問題之一，也是最重要的問題之一。由於網站上每張圖片的數據量不同，未優化的圖片會導致下載時間存在巨大差異。

速度審核將向您指出具有最大性能問題的圖像的方向。找到您網站上那些有問題的特定圖像所在的位置，以便我們開始優化它們。

要在不使用插件的情況下優化 WordPress 中的圖像，我們首先需要找到它們的渲染大小。這非常重要，因為如果圖像只有 1000 像素寬，為什麼要顯示 3000 像素寬的圖像呢？

如何找到每張圖像的完美尺寸

我們必須首先確定要渲染的圖像有多大，這樣我們才能找出需要使實際圖像有多大，以免圖像太大而無法向其添加不必要的像素（文件大小中的更多數據）。圖像越小，圖像速度越快！

因此，在圖像優化方面，有兩種重要的圖像尺寸；渲染尺寸和固有尺寸。

渲染尺寸是圖像顯示的尺寸。

固有尺寸是實際圖像的尺寸，無論顯示為什麼尺寸。

這很重要，因為如果您有一個正在渲染 500×500 像素的圖像，但該圖像的實際固有尺寸是 4000×4000，那麼就有很大的圖像優化機會使圖像的固有尺寸接近顯示尺寸。

假設您確實優化了該圖像，所以現在它的 500×500 圖像（固有）顯示為 500×500（渲染）。您會發現，由於縮小了圖像的尺寸，因此圖像會變得模糊。

但如何呢？如果圖像是 500×500 且以 500×500 顯示，那麼它看起來不應該無損且清晰嗎？尺寸是一樣的！

不幸的是，情況並非如此，圖像會變得模糊，除非您在其中添加額外的緩衝區，以提供您想要的圖像的額外質量，同時仍然更快和優化。這就是為什麼我在渲染尺寸上添加了大約 200-300 個額外像素，這樣可以使它看起來更好。

您還必須注意的一件事是，僅僅因為您的圖像在桌面尺寸上以 400×400 渲染，並不意味著它在移動尺寸上不會渲染得更大。大多數響應式列在移動設備尺寸上將變為 100% 寬，或者 3 列佈局可能變成 3 行 1 列佈局 – 使容器比桌面上的容器更大。

這僅意味著通過在不同的屏幕尺寸上檢查圖像來確保找到優化圖像的最大渲染尺寸。

如何優化 WordPress 中的圖像

WordPress 圖片優化
  1. 首先右鍵單擊網站上要優化速度的圖像，然後單擊“檢查”（這就是 Chrome 上的內容，抱歉 Safari 用戶 – 我確信它是類似的）。
  2. 檢查面板（通常位於底部或右側）打開後，找到圖像元素或<img src=”…”> 內容並將滑鼠懸停在其 URL 上。可能有多個 URL，如果是，請將滑鼠懸停在具有基本src屬性的 URL 上。
  3. 當您將滑鼠懸停在圖像上時，您應該會看到出現預覽/信息窗口。它首先會顯示圖像渲染的大小，然後顯示固有大小，即加載的實際圖像有多大。
  4. 接下來，我們必須優化圖像。請記住，我們希望圖像以 + 200-300 像素進行渲染，以確保其看起來仍然具有高質量。有兩種快速方法可以優化圖像大小：
    1) 通過 WordPress 的圖像編輯器
    2) 下載圖像，將其放入 PhotoShop 之類的工具中，導出為較小的尺寸，然後重新上傳。這樣做可以讓您有機會以高壓縮率導出，從而獲得更小的文件大小。
  5. 將圖像替換為更新後的尺寸。

提示：重點關注頁眉和頁腳中的圖像（例如徽標），因為這些圖像將出現在每個頁面上。

優化圖像是提高網站速度的最佳方法。加快時間，改進盡可能多的圖像。

3. 無需插件優化HTML、CSS、JS文件

縮小對於速度優化的重要性：4/10

誠然，我不建議在沒有 WordPress 插件的情況下手動縮小 CSS 和 JS。有像Fast Velocity Minify這樣的插件可以自動縮小代碼，而無需在更改後重新縮小。這些插件需要幾秒鐘的時間來安裝，幾秒鐘的時間來激活，並且安裝插件幾乎沒有任何缺點。要知道，隨著您的網站變得越來越大，手動縮小幾乎變得不值得。我強烈建議使用插件。但是，如果您堅決不使用插件，您仍然可以手動完成。

縮小代碼不同
對於縮小的文件，所有代碼都會被壓縮以使文件大小更小

通過縮小工具運行代碼會對其進行壓縮，從而使縮小後的代碼的文件大小更小。只有當您的網站不太可能對其進行更多更改時，您才應該執行手動縮小，因為您必須重新格式化代碼以使其可讀，然後重新縮小代碼以使其再次壓縮。

通過縮小 CSS 或 JS 文件，文件大小預計可減少 30-60%。

如何縮小 CSS 文件：

  1. 打開 CSS Minfier 工具，例如CSS Minifier。
  2. 從“外觀”>“主題編輯器”>“style.css”（樣式表）復制 CSS 代碼，並將其粘貼到 CSS Minifer 工具和本地文本文件中，以便您有備份。
  3. 單擊“縮小”按鈕將普通 CSS 轉換為縮小版本
  4. 將縮小的 CSS 復制並粘貼回主題編輯器 style.css 文件中
  5. 保存更改

您的 style.css 文件現在更小、加載速度更快並且經過優化！

如何縮小 JS 文件：

  1. 打開 JS minfier 工具，例如Javascript Minifier。
  2. 從外觀 > 主題編輯器 > JS 文件夾 > script.js復制 JS 代碼，並將其粘貼到 Javascript Minifer 工具和本地文本文件中，以便您有備份。您可以使用主題文件中可能看到的其他 JS 文件來執行此操作。
  3. 單擊“縮小”按鈕將普通 JS 轉換為縮小版本
  4. 將縮小的 JS 復制並粘貼回script.js文件中
  5. 保存更改

您的script.js文件現在更小、加載速度更快並且經過優化！現在我們可以繼續緩存優化的文件。

4. 在 WordPress 中啟用瀏覽器緩存，無需插件

瀏覽器緩存對於速度優化的重要性：8/10

像W3 Total Cache這樣的外掛程式可以讓您在幾秒內啟用快取，因此安裝它們非常簡單。然而，快取的設定也可以很簡單，而無需使用外掛程式。您只需要編輯某個檔案，複製並貼上一些程式碼，就完成了！

如何啟用瀏覽器快取：

具有諷刺意味的是，您需要使用外掛程式或FTP訪問權限。我們將編輯一個名為 .htaccess 的檔案。

簡單來說，.htaccess 文件用於配置其所在目錄周圍的 Web 伺服器設定。這就是它用於快取的原因，因為它是我們希望 Web 伺服器快取的目錄中的檔案。

使用 WordPress 外掛編輯 .htaccess

  1. 臨時安裝一個名為Htaccess 文件編輯器的外掛程式 – 安全編輯 Htaccess 文件
  2. 通過左側 WordPress 側選單“設置”>“WP Htaccess 編輯器”轉到外掛程式
  3. 向下滾動到可怕的紅色區域，然後點擊“我明白。 啟用編輯器。
  4. 將文件中的所有內容複製並粘貼到本地文本文件中以進行備份
  5. 複製下面的代碼並粘貼到文件底部的 .htaccess 文件中。儘量不要添加任何額外的空格或換行符。
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
在 WordPress 中編輯 htacess 文件
將代碼貼上到文件底部

5. 點擊“保存前測試”按鈕，檢查是否存在錯誤。
6. 儲存更改，然後檢查網站，確保一切正常。
7. 如果一切順利，卸載 .htaccess 文件編輯器外掛即可！

使用 FTP 編輯 .htaccess

  1. 使用FileZilla等程式透過 FTP 連接到您的伺服器
  2. 在路由目錄中，找到 .htaccess 檔案
  3. 右鍵點擊>編輯檔案
  4. 複製所有程式碼並貼上到本地文字檔案進行備份
  5. 將上一節中的程式碼貼上到檔案底部。
  6. 儲存更改，然後檢查您的網站是否正常運行

如果您的網站在更新 .htaccess 檔案後變得空白且純白色，則存在錯誤，您應該使用備份中的程式碼替換當前所有損壞的 .htacess 檔案程式碼。重試一次，不要在程式碼末尾添加任何額外的空格或換行符，然後再次更新。

5. 停用不必要的 WordPress 外掛

停用未使用的外掛以最佳化速度的重要性：7/10

查看已啟用的外掛列表並停用僅為您的網站確實需要的外掛。

我之前在網站上工作過，停用了 5 個不同的未使用外掛，這些外掛停用後，Google 頁面速度工具上的網站性能提高了 38 點。

檢查每個外掛並問自己：

  1. 我的網站是否積極使用此外掛？
  2. 如果我不使用這個外掛真的有什麼大不了的嗎？
  3. 我可以自己製作這個外掛功能嗎？

我個人曾在一個安裝了 53 個外掛的網站上工作過！這太多了，至少有一部分外掛是不必要的。
您的目標應該是少於 10 個外掛，但如果您有足夠的速度優化，則 15-22 個也是可以接受的。

6.減少複雜、不必要的頁面元素的數量

減少不必要的元素對於速度優化的重要性：6/10
我很想成為第一個告訴您應該卸載 Revolution Slider 或任何其他滑塊外掛的人。

滑塊是我個人最喜歡的元素列表之一，我喜歡從受速度影響的網站中刪除它們，因為它們對網站的損害大於幫助。

有太多複雜的元素和外掛，它們會通過添加額外的 CSS、HTML 和 JS 文件來減慢您的網站速度，而這些文件並不值得。

以滑塊外掛為例 – 它們通常：

  • 有需要運行的 HTML/PHP 代碼
  • CSS 和 JS 文件可能會在每個頁面上加載，無論該頁面上是否有滑塊
  • 這些滑塊（不是每個滑塊）中的圖像不會為您的網站添加太多額外價值

所有這些都是為了一個有損用戶體驗的外掛。他們發現，1% 的人實際上首先點擊了滑塊，更不用說它們會讓人們感到困惑，為查看更多內容添加障礙，它還會引發所謂的橫幅失明，當然，它們會減慢您的網站速度。
因此，您需要仔細檢查您的網站並盡可能簡化它；沒有滑塊，沒有花哨的動畫，沒有彈出窗口，也沒有奇怪的按鈕觸發佈局。

這些並不是讓您的網站脫穎而出的因素，而是您為瀏覽者提供的內容和價值！別再試圖用華而不實的元素脫穎而出！

7. 測量速度結果

在您完成以下操作之後：

  • 優化了圖像
  • 優化了 CSS、JS 和 HTML
  • 啟用瀏覽器緩存
  • 停用無用或無用的外掛
  • 減少複雜元素的數量

您現在可以在新選項卡中運行另一次速度審核以查看速度的改進。應用上述更改後，您肯定會看到與第一次速度審核相比速度有所提高。

在 Google 頁面速度測試中得分 100%

您可以根據審核結果給出的建議進一步優化。最有可能的是，它會告訴您仍有一些圖像可以優化。在這種情況下，您可以再次壓縮它們或縮小它們的尺寸。

更改後網站仍然很慢？

如果您的網站在應用更改後仍然很慢，很可能是您的網站托管造成的 – 更具體地說，是您的 GoDaddy 托管很糟糕（是的，我正在大聲斥責您）。我個人喜歡將 GoDaddy 視為“在線獲取這些內容”的平台。

流行托管平台的速度 – 越大越差
流行托管平台的速度 – 越短越好

我建議使用更好的托管平台，例如 SiteGround，它的速度提高了一倍以上。
如果您不喜歡更改托管平台，我建議您安裝Fast Velocity Minify插件。還有其他速度優化插件在安裝時會導致錯誤甚至破壞您的網站，但使用 Fast Velocity Minify 我很少發現這種情況發生。

根據個人經驗，大多數速度優化插件可以將速度得分提高 20-30%，因此安裝插件是值得的。

我個人的速度優化流程

以下是在網站上進行速度優化的個人流程：

  1. 我首先運行谷歌的速度審核工具來獲得分數。通常我優化的網站在移動設備上的優化幅度約為 5-20%，在桌面設備上的優化幅度為 10-35%。
  2. 我閱讀了審核以找出網站需要改進的領域。85% 的情況下，圖像即使不是導致網站速度緩慢的主要問題，也是其中之一。
  3. 接下來，我優化圖像，停用未使用的插件，有時運行WP Smush等圖像優化器來壓縮媒體庫中的所有圖像並設置最大大小。
  4. 我安裝了一個速度優化插件（通常是Fast Velocity Minify），並通過設置來啟用/禁用功能，以幫助提高網站速度或幫助穩定性。我通常會激活大多數速度優化插件中的異步 Google 字體選項。
  5. 如果此時網站仍然很慢，我會使用“檢查元素”區域中的Google Chrome 內置網絡瀑布工具來找出導致頁面緩慢的原因。如果有什麼不對的地方，我會改正！
  6. 最後，我在新窗口中運行另一次速度審核，以便可以並排比較與第一個速度的差異。通常，移動設備上的最終速度約為 55%-80%，桌面設備上的最終速度約為 70%-90%。

如果您正在為客戶執行此操作，我有一些電子郵件模板，您可以使用這些模板來根據他們的經驗水平向他們解釋速度優化。