原創|行業資訊|編輯:郝浩|2016-07-12 17:01:09.000|閱讀 445 次
概述:網站設計不僅需要考慮優秀的外型設計,良好的用戶體驗,還應當顧及網站的性能。本文在這里整理了對網站性能有重要影響的十個因素。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
通過文件進行Gzip壓縮的方式可以減少從服務器端到瀏覽器端文件傳輸所需要的時間。
當某個用戶點擊到你的網站時,就產生一個從服務器端調用文件的請求。文件的尺寸越大,那么從服務器端加載文件到瀏覽器端所需的時間就會越久。對網頁頁面和樣式文件進行Gzip壓縮(最多可以減少70%的文件大小)可以有效減少傳輸所需時間。
考慮到成本和收益方面,Gzip壓縮應該是讓你的頁面達到接近頂級速度優化的最佳方案了。
CSS和JavaScript文件的瘦身可以通過minification來完成。
是一個用于在保持代碼功能的前提下消除所有不必要代碼字符的程序。它對CSS和JavaScript文件的處理包括:
Minification還能夠降低網絡延遲(數據包從一個地方傳輸到另一個地方的時間),這能夠讓瀏覽器加載得更快。
除了Minification,你還可以有更多的選擇:
優化頁面上圖片可以減少頁面文件大小,而不會影響其質量。
通常在大型的網站之中包含了許多圖片,在加載一個頁面的數據時需要加載時間最多的就是頁面的圖片。因此,優化圖片是改善網頁性能的一個最簡單方式。
優化圖片的方式包括:
緩存可以減少用戶對某個頁面進行重復訪問所需的加載時間;頁面的存儲文件在這個時間段內無需再次進行獲取和加載。
當用戶對某個網站進行首次訪問時,會通過網絡來獲取頁面資源,數據請求可能會在客戶端和服務器端之間進行多次傳遞。緩存會存取平時常用的文件,從而確保后續的網站訪問能夠更加快速。要激活瀏覽器的緩存,需要在http響應頭上添加Cache-Control和ETag。Cache-Control定義了瀏覽器和其它高速緩存在哪個時間段,如何對響應進行緩存。ETag提供了一個用于與服務器服務器進行通信,檢查是否需要更新資源的驗證令牌。
重定向需要額外的HTTP請求-響應周期,而這會拖延頁面的加載。
請移除不必要的重定向,特別是主頁或者著陸頁上的重定向。
請編寫符合W3C標準的HTML和CSS代碼,這樣你的代碼才能夠被現代瀏覽器一致解析。
無效的HTML代碼會因為某些不必要的操作而減緩頁面的加載速度。
無效的CSS代碼會減緩頁面的渲染時間。
在運行代碼之前,可以通過驗證HTML代碼,通過驗證CSS代碼?;蛘吣憧梢酝ㄟ^將工作流和HTML驗證結合起來。
盡量避免使用那些過時的技術,如在瀏覽器中嵌入Flash, Java和Silverlight。
大多數移動設備不支持如Flash,并且使用這些插件容易產生頁面崩潰和安全事故。很多插件都是過去的陳舊技術,你在創建頁面內容的時候一定要確保采用能夠被所有的設備和瀏覽器接受的web技術。
這里有一些簡單的HTML 5特性能夠幫助你改進網站性能:
對比以前,頁面渲染之前你需要等待腳本完成頁面文件的下載,而現在異步腳本已經在后臺完成了下載。這意味著瀏覽器可以跟著異步腳本標簽對HTML文件進行持續渲染。
為了讓文檔中head的腳本變成異步,你只需要在腳本標簽中添加“async”:
<script src="async-example.js" <strong>async</strong>></script>
這可以防止腳本阻止后續的腳本和頁面,從而提高了加載速度。
對meta標簽的字符集進行指定能禁用IE8的先行下載器(lookahead downloader),而禁用此下載器可以提高頁面的加載速度。
對HTML文件中HTTP內容類型響應頭(HTTP Content-Type response header )的字符集進行設置,允許瀏覽器能夠立即對HTML文件和腳本進行加載。該方法也可以對每一個頁面的字符集進行設置。
以下是在常見服務器上如何對默認字符集進行配置:
在Apache中,在根目錄的.htaccess文件中添加以下代碼,然后重啟Apache服務器:
AddDefaultCharset UTF-8
在nginx中,從server板塊里添加字符集,然后重新加載nginx配置:
server { # ... other server config... charset utf-8; }
在IIS中,點擊Open IIS > MIME types,然后將.html MIME type設置為text/html; charset=UTF-8,最后重啟網站:
將script標簽添加在接近/body標簽的位置,以確保它們不會阻止并行下載。
這是最復雜的網站性能殺手,很遺憾,要解決這個問題很難!
而你所能做的就是識別和修正服務器端代碼,以確保服務器更快的響應時間和網站、應用程序更快的加載速度。
本文翻譯自,譯者:慧都控件網-回憶和感動
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn