詳解高性能網(wǎng)站建設(shè)技巧經(jīng)驗(yàn)!
本文章由SEO優(yōu)化指導(dǎo)用戶上傳提供
在網(wǎng)站建設(shè)和seo優(yōu)化中提高網(wǎng)站的訪問速度是一個站點(diǎn)的首先要考慮的問題。高性能網(wǎng)站建設(shè)的大致方向就是從緩存、壓縮、減少請求等方面進(jìn)行處理,雅虎的工程師們就總結(jié)出“網(wǎng)站性能黃金法則”:“只有10%~20%的用戶響應(yīng)時間花在了下載HTML文檔上,其余的80%~90%時間花在了下載頁面中的所有組件上”。下面網(wǎng)站建設(shè)專家通過十四個方面來聊聊高性能網(wǎng)站建設(shè)的一些經(jīng)驗(yàn)。
高性能網(wǎng)站建設(shè)經(jīng)驗(yàn)總結(jié)
高性能網(wǎng)站建設(shè)
一、減少HTTP請求,圖片地圖、CSS Sprites、內(nèi)聯(lián)圖片和腳本、腳本和樣式表的合并。
圖片地圖,Css Sprite,內(nèi)聯(lián)圖片和腳本,樣式表的合并。運(yùn)用這些技術(shù),估計頁面響應(yīng)時間會減少到50%左右。
圖片地圖在淘寶中很是蠻常見的,就是用一個圖來掛N個連接地址,通過分析點(diǎn)擊圖片的坐標(biāo)和位置來產(chǎn)生連接,這樣,會減少服務(wù)器的連接。
圖片地圖有很多難點(diǎn),不太容易控制,但是,如果你正在導(dǎo)航欄或者其他超鏈接中使用多個圖片,將他們轉(zhuǎn)換為圖片地圖是加速頁面的簡單的方式。
Css Srprites是利用css來控制的,主要是控制背景圖片的坐標(biāo)來控制圖片的顯示,可以將毫無關(guān)聯(lián)的圖片集成到一張圖片中。當(dāng)然,合成圖片有很大的難度,需要專業(yè)人員做,還有,制作成本可能較高。但是可以考慮在那些不經(jīng)常變動的地方使用它,例如,如果需要在頁面中為背景,按鈕,導(dǎo)航欄,連接等提供大量圖片,css sprites是一種優(yōu)秀的解決方案,干凈的標(biāo)簽,很少的圖片和很短的相應(yīng)時間。
在站點(diǎn)發(fā)布時,將多個js文件,和多個css文件合并成單個或者盡可能的合并,是有好處的。
二、使用CDN(內(nèi)容發(fā)布網(wǎng)絡(luò))。
一組分布在多個不同地理位置的web服務(wù)器,用于更有效的向用戶發(fā)布內(nèi)容。除了縮短響應(yīng)時間之外,cdn還可以帶來其他優(yōu)勢。他們的服務(wù)包括備份,擴(kuò)展存儲能力和進(jìn)行緩存。CDN還有助于緩和web流量峰值壓力。
三、添加Expires頭,修訂文件名,比如為經(jīng)常需要改變的文件添加版本號等。
長久的Exxpires頭常用于圖片,但應(yīng)該將其用在所有組件上,包括腳本,樣式表和flash。很多頂級網(wǎng)站現(xiàn)在還沒做到這一點(diǎn)。
web服務(wù)器使用Expires頭來告訴web客戶端它可以使用一個組件的當(dāng)前副本,知道指定的時間位置。
對于Expires頭來說,它使用了一個特定的時間,它要求服務(wù)器和客戶端的時鐘嚴(yán)格同步。
換種方式,Cache-Control使用max-age指令指定組件被緩存多久。
跨瀏覽器改善緩存的佳解決方案就是使用ExpiresDefault設(shè)置的Expires頭。
解決獲取新版本的文檔的有效方式是:修改其所有連接,這樣,全心的請求將從原始服務(wù)器下載新的內(nèi)容。
四、壓縮組件,即減少HTTP相應(yīng)的大小來減小響應(yīng)時間。
web客戶端可以通過HTTP請求中的Accept-Encoding頭來標(biāo)識對壓縮的支持。
web服務(wù)器通過響應(yīng)中的Content-Encoding頭來通知Web客戶端。
gzip是流行和有效的壓縮方式。在使用壓縮組件時,比較常見的壓縮有:HTML文檔壓縮,腳本和樣式表壓縮。
五、將樣式表放在頂部,減少“白屏(Blank White Screen)”現(xiàn)象,盡量使用LINK標(biāo)簽將樣式表放在文檔HEAD中。
將樣式表放在文檔底部會導(dǎo)致在瀏覽器中組織內(nèi)容逐步呈現(xiàn)。為避免當(dāng)樣式變化時重繪頁面中的元素,瀏覽器會阻塞內(nèi)容逐步呈現(xiàn)。
這個規(guī)則對于加載頁面所需要的時間沒有太多影響,它影響更多的是瀏覽器對這些組件順序的反映。
在IE中,將樣式表放在文檔底部會導(dǎo)致擺平問題。
如果樣式表仍在加載,構(gòu)建呈現(xiàn)樹就是一種浪費(fèi),因?yàn)樵谒袠邮奖砑虞d并解析完畢之前,無需繪制任何東西,否則,在其準(zhǔn)備好之前顯示內(nèi)容會遇到FOUC(無樣式內(nèi)容的閃爍)問題。
六、將腳本放在底部,并行下載,腳本阻塞。
HTTP1.1規(guī)范建議瀏覽器從每個主機(jī)名并行的下載兩個組件。
如果將腳本放在頁面頂部,正如通常的情況那樣,頁面中的所有東西都位于腳本之后,整個頁面的呈現(xiàn)和下載都會被阻塞,知道腳本加載完畢。放置腳本的地方就是頁面的底部,這不會阻止頁面內(nèi)容的呈現(xiàn),而且頁面中的可視組件可以今早下載。
高性能網(wǎng)站建設(shè)經(jīng)驗(yàn)總結(jié)
高性能網(wǎng)站建設(shè)技巧
七、避免CSS表達(dá)式,使用“一次性表達(dá)式”,事件處理器。
css表達(dá)式是動態(tài)設(shè)置css屬性的一種強(qiáng)大而且又危險的方式。
ie中不支持min-width。
有些規(guī)則用于處理頁面加載之后的性能問題,這通常是由CSS表達(dá)式引起的問題。然而,有些時候,css表達(dá)式也會影響頁面的加載時間。
八、使用外部JavaScript和CSS,純粹而言,內(nèi)聯(lián)比外聯(lián)快。加載后下載。
對于內(nèi)聯(lián)和外聯(lián)來說,內(nèi)聯(lián)相對是快點(diǎn)的。但是盡管結(jié)果如此,現(xiàn)實(shí)中還是推薦使用外部文件會產(chǎn)生較快的頁面。
如果js和css是外部文件,瀏覽器就能緩存他們,HTML文檔的大小減小,而且不會增加http請求的數(shù)量。
除非注明,否則均為SEO優(yōu)化顧問服務(wù)_零基礎(chǔ)SEO優(yōu)化指導(dǎo)全網(wǎng)營銷【順的推SEO】真實(shí)故事改編,轉(zhuǎn)載必須以鏈接形式標(biāo)明本文鏈接。
主營業(yè)務(wù): 排名提升、 網(wǎng)站建設(shè)、 網(wǎng)站推廣、 首頁優(yōu)化、 抖音下拉詞、 抖音SEO