WordPress 優化清單

WordPress優化是使您的網站盡可能快地運行，改善您的用戶體驗，降低服務器成本並具有SEO優勢的藝術。

許多研究表明，訪問者不希望等待網站加載，如果加載時間過長，他們傾向於跳離您的網站。

如果您有網店並希望提高轉化率，那麼快速加載的網站對您來說尤其重要。

亞馬遜的測試顯示了類似的結果：Amazon.com 的加載時間每增加 100 毫秒，銷售額就會下降 1%（Kohavi 和 Longbotham 2007）

資料來源：https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

您網站的加載速度對您在 Google 上的排名也非常重要，因此網站優化是您的 SEO 策略的一部分。

但是，我的網站加載速度非常快！

當然可以。 至少對你來說。 但是您是否嘗試過很長時間以來第一次訪問您的網站？

當您在您的網站上瀏覽時，大部分內容都會緩存在您的瀏覽器中。 如果您想獲得第一次體驗，請清除緩存或使用完全不同的瀏覽器。

有很多事情可以提高您的 WordPress 網站的速度，讓我們開始吧。

縮小腳本

WordPress 網站是 HTML、CSS、JavaScript 和圖像的組合。 HTML 代碼首先被加載，然後它包含有關 CSS 樣式表、JavaScript 文件和圖像的其他文件的信息。

依次加載每個文件。 瀏覽器通常有 2-4 個“管道”的限制，這意味著瀏覽器最多只能同時從託管文件的服務器加載 2-4 個文件。

如果您查看 WordPress 網站的 HTML 代碼，您會注意到許多不同的 .css 和 .js 文件。 它們中的每一個通常來自不同的插件，每個插件都添加了 .js 或 .css 文件。

在某些情況下，插件甚至會將 JavaScript 或 CSS 樣式直接注入 HTML 大多數 WordPress 插件開發人員或主題作者很聰明，不會這樣做。

這只是來自普通 WordPress 網站的示例。 HTML 代碼具有指向其他幾個文件的鏈接。 在這個簡單的示例中，一個一個地加載了 4 個 JavaScript 文件。

<script type=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress 具有允許插件和主題作者嵌入必要的 JavaScript 和 CSS 文件的內部功能。

wp_enqueue_script() 和 wp_enqueue_style()。 函數的名稱為它們的作用提供了可靠的線索。 通過使用其中任何一個來嵌入必要的文件，插件和主題作者將他們的文件與所有其他插件甚至 WordPress 本身一起排隊。

也可以指示其他庫的任何依賴項的功能，通常 JavaScript 包含文件取決於要首先加載的 jQuery。

我通常會找到並安裝一個縮小插件，激活然後查看網站上是否有任何問題。 從那裡我去查明究竟是什麼失敗了，如果我只需要更改幾個設置來修復它。

縮小插件往往會在文檔的頁眉或頁腳中排除特定文件的設置，這些文件在與其他文件一起加載或更改文件的加載位置時播放效果不佳。

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

注意：在代碼示例中，我將主題的 url 存儲到一個變量中，然後將其解析到 wp_enqueue_script 函數。 這減少了所需的 PHP 和/或數據庫調用的數量，從而提高了速度。

為了追求極快的加載速度，我可以選擇對絕對 url 路徑進行硬編碼，但這會將主題限制在單個域中，並且會使在另一個站點上重用代碼變得更加困難。

安裝縮小插件後，JavaScript 和 CSS 樣式表現在加入到更少的 HTTP 調用中。

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

這會將 4 個文件合併到一個“文件”/瀏覽器的請求中。

我遇到過基於 WordPress 的網站，其中加載了 22 個 .css 文件和 15 個 .js 文件。 都在首頁。 如果您可以減少外部文件的數量，速度的變化可能會非常驚人。

儘管縮小腳本往往會大大提高速度，但它也是我使用的技術之一，它往往會在設置過程中帶來大多數問題。

優化header.php

您的主題中的 header.php 在您的 WordPress 網站上的每個頁面上都會被調用。 這個文件通常有很多可以優化的元素。

一個經典的例子是 bloginfo('template_directory') ，它通常在標頭中多次調用以返回主題的 url 以包含外部文件。

更有效的方法是對 url 進行一次請求，然後將其存儲為變量。

$template_directory = get_bloginfo('template_directory'); 

主題目錄的 url 現在存儲在變量 $template_directory 中。

更多關於如何提高 header.php 效率的例子可以閱讀博文 WordPress header.php 優化技巧

減少插件數量

WordPress 優化的另一個重要部分是保持激活插件的數量盡可能低。 許多用戶很想測試和試驗不同的插件，這確實是 WordPress 的好處之一。

但是，激活大量插件會降低 WordPress 網站的速度。 許多插件只有一個函數，可以很容易地通過放在你的functions.php中的一段代碼來處理。

在許多情況下，您可能只需要一個功能，但您使用的插件還有其他幾個您從未使用過的選項。

分析您網站上的每個插件，並確保您需要它們。 如果您不需要它們或功能可以用 functions.php 代碼替換，請停用並刪除插件。

不要使用圖片——使用 CSS3

網站的設計使用圖像來幫助製作用戶界面。

在引入 CSS，尤其是 CSS3 之後，許多用於 Web 界面的效果可以通過使用 CSS 和 HTML 代碼來模仿。

[box]注意：這些效果中的大多數並非在所有瀏覽器中都兼容，尤其是舊版 Internet Explorer（是的，對於任何 Web 開發人員來說，它總是有問題的孩子）。 如果您希望優化網站的速度，使用 CSS 效果可能是一個快速的解決方案，但如果客戶端的主要受眾使用過時的瀏覽器，則不是一個好的選擇。[/box]

如果您正在為以 B2C（企業對消費者）為目標的客戶工作，您應該查看他們的 Google Analytics（分析）或詢問他們擁有（或希望定位）的客戶類型。 如果客戶受眾通常使用過時的瀏覽器，這可能會影響您是否可以使用 CSS3 效果。

當 Elegantthemes.com 發布新版本的短代碼插件時，由於 CSS3 效果和將多個圖像放入單個精靈，它對我的客戶的加載時間產生了巨大影響。

曾經包含 90 張圖片的簡碼/圖片文件夾現在只有一個 PNG 精靈，整體大小從 140kb 減少到 15kb！
（也就是說尺寸減少了大約 90%。）

圖像到精靈

現有主題的 Sprite 優化可能會有點耗時，但它也可以為您的網站帶來很大的速度提升。

sprite 是單個圖像，通常為 .PNG 格式，其中包含視覺設計/佈局的多個元素。 不是單獨加載每個圖形元素，而是將所有圖像連接到一個或盡可能少的精靈中。

這種技術應該只用於用於佈局設計的圖像，而不是用於單個帖子特色圖像、縮略圖等。您應該嘗試放入精靈的唯一圖像是在您的網站上每個頁面上使用的圖像。

不是加載每個單獨的圖像（不同的 http 請求），而是將所有圖像分組到一個文件中，並且修改顯示每個圖像的 CSS 以簡單地將背景微移到精靈中所需部分的位置。

SpriteMe.org 是創建精靈的絕佳資源。 最好的方法是提前計劃並首先構建您的 sprite，但是如果您需要修復現有網站，spriteme.org 網站有一個書籤，可以讓這個過程變得非常簡單。

CSS 樣式與精靈組合的示例：

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

每個css樣式都引用了同一個文件，只是背景位置不同，展示了圖片的不同部分。

分發 – 使用 CDN

使用 CDN（內容分發網絡）託管您的主題文件和 WordPress 元素有兩個主要好處。

您的文件加載速度更快，因為它們位於不同的域中。 2-4 個並發下載文件的瀏覽器限制是針對每個域的。

因此，如果您的文件託管在不同的域上，瀏覽器將自行加載這些文件，實際上使您的網站加載速度更快，並減少您的域和主機的負載壓力。

另一個好處是，如果您使用主要的 CDN，他們將擁有分佈在世界各地的服務器，然後檢測您的訪問者來自哪裡，然後從他們網絡中最近的服務器向他們提供您的文件。

適合您網站的服務器

託管網站的服務器需要靠近目標受眾。 因此，如果一個網站是針對德國市場的，最好在德國或至少在中歐找到一個託管公司的服務器。

這對從離他們所在位置更近的服務器加載的訪問者產生了很大影響，從而使您的網站瀏覽速度更快。

這也有 SEO 影響，不僅因為網站加載速度更快，還因為它增加了網站對德國觀眾的重要性，因此也應該有更高的排名。

搜索引擎優化的真正效果是有爭議的，但如果你想提高你的網站性能，那麼值得考慮。

這對於 SEO 來說是眾所周知的，但是一旦建立了站點，就很少會因為純粹的 SEO 原因而將其轉移到另一台服務器上。 不過，對於您的下一個項目，請牢記這一點。

修復 404 錯誤

您應該定期檢查您的網站，以確保您沒有 404 - 無論如何都找不到頁面。 減少網站上的不良鏈接可以減少服務器負載，並提供更好的用戶體驗。 不僅鏈接和頁面會丟失，有時拼寫錯誤或其他類型的錯誤也會導致在您的網站上找不到內容。

提示：查看這段代碼以自動 301 重定向未找到的頁面。

[盒子]
此頁面還遠未完成，還沒有涵蓋 WordPress 優化的所有細節。 目標是創建一個提示和技巧資源，以充分利用您的 WordPress 網站。

除非您是開發人員，否則其中一些或大部分技巧將難以實施，但每一個技巧都會使您的 WordPress 網站運行得更快。
[/盒子]

清單

這是清單，請注意每個網站和項目都不同。 並非所有步驟都可以在所有網站上使用。