WordPress前端優化設置教程

enter image description here

人類對速度的追求永無止境,站長對網站的速度追求也是如此。如果你對WordPress越來越臃腫、速度越來越慢而煩惱,那本文關於WordPress前端優化設置教程是你必看優化教程之一。無論是VPS還是傳統的虛擬主機,對現有的服務器硬件來說性能已不是什麼問題,那為什麼還會慢呢?不外乎幾方面:後端的數據讀取與動態程序處理能力,前端的頁面大小和傳輸問題,再加上中間的網絡傳輸因素。

後端的數據讀取與動態程序處理優化,網上有很多,比輸啟用 Memcached 內存緩存等等。但這一類技術教程對於一般博客主來說還是有一定的技術難度,而用虛擬主機的用戶來說,後端優化主機運營商也不會給你去動,所以本教程僅針對前端優化。主要從以下幾方面著手。

1、精簡WordPress的header.php頭部代碼;
WordPress程序的header.php默認文件裡有很多我們平時根本不會用的代碼,這些代碼中,除了調用css或script腳本等必須的幾個之外,其餘的都是可以刪除掉了,反正這些代碼放著也是一種垃圾,對優化網站來說毫無用處。

對當前你所使用主題的functions.php文件進行編輯(建議修改前先對原文件進行備份),在?>之前添加以下代碼: 「

//精簡header.php頭部代碼
remove_action('wp_head', 'rsd_link');//移除離線編輯器開放接口
remove_action('wp_head', 'wlwmanifest_link');//移除離線編輯器開放接口
remove_action('wp_head', 'wp_shortlink_wp_head');//移除短鏈接
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
remove_action('wp_head', 'wp_generator' );//移除WordPress版本
remove_action('wp_head', 'parent_post_rel_link', 10, 0 );//清除前後文信息
remove_action('wp_head', 'start_post_rel_link', 10, 0 );//清除前後文信息
//禁用WordPress Emoji功能
remove_action( 'admin_print_scripts',   'print_emoji_detection_script');
remove_action( 'admin_print_styles',    'print_emoji_styles');
remove_action( 'wp_head',       'print_emoji_detection_script', 7);
remove_action( 'wp_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');
//移除自動保存和修訂版本
remove_action('post_updated', 'wp_save_post_revision',10,1);//禁用修訂版本
add_action( 'admin_print_scripts', create_function( '$a', "wp_deregister_script('autosave');" ) );//禁用自動保存,所以編輯長文章前請注意手動保存。
//精簡header.php頭部代碼結束  

至於以上代碼每條代表什麼就看我的註釋吧,這個不用我再說了,根據你自已的需求情況進行增減。

2、開啟Gzip壓縮;
如果你的主機是Apache,並且支持mod_deflate.c模塊,那只需要往博客根目錄.htaccess放進以下代碼既可。至於支不支持該模塊,上傳個探針測試一下就知道了。

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/json application/x-httpd-php application/x-javascript
</ifmodule>

同時,有一些緩存插件也支持開啟Gzip壓縮功能,但我一般不建議用緩存插件進行加速。同時玩VPS的朋友,建議選擇Apache,因為用它靜態化實在太簡單了。

如果你不想Gzip壓縮,只是想對WordPress前端html代碼壓縮優化,那只需要把以下代碼放進functions.php文件進行編輯(建議修改前先對原文件進行備份),在?>之前添加:

//壓縮html代碼 
function wp_compress_html(){
    function wp_compress_html_main ($buffer){
        $initial=strlen($buffer);
        $buffer=explode(\"<!--wp-compress-html-->\", $buffer);
        $count=count ($buffer);
        for ($i = 0; $i < = $count; $i++){
            if (stristr($buffer[$i], \'

<!--wp-compress-html no compression-->\')) {
                $buffer[$i]=(str_replace(\"

<!--wp-compress-html no compression-->\", \" \", $buffer[$i]));
            } else {
                $buffer[$i]=(str_replace(\"t\", \" \", $buffer[$i]));
                $buffer[$i]=(str_replace(\"nn\", \"n\", $buffer[$i]));
                $buffer[$i]=(str_replace(\"n\", \"\", $buffer[$i]));
                $buffer[$i]=(str_replace(\"r\", \"\", $buffer[$i]));
                while (stristr($buffer[$i], \'  \')) {
                    $buffer[$i]=(str_replace(\"  \", \" \", $buffer[$i]));
                }
            }
            $buffer_out.=$buffer[$i];
        }
        $final=strlen($buffer_out);   
        $savings=($initial-$final)/$initial*100;   
        $savings=round($savings, 2);   
        $buffer_out.=\"n

<!--壓縮前的大小: $initial bytes; 壓縮後的大小: $final bytes; 節約:$savings% -->\";   
    return $buffer_out;
}
ob_start(\"wp_compress_html_main\");
}
add_action(\'get_header\', \'wp_compress_html\');

Autoptimize–該插件支持html優化,注意重複優化。

3、壓縮圖片;
圖片的下載在網頁打開的過程中,佔用很多時間,而如果對這些圖片進行壓縮或者其他技巧(例如 lazy load)就可以減少這方面的時間。實踐證明,對 jpg 圖片進行 80% 的壓縮,既保證了肉眼看不出質量問題又可以減少一些尺寸,對jpgpng格式的圖片,可以使用 TinyPNG 來壓縮。TinyPNG官方插件:Compress JPEG & PNG images

只需要激活並申請TinyPNG API key既可。到時你上傳圖片時它會自動壓縮,效果非常不錯,本文的這張原片原來有20KB,上傳壓縮後只有5K,實在是太厲害了。對了,每個月只能免費壓縮500張圖片,一般博客主足夠用了。該插件設置也非常簡單,界面簡潔。對圖片壓縮,基本上是無損壓縮。加快下載速度才是正確的做法。建議大家都啟用該插件。

4、合併文件;
這裡的文件主要是指 CSS、JavaScript 文件,頁面中每多一個 CSS、JavaScript 文件,瀏覽器就會多一個 HTTP 請求,就會多一個等待時間。理想狀態下,最多只有一個 CSS、JavaScript 文件,並且進行壓縮使其文件盡可能小,這方面建議使用 Autoptimize 插件。如果有能力的,還可以合併圖標,把一些小圖片合併起來,做成 CSS Sprite。

相信現在都有不少人在用該插件了。該插件支持HTMLCSSJS等文件的優化與壓縮,如果你的主機已啟用了Gzip壓縮功能,那這裡就不建議再開啟了,因為二次壓縮可能會產生問題。

5、頁面靜態化緩存;
一說到頁面靜態化緩存,很多人就會想到WP Super Cache,建議我們在使用頁面靜態化緩存功能之前想想是否真的需要頁面靜態化嗎?同時想想是不是需要WP Super Cache這個功能強大的插件?我可不喜歡該插件,因為本人來說它的設置太繁瑣了。如果你的讀者不多,不建議做這一部,如果真的要做,那我推薦另一個輕量級純靜態化插件:Super Static Cache

enter image description here

Direct模式是把緩存內容直接生成html文件存放在服務器上,所以你可想而已靜態化的速度有多快了。同時該插件除了設置簡單外,對緩存機制也非常簡單,同時不影響到更新後的緩存問題。

enter image description here

6、靜態文件Cookies本地緩存;
如果你的主機是Apache,那只需要往博客根目錄.htaccess放進以下代碼既可。具體緩存內容和時間自已根據實際需求做調整吧。

<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<filesmatch "\.(html|htm|php|shtml)$">
Header set Cache-Control "max-age=3600"
</filesmatch>
</IfModule>

這也是我的博客除了首次打開慢一點外,其它時候都是秒開的原因所在了。

7、使用CDN,加速你的靜態文件 假如你的服務器在國外,國外訪問起來就會超快,但是國內的訪問者可能會由於距離和線路問題感覺很慢。成熟的 CDN 服務商在全國各地都會有服務器,如果你把靜態文件放在上面,比喻廣東地區訪問你的網站,會從廣東附近的服務器上下載文件,而且 CDN 的服務器和寬帶為下載做了優化,速度一般會超過你的服務器,這樣就可以大大的提速了,目前一般建議使用七牛雲存儲來加速靜態文件,這裡有 WordPress 插件:七牛鏡像存儲 WordPress 插件

如果你國外讀者比較多,建議用CF和KeyCDN.

其它方面就是定期優化一下自已的數據庫既可。是不是很簡單呢?現在我的博客是本站架設在Vultr雲主機上;CloudFlare提供源站加速與域名解析;由七牛雲加速提供靜態加速;再加以上的這些優化,無論是全球還是在國內,首次訪問時間都控制在3秒左右,再次訪問幾乎是秒開了。

請留言告知一下你瀏覽本博客的速度和本文的評價,謝謝。如果不想留言,也可以點擊評分對本文進行評價,謝謝。本了,本文圖片全已壓縮,你可以下載看看這些圖片壓縮後的大小,原圖片大小都是50-70Kb左右的。

19 thoughts on “WordPress前端優化設置教程

      1. 路楊

        靜態化在我看來的原意是為了搜索引擎,但是自從有了偽靜態化(地址重寫)後,這個意思就不大了。
        當然,純粹的靜態的確很好,但是不利於互動。

        回復
        1. 佐仔 文章作者

          是的,我也發現在這個問題,純粹靜態不利互動,所以我在文章當中也說了,使用純靜態之前想想有沒有那個必要。因為純靜態並不代表速度就快了,因為你把所有東西都靜態了,那這個文件就大了,反而會拖累速度。

          回復
  1. Pingback引用通告: 個人博客網站優化的一點思路 | 佐仔網絡

發表評論

電子郵件地址不會被公開。 必填項已用*標注