網站測速效能測試深入淺出教程[附15款常用網站測速工具]

討論到WordPress網站,必須要重視到速度很重要。這是一個事實。為什麼?首先,網站速度是Google演算法甚至所有搜尋引擎演算法的重要因素。載入速度足夠快的網站才有可能會在搜尋引擎中獲得更高的排名,並吸引更多的訪問者。其次,這也是使用者體驗考慮因素。如果網站載入速度足夠快,訪問者更有可能留下來,閱讀您的內容,並最終轉換。換句話說,作為一個網站管理員/運營者,都應該渴望更快的網站載入速度,沒有任何一個賽車手不對高效能車“趨之若騖”。

但是,我們今天不在這裡談論如何讓您的網站更快。稍後我們將會專文來介紹加速WordPress指南和頁面速度。我們在這裡討論WordPress使用者每天都會遇到的另一個常見問題,那就是錯誤地執行網站速度測試。

你可能不認為這是一個大問題。但實際上,當你試圖衡量改進時。如果您以錯誤的方式執行網站速度測試,則可能看起來您的網站速度較慢,而實際速度更快。

下面,我們將深入探討執行網站速度測試正確方法,以及可用於有效衡量網站速度和跟蹤任何改進的一些工具。

網站速度很重要。 越快,成功的機會就越大。

在進行速度測試之前

在執行速度測試之前,您應該檢查是否已經在WordPress站點上配置並執行了以下兩項內容:

  1. 快取
  2. CDN

如果您不知道,請諮詢您的Web開發人員或伺服器提供商。 如果您要推出一個全新的網站,請務必先設定這些內容,然後再進行速度測試。

1. 配置快取

請務必檢視伺服器提供商的相關說明文件以確保啟用快取。 如果您使用的是共享主機或VPS,這可能意味著您需要安裝WordPress快取外掛

如果你的伺服器使用的是Nginx,參考以下配置:

將以下命令新增至站點配置最上方(server區外)。如果你想要配置多個 WordPress 站點,請這幾條配置寫在 Nginx 主配置 nginx.conf 的 http 塊中。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# fastcgi_cache_path # fastcgi_cache_path 後面的路徑就是第 後面的路徑就是第②②步中設定的路徑, 步中設定的路徑,max_size max_size請根據分割槽大小自行設定 請根據分割槽大小自行設定
fastcgi_cache_path /run/wpcache levels=1:2 keys_zone=WORDPRESS:250m inactive=1d max_size=600M;
# # 即第即第②②步中的 步中的 Temp Temp 路徑路徑
fastcgi_temp_path /run/wpcache/temp;
fastcgi_cache_key "$scheme$request_method$host$request_uri";
# 在指定錯誤下允許使用過期 Cache
fastcgi_cache_use_stale error timeout invalid_header http_500;
#忽略一切nocache申明,避免不快取偽靜態等
fastcgi_ignore_headers Cache-Control Expires Set-Cookie;
# fastcgi_cache_path # fastcgi_cache_path 後面的路徑就是第 後面的路徑就是第②②步中設定的路徑, 步中設定的路徑,max_size max_size請根據分割槽大小自行設定 請根據分割槽大小自行設定 fastcgi_cache_path /run/wpcache levels=1:2 keys_zone=WORDPRESS:250m inactive=1d max_size=600M; # # 即第即第②②步中的 步中的 Temp Temp 路徑路徑 fastcgi_temp_path /run/wpcache/temp; fastcgi_cache_key "$scheme$request_method$host$request_uri"; # 在指定錯誤下允許使用過期 Cache fastcgi_cache_use_stale error timeout invalid_header http_500; #忽略一切nocache申明,避免不快取偽靜態等 fastcgi_ignore_headers Cache-Control Expires Set-Cookie;
# fastcgi_cache_path # fastcgi_cache_path 後面的路徑就是第 後面的路徑就是第②②步中設定的路徑, 步中設定的路徑,max_size max_size請根據分割槽大小自行設定 請根據分割槽大小自行設定
fastcgi_cache_path /run/wpcache levels=1:2 keys_zone=WORDPRESS:250m inactive=1d max_size=600M;
# # 即第即第②②步中的 步中的 Temp Temp 路徑路徑
fastcgi_temp_path /run/wpcache/temp;
fastcgi_cache_key "$scheme$request_method$host$request_uri";
# 在指定錯誤下允許使用過期 Cache
fastcgi_cache_use_stale error timeout invalid_header http_500;
#忽略一切nocache申明,避免不快取偽靜態等
fastcgi_ignore_headers Cache-Control Expires Set-Cookie;

然後在站點配置的 server 塊中加上如下配置:
PS:其中註釋請仔細閱讀。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
#快取清理配置
location ~ /purge(/.*) {
allow 127.0.0.1;
allow 【你的站點IP】;
deny all;
fastcgi_cache_purge WORDPRESS "$scheme$request_method$host$1";
}
location ~* ^.+\.
(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xl
s|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
access_log off;
log_not_found off;
expires 7d;
}
location ~ .*\.(js|css)?$
{
expires 12h;
access_log off;
}
location = /robots.txt { access_log off; log_not_found off; }
location / {
## FastCGI_Cache 配置,預設 0 快取,然後以下判斷無需快取則設為 1
set $skip_cache 0;
#post訪問不快取
if ($request_method = POST) {
set $skip_cache 1;
}
#動態查詢不快取
if ($query_string != "") {
set $skip_cache 1;
}
#後臺等特定頁面不快取(其他需求請自行新增即可)
if ($request_uri ~* "/wpadmin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml") {
set $skip_cache 1;
}
#對登入使用者、評論過的使用者不展示快取
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wppostpass|wordpress_no_cache|wordpress_logged_in") {
set $skip_cache 1;
}
##
try_files $uri $uri/ @wordpress;
include fastcgi.conf;
fastcgi_pass unix:/tmp/php-cgi-71.sock;
# fastcgi_pass 填的即時第①步中查詢的路徑
fastcgi_index index.php;
#新增的快取規則
fastcgi_cache_bypass $skip_cache;
fastcgi_no_cache $skip_cache;
fastcgi_cache WORDPRESS;
# 設定對以下響應快取
fastcgi_cache_valid 200 301 302 1d;
# 新增一個頭部方便檢視我們的 FastCGI_Cache 是否正常運作。
add_header rt-Fastcgi-Cache "$upstream_cache_status From $host";
fastcgi_intercept_errors on;
# 下面這條用於解決登入後檢視文章404的問題
error_page 404 = @wordpress;
}
location @wordpress {
# 解決只快取首頁不快取文章的問題
include fastcgi.conf;
fastcgi_pass unix:/tmp/php-cgi-71.sock;
# # 回傳回傳 php-fpm php-fpm 的響應碼,顯示 的響應碼,顯示 Nginx Nginx 設定的錯誤頁面(如 設定的錯誤頁面(如 404 404 等)等)
fastcgi_intercept_errors on;
# # 下面填寫 下面填寫 WP WP 站點的 站點的 index.php index.php 路徑路徑
fastcgi_param SCRIPT_FILENAME /www/wwwroot/miyouzi.tk/index.php;
fastcgi_cache_bypass $skip_cache;
fastcgi_no_cache $skip_cache;
fastcgi_cache WORDPRESS;
fastcgi_cache_valid 200 301 302 1d;
add_header rt-Fastcgi-Cache "$upstream_cache_status From $host";
}
#快取清理配置 location ~ /purge(/.*) { allow 127.0.0.1; allow 【你的站點IP】; deny all; fastcgi_cache_purge WORDPRESS "$scheme$request_method$host$1"; } location ~* ^.+\. (ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xl s|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ { access_log off; log_not_found off; expires 7d; } location ~ .*\.(js|css)?$ { expires 12h; access_log off; } location = /robots.txt { access_log off; log_not_found off; } location / { ## FastCGI_Cache 配置,預設 0 快取,然後以下判斷無需快取則設為 1 set $skip_cache 0; #post訪問不快取 if ($request_method = POST) { set $skip_cache 1; } #動態查詢不快取 if ($query_string != "") { set $skip_cache 1; } #後臺等特定頁面不快取(其他需求請自行新增即可) if ($request_uri ~* "/wpadmin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml") { set $skip_cache 1; } #對登入使用者、評論過的使用者不展示快取 if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wppostpass|wordpress_no_cache|wordpress_logged_in") { set $skip_cache 1; } ## try_files $uri $uri/ @wordpress; include fastcgi.conf; fastcgi_pass unix:/tmp/php-cgi-71.sock; # fastcgi_pass 填的即時第①步中查詢的路徑 fastcgi_index index.php; #新增的快取規則 fastcgi_cache_bypass $skip_cache; fastcgi_no_cache $skip_cache; fastcgi_cache WORDPRESS; # 設定對以下響應快取 fastcgi_cache_valid 200 301 302 1d; # 新增一個頭部方便檢視我們的 FastCGI_Cache 是否正常運作。 add_header rt-Fastcgi-Cache "$upstream_cache_status From $host"; fastcgi_intercept_errors on; # 下面這條用於解決登入後檢視文章404的問題 error_page 404 = @wordpress; } location @wordpress { # 解決只快取首頁不快取文章的問題 include fastcgi.conf; fastcgi_pass unix:/tmp/php-cgi-71.sock; # # 回傳回傳 php-fpm php-fpm 的響應碼,顯示 的響應碼,顯示 Nginx Nginx 設定的錯誤頁面(如 設定的錯誤頁面(如 404 404 等)等) fastcgi_intercept_errors on; # # 下面填寫 下面填寫 WP WP 站點的 站點的 index.php index.php 路徑路徑 fastcgi_param SCRIPT_FILENAME /www/wwwroot/miyouzi.tk/index.php; fastcgi_cache_bypass $skip_cache; fastcgi_no_cache $skip_cache; fastcgi_cache WORDPRESS; fastcgi_cache_valid 200 301 302 1d; add_header rt-Fastcgi-Cache "$upstream_cache_status From $host"; }
#快取清理配置
 location ~ /purge(/.*) {
 allow 127.0.0.1;
 allow 【你的站點IP】;
 deny all;
 fastcgi_cache_purge WORDPRESS "$scheme$request_method$host$1";
 }

 location ~* ^.+\.
(ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|rss|atom|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xl
s|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
access_log off;
log_not_found off;
expires 7d;
 }
location ~ .*\.(js|css)?$
 {
expires 12h;
access_log off;
 }
location = /robots.txt { access_log off; log_not_found off; }
location / {
## FastCGI_Cache 配置,預設 0 快取,然後以下判斷無需快取則設為 1
set $skip_cache 0;
#post訪問不快取
if ($request_method = POST) {
set $skip_cache 1;
}
#動態查詢不快取
if ($query_string != "") {
set $skip_cache 1;
}
#後臺等特定頁面不快取(其他需求請自行新增即可)
if ($request_uri ~* "/wpadmin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml") {
set $skip_cache 1;
} 
#對登入使用者、評論過的使用者不展示快取
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wppostpass|wordpress_no_cache|wordpress_logged_in") {
set $skip_cache 1;
}
##
try_files $uri $uri/ @wordpress;
include fastcgi.conf;
fastcgi_pass unix:/tmp/php-cgi-71.sock;
# fastcgi_pass 填的即時第①步中查詢的路徑
fastcgi_index index.php;
#新增的快取規則
fastcgi_cache_bypass $skip_cache;
fastcgi_no_cache $skip_cache;
fastcgi_cache WORDPRESS;
# 設定對以下響應快取
fastcgi_cache_valid 200 301 302 1d;
# 新增一個頭部方便檢視我們的 FastCGI_Cache 是否正常運作。
add_header rt-Fastcgi-Cache "$upstream_cache_status From $host";
fastcgi_intercept_errors on;
# 下面這條用於解決登入後檢視文章404的問題
error_page 404 = @wordpress;
}

location @wordpress {
# 解決只快取首頁不快取文章的問題
include fastcgi.conf;
fastcgi_pass unix:/tmp/php-cgi-71.sock;
# # 回傳回傳 php-fpm php-fpm 的響應碼,顯示 的響應碼,顯示 Nginx Nginx 設定的錯誤頁面(如 設定的錯誤頁面(如 404 404 等)等)
fastcgi_intercept_errors on;
# # 下面填寫 下面填寫 WP WP 站點的 站點的 index.php index.php 路徑路徑
fastcgi_param SCRIPT_FILENAME /www/wwwroot/miyouzi.tk/index.php;
fastcgi_cache_bypass $skip_cache;
fastcgi_no_cache $skip_cache;
fastcgi_cache WORDPRESS;
fastcgi_cache_valid 200 301 302 1d;
add_header rt-Fastcgi-Cache "$upstream_cache_status From $host";
}

如果你的伺服器使用的是Apache ,確保你的htaccess新增了一些配置規則:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
# 網站檔案快取有效規則設定 Start #
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/xhtml-xml "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
# 網站檔案快取有效規則設定 End #
# 網站快取頭規則設定 Start #
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpeg|jpg|png|gif|swf|pdf|svg)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# 網站快取頭規則設定 End #
# 關閉ETags Start #
FileETag None
# 關閉ETags End #
# 網站檔案快取有效規則設定 Start # ExpiresActive On ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/svg "access 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresByType application/pdf "access 1 month" ExpiresByType application/xhtml-xml "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresDefault "access 1 month" # 網站檔案快取有效規則設定 End # # 網站快取頭規則設定 Start # <ifModule mod_headers.c> <filesMatch "\.(ico|jpeg|jpg|png|gif|swf|pdf|svg)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header set Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header set Cache-Control "private, must-revalidate" </filesMatch> </ifModule> # 網站快取頭規則設定 End # # 關閉ETags Start # FileETag None # 關閉ETags End #
# 網站檔案快取有效規則設定 Start #
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/xhtml-xml "access 1 month"
ExpiresByType application/javascript "access 1 month" 
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
# 網站檔案快取有效規則設定 End #

# 網站快取頭規則設定 Start #
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpeg|jpg|png|gif|swf|pdf|svg)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# 網站快取頭規則設定 End #

# 關閉ETags Start #
FileETag None
# 關閉ETags End #

Nginx快取規則引自https://www.bilibili.com/read/cv427016/;Apache快取規則引自https://technumero.com/how-to-leverage-browser-caching-wordpress/

快取規則僅供參考,實際應用請根據使用場景自行調整配置。以上規則配置未經驗證。

關於WordPress快取的相關文章:

如何做到Google PageSpeed Insights測試滿分
如何實現採用高效的快取策略提供靜態資源
WordPress網站使用Gzip壓縮提升網站載入速度教程

2. 開啟CDN

如果您不知道內容分發網路是什麼,你可以理解為CDN服務商將你的網站靜態檔案快取到全球各地資料中心。然後訪客訪問你的網站時,會進行“就地取材”,大幅度提升了客戶端網站載入速度。

在99.9%的場景中,它會對您網站的速度產生巨大影響。 根據您的網站所在的資料中心的位置以及訪問者的位置,我們已經看到CDN減少載入時間超過50%!

各大CDN服務商在CDN配置上大同小異,並且官網均會有詳細的說明文件,小編就不再這裡重複描述了。

推薦閱讀:“針對使用Cloudflare CDN國內網站的速度優化方案”一文就國人使用Cloudflare的CDN進行了頗有趣的研究,對這一塊有需求或者有興趣的童鞋可以參考學習!

如何正確執行網站速度測試

現在您已經配置了快取並啟用了CDN,現在是時候深入瞭解如何正確加速測試您的WordPress網站。 您可以使用許多不同的工具來衡量網站的效果。 您可以在下面檢視完整列表。 對於此示例,我們將使用Pingdom,這是最常用和最常用的工具之一。

速度測試位置很重要

幾乎每個速度測試工具都支援從全球不同的測試位置中進行選擇,這一點非常重要。 原因是這都與您託管WordPress網站的資料中心有關。 TTFB,網路延遲,都發揮作用。

因此,我們應該選擇靠近資料中心的位置和遠離資料中心的位置執行網站測速人物。 這也可以幫助您瞭解CDN對您的WordPress網站有多大影響。 您也可以暫時禁用CDN並重新測試,進行啟用及不啟用CDN測速結果對比。

無論您做什麼,都要與您選擇的位置保持一致。

執行多次測試

我們不會在本文中深入研究快取,但請記住,這就是使您的WordPress網站載入速度提升(包括WordPress主機或外掛快取和CDN快取)的原因。

最大的問題是許多使用者往往只執行一次速度測試,內容沒有快取在WordPress主機或CDN上,然後看起來該網站實際上速度較慢。 如果您剛剛清除了WordPress站點或CDN的快取,也會發生這種情況。

如何判斷您的內容或媒體不是通過快取提供的? 這很簡單。 每個速度測試工具都會顯示所謂的HTTP標頭(也稱為響應標頭)。 這些包含有關每個請求的重要資訊。

下面是專門設定了一個測試站點,並啟用了CDN。 我們首先通過Pingdom對其進行測試,得到以下結果。

網站速度測試

網站速度測試

如果您檢視下面的示例,第一個請求是主域,這是直接從網站伺服器載入。 在此之下,您可以看到其餘請求是從CDN伺服器載入的。

如果您檢視對網站伺服器的請求,您將看到一個名為x-kinsta-cache的標頭。 如果它不是從快取服務,你會看到 MISS 標識。 根據您的託管服務提供商,此標頭的名稱可能略有不同。

以下CDN請求的方式相同。 查詢名為x-cache的標頭。 如果它不是從快取服務,它將標識為 MISS。 同樣,根據您的CDN提供商,標題的名稱可能略有不同。 例如,當您使用Cloudflare時,HTTP標頭稱為cf-cache-status

網站速度測試細分

網站速度測試細分

要正確加速測試,您需要檢視從快取(來自WordPress主機和CDN)載入的所有內容。 如果是,x-kinsta-cachex-cache頭將標識一個HIT(如下所示)。 這通常需要多次執行速度測試。  一些速度測試工具如Pingdom也限制了每次測試之間的時間(通常是幾分鐘)。 因此,您可能需要一定時間間隔來執行新的速度測試。

WordPress主機和CDN快取

WordPress主機和CDN快取

您的WordPress主機也可能在您的CDN之前標識帶有快取的HIT。 您可以快速掃描測試並尋找大的黃色條。 這表示TTFB(等待時間),當頁面或資源未從快取傳遞時,這是非常高的峰值。

為什麼這麼重要? 因為如果你看看我們之前和之後的速度測試,那麼完全從快取中載入的網站的速度要快50%。 這只是在小型測試網站上。 在較大的網站上,百分比將更大。 這就是為什麼瞭解如何正確加速測試網站至關重要的原因。

快取網站測速

快取網站測速

除了向您的伺服器提供商和CDN發起網路請求外,您的網站很可能還會對百度統計,CNZZ統計,51La統計,社交分享,Facebook,Google Analytics,Google字型等內容提出外部請求。本文不對於這些請求進行展開分析,以後我們再來探討關於如何識別和分析WordPress網站上的外部服務。

2020年度最佳網站測速工具

現在是時候深入瞭解您可以使用的所有不同的網站速度測試工具。 網站最佳載入時間是否有一個參考值? 越快越好,但大多數專家建議大約兩秒或更短時間是一個很好的目標。 還要記住,感知效能和實際效能之間存在差異。

  1. Pingdom
  2. Google PageSpeed Insights
  3. Google Mobile Website Speed Testing Tool
  4. Google Analytics Site Speed
  5. WebPageTest
  6. GTMetrix
  7. KeyCDN Website Speed Test
  8. DareBoost
  9. Web Page Analyzer
  10. YSlow
  11. Chrome DevTools
  12. Load Impact
  13. Site Relic
  14. dotcom-monitor
  15. New Relic

對於網站速度測試來說,最重要的一點是選擇一個工具並堅持使用它。每個工具都有自己的一組不同的評測標準,因此您不能將一個工具的測試結果與另一個工具的測試結果進行比較。工具本身沒有正確或錯誤的,您應該關注的是不停地改進。谷歌網站管理員趨勢分析師加里·伊利耶斯對此做了很好的總結。

1. Pingdom

Pingdom提供市場領先的網站監控服務,並以其免費的網站速度測試工具而聞名。速度測試工具以瀑布檢視顯示您網站的所有請求。您可以按載入順序、檔案大小和載入時間進行篩選,為您提供不同的視角來識別潛在的改進要點—它還列出了總請求、載入時間和頁面大小等資訊。

多年來,由於它非常容易使用,特別是與類似的速度測試工具相比,它飽受好評。對於初學者來說,Pingdom絕對是首選的網站測速工具。

Pingdom網站測速工具

Pingdom網站測速工具

Pingdom還為您提供速度效能評級,滿分為100分。這個評分分為十二個標準,每個標準都有一個單獨的分數。同樣,這有助於確定“quick wins”的目標,使您的網站速度得到即時、切實的提高。網站有機會獲得滿分100分。但是,不要過分關注分數,因為它們與簡單地在你的網站上進行改進以加快速度無關。

Pingdom儲存您網站上執行的所有測試的結果,這樣你可以檢視歷史資料進行對比分析。

2. Google PageSpeed Insights

谷歌自2010年以來就表示,頁面速度是搜尋引擎優化的重要排名因素。為了幫助你提高網站的速度,Google也推出了自家的網站速度測試工具,Google Pagespeed Insights,它可以測量頁面移動裝置和桌面裝置的效能。

Google PageSpeed Insights tool

Google PageSpeed Insights tool

PageSpeed得分範圍為0到100分,基於Lighthouse。分數越高越好,85分或更高的分數表示頁面效能良好。報告頁面為您提供了一個有用的細分步驟,您可以採取這些步驟來提高效能。PageSpeed insights還為您提供移動裝置的其他使用者體驗建議。檢視我們對pagespeed insights是否可以得分100的想法。

如果你想把你的網站提升到SERP的頂端,那麼聽聽谷歌的建議是值得的。

3. Google Mobile Website Speed Testing Tool

據谷歌稱,如果一個網站在移動端不友好,那麼人們跳出該網站的可能性要高出5倍。這就是他們釋出移動網站速度測試工具的原因。這個工具實際上是由Google Pagespeed Insights提供支援的,旨在為營銷人員和機構提供易於理解的優化報告。

移動網站速度測試工具

移動網站速度測試工具

您可以將報告直接傳送到電子郵件,或者將資訊轉發給您的網站管理員或開發人員。但是,記住,在所有的場景中,100/100分幾乎不可能,這取決於你的WordPress站點是如何設定的。許多多用途的主題和網站附帶了幾十個外部指令碼,想要獲得一個完美的分數的話顯然是很困難的。

4. Google Analytics Site Speed

Google Analytics也提供網站速度測試服務。你可以通過GA儀表盤的“行為”選單找到它。它通過網頁中包含的程式碼片段捕獲資訊。站點速度報告三個方面的延遲來衡量:

  • 網站頁面檢視示例的頁面載入時間。
  • 要跟蹤的任何離散命中、事件或使用者互動的執行速度或載入時間。
  • 瀏覽器解析文件並使其可用於使用者互動的速度有多快。

谷歌分析網站速度計時

谷歌分析網站速度計時

雖然這對整體比較很有幫助,但我們通常建議不要使用它,因為我們發現資料並不總是準確的,或者對網站上實際發生的事情的描述過於含糊。為什麼?因為它是從隨機抽樣的資料中收集的。

Joe寫了一個關於Google Analytics網站速度準確性的報告。Yotta還報告了經常性錯誤,這會大大偏離正常水平的平均速度。我們建議使用本文提到的其他速度測試工具之一。

5. WebPageTest

WebPagetest 由谷歌的Chrome引擎工程師帕特里克·米南建立。它是一個開放原始碼專案,允許您使用真正的瀏覽器(如Chrome等)在全球多個位置執行免費的網站速度測試。對於需要從速度測試中獲取額外資料的高階使用者來說,這是一個很好的工具。

WebPageTest

WebPageTest

WebpageTest允許您執行高階測試,包括多步驟事件、捕獲視訊、內容阻止、比較第一檢視與重複檢視、更改連線速度等。他們的瀑布圖和資源載入報告提供了許多關於可以在整個站點中進行改進的額外資訊。

6. GTmetrix

GTmetrix 是另一種流行的速度分析工具,可以說是所有Pingdom替代方案中最著名的一個。該工具簡單易用,初學者可以很快上手。該工具結合了Google Pagespeed Insights和YSlow提供的效能和建議,提供了全面的分析。這意味著GTMetrix實際上是滿足您所有速度優化需求的一站式服務。

GTmetrix網站測速工具

GTmetrix網站測速工具

為了使用者更好地閱讀理解分析資料,GTmetrix在頁面頂部顯示摘要,列出總頁面載入時間、頁面大小和請求數。該工具還將您的請求列表顯示在瀑布圖中,使您能夠輕鬆地識別問題區域和瓶頸。瀑布圖支援下載,這樣您就可以執行進一步的分析。

您可以建立一個免費帳戶,這樣您就可以儲存最近20個測試,比較歷史資料,並對測試位置、瀏覽器、連線速度等進行預配置設定。

7. KeyCDN Website Speed Test

KeyCDN的免費網站速度測試工具提供了一種非常快速簡便的方法來確定您的WordPress網站的整體速度。 簡單的頁面速度測試包括頁面要素載入瀑布分解和網站預覽。 您可以選擇全球的14個不同測試位置,以便更好地確定不同物理位置載入網站內容的整體下載時間。

KeyCDN網站測速工具

KeyCDN網站測速工具

您可以同時執行私有和公共測試,然後您可以通過分析或書籤儲存資料以供將來參考。 細分報告將展示請求方法(GET / POST),HTTP狀態程式碼(例如200 OK或404),檔案型別,內容大小,等待/接收時間,總下載時間以及在您的網站上生成的HTTP請求總數等資訊。 KeyCDN還有其他免費的Web效能測試工具,如Ping測試,HTTP / 2測試,HTTP檢查和Traceroute工具。

8. DareBoost

DareBoost 是一個一站式服務,用於網站速度測試,Web效能監控和網站分析(速度,SEO,質量,安全性)。 雖然它們主要提供高階付費服務,但您可以使用他們的網站速度測試工具(每月可獲得5份免費報告),相對付費客戶部分高階功能被閹割。 但免費報告實際上對大部分站長來說是足夠的!

DareBoost 網站速度測試工具

DareBoost 網站速度測試工具

DareBoost速度測試報告分析了以下類別中的80多個不同資料點:

  • 快取策略-Cache policy
  • 請求數量-Number of requests
  • 安全-Security
  • 可用性-Accessibility
  • 合規-Compliance
  • 質量-Quality
  • jQuery
  • 瀏覽器渲染-Browser Rendering
  • 資料量-Data amount
  • SEO

您可以快速檢視WordPress網站哪些地方需要進一步優化。 與我們提到的其他工具相比,這個工具提供的安全報告也非常獨特。 您可以看到諸如您的網站是否受到點選劫持攻擊,是否缺少內容安全策略標題,甚至是有關您的SSL證書的資訊。 他們的設計也非常棒! 如果您需要為您的老闆或客戶提供報告,這個工具無疑是個選擇。

DareBoost 速度測試報告

DareBoost 速度測試報告

9. Web Page Analyzer

Web Page Analyzer 是一款強烈推薦的免費工具,用於分析網站的速度,大小和佈局。 該指令碼計算各個元素的大小,並總結每種型別的網頁元件。 根據這些頁面特徵,然後指令碼提供有關如何改善頁面載入時間的建議。

Web Page Analyzer

Web Page Analyzer

更具體地說,該工具將告訴您網站不同連線速度載入所需的時間。 如果您希望詳細說明資料,則 Web Page Analyzer 會為您分解資料,顯示每個資料的大小和註釋。 在分析的最底部,該工具提供有關您網站效能的11個特定方面的評論和建議 – 包括告訴您哪些方面表現良好。 看來這個工具暫時沒有更新,所以不要指望HTTP / 2支援這樣的東西。

10. YSlow

接下來,Yahoo!’s的老牌頁面效能工具YSlow。 該工具需要作為瀏覽器的附件安裝,完全免費使用 – 並且支援大多數流行的Web瀏覽器。

YSlow網站測速工具

YSlow網站測速工具

Yahoo! 團隊篩選整理了影響網站速度的34個因素。 不幸的是,只有23個可以進行定量測試,因此該工具將重點放在這些領域的分析上–YSlow網站列出了這些23個“規則”以及擴充套件的細節,非常值得一試。 隨著分析的完成,YSlow將為網站每個區域評分 – 從A到F評分。這使您可以非常輕鬆地發現您的較弱區域,然後有針對性地改造優化。

這曾經是最流行的速度測試工具。 但不幸的是,YSlow專案已不再維護(這或者多多少少與雅虎現在的狀況有關)。 他們的最後一次提交更新是2年前,他們的GitHub頁面上有100多個未解決的問題。 但是,擴充套件程式仍然提供了一些有用的資訊,但我們建議使用新的且保持更新的網站速度測試工具。

11. Chrome DevTools

Chrome DevTools 網路面板是Chrome提供的功能。這是一個非常受開發人員歡迎的工具,因為它很容易訪問,而且對於本地除錯和測試非常有用。您可以通過按Command+Option+I (Mac) 或Control+Shift+I (Windows, Linux)在 Chrome 中輕鬆啟動網路面板。然後,您可以生成站點的瀑布式分析,並深入挖掘每個元素的效能。

Chrome DevTools網路瀑布

Chrome DevTools網路瀑布

Chrome 60以後的版本還新增了另一個重要功能是攔截請求。這在試圖確定第三方服務或指令碼在您的站點上的開銷時非常有用。

Chrome Devtools的請求攔截功能

Chrome Devtools的請求攔截功能

Google的團隊還將Lighthouse整合到Chrome Devtools中。 Lighthouse是一種開源的自動化工具,用於提高網頁質量。 該工具提供效能,可訪問性,漸進式Web應用程式等檢查功能。 您可以從“Audit”選項卡執行它。 它有一個類似的0-100分的評分系統。 您可以深入瞭解您的請求,檢視哪些指令碼可能是阻止渲染,影象壓縮節省等等。然後您可以輕鬆地與其他人共享連結。

Chrome Devtools網頁效能檢測功能

Chrome Devtools網頁效能檢測功能

Chrome Devtools中的其他功能包括能夠禁用快取,限制網路連線,獲取頁面呈現的螢幕截圖以及診斷較慢的TTFB。

12. Load Impact

Load Impact 是測試網站併發訪問效能的最佳工具之一。他們提供免費的網站效能測試(每月5次報告),分析在您的網站上執行25個併發使用者的伺服器響應以及這種適度的流量對網站速度的影響。

Load Impact

Load Impact

Load Impact 會展示一個非常清晰明瞭的圖表,動態演示了當更多使用者訪問您的網站時,網站負載時間是如何變化的。為了確保您的網站能夠滿足全球受眾,Load Impact 還將從不同的位置向您的網站傳送虛擬使用者。

Load Impact 圖表

Load Impact 圖表

想要更多併發使用者測試嗎? Load Impact 提供更具體的併發測試統計資訊,如頻寬使用情況、發出的請求以及每秒的請求數。如果您需要額外的分析資料,考慮升級到 Load Impact 提供的付費計劃,這允許您測試更大的併發使用者對網站載入速度影響。價格小貴,每月89美元起,適合企業網站使用者。

13. Site Relic

Site Relic 是另一個新興的完全免費的網站速度測試工具。它允許您在9個不同區域的移動和桌面裝置上輕鬆檢查站點的載入時間。您還可以同時檢視您的TTFB跨所有區域。

Site Relic

Site Relic

單個位置報告允許您快速檢視完全載入的時間、頁面大小、第一個位元組、請求總數、請求計數(按型別)和請求計數(按響應程式碼)。該工具中的瀑布式報告設計得非常友好,資料一目瞭然。

Site Relic 網站速度測試

Site Relic 網站速度測試

14. dotcom-monitor

dotcom-monitor 有很多免費和有用的工具。其中之一是他們的網站速度測試工具。它允許你從全球25個地點即時測試你的網站速度。您可以在不同的瀏覽器、移動裝置之間進行選擇,如Internet Explorer、Firefox、Chrome、iOS、Android、Windows Phone和BlackBerry。

dotcom-monitor 網站測速

dotcom-monitor 網站測速

他們的網路效能報告包括:

  • 按位置彙總
  • 10%載入最快的元素
  • 10%載入最慢的元素
  • 綜合瀑布圖
  • 按主機元素細分-包括DNS、連線、SSL、請求、第一個資料包和下載
  • 錯誤檢查和診斷

15. New Relic

New Relic 提供各種服務,從應用程式效能監控、伺服器監控、移動監控和實時使用者洞察。從技術上講,這是一個高階工具,但如果您需要比上述工具提供的更多的資料,這將是您想要的一個工具。

New Relic

New Relic

實際上,一些伺服器提供商也使用 New Relic 提供的產品來監控伺服器正常執行時間和效能。

New Relic Web事務響應時間監控

New Relic Web事務響應時間監控

一個特別有用的特性是WordPress外掛部分。您可以立即看到哪些外掛和主題的響應時間最長。

New Relic 監控WordPress外掛響應時間

New Relic 監控 WordPress 外掛響應時間

如果你的網站變慢了,通過 New Relic 你可以很容易地看到及收到通知提醒,以便你可以立即採取行動,看看可能導致的問題的原因。這還包括檢視外部服務或廣告網路,它們可能會減慢您的網站速度。

New Relic 外部服務監控

New Relic 外部服務監控

小結

瞭解如何正確地測試你的WordPress站點,將確保你有效地評估你的網站效能。

如果你希望擁有一個閃電般快速的網站——你應該認真閱讀此文!–確保至少使用這些工具中的一個來定量測量網站速度及定製優化策略。網站速度是任何成功網站的重要組成部分。你的網站越快,成功的機會就越大。

我們在“WordPress網站SEO優化實用基礎指南”也明確提到網站速度優化是SEO必不可少的部分,如果網站載入像烏龜般速度,就算其他方面做得完美無缺,網站對蜘蛛或者訪客不友好,一切都是白搭。

你平日用什麼工具來測量網站速度及如何優化你的網站載入速度?歡迎留言與大家分享、討論。

評論留言