常用(use)網站優化方法和(and)測試工具

随着網絡的(of)發展和(and)信息獲取設備的(of)普及，越來(Come)越多的(of)組織機構都建立了(Got it)網站，網站的(of)内容也日益龐大(big)，網站的(of)設計與載入效率直接影響用(use)戶獲取信息的(of)效率。因此，如何對網站進行優化、提速以(by)便用(use)戶順利獲取信息，便成了(Got it)網站設計者的(of)重要(want)課題。

對于(At)已有網站，如何不(No)大(big)動幹戈改動代碼而達到(arrive)優化提速的(of)效果呢？本文結合筆者的(of)工作(do)實際，以(by)PHP構建的(of)國(country)際海事信息網爲(for)例，談談網站優化中一(one)些事半功倍的(of)經驗。

1通過測試找出(out)網站的(of)薄弱環節

調查顯示，如果網頁的(of)載入時(hour)間超過4秒，則訪客會選擇離開。在(exist)網站外部網絡和(and)服務器硬件一(one)定的(of)情況下，借助網站内部優化提高網站載入速度是(yes)一(one)個(indivual)較爲(for)可行的(of)辦法。這(this)裏介紹一(one)個(indivual)流行的(of)在(exist)線測試的(of)第三方網站——GTmetrix。

GTmetrix使用(use)Google Page Speed和(and)Yahoo Yslow來(Come)對網站進行評級，提供可行性建議來(Come)幫助改善網站性能。以(by)下爲(for)優化前的(of)國(country)際海事信息網截圖（圖1）：

網站載入時(hour)間長、請求數多，速度評級僅爲(for)F級，YSlow也僅爲(for)D級。根據GTmetrix給出(out)的(of)建議可以(by)通過減小JavaScript代碼、啓用(use)浏覽器緩存、啓用(use)gzip壓縮、優化CSS代碼等提升網站的(of)速度。下文根據GTmetrix網站給出(out)的(of)優化建議并結合筆者的(of)工作(do)經驗，列舉常見的(of)優化辦法。

2常用(use)網站優化方法

2.1 使用(use)php_speedy插件合并CSS/JS文件

網頁出(out)于(At)排版和(and)功能需要(want)，會通過link和(and)script代碼方式載入CSS和(and)JS文件，特别是(yes)網頁界面設計優美并具有豐富客戶端功能的(of)網頁，往往需要(want)載入多個(indivual)CSS和(and)JS文件，這(this)類方式會增加網頁的(of)連接數，降低網頁載入速度。

一(one)種非常簡便高效的(of)辦法是(yes)，我(I)們(them)可以(by)通過使用(use)開源的(of)php_speedy插件，将網頁所需的(of)多個(indivual)CSS、JS文件自動合并爲(for)單個(indivual)php格式文件，顯著減少網頁載入時(hour)的(of)請求數、減小文件大(big)小，提升網站載入速度。

首先将下載php_speedy文件目錄上(superior)傳到(arrive)網站根目錄，删除其中的(of)index.php和(and)install.php文件，修改config.php中相應參數（見下文），并将文件目錄改爲(for)“可寫”狀态；最後在(exist)需要(want)整合的(of)php網頁首部加入：“require('/home/www/php_speedy/php_speedy.php');”，網頁尾部加入截止語句：“$compressor→finish();”即可，其中“/home/www”爲(for)網站的(of)發布目錄。

config.php的(of)配置代碼（部分）舉例如下：

## Path info

$compress_options['document_root'] = "/home/www";

$compress_options['javascript_cachedir'] = "/home/www/ php_speedy /";

$compress_options['css_cachedir'] = "/home/www/ php_speedy /";

## Minify options

$compress_options['minify']['javascript'] = "1";

$compress_options['minify']['page'] = "1";

$compress_options['minify']['css'] = "1";

2.2 使用(use)Lazyload插件延遲載入圖片

對于(At)圖片較多的(of)網頁往往載入緩慢，爲(for)了(Got it)提升用(use)戶體驗可以(by)借助圖片的(of)延遲載入，隻載入首屏的(of)圖片，待用(use)戶浏覽到(arrive)網頁的(of)其

他(he)位置時(hour)再載入相應圖片。

要(want)實現這(this)一(one)效果可以(by)借助jquery的(of)插件lazyload延遲圖片的(of)載入，隻有當圖片實際顯示時(hour)才載入，用(use)于(At)加快網頁的(of)載入速度。先用(use)一(one)個(indivual)1*1的(of)灰度文件代替預載入的(of)圖片，留夠圖片的(of)長和(and)寬，并将圖片的(of)實際地(land)址保存在(exist)“data-original”屬性中，如下文格式：

<img src="images/grey.gif" data-original="images/ad.jpg" width="200" height="50"/>

最後将以(by)下代碼加到(arrive)網頁尾部即可實現延遲載入功能（需要(want)預先下載jquery 和(and)lazyload的(of)js文件到(arrive)指定目錄）：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/jquery.lazyload.js"></script>

<script type="text/javascript">$("img").lazyload({ effect : "fadeIn" });</script>

2.3 啓用(use)GZIP壓縮傳輸

通過開啓gzip的(of)壓縮傳輸，節省帶寬，提高網頁載入速度，可以(by)提高全部網頁的(of)載入效率。首先修改php.ini文件，修改一(one)下兩個(indivual)參數：

zlib.output_compression=On zlib.output_compression_lever=6

其次修改httpd.conf文件，去掉一(one)起代碼注釋：

LoadMedule deflate_module modules/mod_deflate.so 最後重啓apache服務即可實現gzip壓縮傳輸。

2.4 啓用(use)浏覽器緩存

通過設置網頁各元素的(of)浏覽器緩存周期，在(exist)這(this)些元素未到(arrive)期前，直接調用(use)本地(land)緩存，減少從服務器下載的(of)字節數，提高網頁打開速度，可以(by)提升全站的(of)網頁載入速度。

首先安裝 mod_expires 用(use)于(At)定義網頁各元素緩存，安裝成功後 httpd.conf 中會自動增加以(by)下代碼：LoadModule expires_module modules/mod_expires.so。

另外，增加以(by)下代碼用(use)于(At)詳細定義各元素的(of)緩存周期：

<IfModule mod_expires.c>

ExpiresDefault A900

ExpiresByType image/bmp A2592000

ExpiresByType image/gif A2592000

ExpiresByType image/jpeg A2592000

ExpiresByType image/png A2592000

ExpiresByType image/x-icon A2592000

ExpiresByType application/x-javascript A2592000

ExpiresByType application/javascript A2592000

ExpiresByType text/javascript A2592000

ExpiresByType text/js A2592000

ExpiresByType text/css A2592000

ExpiresByType text/html A900

</IfModule>

2.5 适時(hour)采用(use)靜态化網頁對于(At)一(one)些訪問量大(big)又需要(want)讀取多個(indivual)數據庫表文件的(of)網頁，發布成靜态網頁是(yes)提高網速的(of)一(one)個(indivual)非常有效的(of)辦法。筆者通過Ajax發布靜态網頁，發布靜态網頁的(of)核心代碼如下：

$url=$_GET[url]; $html=$_GET[html];

ob_start(); include $url;

$content=ob_get_contents(); ob_end_clean();

$fp=@fopen($html,"w") or die("failed to open the file"); if(@fwrite($fp,$content)) { echo "+OK"; } else { echo "-ERR";

} fclose($fp);

2.6 規範代碼編寫通過優化代碼編寫，借助細節可以(by)提高網頁的(of)速度評級，比如明确圖片的(of)width和(and)height值減少網頁計算排版的(of)時(hour)間、将網頁内的(of)javascript放到(arrive)網頁底部等。

3借助工具找到(arrive)網速瓶頸

經過以(by)上(superior)優化辦法，對于(At)大(big)多數網站的(of)載入速度和(and)評級都會上(superior)一(one)台階，但是(yes)個(indivual)别情況下，網站代碼的(of)設計問題會嚴重拖累載入速度，國(country)際海事信息網就遇到(arrive)這(this)個(indivual)問題。如圖2所示，對比圖1，網站的(of)速度評級已由F級升至B級，YSlow也由D級升爲(for)C級，但是(yes)網頁載入時(hour)間仍然超過21s。

對于(At)這(this)種情況需要(want)去分析網站的(of)源代碼，找出(out)網頁運行緩慢的(of)瓶頸。結合筆者的(of)工作(do)經驗，可以(by)采用(use)Xdebug+WinCacheGrind 第9卷第08期 (2013年03月)ComputerKnowledgeandTechnology電腦知識與技術組合測試網頁源代碼。以(by)下是(yes)安裝部署簡要(want)過程。

1)在(exist)Xdebug官網http://xdebug.org/下載php_xdebug-2.1.2-5.2-vc6.dll

2)複制到(arrive)php安裝目錄下的(of)ext目錄，并改名爲(for)php_xdebug.dll

3)修改php.ini文件，開啓Xdebug調試，代碼如下（其中“D:/temp/profile/”爲(for)供分析用(use)文件的(of)輸出(out)路徑）： extension=php_xdebug.dll

[Xdebug]

zend_extension_ts="D:\Code\library.www\php5\ext\php_xdebug.dll" xdebug.extended_info=0 xdebug.auto_trace=On xdebug.auto_profile = on

xdebug.trace_outpuf_dir="D:/temp/profile/" xdebug.collect_includes=On xdebug.show_mem_delta=On xdebug.profiler_enable=On

xdebug.profiler_output_dir="D:/temp/profile/" xdebug.remote_enable=0 xdebug.collect_return=On xdebug.colletc_params=On

xdebug.profiler_output_name = cachegrind.out.%s

4)重啓apache後訪問某網頁，在(exist)輸出(out)目錄中會出(out)現以(by)下類似文件：

cachegrind.out.D__Code_simic.net.cn_www-20120613_news_show_php

5)通過WinCacheGrind分析上(superior)述文件，下載地(land)址如下：

http://nchc.dl.sourceforge.net/project/wincachegrind/wincachegrind/wincachegrind-10.0.0.14/WinCacheGrind.exe

借助以(by)上(superior)兩組工具，可以(by)發現運行中的(of)瓶頸（查看Cum列），如圖3所示：

可以(by)進一(one)步打開箭頭所指該文件查看具體函數的(of)運行時(hour)間，如圖4所示：

通過上(superior)述工具發現箭頭所指的(of)sms_curl_get函數運行緩慢（2.99s），找出(out)根源後根據實際情況修改，網站速度立刻改觀，由21s降低爲(for)6.6s，速度評級和(and)YSlow級别也有所提高，如圖5所示。

4結束語

網站吸引用(use)戶的(of)根本是(yes)充實的(of)内容、鮮明的(of)特色和(and)合理的(of)布局，但在(exist)信息高度發達的(of)今天，速度關乎一(one)個(indivual)網站的(of)生(born)命。該文提到(arrive)的(of)優化辦法和(and)測試工具，旨在(exist)抛磚引玉，希望能對網站設計人(people)員在(exist)網頁載入和(and)代碼優化方面有所幫助，從而提升網站的(of)用(use)戶體驗，提高網站的(of)競争力。