首先,讓我們談?wù)勄岸藘?yōu)化。80%的用戶訪問網(wǎng)頁的等待時(shí)間發(fā)生在瀏覽器前端,尤其是頁面和頁面中各種元素(圖片、CSS、JavaScript、flash…)的下載。因此,在許多情況下,與花費(fèi)大量時(shí)間在困難和復(fù)雜的程序改進(jìn)上相比,前端優(yōu)化往往可以事半功倍。 利美網(wǎng)絡(luò)
對于首次訪問您的網(wǎng)站但尚未將您的網(wǎng)站內(nèi)容緩存在瀏覽器緩存中的用戶,我們可以執(zhí)行以下操作:
利美網(wǎng)絡(luò)
1) 減少頁面訪問生成的HTTP連接數(shù)
對于首次訪問您的網(wǎng)站的用戶,頁面生成的HTTP連接數(shù)是影響性能的關(guān)鍵瓶頸。
利美項(xiàng)目圈
對策:
利美項(xiàng)目圈
-保持頁面設(shè)計(jì)盡可能簡單,盡量減少圖片的使用,并通過放棄一些不必要的頁面效果來減少JavaScript的使用。 copyright limeiseo
-使用一些優(yōu)化技術(shù),如利用圖片的背景位移來減少圖片數(shù)量;影像地圖技術(shù);使用inlineimages將CSS圖像捆綁到網(wǎng)頁中。
本文利美網(wǎng)絡(luò)(safe51.com.cn)整理發(fā)布
-嘗試合并JS和CSS文件以減少獨(dú)立文件的數(shù)量。
2) 將CSS放在頁面頂部,將JS文件放在頁面底部
利美網(wǎng)絡(luò)
CSS引用應(yīng)放在HTML的標(biāo)題中,JS文件引用應(yīng)盡可能放在頁面底部標(biāo)記的后面。其主要思想是盡快顯示核心頁面內(nèi)容。但是需要注意的是,對于一些使用了大量JS的頁面,底部的一些JS文件可能會(huì)導(dǎo)致一些不可預(yù)知的問題,可以根據(jù)實(shí)際情況適當(dāng)使用。
具體來說,一些JavaScript壓縮工具用于壓縮JS腳本、刪除空白字符和注釋以及最小化變量名?;趃zip壓縮,JS內(nèi)容的壓縮可以將性能再提高5%。 利美知識(shí)百科
3) 盡量減少使用外部腳本并減少DNS查詢時(shí)間 利美網(wǎng)絡(luò)
對于網(wǎng)站的頻繁用戶,主要的優(yōu)化思想是很大限度地利用用戶瀏覽器的緩存,以減少服務(wù)器的開銷。 利美知識(shí)百科
4) 在標(biāo)題中添加過期時(shí)間(expiresheader) 利美項(xiàng)目圈
向標(biāo)頭中的靜態(tài)內(nèi)容添加一個(gè)較長的過期時(shí)間,以便用戶將來只能讀取緩存中的文件,而無需與服務(wù)器進(jìn)行任何交互。然而,這樣做也存在一些問題。更新圖像、CSS和JS文件時(shí),如果用戶不刷新瀏覽器,則無法獲得更新。這樣,當(dāng)我們修改圖像、CSS和JS文件時(shí),我們必須重命名它們,以確保用戶能夠訪問有價(jià)值的內(nèi)容。這可能會(huì)給開發(fā)帶來很多麻煩,因?yàn)檫@些文件可能會(huì)被站點(diǎn)中的許多文件引用。Flickr提出的處理方法是通過URL重寫使不同版本號(hào)的URL實(shí)際指向同一個(gè)文件,這是一種聰明的方法,因?yàn)閁RL級(jí)別的操作效率很高,可以為開發(fā)過程提供很多便利。
要了解原因,您必須了解瀏覽器在訪問URL時(shí)的工作方式: 利美項(xiàng)目圈
A.首次訪問URL時(shí),用戶從服務(wù)器段獲取頁面內(nèi)容,將相關(guān)文件(圖像、CSS、JS…)放入緩存,并在文件頭中保留過期時(shí)間、LastModified、ETag和其他相關(guān)信息。
本文利美網(wǎng)絡(luò)(safe51.com.cn)整理發(fā)布
B當(dāng)用戶重復(fù)訪問URL時(shí),瀏覽器首先檢查緩存中是否存在同名文件。如果是,請檢查文件的過期時(shí)間;如果文件未過期,則直接從緩存讀取該文件,并且不再訪問服務(wù)器。 利美項(xiàng)目圈
C如果緩存中文件的過期時(shí)間不存在或已超過,瀏覽器將訪問服務(wù)器以獲取文件的標(biāo)題信息,檢查LastModified、etags和其他信息。如果發(fā)現(xiàn)自上次訪問以來本地緩存中的文件未被修改,則將使用本地緩存中的文件; 利美項(xiàng)目圈
根據(jù)我的經(jīng)驗(yàn),如果可能的話,試著遵循這個(gè)原則為靜態(tài)文件增加過期時(shí)間,從而大大減少用戶對服務(wù)器資源的重復(fù)訪問。 利美項(xiàng)目圈
5) CSS和JS文件在單獨(dú)的外部文件中引用 本文利美網(wǎng)絡(luò)(safe51.com.cn)整理發(fā)布
將CSS和JS文件放在單獨(dú)的文件中,以便它們單獨(dú)緩存,并且在訪問其他頁面時(shí)可以直接從瀏覽器的緩存中讀取。有些網(wǎng)站的主頁可能是例外。這些主頁的自瀏覽量可能不大,但這是用戶訪問網(wǎng)站的***印象,也是引導(dǎo)用戶訪問其他頁面的起點(diǎn)。這些頁面本身也可能使用大量Ajax本地刷新和技術(shù)。此時(shí),CSS和JS文件可以直接寫入頁面中。
利美項(xiàng)目圈
在ie中,包含重復(fù)的JS腳本將導(dǎo)致瀏覽器的緩存不被使用。仔細(xì)檢查你的程序。刪除重復(fù)的引用腳本應(yīng)該不難。 limeiseo(加v分享)
除了標(biāo)頭中的人工重定向之外,網(wǎng)頁重定向通常是無意中發(fā)生的,重定向的內(nèi)容不會(huì)使用瀏覽器的緩存。例如,當(dāng)用戶正在訪問時(shí),服務(wù)器將轉(zhuǎn)到/通過301,后跟“/”。如果服務(wù)器配置不好,也會(huì)給服務(wù)器帶來額外的負(fù)擔(dān)。通過配置Apache的別名或使用Mod_uurewrite模塊和其他方法,可以盡可能避免不必要的重定向。 copyright limeiseo
還有其他一些,例如使用CDN分發(fā)機(jī)制、避免CSS表達(dá)式、避免ETag等。因?yàn)樗鼈儾怀S?,所以這里不再重復(fù)。 limeiseo(加v分享)
經(jīng)過以上優(yōu)化后,可以嘗試用Yslow測試網(wǎng)頁的性能得分,一般可以達(dá)到70分以上。 利美網(wǎng)絡(luò)
當(dāng)然,除了對瀏覽器前端和靜態(tài)內(nèi)容進(jìn)行優(yōu)化外,還對程序腳本、服務(wù)器、數(shù)據(jù)庫和加載進(jìn)行了優(yōu)化。這些更深層次的優(yōu)化方法對技術(shù)有更高的要求。本文的后半部分將重點(diǎn)討論后端優(yōu)化。 利美網(wǎng)絡(luò)
本文利美網(wǎng)絡(luò)(safe51.com.cn)整理發(fā)布
本文利美網(wǎng)絡(luò)(safe51.com.cn)整理發(fā)布如何優(yōu)化網(wǎng)站性能?針對前后端代碼框架優(yōu)化
利美項(xiàng)目圈
2、 后端優(yōu)化
limeiseo(加v分享)
本文標(biāo)簽:優(yōu)化網(wǎng)站性能 前后端優(yōu)化