![]() |
VOOZH | about |
作為一個全面的WordPress 性能優化教程,本文旨在幫助讀者排查 WordPress 網站的性能問題,同時也提供網站前端優化加速的建議。
如果你曾經遇到過 WordPress 管理界面加載緩慢、「MySQL 伺服器崩潰」、網頁一直無法加載等情況,或者你預計網站的流量將要大漲,相信本教程會對你有益。
通常情況下,網站加載緩慢是由於網頁規模過大引起的,而且現在的大多數網頁,都包含許多圖片、Flash、視頻以及 JS 文件,這些元素都會給網絡加載帶寬造成壓力,進而導頁面打開緩慢、用戶體驗差的問題。
如果你準備認真地解決這個問題,你需要安裝部署Firefox瀏覽器,Firebug擴展程序 、Yslow插件以及Browser Insight。
開發時最好儘量將頁面大小保持在 100KB 最好是 50KB 以內,如果你的網頁包含許多多媒體內容,那你最好學會使用Yslow。Yslow 會對網站性能進行打分(分值為0到100),從js腳本、css、多媒體資源等多個方面,80分應該是網站的最低目標。
不過 Yslow 本身也有些局限性:
1.最新版的火狐還有谷歌瀏覽器已經無法使用了
2.其次 Yslow 主要是頁面結構分析,但是現在界面主要靠 js 繪製例如 react 等
3.而且 Yslow 本身主要關注的是 PC 端,可是現在是 mobile 時代
給大家推薦一個與 Yslow 有關的文章:YSlow老矣尚能飯否,有興趣的可以去看看,個人覺得幫助比較大。
Firebug一直同 Firefox 連接在一起,形成了強大的網頁開發工具,通過 Firebug 你可以編輯、調試和監控任何頁面的 CSS、HTML 和 JavaScript,不過就像 Yslow 主要是負責 PC 端一樣,Firebug 主要針對的是手機端的調試。
Browser Insight這款工具比較好的地方在於,它支持多平台頁面監控分析,無論是PC端、移動微信、移動瀏覽器、還是安卓 webview 都可以兼容。其次,它的功能比較整體化,涉及:頁面響應時間、腳本錯誤、資源加載時間耗時、ajax、DNS/TCP耗時、用戶響應時間分布等多個維度,相比於上面兩款工具,Browser Insight 算是一個比較全面的前端性能監控分析工具了。
高流量網站如何做出高性能?
Firebug,Debugger javascript調試利器 附下載地址
兩款較好的Web前端性能測試工具
從 WordPress 2.6 開始,Post 版本開始引用追蹤機制,例如,每次保存一篇 Post 時,資料庫會寫入一次修正。如果你不需要此功能,可以在 wp-config.php 文件中添加一行代碼禁用之,wp-config.php 文件可以在 WordPress 主站的安裝目錄找到:
define('WP_POST_REVISIONS', false);
如果你啟用了該功能,一段時間之後,資料庫中會寫入許多修正 post,這個也會導致數據加載緩慢等問題,如果你想刪除它們,只要在插件中運行下面的查詢語句(比如:利用前文提到過的 WP-DBManager)即可。
DELETE FROM wp_posts WHERE post_type = "revision";
該語句會刪除資料庫中的所有 「revision」 posts,使資料庫查詢更加快捷。
注意:使用時請一定仔細,如果你不知道自己在做什麼,請確保先備份資料庫。或尋求專業幫助。
插件往往是導致加載緩慢的重點嫌疑犯, WordPress 提供了豐富的插件,很可能就是因為一個資源分配不佳的插件導致了頁面的加載問題。
例如,過去曾導致過加載緩慢的插件有:Popularity contest,aLinks及@Feed。
檢查插件時,可以先禁用所有插件,檢查網站重點部分的運行狀況。如果沒有問題,依次啟用各個插件,直到發現導致問題的插件,不過這個方法很老實,但是相當耗費時間,而且每次出現問題都要這樣排查一次。
上文提及的Browser Insight把一個頁面的加載分為了白屏時間、首屏時間、頁面加載完成時間、資源加載完成時間,其中配合資源加載時間以及其剛剛上線的DNS耗時分析就可以較為清楚地定位插件的問題緩存可以從事先準備好的存儲區(緩存)檢索數據,而無需在用到同一信息時重新生成之。因此,緩存能極大提升信息檢索的速度,在多數現代應用中都廣泛使用。
使用緩存的最簡便方法,是使用緩存插件,當然了,如果你的博客存儲在共享的主機上,這也是唯一的辦法
最常用的緩存插件是WP Super Cache,後起之秀W3 Total Cache也是一種強大的緩存插件,而且它每天都在更新,大家可以試試看。
MySQL 可以將查詢結果保存在自己的緩存中。啟用這一功能,需編輯 MySQL 配置文件(通常是在 /etc/my.cnf 路徑下),在其中添加如下代碼:
query_cache_type = 1 query_cache_limit = 1M query_cache_size = 16M
重啟 MySQL 伺服器後,就會創建大小為 16MB 的查詢緩存(緩存大小取決於可用的 RAM 大小,在內存 4GB 的機器中,可使用的緩存達250MB)。
檢查 MySQL 運行是否正常,可運行以下查詢:
SHOW STATUS LIKE 'Qcache%';
結果示例:
Qcache_free_blocks 718 Qcache_free_memory 13004008 Qcache_hits 780759 Qcache_inserts 56292 Qcache_lowmem_prunes 0 Qcache_not_cached 3711 Qcache_queries_in_cache 1715 Qcache_total_blocks
4344
如果你想進一步優化 MySQL ,你可以使用的選項非常豐富。以下是我的 MySQL 配置文件,針對的是 4GB 內存的四核專用機。如果你使用開箱即用的機器,多半無法適用這樣的配置,請僅作參考。
[mysqld] bulk_insert_buffer_size = 8M connect_timeout=10 interactive_timeout=50 join_buffer=1M key_buffer=250M max_allowed_packet=16M max_connect_errors=10 max_connections=100
max_heap_table_size = 32M myisam_sort_buffer_size=96M query_cache_limit = 4M query_cache_size = 250M query_cache_type = 1 query_prealloc_size = 65K query_alloc_block_size = 128K read_buffer_size=1M
read_rnd_buffer_size=768K record_buffer=1M safe-show-database skip-innodb skip-locking skip-networking sort_buffer=1M table_cache=4096 thread_cache_size=1024 thread_concurrency=8 tmp_table_size = 32M
wait_timeout=500 # for slow queries, comment when not used #log-slow-queries=/var/log/mysql-slow.log #long_query_time=1 #log-queries-not-using-indexes [mysqld_safe] nice = -5 open_files_limit = 8192
[mysqldump] quick max_allowed_packet = 16M [myisamchk] key_buffer = 64M sort_buffer = 64M read_buffer = 16M write_buffer = 16M
超級實用的mysqlrepot工具是 MySQL 調試的利器。Mysql tuner是快速修複數據庫的最佳選擇。MySQL Tuning primer與MySQL Activity Report也是值得一試的好工具。
Maatkit則是有效管理 MySQL 的必備神器。
MySQL 慢查詢日誌是獲取有問題的查詢信息的有利工具,激活該日誌你需要編輯 my.cof 文件:
log-slow-queries=/var/log/mysql-slow.log long_query_time=1 log-queries-not-using-indexes
這會創建一個查詢日誌,裡面包含緩慢查詢與缺少索引的查詢。你需要找出運行緩慢的查詢,才能對其使用內部提供的慢日誌過濾與解析工具。使用'EXPLAIN'能有效幫助你理解並優化複雜的查詢語句。
使用更少的圖片(或將所有圖片用一張大圖替代,再用 CSS 調整位置),更少的 JS,更少的 CSS 文件(通常意味著更少的插件),就能減少 HTTP 請求數量。
PHP speedy 插件能將所有的 JS 與 CSS 文件合為一個大文件,從而切實減少 HTTP 請求的數量。PHP Speedy 的唯一缺點是無法與其他插件 100% 兼容。
同樣,你可以使用CSS Sprite generator將所有圖片整合為一張大圖,再用 CSS background-position 進行展示。這也能極大地減少 HTTP 請求數量。
如果你有專屬的伺服器,可以將所有內容壓縮後再傳給瀏覽器。由於大多數 html 頁面都容易壓縮,這一招能大大降低加載時間。
在 .htaccess 中添加以下代碼:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml
text/javascript
Expire (截止時間)頭信息會告知瀏覽器內容緩存的保存時間。網站的大多數圖片幾乎不會改變,因此可以將它們保存在本地。
在 .htaccess 中添加以下代碼(如果出現問題,請確保 mod_expires 已經在 Apache 中載入):
ExpiresActive on ExpiresDefault "access plus 30 days" Header unset ETag FileETag None
以下是另一種設置方法:
Header unset Pragma FileETag None Header unset ETag # 1 YEAR Header set Cache-Control "public" Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" Header unset Last-Modified # 2 HOURS Header set
Cache-Control "max-age=7200, must-revalidate" # CACHED FOREVER # MOD_REWRITE TO RENAME EVERY CHANGE Header set Cache-Control "public" Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" Header unset
Last-Modified
使用cacheability engine檢查緩存配置。
許多博客都使用 Gravatars(頭像),也即靠在評論邊上的小圖片。然而,gravatars 對於網站優化有兩大缺點:
我們可以創建一個本地 gravatar 緩存,將所有網站需要的圖片都存儲在這兒。如果能將 gravatar 緩存保存在一個獨立的自域中,就更好了。
我使用了Zenpax.com 提供的插件,將所有 gravatars 頭像本地化緩存。
本文主要從網站性能指標、優化緩存、MySQL 等方面給大家介紹了如何進行 WordPress 網站的性能優化,明天有時間的話再給大家介紹下從主題優化、圖片壓縮等角度如何來優化 WordPress 網站。
本文的原文作者為VLADIMIR PRELOVAC,由OneAPM產品運營編譯整理。
Browser Insight是一個基於真實用戶的 Web前端性能監控平台,能夠幫大家定位網站性能瓶頸,網站加速效果可視化;支持瀏覽器、微信、App瀏覽 HTML 和 HTML5頁面。想閱讀更多技術文章,請訪問OneAPM 官方技術博客。