加快網(wǎng)頁的加載速度,無疑是提高用戶體驗(yàn)的一個很好的方法。但是這里我們?nèi)绾翁岣呔W(wǎng)頁的加載速度呢?這里是我所理解的和網(wǎng)上搜索到的幾點(diǎn)總結(jié):
1. 使用良好的結(jié)構(gòu)
比如說XHTML具有很大的優(yōu)勢,至少你的頁面會更加的符合標(biāo)準(zhǔn)!但是他大量的使用了標(biāo)記(<start> , <end>等),而這就意味著瀏覽器需要下載更多的代碼,所以嘗試在你的頁面中使用較少的XHTML,減少頁面的大小。
2. 盡量減少HTTP的請求次數(shù)
終端用戶響應(yīng)的時間中,有80%用于下載各項(xiàng)內(nèi)容。這部分時間包括下載頁面中的圖像、樣式表、腳本、Flash等。通過減少頁面中的元素可以減少HTTP請求的次數(shù)。這是提高網(wǎng)頁速度的關(guān)鍵步驟。
減少頁面組件的方法其實(shí)就是簡化頁面設(shè)計。那么有沒有一種方法既能保持頁面內(nèi)容的豐富性又能達(dá)到加快響應(yīng)時間的目的呢?這里有幾條減少HTTP請求次數(shù)同時又可能保持頁面內(nèi)容豐富的技術(shù)。
合并文件是通過把所有的腳本放到一個文件中來減少HTTP請求的方法,如可以簡單地把所有的CSS文件都放入一個樣式表中。當(dāng)腳本或者樣式表在不同頁面中使用時需要做不同的修改,這可能會相對麻煩點(diǎn),但即便如此也要把這個方法作為改善頁面性能的重要一步。
3. 優(yōu)化網(wǎng)頁圖片文件
你的網(wǎng)頁一定有圖片,加載一個網(wǎng)頁往往圖片的總尺寸是最大的,特別是那些顏色豐富的背景圖片和大副廣告圖片。所以一般要在同等圖片質(zhì)量的情況下要盡可能地 減小圖片尺寸。在Photoshop中我們可以用保存為Web圖片的選項(xiàng)試一下。圖片也有幾種常用的文件格式。如JPEG一般是用來存儲照片或全彩色圖片 的,比如照片、屏幕截圖等。GIF圖片格式的顏色要比JPEG少,適合做小圖,如制作按鈕、Logo等,另外GIF支持動態(tài)效果。PNG跟GIF比較相 似,但它的尺寸較大,支持的顏色也比GIF要多,并且PNG支持背景透明。我們可以試試使用一種不同的格式保存圖片試下,如將PNG和JPEG換成GIF 試試。
4. CSS Sprites是減少圖像請求的有效方法
把所有的背景圖像都放到一個圖片文件中,然后通過CSS的background-image和background-position屬性來顯示圖片的不同部分。
圖片地圖是把多張圖片整合到一張圖片中。雖然文件的總體大小不會改變,但是可以減少HTTP請求次數(shù)。圖片地圖只有在圖片的所有組成部分在頁面中是緊挨在一起的時候才能使用,如導(dǎo)航欄。確定圖片的坐標(biāo)和可能會比較繁瑣且容易出錯,同時使用圖片地圖導(dǎo)航也不具有可讀性,因此不推薦這種方法;
內(nèi)聯(lián)圖像是使用data:URL scheme的方法把圖像數(shù)據(jù)加載頁面中。這可能會增加頁面的大小。把內(nèi)聯(lián)圖像放到樣式表(可緩存)中可以減少HTTP請求同時又避免增加頁面文件的大小。但是內(nèi)聯(lián)圖像現(xiàn)在還沒有得到主流瀏覽器的支持。減少頁面的HTTP請求次數(shù)是你首先要做的一步。這是改進(jìn)首次訪問用戶等待時間的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所說,HTTP請求在無緩存情況下占去了40%到60%的響應(yīng)時間。
關(guān)于CSS Sprites后續(xù)我會嘗試使用下,如果有什么心得還是會分享。
5. 合并Js文件和CSS
將JS代碼和CSS樣式分別合并到一個共享的文件,這樣不僅能簡化代碼,而且在執(zhí)行JS文件的時候,如果JS文件比較多,就需要進(jìn)行多次“Get”請求,延長加載速度,將JS文件合并在一起后,自然就減少了Get請求次數(shù),提高了加載速度。
6. 懶加載技術(shù)的應(yīng)用
延遲顯示可見區(qū)域外的內(nèi)容,為了確保用戶可以更快地看見可見區(qū)域的網(wǎng)頁可以延遲加載或展現(xiàn)可見區(qū)域外的內(nèi)容,為了避免頁面變形,可以使用占位符標(biāo)簽制定正確的高度和寬度。比如WP的jQueryImage LazyLoad插件就可以在用戶停留在第一屏的時候,不加載任何第一屏以下的圖片信息,只有當(dāng)用戶把鼠標(biāo)往下滾動的時候,這些圖片才開始加載。這樣很明顯提升可見區(qū)域的加載速度,提高用戶體驗(yàn)。
7. 延遲加載和執(zhí)行非必要腳本
網(wǎng)頁中有很多腳本是在頁面完全加載完前都不需要執(zhí)行的,可以延遲加載和執(zhí)行非必要腳本。這些腳本可以在onload事件之后執(zhí)行,避免對網(wǎng)頁上重要內(nèi)容的呈現(xiàn)造成影響。這些腳本可能是你自己網(wǎng)頁的甲苯,往往更多的是一些第三方腳本,這樣的有很多,比如評論、廣告、智能推薦、百度云圖、分享等等,這些完全可以等主體內(nèi)容加載完后再執(zhí)行。
8. 使用AJAX
AJAX即“Asynchronous Javascript +XML“,是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁(不使用AJAX)如果需要更新內(nèi)容,必須重載整個網(wǎng)頁面。
現(xiàn)在的Ajax好像有點(diǎn)被神話了,好像網(wǎng)頁只要Ajax了,那么就不存在效率問題了。其實(shí)這是一種誤解。拙劣的使用Ajax不會讓你的網(wǎng)頁效率更高,反而會降低你的網(wǎng)頁效率。Ajax的確是個好東西,但是請不要過分的神話它。使用Ajax的時候也要考慮上面的那些準(zhǔn)則。
9. 精簡代碼
這個可以說是最直接的一個方法,也是用得比較多的,對網(wǎng)頁代碼進(jìn)行瘦身,刪除不必要的沉冗代碼,比如不必要的空格、換行符、注釋等,包括JS代碼中的無用代碼也需要清除。其中對于注釋代碼的清除可能有些人存在誤區(qū),甚至有的在里面堆砌關(guān)鍵詞。
10. 使用 Progressive JPEGs
ProgressiveJPEGs圖片是JPEG格式的一個特殊變種,名為“高級JPEG”。在創(chuàng)建高級JPEG文件時,數(shù)據(jù)是這樣安排的:在裝入圖像時,開始只顯示一個模糊的圖像,隨著數(shù)據(jù)的裝入,圖像逐步變得清晰。它相當(dāng)于交織的GIF格式的圖片。高級JPEG主要是考慮到使用調(diào)制解調(diào)器的慢速網(wǎng)絡(luò)而設(shè)計的,快速網(wǎng)絡(luò)的使用者通常不會體會到它和正常JPEG格式圖片的區(qū)別。對于網(wǎng)速比較慢的用戶,這無疑有很好的體驗(yàn)。
11. 壓縮文本和圖片
壓縮技術(shù)如gzip可以有效減少頁面加載的時間。包括HTML,XML,JSON(JavaScript對象符號),JavaScript和CSS等,壓縮率都可以在大小70%左右。文本壓縮用得比較多,一般直接在空間開啟就行,而圖片的壓縮就比較隨意,很多都是直接上傳,其實(shí)還有很大的壓縮空間。
12. 圖片使用height和width屬性
你會給每個圖片加上height和width屬性嗎?這兩個屬性可以讓瀏覽器在加載圖片之前就知道圖片的長和寬,并預(yù)留出指定的長寬待圖片加載后顯示。如 果沒有這兩個屬性,瀏覽器還需要在讀取圖片成功后再處理一次頁面布局樣式,這無疑減慢了網(wǎng)頁加載速度。所以在固定圖片大小的情況下最好都使用上長和寬屬性。
13. 使用 HTTP 壓縮,并始終使用小寫的 div 和類名
可以使用 HTTP 壓縮來減少服務(wù)器與瀏覽器之間的通信量。可以在 Apache 中配置 HTTP 壓縮(.htaccess 文件),或者可以將其包含到頁面中(對于 PHP,可以使用一個 HTTP_ACCEPT_ENCODING 選項(xiàng))。但是請注意:不是所有瀏覽器都支持壓縮。即使是支持壓縮的瀏覽器,壓縮和解壓縮都會加重處理器的負(fù)載。要在 Apache 中啟用地毯式(blanket)壓縮(即壓縮所有文本和 HTML),使用以下命令:
AddOutputFilterByType DEFLATE text/html text/plain text/xml
另外,考慮一下您想要壓縮的內(nèi)容。圖像、音樂和視頻在創(chuàng)建時已經(jīng)進(jìn)行了壓縮,因此您可以將壓縮對象限制為 HTML、CSS 和 JavaScript 文件。另一種減少壓縮工作的技巧是使用小寫形式的 <div> 元素和類名。由于大小寫敏感性,并且使用的是無損壓縮,<header> 與 <Header> 不同,它們被壓縮為兩個不同的標(biāo)記。關(guān)于如何提升網(wǎng)頁的加載速度所決定的因素太多了,這只是舉出一些基本需要注意的,歡迎在評論分享你的看法。
轉(zhuǎn)載請注明出處 AE博客|墨淵 ? 網(wǎng)站優(yōu)化如何提高頁面的加載速度
發(fā)表評論