為網(wǎng)站減負(fù)的十大措施,你知道嗎?

網(wǎng)站快速加載,是提供良好用戶體驗(yàn)的前提。然而,網(wǎng)站功能的不斷增多,程序包的不斷臃腫,導(dǎo)致網(wǎng)站訪問時(shí)較大的下載量,最終影響了響應(yīng)速度。沒有一個(gè)用戶喜歡等待,如何減少代碼量,為網(wǎng)站減去過多負(fù)擔(dān),Craig Buckler在sitepoint網(wǎng)站發(fā)表了一篇文章《10 Quick and Easy Fixes to Reduce Page Weight》,分享為網(wǎng)站減負(fù)的十個(gè)建議。下面為該文的編譯內(nèi)容。
2013年,網(wǎng)站頁面的重量增加了32%,竟然達(dá)到了1.7MB,包含96個(gè)獨(dú)立HTTP請(qǐng)求。這只是一個(gè)平均數(shù)值,其中近一半的網(wǎng)站已經(jīng)超過了這個(gè)數(shù)值。網(wǎng)站的過度臃腫正趨于流行,其中很大的責(zé)任在于Web開發(fā)者。
過于笨重的網(wǎng)站將嚴(yán)重影響網(wǎng)站的最終體驗(yàn),主要表現(xiàn)在以下四個(gè)方面:
1)、更大的下載量,導(dǎo)致更慢的用戶體驗(yàn)。并不是每個(gè)人都擁有20M的網(wǎng)絡(luò)連接,尤其是對(duì)于那些不發(fā)達(dá)地區(qū)。不管你的網(wǎng)站多么優(yōu)秀,用戶永遠(yuǎn)不希望等待。
2)、移動(dòng)Web訪問正迅速發(fā)展,移動(dòng)網(wǎng)民幾乎占到所有網(wǎng)民的1/4。在典型的3G網(wǎng)絡(luò)連接下,一個(gè)1.7Mb的網(wǎng)站加載需要近一分鐘。如果你的網(wǎng)站無法高效工作于這些移動(dòng)設(shè)備,那采用響應(yīng)式Web設(shè)計(jì)技術(shù)又有什么用呢?
3)、網(wǎng)站加載速度已被谷歌加入排名算法中。加載緩慢會(huì)降低網(wǎng)站排名,同時(shí)也會(huì)影響搜索引擎優(yōu)化。
4)、網(wǎng)站包含的代碼越多,更新和維護(hù)它所花費(fèi)的時(shí)間就會(huì)越長。
Craig Buckler預(yù)言,2014年網(wǎng)頁的重量將會(huì)下降。那如何精簡代碼,為網(wǎng)站減負(fù)呢?Craig Buckler給出了十條建議。這些建議中涉及到的技術(shù)均是大家熟知的。
1.啟用GZIP壓縮
根據(jù) W3Techs.com上的數(shù)據(jù)顯示,近一半的網(wǎng)站都未進(jìn)行過壓縮。在Web主機(jī)上,通過簡單的服務(wù)器設(shè)置即可開啟GZIP壓縮。
2.支持瀏覽器緩存
如果瀏覽器能容易地緩存一個(gè)文件,那它就無需反復(fù)下載該文件了。實(shí)現(xiàn)該功能的一個(gè)解決方案,就是在HTTP頭中設(shè)置合適的 Expires Header、上一次修改時(shí)間或采用的 ETags。
你可通過配置服務(wù)器來自動(dòng)完成以上工作。下面是Apache中的.htaccess文件,其中的代碼實(shí)現(xiàn)了“將所有圖片緩存一個(gè)月”的功能。
- <IfModule mod_expires.c>
- ExpiresActive On
- <FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
- ExpiresDefault "access plus 1 month"
- </FilesMatch>
- </IfModule>
3.使用CDN
瀏覽器限制了每個(gè)域中可同時(shí)處理的并發(fā)HTTP請(qǐng)求數(shù)量:4至8個(gè)。如果你的網(wǎng)頁需要從域中加載96個(gè)資源,那瀏覽器最多可設(shè)置12組并發(fā)請(qǐng)求。(因?yàn)槲募笮〔⒉煌@種情況實(shí)際上并不會(huì)發(fā)生,但該限制仍然適用。)
如若從另一個(gè)域中請(qǐng)求靜態(tài)文件,則可使瀏覽器處理的HTTP請(qǐng)求數(shù)量加倍。此外,一個(gè)文件被調(diào)用后就會(huì)產(chǎn)生一個(gè)緩存文件,以供下一個(gè)調(diào)用它的網(wǎng)站使用。我們可選用JavaScript庫(如jQuery)和字體庫,同時(shí)你也可以考慮專用的圖片托管。
前面提到的三條建議可以加快網(wǎng)站的加載速度,下面的建議將幫助我們檢查網(wǎng)站代碼,以高效地減少網(wǎng)站重量。
4.刪掉沒用的資源
網(wǎng)站一直在變革之中。如果你不再使用某組件,那就刪掉與之關(guān)聯(lián)的CSS和JavaScript。如果它們包含在一個(gè)單獨(dú)文件中,處理起來就會(huì)很簡單。否則,你需要借助一些工具,如Chrome的Audit開發(fā)工具、JSLint、 Dust-Me Selectors、 CSS Usage、 unused-css.com,也可構(gòu)建 grunt-uncss此類的工具。
5.合并和壓縮CSS
理想的情況是只擁有一個(gè)CSS文件(如果你使用RWD以支持IE的老版本,那就需要兩個(gè)CSS文件。)構(gòu)建并維護(hù)幾個(gè)單獨(dú)的CSS文件也算合理,但在部署到產(chǎn)品服務(wù)器之前,你應(yīng)該將它們集合在一起,并刪掉那些不必要的空白區(qū)域。
Saas、LESS和Stylus等預(yù)處理器可幫你完成這些痛苦的工作。 Grunt.js、 Gulp等工具可自動(dòng)化你的工作流。如果你更喜歡GUI,可借助Koala提供的免費(fèi)跨平臺(tái)應(yīng)用。
如果你覺得這些比較麻煩,也可手動(dòng)通過命令行工具將CSS文件集中在一起,如在Windows中,可使用如下代碼:
copy file1.css+file2.css file.css
在Mac/Linux中,可使用如下代碼:
cat file1.css file2.css > file.css
最終文件經(jīng)過在線CSS壓縮工具(如 cssminifier.com、 CSS Compressor & Minifieror等)壓縮后即可運(yùn)行。
最后,請(qǐng)記住在頭部(Head)加載所有CSS,以便瀏覽器展示接下來的HTML元素,同時(shí)也可避免瀏覽器下次再重繪頁面元素。
6.壓縮并合并JavaScript
平均每個(gè)頁面需加載18個(gè)JavaScript文件,所以我們要將自己編寫的JavaScript代碼進(jìn)行合并和壓縮。我們可以自己構(gòu)建壓縮工具,也可以使用在線工具,如 YUI Compressor、 Closure Compiler及CompressorRater。
使用JavaScript壓縮工具進(jìn)行壓縮,必須十分謹(jǐn)慎。你的代碼有一點(diǎn)小問題,即便丟失了一個(gè)分號(hào),壓縮過程也可能會(huì)失敗。無論如何,對(duì)JavaScript文件進(jìn)行壓縮,可減少HTTP請(qǐng)求數(shù)量,從而提高網(wǎng)站性能。
最好在</body>之前加載JavaScript,這樣可確保該腳本不會(huì)阻礙其它內(nèi)容的加載,同時(shí)在該腳本被下載和執(zhí)行之前,頁面的內(nèi)容已加載完畢,并可閱讀了。
7.使用正確的圖片格式
錯(cuò)誤地使用圖片格式會(huì)增加網(wǎng)頁的負(fù)載。圖片格式通常有以下使用原則:
1)、照片使用JPG格式;
2)、其他的使用PNG格式。
當(dāng)你有一些小圖像,它們僅包含有限的幾種色彩集,采用GIF格式,其壓縮效果可能更好。本文暫不討論向量圖。
現(xiàn)在有大量免費(fèi)的圖形軟件包,可用來轉(zhuǎn)換圖片的格式。其中像XnView允許你批處理這些文件。請(qǐng)記住下面兩條原則:
JPG為一種有損壓縮格式,其質(zhì)量介于0(質(zhì)量很差、更小的文件)至100(質(zhì)量最好,更大的文件)之間。介于30至70之間的大部分圖片顯示效果比較好。
PNG支持256顏色表和24位的真彩色。如果你不需要透明,并能控制調(diào)色板,那256的PNG圖像顏色模式可能壓縮得更好。
8.重整大圖片的尺寸
即便是最入門級(jí)的智能手機(jī)上的照片機(jī)(三百萬像素),其拍出來的照片往往太大而不適合在網(wǎng)站上顯示。但大部分內(nèi)容編輯者往往將圖片直接從相機(jī)中直接上傳到網(wǎng)站上。因此,我們需要一個(gè)可以自動(dòng)調(diào)整圖片尺寸的系統(tǒng)。
圖片的尺寸永遠(yuǎn)不能超過它所在容器的最大值。如果網(wǎng)站模板的寬度最大為800px,那圖片的寬度就不能超過該值。一些高分辨率、Retina顯示屏,可顯示寬度為1600px的圖片,但這仍比從相機(jī)中直接輸出的圖片要小。
在減輕網(wǎng)頁重量方面,圖片尺寸的調(diào)整起著重要的作用。將圖片尺寸縮小50%,可節(jié)省75%的總空間,相當(dāng)于減少了文件大小。
9.進(jìn)一步壓縮圖片
即便已將圖片調(diào)整為正確的格式和尺寸,你仍可使用一些分析和優(yōu)化圖像的工具進(jìn)一步壓縮圖片。這些工具包括 OptiPNG、 PNGOUT、 jpegtran和 jpegoptim。大部分工具可獨(dú)立安裝,也可整合入你構(gòu)建的過程中。另外,還有一些在線工具,如Smush,它可以工作于云上。
10.去掉不必要的字體
Web字體對(duì)設(shè)計(jì)進(jìn)行了重大改革,減少了基于圖像的字體的使用。但是,使用傳統(tǒng)字體后,網(wǎng)頁的代碼量往往會(huì)增加數(shù)百KB。所以網(wǎng)站中這種字體的使用盡量控制在兩、三種以內(nèi)。
利用以上提到的方法,大部分網(wǎng)站可以將減去30~50%的重量。對(duì)于一般的網(wǎng)站,可以減掉800KB的代碼量,訪問速度可獲明顯提升。
大家抓緊采取這十個(gè)措施吧,應(yīng)該會(huì)有很好的效果。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
原文:http://www.cnblogs.com/shouce/p/5274483.html
相關(guān)文章
如何電腦打開指定網(wǎng)站、只讓訪問某些網(wǎng)站以及怎樣禁止打開某個(gè)網(wǎng)站的方
這篇文章主要介紹了如何電腦打開指定網(wǎng)站、只讓訪問某些網(wǎng)站以及怎樣禁止打開某個(gè)網(wǎng)站的方法,需要的朋友可以參考下2016-02-22- 為什么打開網(wǎng)站被重定向到WPKG.ORG?又該如何解決這個(gè)問題呢,有不少網(wǎng)友提供了答案,下面小編就詳情為大家介紹一下吧,希望會(huì)對(duì)大家有所幫助的2015-04-30
有些網(wǎng)站打不開怎么辦?網(wǎng)站打不開的解決方法
有些朋友遇到了了一個(gè)很奇怪的問題: 一些網(wǎng)站打不開?大多數(shù)人會(huì)認(rèn)為是服務(wù)器問題,但通過ping服務(wù)器IP一切正常,并且使用IP地址可以訪問網(wǎng)站,這是怎么回事呢?針對(duì)這一問2014-10-13網(wǎng)站內(nèi)容不讓復(fù)制怎么辦?文章復(fù)制不了的兩種解決方法
我們?cè)跒g覽網(wǎng)頁時(shí),有時(shí)需要選取某些文本進(jìn)行復(fù)制,可常常會(huì)出現(xiàn)這種情況:按住鼠標(biāo)左鍵移動(dòng),無論如何也無法選中自己需要的文字,或把網(wǎng)頁保存后打開,也無法進(jìn)行復(fù)制。那2014-09-29- 很多新手朋友們都不知道如何創(chuàng)建網(wǎng)站桌面快捷方式,其實(shí)很簡單,下面為大家介紹下具體的實(shí)現(xiàn)2014-03-22
- 上網(wǎng)時(shí),經(jīng)常出現(xiàn)有的網(wǎng)站打不開.這是什么原因呢.我們來分析一下吧2012-10-29
有些網(wǎng)站打不開是怎么回事 部分網(wǎng)頁打不開的解決方法
在瀏覽網(wǎng)頁過程中有部分網(wǎng)站打不開,遇到這樣的情況,用戶改怎么解決呢?通過下面的排除方法或許可以解決大家的燃眉之急,有類似問題的朋友可以參考下哈2013-07-12網(wǎng)頁打不開怎么辦?使用路由器后有些網(wǎng)站打不開的解決方法
以前都是網(wǎng)線直接插在電腦上,現(xiàn)在用了無線路由器以后,有些頁面打不開了,這該怎么解決呢?下面我們一起來看看使用路由器后有些網(wǎng)站打不開的解決方法2014-11-13Ping對(duì)方網(wǎng)站地址的IP總顯示超時(shí)是什么意思
Ping對(duì)方網(wǎng)站地址的IP,為什么總是顯示“請(qǐng)求超時(shí)”,這個(gè)到底是什么意思呢?ping是對(duì)一個(gè)目標(biāo)服務(wù)器發(fā)出數(shù)據(jù)包,并且請(qǐng)求獲取反饋包的過程,如果發(fā)出了數(shù)據(jù)包,在指定時(shí)間2013-11-12華為路由器192.168.3.1登陸網(wǎng)址打不開怎么辦
最近看到網(wǎng)上有不少網(wǎng)友遇到華為路由器登錄地址192.168.3.1打不開的現(xiàn)象,在這里我們總結(jié)了引起192.168.3.1打不開的幾種最常見原因及解決辦法,下面一起來看一下2013-07-22