網站訪問速度一直是站長關注的問題之一,本文介紹如何利用一些可行的辦法來加速你的站點!
使用工具:Firefox + Firebug + Yslow!
優化對象:.htaccess | CSS | Javascript | Google analytics
網站環境:Linux 虛擬主機 + WordPress
效果:首頁:www.hzlzh.com Yslow 評分 99,等級 A,如圖:
hzlzh建議:勿盲目追求分數,以實際效果為佳。
PS:這里注意:Yslow 有三種評分模式,HzlzH又自定義了第四種,本文就是采用第4中模式,如下:
YSlow V2 23項中的22項測評全選 Classic V1 只有13項測評 Small Site/Blog 14項測評適合blog WordPress 去掉 Use a Content Delivery Network (CDN) 和 Use cookie-free domains 這兩項,因為小站不需要考慮的。 |
下面開始:
1、安裝好環境,進行第一次測試,記下分數和不合格的地方;
2、合并減少CSS/JS 文件的請求數量;
這個很好理解,把現有的多個JS和CSS 文件寫在一起,理想的網站是這樣的:全站只調用 1個 javascript,1個CSS 樣式表,1張包含了所有需要的圖片;比如hzlzh盡量在往這里做:
1個css:http://www.hzlzh.com/wp-content/themes/dot-a/style.css.php 注意后綴php,第3步中解釋! 2個js:[google analytics]的ga.js 和一個合并本站JQ效果后的 [google jQuery]的 jquery.min.js 2個png:img.png 和 tag.png |
3、Gzip開啟;
如果你的網站連Gzip 都沒開啟,那就不用繼續優化了!相關的Gzip壓縮率檢測網站有:
http://www.whatsmyip.org/http_compression/
http://tool.chinaz.com/Gzips/
http://gzip.iamzz.com/
http://gzip.zzbaike.com/
實現方法很多:可以在后臺Cpanel中直接開啟,或者很多Linux主機已經默認打開,如果檢測到沒有開啟,可參看下面兩種方法:
一、將網站使用的CSS 或這 js 文件用php 進行 Gzip 壓縮,
做法是:在原有的 xxx.js 或xxx.css 文件的頭尾分別加上下面代碼,并保存成.php 格式,之后調用!
頭:<?php if(extension_loaded('zlib')) {ob_start('ob_gzhandler');}header("Content-Type: text/javascript"); ?> 或 <?php if(extension_loaded('zlib')) {ob_start('ob_gzhandler');}header("Content-type: text/css"); ?> 尾:<?php if(extension_loaded('zlib')) {ob_end_flush();} ?> |
二、通過 .htaccess 開啟Gzip
說明:由于不同的要求使用的代碼不同,暫不提供范例,自行搜索。僅補充單獨給JS 文件啟用Gzip 的方法:
AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript |
4、優化 Configure entity tags 項
在.htaccess中添加一行:FileETag none
說明:設置‘FileETag None’可以使響應頭不再包含ETag字段,達到加速效果
5、優化 Add Expires headers 項
在 .htaccess 中添加下面代碼:
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A600 ExpiresByType image/x-icon A2592000 ExpiresByType application/javascript A2592000 ExpiresByType application/x-javascript A2592000 ExpiresByType text/css A604800 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType text/plain A86400 ExpiresByType application/x-shockwave-flash A2592000 ExpiresByType video/x-flv A2592000 ExpiresByType application/pdf A2592000 ExpiresByType text/html A600 </IfModule> |
除此之外一些簡單的優化,如:img 沒有添加 alt 標簽之類的,就不討論了,都是很好優化的。
如果你沒有使用了Google analytics,此時的分數應該是99,評級 A,但是對于Google analytics用戶就需要進一步了,因為你發現分數大約是98.
原因是:站點加載了google 的統計代碼 ga.js。Yslow 報下面的提示;
There is 1 Javacript script found in the head of the document * http://www.google-analytics.com/ga.js |
這時候就有兩個選擇:
1、卸載 我所介紹過的強大的Google analytics;
2、自己托管ga.js ,也就是用本地的ga.js,如:http://www.hzlzh.com/js/ga.js
hzlzh選擇了后者,但是要注意,一旦Google 更新了ga.js 你使用舊版的話,統計代碼就立即失效了,這也是為什么要調用全新統計代碼的原因,但是還是能解決:可以使用 Linux 的 conr job 命令 設置一個更新ga.js 的 svn,比如每天wget 更新一次,這樣就可以避免這個問題。
同樣 Google analytics官方的幫助文檔中也提到了這個問題雖不鼓勵,但不禁止
Google recommends you don't do this, but does not say you can't.
具體怎么做? 附:腳本文件
使用Linux的 cron crontab來每天執行一個 .sh 腳本文件一次,或者在ga.js 更新不是很頻繁的如今。