我國科學數(shù)據(jù)共享平臺網(wǎng)站首屏時間分析

□姜吉棟 彭潔 趙輝/中國科學技術(shù)信息研究所 北京 100038

劉潤達/北京市科學技術(shù)委員會 北京 100195

/ 中國科學技術(shù)信息研究所 北京 100038

馬海銀/山東大學軟件學院 濟南 250100

我國科學數(shù)據(jù)共享平臺網(wǎng)站首屏時間分析

□姜吉棟 彭潔 趙輝/中國科學技術(shù)信息研究所 北京 100038

劉潤達/北京市科學技術(shù)委員會 北京 100195

/ 中國科學技術(shù)信息研究所 北京 100038

馬海銀/山東大學軟件學院 濟南 250100

首屏時間會影響用戶對網(wǎng)站的體驗和使用。文章對我國84個科學數(shù)據(jù)共享網(wǎng)站的首屏時間進行了測試，揭示了此類網(wǎng)站首屏時間的總體現(xiàn)狀，并使用Page Speed找出影響首屏時間的主要因素，提出應在使用瀏覽器緩存、將圖片組合為CSS貼圖定位、優(yōu)化圖片、啟用文本壓縮四個方面改進網(wǎng)站性能，縮短網(wǎng)站首屏時間。

科學數(shù)據(jù)網(wǎng)站，首屏時間，網(wǎng)站性能優(yōu)化

1 研究背景

科學數(shù)據(jù)是一種寶貴的科技資源，是國家科技創(chuàng)新和可持續(xù)發(fā)展的重要戰(zhàn)略資源。共享是充分發(fā)揮科學數(shù)據(jù)的科學價值、社會價值和經(jīng)濟價值的重要手段和方式之一[1]。近年來，一些國際組織和發(fā)達國家在信息技術(shù)發(fā)展與廣泛應用的基礎(chǔ)上,不斷對加強科學數(shù)據(jù)的共享管理。隨著互聯(lián)網(wǎng)的日益成熟和發(fā)展，網(wǎng)絡用戶信息素養(yǎng)的提高，網(wǎng)絡已成為科學數(shù)據(jù)共享和用戶尋求所需科學數(shù)據(jù)的重要途徑。在這種情況下，我國也在各個層級開展了科學數(shù)據(jù)共享工作，其主要內(nèi)容之一是構(gòu)建科學數(shù)據(jù)共享平臺網(wǎng)站。該類網(wǎng)站是數(shù)據(jù)存儲或發(fā)布的平臺，作為公益性網(wǎng)站，服務性是其最主要的目的，用戶可以瀏覽、檢索、下載相關(guān)科學數(shù)據(jù)，這使得科學數(shù)據(jù)網(wǎng)站的性能顯得十分重要。在擁有豐富資源的基礎(chǔ)上，如何使用戶方便快捷地看到以及得到這些資源，很大程度上依靠網(wǎng)站的性能建設。

網(wǎng)站首頁作為一個網(wǎng)站的入口網(wǎng)頁，是抓住用戶的關(guān)鍵因素，首頁性能的好壞直接影響到用戶的使用，其中首屏載入時間是用戶體驗的重要指標。首屏的定義以800×600像素尺寸為標準。從開始監(jiān)測開始時計時，到瀏覽器頁面顯示高度達到600像素，且此區(qū)域有內(nèi)容顯示之后的時間就是首屏時間。相關(guān)研究發(fā)現(xiàn)，對用戶來說，當頁面充滿800×600像素的區(qū)域時就可以看到內(nèi)容并可以點擊，而非等待頁面全部下載完成。如果首屏時間太長，用戶就會離開轉(zhuǎn)向其他網(wǎng)站。作為項目形式構(gòu)建的科學數(shù)據(jù)共享網(wǎng)站一開始也往往不太注意首屏時間的優(yōu)化，從而造成了用戶體驗的下降。解決這一問題需要找出影響首屏時間的主要因素，通過在網(wǎng)站設計技術(shù)上優(yōu)化網(wǎng)站性能，縮短首屏時間。

2 研究方法

2.1 研究對象的確定

目前我國的科學數(shù)據(jù)共享平臺項目主要來源于三個層面：一是由科技部主管的科學數(shù)據(jù)共享工程，二是科學數(shù)據(jù)庫項目，三是地方政府建設的省、市級科學數(shù)據(jù)庫。以各大科學數(shù)據(jù)共享計劃網(wǎng)站的首頁為出發(fā)點，可以整理出主要的科學數(shù)據(jù)共享網(wǎng)站。在以上獲取的網(wǎng)站基礎(chǔ)上，通過網(wǎng)絡調(diào)研的方法，在Google搜索引擎中，檢索關(guān)鍵詞“科學數(shù)據(jù)”和“科學數(shù)據(jù)共享”獲取其他我國主要的科學數(shù)據(jù)共享平臺。對兩方面獲取的數(shù)據(jù)進行合并和去重，共獲取98個主要的科學數(shù)據(jù)共享網(wǎng)站。

98個科學數(shù)據(jù)網(wǎng)站中，有7個由于各種原因無法訪問，還有7個是明顯的綜合導航性的網(wǎng)站，網(wǎng)站本身并沒有科學數(shù)據(jù)及其他服務，本研究不對其進行評價。最終得到84個待評價網(wǎng)站，本研究以這84個科學數(shù)據(jù)共享網(wǎng)站作為研究對象。

2.2 工具選擇與測試過程

本文首先對研究對象的整體首屏時間現(xiàn)狀作了分析，然后利用插件對每一個研究對象的首屏時間進行測試，找出影響首屏時間的關(guān)鍵因素，提出改善建議，并應用其他軟件模擬改善后的效果，驗證建議的有效性。

本次測試時間范圍是2012年08月13日00:00-2012年11月12日00:00。各網(wǎng)站的首屏時間數(shù)據(jù)來自專業(yè)應用性能管理及用戶體驗評價公司的監(jiān)測。此專業(yè)公司的監(jiān)測原理是通過在地理上廣泛分布的客戶端（全國330多個城市的多個國家及地方的運營商網(wǎng)絡節(jié)點）上安裝監(jiān)測軟件，監(jiān)測和收集相關(guān)網(wǎng)站的各性能指標。在首屏時間影響因素分析和縮短首屏時間分析方面，本文采用的工具是Page Speed插件。Page Speed最初是Google內(nèi)部使用的改進網(wǎng)頁設計的工具，它整合在Firefox的著名插件Firebug中。它能夠用于評估、診斷和優(yōu)化網(wǎng)頁性能，為開發(fā)人員帶來很大的輔助作用[2]。當用戶運行Page Speed，可以通過一系列操作獲得如何改進網(wǎng)頁載入速度的建議。插件使用方法簡單，生成的圖形一目了然，因此很受歡迎。

以海洋科學數(shù)據(jù)共享中心網(wǎng)站為例說明測試過程，經(jīng)專業(yè)公司監(jiān)測，該網(wǎng)站的首屏時間是2.63秒，打開該網(wǎng)站，用Page Speed插件查看導致頁面載入速度情況的各項指標，會按照高中低的優(yōu)先級給出縮短載入時間的建議，其中紅色指標是高優(yōu)先級，表示如果完成這些開發(fā)工作，可極大地提升載入速度。黃色表示中優(yōu)先級，表示這些建議在性能方面的提升空間較小。藍色表示低優(yōu)先級，這些建議表示即使完成此類開發(fā)工作，在性能方面的提升空間也很小。綠色表示已完成，說明在這些方面該網(wǎng)頁已采用了最佳做法。由此可以看出，高優(yōu)先的建議正是網(wǎng)站沒有做好的方面，而這些方面則是影響首屏時間的主要因素。Page Speed的測試頁面如圖1所示。

圖1 海洋科學數(shù)據(jù)共享中心網(wǎng)站的Page Speed測試分析

3 測試結(jié)果

3.1 首屏時間整體測試

專業(yè)公司的監(jiān)測數(shù)據(jù)顯示，84個網(wǎng)站中，首屏時間低于5s的有37個，處于5s和10s之間的有30個，超過10s的則有17個。

通常一個網(wǎng)站，如果首屏時間在5秒以內(nèi)是比較優(yōu)秀的，10秒以內(nèi)是可以接受的，10秒以上就不可容忍了。用戶會選擇刷新頁面或立刻離開。隨著網(wǎng)絡技術(shù)的發(fā)展和用戶體驗要求的提高，這幾個數(shù)字只會變得更小。如騰訊網(wǎng)、鳳凰網(wǎng)、網(wǎng)易網(wǎng)等主流門戶網(wǎng)站的首屏時間早已經(jīng)進入3s時代[3]。從數(shù)據(jù)上看，科學數(shù)據(jù)網(wǎng)站的整體首屏時間還不夠理想，只有約44%的網(wǎng)站在5s以內(nèi)，其他一多半的網(wǎng)站超過了5s，這必然會流失用戶，需要作出調(diào)整和改進。首屏時間較短的網(wǎng)站如表1所示。

表1 首屏時間排名前十網(wǎng)站

可以看出，排名在前十位的網(wǎng)站首屏時間都進入了兩秒以內(nèi)，由于科學數(shù)據(jù)網(wǎng)站的首頁內(nèi)容和設計程度要比門戶網(wǎng)站簡單得多，因此并不能因為這些網(wǎng)站的首屏時間比門戶網(wǎng)站短，就簡單地認為它們在網(wǎng)站性能優(yōu)化上已經(jīng)接近完美。雖然這些網(wǎng)站的首屏時間在同類網(wǎng)站中做得比較好，但是它們同樣存在很多問題，需要進一步測試，找出導致首屏時間不理想的主要因素。

3.2 首屏時間詳細測試

本文使用Page Speed插件，對每個研究對象進行測試，以找出影響網(wǎng)站首屏時間的主要因素。Page Speed按照高、中、低優(yōu)先級以及完成項目，可以給出共27項建議。其中，高優(yōu)先級可以視作影響首屏時間的主要因素。測試結(jié)果如表2所示。

測試結(jié)果表明，Page Speed給出的高優(yōu)先級改進建議主要有8項，分別是使用瀏覽器緩存，將圖片組合為CSS貼圖定位，啟用壓縮，優(yōu)化圖片，提供壓縮后的圖片，內(nèi)嵌小型JavaScript，啟用Keep-Alive，壓縮JavaScript。而得到前六項建議的網(wǎng)站比例較高。這說明大部分網(wǎng)站并沒有采取這六項措施，也意味著實施這六項措施可以大幅縮短網(wǎng)站的首屏時間。其中Page Speed對61個網(wǎng)站提出了使用瀏覽器緩存的高優(yōu)先級建議，說明這是絕大部分網(wǎng)站需要重視的問題。

4 對策與優(yōu)化結(jié)果

分析6項高優(yōu)先級建議，使用瀏覽器緩存可以有效解決網(wǎng)絡帶寬慢所造成的諸如網(wǎng)絡速度慢、網(wǎng)絡帶寬低等不利影響，而其它五項如“啟用壓縮”等，其本質(zhì)上都是通過減少網(wǎng)頁大小來縮小下載時間。因此，網(wǎng)絡帶寬和網(wǎng)頁大小對減少網(wǎng)站首屏顯示時間至關(guān)重要。對于網(wǎng)站建設方來說，應當從這兩方面對網(wǎng)站性能進行優(yōu)化。

4.1 避開網(wǎng)絡帶寬影響

科學數(shù)據(jù)共享平臺網(wǎng)站大多分布在教育部負責的中國教育和科研網(wǎng)（Cernet）和中科院負責的中國科學技術(shù)網(wǎng)（Cstnet），而中國用戶基本都分布在電信集團負責的中國公用Internet骨干網(wǎng)（Chinanet）。這三個網(wǎng)絡之間互聯(lián)速率比在其內(nèi)部流通速率低很多，所以普通用戶在訪問科學數(shù)據(jù)共享平臺網(wǎng)站時會有較大延遲。解決這一問題的最好方法就是將頁面內(nèi)容暫存在用戶端，避開幾大網(wǎng)絡之間較低的接口速率，實現(xiàn)用戶端的瞬間“訪問”。主要措施便是使用瀏覽器緩存。

表2 Page Speed測試結(jié)果

瀏覽器緩存是最靠近用戶的緩存，如果啟用該緩存，用戶在訪問同一個頁面時，將不再從服務器下載頁面，而是從本機的緩存目錄中讀取頁面，然后在瀏覽器中展現(xiàn)這個頁面。

網(wǎng)站上的靜態(tài)內(nèi)容，諸如圖片、CSS、JS、flash等，變動一般很小，如一些固定版塊中的圖片，甚至幾個月都不會有所更改，這些體積龐大的靜態(tài)內(nèi)容占據(jù)了大部分網(wǎng)頁加載時間。因此，降低靜態(tài)內(nèi)容加載時間，減少二次加載靜態(tài)內(nèi)容，可以有效地縮短頁面載入時間。通過在服務器端添加Expires和Cache-Control HTTP頭信息都可以控制緩存的保鮮期。

（1）方法一：添加Expires頭信息

向apache服務中的.htaccess文件添加以下代碼：

#Expire Header

ExpiresActive on //開啟緩存

ExpiresByType text/CSS "access 1 month"http://CSS文件緩存1個月

ExpiresByType text/plain "access 2 days"http://純文本內(nèi)容緩存2天

ExpiresByType text/html "access 2 days"http://html文件緩存2天

ExpiresByType application/javascript "access 1 month"http://JS文件緩存1個月

ExpiresByType image/jpeg "access 1 month"http://jpeg圖片緩存1個月

ExpiresByType image/x-icon "access 1 month"http:// icon緩存1個月

ExpiresByType image/gif "access 1 month"http://gif圖片緩存一個月

ExpiresByType image/png "access 1 month"http://png圖片緩存一個月

ExpiresByType image/ico "access 1 month"http://ico緩存1個月

ExpiresByType application/pdf "access 1 month"http:// pdf文件緩存一個月

ExpiresByType application/x-shockwave-flash "access 1 month"http://flash緩存一個月

ExpiresDefault "access 1 month"http:// 默認（未提及的可緩存文件）緩存1個月

（2）方法二：添加Cache-Control頭信息

向apache服務中的.htaccess文件添加以下代碼：

〈FilesMatch".(ico|pdf|flv|jpg|jpeg|png|gif|js|CSS| swf)$"〉

Header set Cache-Control "max-age=5184000, public"

〈/FilesMatch〉

然后，就可以在頁面加載后看到Http文件頭中的cache-control:public,max-age=5184000

通過Yahoo!發(fā)布的一款基于FireFox的插件YSlow來測試，可以發(fā)現(xiàn)在啟用瀏覽器緩存后，瀏覽器對遠程服務器的訪問量減少90%。

4.2 減少網(wǎng)頁大小

科學數(shù)據(jù)共享平臺網(wǎng)站包含大量數(shù)據(jù)信息，為了引導用戶找到相應的資源，會添加很多導航圖片或者檢索數(shù)據(jù)等動態(tài)網(wǎng)頁元素。通過測試發(fā)現(xiàn)，科學數(shù)據(jù)共享平臺網(wǎng)站主要的組成元素有html文件、js文件、CSS文件、圖片文件和視頻文件，可以通過壓縮、合并、清除冗余的方法減少占用空間。根據(jù)Page Speed給出的建議，具體措施包括：

（1）將圖片組合為CSS貼圖定位

網(wǎng)站的小圖片耗費了很多http請求，即使在改進的http1.1規(guī)范中，連續(xù)的http請求也都要經(jīng)過請求和響應的過程，對于這種情況的網(wǎng)站，我們可以將大量同系列的小圖片組合為CSS貼圖定位（即CSS Sprite技術(shù)），目的就是通過整合圖片，減少對服務器的請求數(shù)量，從而加快頁面加載速度。CSS Sprite技術(shù)將許多圖片組合到一個網(wǎng)格上，然后通過程序?qū)⒚總€網(wǎng)格的內(nèi)容定位到畫面上。

例如在訪問國家人口與健康科學數(shù)據(jù)共享平臺網(wǎng)站（http://www.ncmi.cn/yysjgx/index.jsp）首頁的過程中會加載大量引導用戶找尋資料的小圖片，圖片總大小為320k，共35個小圖，每個圖片在加載的過程中都對服務器發(fā)送一次http請求，所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。35個小圖需要發(fā)送請求35次，如果將它們整合成一張圖片，只需要發(fā)送一次請求，圖片總大小也縮減為80k。加載完成后，再利用CSS的“background-image”，“background-repeat”，“background-position”三個參數(shù)的組合進行背景定位，background-position可以用數(shù)字精確地定位出背景圖片的位置，從而使整合后的圖片分部到頁面相應位置上。

（2）優(yōu)化圖片

主要包括優(yōu)化圖片編碼和優(yōu)化圖片尺寸。

①優(yōu)化圖片壓縮編碼

壓縮能夠大大減少各種文件的尺寸，而從HTTP/1.1開始，Web服務端和客戶端都開始支持HTTP請求中的壓縮格式[4]。對于圖片文件，大都采用jpeg、png和gif格式，雖然其本身就是壓縮格式，但是可以通過專業(yè)工具進一步壓縮圖片。

如中國科學院化合物參考數(shù)據(jù)庫網(wǎng)站（www. chemcpd.csdb.cn/cmpref/default.asp），該網(wǎng)站圖片占到網(wǎng)站內(nèi)容的90%以上，下載時間也占到總下載時間的70%以上，僅JPEG格式的圖片下載時間就達到了68.38%，如果對圖片進行壓縮，可以有效縮小網(wǎng)頁體積，加快下載速度。

對于JPEG文件，可以使用jpegtran或jpegoptim兩個軟件進行壓縮。對于PNG文件，可以使用OPTIPNG或PNGOUT軟件進行壓縮。通過剝?nèi)D片的描述數(shù)據(jù)（metadata），優(yōu)化圖片文件的霍夫曼編碼層，圖片占用存儲的空間縮小范圍在60%-90%之間，而壓縮后的圖片質(zhì)量損失用肉眼幾乎看不出來。

②優(yōu)化圖片尺寸

如果瀏覽器加載的實際圖片尺寸大于頁面中顯示的圖片尺寸，也會導致過多不必要信息的加載，從而浪費帶寬，影響網(wǎng)頁下載速度。

如中國科學院化合物參考物參考數(shù)據(jù)庫首頁的某張圖片在CSS中固定顯示為height:32px，width:45px，但是在服務器端該圖片的實際大小卻是920px*1294px，兩者的不一致不僅占用下載時間而且還使圖片顯示變形。如果在圖片處理工具中將該圖像進行裁剪處理并將大小調(diào)整為45px*32px時，圖像占用存儲容量由之前的3.41M減為4.22k，效果顯著。

此外，還可以通過去除不必要的空間、減少顏色數(shù)、去除注釋[5]等方法，在不損失用戶視覺體驗的同時顯著加快首頁圖片比例較高網(wǎng)站的載入速度。

（3）啟用文本壓縮

對于html、js、CSS文件，可以使用gzip軟件進行壓縮，進而減少通過網(wǎng)絡發(fā)送的字節(jié)數(shù)。

例如大氣科學數(shù)據(jù)管理與共享平臺（http:// www.atmosphere.csdb.cn/），利用測試網(wǎng)站http:// loadimpact.com可以得到，該網(wǎng)站的html、js、CSS文件分別占到了網(wǎng)站資源總量的5.26%、63.16%和10.53%，在加載時間中，以上文件也分別占到總加載時間的25.59%、12.85%和11.73%?？梢酝ㄟ^gzip軟件壓縮html文件。通過壓縮，主頁文件大小減少84.1%，js文件大小減少82.0%，CSS文件大小減少89.1%。

此外，調(diào)整腳本和樣式順序也能縮短網(wǎng)頁下載時間。所有瀏覽器在下載js的時候，會阻止一切其他活動，直到js下載、解析和執(zhí)行完畢后才開始繼續(xù)并行下載其他資源[6]。盡可能將腳本文件放在頁面底部，可以使頁面更快地顯示更多內(nèi)容。

5 總結(jié)

科學數(shù)據(jù)共享網(wǎng)站的主要目的是為用戶服務，用戶往往會通過首頁瀏覽或查詢所需的科學數(shù)據(jù)，或者直接從網(wǎng)站下載數(shù)據(jù)。因此，網(wǎng)站的性能建設不容忽視。首屏時間作為用戶體驗的重要指標，更應當引起網(wǎng)站建設方的重視。通過本次測試，發(fā)現(xiàn)很多科學數(shù)據(jù)共享網(wǎng)站的首頁載入速度還有很大的提升空間。網(wǎng)站方可以使用相關(guān)工具，自行分析影響網(wǎng)站首屏時間的因素，得到相關(guān)改進意見，應當定期對首頁性能進行監(jiān)測，及時發(fā)現(xiàn)問題并加以改進。

[1]孫九林.科學數(shù)據(jù)資源與共享[J].中國基礎(chǔ)科學,2003(1):30-33.

[2]聶應高.基于Page Speed的網(wǎng)站前端性能優(yōu)化分析[J].現(xiàn)代圖書情報技術(shù),2009,185(11):69-73.

[3]門戶網(wǎng)站用戶體驗進入3s時代[EB/OL].(2010-8)[2013-03-02].http://www.networkbench.com/news/company_news100824.html.

[4]包韶平.面向前端的網(wǎng)站性能優(yōu)化方法與工具研究[J].科技風,2009,123(9):127.

[5]胡朝明.數(shù)字圖書館門戶網(wǎng)站測試與分析:關(guān)注Web標準與頁面性能[J].數(shù)字圖書館,2012,28(2):23-27.

[6]聶應高.高校圖書館網(wǎng)站前端性能調(diào)查與優(yōu)化對策:以我國20所“211工程”院校為例[J].2011,55(1):114-117.

The Analysis of the First Screen Time for Chinese Scientific Data Sharing Websites

Jiang Jidong, Peng Jie, Zhao Hui / Institute of Scientific and Technical Information of China, Beijing, 100038
Liu Runda / Beijing Municipal Commission of Science and Technology, Beijing, 100195
/ Institute of Scientific and Technical Information of China, Beijing, 100038
Ma Haiyin / School of Software, Shandong University, Jinan, 250100

The first screen time will affect the user experience and the use of the site. In this paper, 84 Chinese scientific data sharing websites' first screen time were tested. The authors show the overall status of the first screen time about this kind of sites and use Page Speed to identify the main factors that affect the time of the first screen. Finally, the authors suggest that the websites designer should take specific measures to improve site performance and shorten website first screen time in four areas: using the browser cache, picture combination as CSS sprites, optimizing images and using text compression.

Scientific data website, First screen time, Web performance optimization

2013-07-07）

10.3772/j.issn.1673—2286.2013.10.010

姜吉棟（1988- ），男，碩士，研究方向：科學數(shù)據(jù)共享，科技資源評價等。E-mail: sdzfjjd@126.com

彭潔（1965-），女，碩士，研究員，研究方向：信息資源管理，科技資源管理等。

趙輝（1971- ），女，碩士，副研究館員，研究方向：信息資源管理、科技項目管理等。

劉潤達（1981- ），男，博士，副研究員，研究方向：科學數(shù)據(jù)共享、科技資源管理等。

馬海銀（1988- ），男，碩士，研究方向：分布式計算。