加速 WordPress – 完整優化指南

WordPress Speed Optimization

WordPress 是一個非常強大和流行的內容管理系統 ( CMS ),目前在全球互聯網上所有網站的使用率超過 28% 以上,這表示著每 4 個網站,就有 1 個可能是 WordPress 網站。安裝簡單、容易上手,不論是個人部落格還是企業商業網站都適用。

Advertisement

加速你的 WordPress 網站

WordPress 的功能一直演變,從一個簡單的部落格到一個複雜的購物網站,多功能的變化,配置也不盡相同,加上豐富的外掛的支援,如果沒有正確的設置你的網站,WordPress 是會拖慢整個網站速度。

下面是我代管主機或網站中,整理出對 WordPress 速度優化的方法,也是目前網路搜尋到的資料,比較少提到的部分,希望是有幫助的資料。

快速 WordPress 主機

選擇一台快速 WordPress 主機,不管是虛擬主機或是 VPS 也好,對網站加速來說,這是一件最簡單、最容易做到的事情,也是最基本的,如果這個都做不到,就不用去看 WordPress 加速優化這部分。

在代管網站或幫客戶搬家的經驗中發現,9 成的虛擬主機託管商,想要應付更多的 CMS 網站及維持伺服器的穩定,會使用 CloudLinux 來管理每一個客戶的網站,主機商會告訴你:這樣的管理會讓網站更快速、更穩定、更安全。其實,只是把你的網站效能限制的更死而已。

如果是費用的考量,一定要使用虛擬主機,我強烈推薦 SiteGround 主機,他們提供 HTTP/2, PHP7, SSD 以及非常好的 WordPress 快取模式,每個月的價格也不高,可以查看 codeinwp.com 在 2016 年做的評價。

Our web hosting services are crafted for top speed, unmatched security, 24/7 fast and expert support. Trusted by more than 2,000,000 domains!

codeinwp.com 在 2016 年做的評價

Here's a WordPress hosting infographic that visualizes the findings of the biggest WordPress hosting survey to date.

如果你的網站有一定的規模及不小的流量,建議脫離虛擬主機吧,使用高效能的 VPS 伺服器,由專業的團隊來管理,所花的金錢效益,絕對是划得來的。

WPHostingSpot 和 Kinsta 會是你最好的選擇,每個月 20 美元 到 400 美元的價格,以長遠的網站成長來評估及人事成本,這是一個有效益的投資。

Reliable Managed Wordpress VPS Hosting with Personal Touch

Kinsta 專業 WordPress 主機

Premium managed WordPress hosting, powered by Google Cloud. Lightning-fast load times, 24/7 expert support, and scalable for mission-critical sites.

優化你的 WordPress

下面的優化方式是很輕量的方法,將代碼加入佈景主題的 functions.php 文件裡

禁用 Emojis 表情符號:

WordPress 4.2 版本後,多加入了 Emojis 表情符號,在編輯中可以加入可愛的表情符號,雖然可愛,但是實際上會在網站的每個頁面上加載一個 JavaScript 文件 (wp-emoji-release.min.js),而拖到網頁加載的速度,這不是必須的 JS 文件,建議禁用 Emojis。

function disable_emojis() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );	
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );	
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );

/**
 * remove the tinymce emojis plugin.
 */
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

禁用 Embeds 崁入功能:

WordPress 4.4 版本後,編輯時自動將 YouTube 或 Twitter 推文網址轉換預覽模式,實際上會在網站的每個頁面上加載一個 JavaScript 文件 (wp-embed.min.js),而拖到網頁加載的速度,如果您沒用到這個功能,建議禁用 Embeds。

function my_deregister_scripts(){
wp_dequeue_script( 'wp-embed' );
}
add_action( 'wp_footer', 'my_deregister_scripts' );

移除 Query String From URL 末尾的版本號:

這是一個很重要步驟,但是很多人常常會忽略這件事情,如果你常用 Pingdom 和 GTMetrix 分析網站,Remove Query String 是一個很嚴重的警告。

可參考我之前寫的文章:如何移除 WordPress 的 Query String From URL

談到 WordPress 的速度優化,移除 Query String From URL 是一個很重要步驟,但是,很多人常常會忽略這件事情,如果你常用 Pingdom 和 GTMetrix 分析網站,Remove Query String 是一個很嚴重的警告。甚麼是 Query String From URL:

禁用 XML-RPC:

XML-RPC,允許進行遠程連接,可以使用遠程設備將文章發佈到 WordPress。事實上,它是網站一個安全隱優。但是 JetPack 外掛又需要打開 XML-RPC 連接,要不要禁用 XML-RPC,就要依你的網站需求來做決定了。

XML-RPC 驗證工具驗證是否禁用了 XML-RPC:

使用文字編輯軟體編輯子佈景主題下的 functions.php 文件,加入以下語法:

add_filter( 'xmlrpc_enabled', '__return_false' );

Apache 系統請修改 .htaccess 文件,加入以下語法:

移除 jQuery Migrate:

大多數的佈景主題的前端代碼和外掛都不需要 jquery-migrate.min.js 文件,只有一些較舊的網站會用到 jQuery 函數,這只會為您的網站增加不必要的加載。

function isa_remove_jquery_migrate( &$scripts) {
    if(!is_admin()) {
        $scripts->remove( 'jquery');
        $scripts->add( 'jquery', false, array( 'jquery-core' ), '1.12.4' );
    }
}
add_filter( 'wp_default_scripts', 'isa_remove_jquery_migrate' );

如果要完全刪除 jquery.js,請從上面的代碼中刪除第 7 行

移除 WordPress 版本號:

默認情況下,每個 WordPress 網站都會顯示以下標籤。

以網站安全的考量,建議將 WordPress 版本號移除,沒有必要讓別人知道你的 WordPress 版本。

function woowp_remove_version() {
    return '';
}
    add_filter('the_generator', 'woowp_remove_version');

移除 wlwmanifest, RSD, Shortlink 的鏈接:

默認情況下,每個 WordPress 網站中都會顯示以下標籤。

以上鍊接實際上是由 Windows Live Writer / RSD 所使用的。利用 XML-RPC 第三方應用程序請求使用,在大多數情況下,這都是不必要的代碼。

另外,WordPress 內附頁面的縮網址。如果你已經設置了固定鏈接,例如:domain.com/post,那麼沒有理由使用縮網址,這只是不必要的代碼。

function remheadlink() {
    remove_action( 'wp_head', 'wlwmanifest_link');
    remove_action ('wp_head', 'rsd_link');
    remove_action( 'wp_head', 'wp_shortlink_wp_head');
}
    add_action('init', 'remheadlink');

禁用 Self Pingbacks 鏈接:

pingback 是一個自動鏈接,當另一個部落格鏈接到你的文章時就會創建一個 Pingback,基本上只是個垃圾郵件,浪費主機資源,建議將他禁用。

function no_self_ping( &$links ) {
	$home = get_option( 'home' );
	foreach ( $links as $l => $link )
		if ( 0 === strpos( $link, $home ) )
			unset($links[$l]);
}
    add_action( 'pre_ping', 'no_self_ping' );

上面移除這些的功能,都可以安裝外掛來處理,這樣反而會多安裝了 4 – 5 個外掛,反而增加網站的負擔,建議將這些代碼,寫到子佈景的 functions.php 文件裡,佈景如果升級後,才不會覆蓋這些代碼。

或購買由 Kinsta 工程師所寫的 perfmatters 優化外掛,一次處理以上的問題。

Slow WordPress sites have higher bounce rates and fewer conversions. The perfmatters plugin was created by web performance geeks to speed up your site!

優化後的 WordPress 使用 Chrome F12 開發工具來觀看,變得簡潔多了,也少了好幾個不必要的 requests,也會加快一點加載速度。

Chrome F12 requests

禁用 WordPress Heartbeat API:

WordPress 使用 /wp-admin/admin-ajax.php 從瀏覽器運行 AJAX 與伺服器進行通信,雖然這對開發工程師非常好用,但是當你進入 WordPress 後台,會導致高 CPU 使用量。

Disable the WordPress Heartbeat API

如果只有你個人使用 WordPress 強烈建議安裝 Heartbeat Control 外掛,將 Heartbeat 禁用或者調成 60 秒 post 一次,降低 CPU 的負擔或暴衝。

Allows you to easily manage the frequency of the WordPress heartbeat API.

優化 WordPress 數據庫

WordPress 有一個貼心設計,使用者修改一次文章,就會另外存檔一個修訂版本,文章修改的越多次,就會有越來越多的修訂版,很多使用者常常忽略這個問題,日經月累資料庫越來越肥大。

我曾經搬過幾個站長經營很多年的網站,資料庫檔案有 100MB 多,查看之後,修訂版本多達 8-9 千個文件。

建議安裝 WP-Optimize plugin 或 Advanced Database Cleaner Plugin 優化你的資料庫,把這些沒有用的垃圾文件清除掉。或者用下面的代碼加入 wp-config.php 文件中,限制只存檔 3 篇修改文件。

WP-Optimize makes your site fast and efficient. It cleans the database, compresses images and caches pages. Fast sites attract more traffic and users.

Advanced Database Cleaner Plugin

Clean database by deleting orphaned data such as 'revisions', 'transients', optimize database and more...
define('AUTOSAVE_INTERVAL', 300); // seconds
define('WP_POST_REVISIONS', 3);

WordPress 快取外掛

現在每個人都知道 WordPress 網站安裝快取外掛的重要性,大家熟知的 W3 Total Cache 和 WP Super Cache 快取外掛,或付費的 WP Rocket 快取外掛;我也有使用 WP Rocket,可能是付費的關係,使用者有所要求,功能就越來越多,我覺得反而變成一個有點肥的快取外掛了。

Speed up your WordPress website, more traffic, conversions and money with WP Rocket caching plugin.

快取外掛,我建議免費的 Cache Enabler,我自己的網站都用慢慢的取代了 WP Rocket,它是由 KeyCDN 所開發,輕量、簡單又易懂,與 EWWW Image 或 Optimus 搭配,可以生成比 jpg 更小的 WebP 圖片。我更喜歡的是與 Autoptimize 完美搭配,並不會比 WP Rocket 差。

A lightweight caching plugin for WordPress that makes your website faster by generating static HTML files plus WebP support.

Optimus 圖片優化外掛

Effective image compression and optimization during the upload process. Smart, automatic and reliable.

Autoptimize 最佳化外掛

Autoptimize speeds up your website by optimizing JS, CSS, images (incl. lazy-load), HTML and Google Fonts, asyncing JS, removing emoji cruft and more.

Cache Enabler 也有提供代碼可以用在 WordPress 快取中繞過 PHP 程序,你可以試試效果,請參考者一篇教學 advanced snippet for Nginx and Apache。

The WordPress Cache Enabler plugin is a lightweight caching plugin that creates static HTML files and stores them on your web server.

可以參考我的 demo 網站,就是 Cache Enabler + Autoptimize

其他的 WordPress 優化

我移除了肥大的 Google Analytics Dashboard for WP (GADWP) 外掛,改用很輕量的 Complete Analytics Optimization Suite (CAOS) 外掛。

Complete Analytics Optimization Suite (CAOS) 是一個 WordPress 輕量又優化的外掛,可以在本機管理 Google Analytic 的腳本,同時還可調整跳出率的時間,可以任意修改時間,以秒為單位。現在的網站似乎都會去 google Analytics 申請一個帳號,來分析你的網站流量、訪客。

我改用 Optimus 及 Imagify 取代其他的圖像優化壓縮,可以得到更好的圖像品質。

我用一張 800px X 543px 的圖片做示範:

原圖沒有優化,圖片大小為 396kb,右上角有嚴重的色彩分離情形
images-test-oginal-1.jpg

TinyPNG 優化,67% 壓縮率,圖片大小為 132kb
images-test-tinypng.jpg

Imagify 優化 (aggressive 模式),68.9% 壓縮率,圖片大小為 123kb
images-test-imagify.jpg

ShortPixel 優化 (lossy 模式),75% 壓縮率,圖片大小為 97.6kb
images-shortpixel-lossy.jpg

Optimus 優化,92% 壓縮率,圖片大小為 79kb
Optimus 優化

註:ShortPixel 有 3 種優化模式,Loosy / Gloosy / Lossless,壓縮效果最好是 Loosy

由上圖的示範,可以看出 Imagify 和 Optimus 不僅壓縮圖片,還優化了原圖右上角的色彩分離的缺陷。

如果還想要在 PageSpeed Insights 有漂亮的分數,處理「清除前幾行內容中的禁止轉譯 JavaScript 和 CSS」的問題,可以安裝 Async JavaScript 外掛,不過我自己的部落格沒有安裝,沒必要為了分數好看去調整 JS/CSS 的位置,很多佈景主題是無法這樣調整的。

Async JavaScript 外掛

Async Javascript lets you add 'async' or 'defer' attribute to scripts to exclude to help increase the performance of your WordPres …

依照上述的優化方法,你的 WordPress 網站會有不錯的速度,我不喜歡網站有太多用不到的功能,就好像身上的贅肉,反而影響網站的速度。

有的購物網站應需要會員管理和銷售方式,安裝了大量的 woo 外掛,拖慢了整個網站速度,希望可以仔細的評估,那些是真正必要性的購物外掛,不一定都要安裝。

如果你有更好的建議,歡迎使用下方的評論告訴我。

2017/10/20 更新:

admin-ajax.php 解釋:WordPress 提供了 AJAX 的 hook 讓其他外掛或是開發者撰寫 AJAX,一般最大的用途就只有在撰寫文章時自動存檔用到 admin-ajax.php。

Follow me

yungke

視咖啡如命的癮君子,沒有厲害的技術,只會小打小鬧的電腦工程師,其實是個打雜小弟,修電燈、水管也都是我的工作。
yungke
Follow me
Advertisement

Follow Me

查看本文
喜愛 Like 點擊數!!

Comments

  1. garyo says:

    板主寫的真好,請問如果是經營會員課程電商網站,就是有些內容及課程是會員才看得到的,這樣使用快取優化會不會有風險呢?

    • yungke says:

      現在的快取外掛大多可以做到那些頁面可以不快取,所以一些即時的內容頁面,可以設置不快取。
      比如,電商網站,當會員將商品放入購物車後,快取的機制就會取消,結帳完成後,才會又有快取。
      我有一篇文章有說到這問題,可以參考看看..
      FastCGI Cache 快取 WooCommerce 的問題

  2. MARK says:

    版主分析的很實用,恰巧我正在使用的外掛Perfmatters,內容都包含此文所述,甚至更多有用功能,也謝謝您的分享,造就大家!

    • yungke says:

      謝謝您的鼓勵。
      我也有使用 Perfmatters 外掛,Perfmatters 是 Kinsta 首席 Marketing 所開發的外掛,是一款非常棒的 WordPress 優化外掛,尤其是 Scripts Manager 功能。

Back to top