當前位置:才華齋>設計>網頁設計>

優化網站載入速度的技巧

網頁設計 閱讀(2.14W)

優化了載入速度的網站不僅可以提高其搜尋引擎的排名,同時也可以降低網站的跳出率,提高其轉換率,還能提供更好的終端使用者體驗,這是當今基於Web環境取得成功的關鍵。下面我將介紹幾個優化網站載入網頁速度的簡單方法,一起來看一下。

優化網站載入速度的技巧

 1.伺服器響應時間

即使網站已經格外優化,但是除非伺服器響應時間非常快,否則就不會有什麼大的效果。當涉及到提高網站的速度,伺服器響應時間起著重要的作用。下面是一些提高伺服器響應時間的小貼士。

●有獨立的伺服器,而不是選擇共享/託管伺服器。

●提高Web伺服器的質量。

●移除不必要的外掛,只有那些必要的外掛,才需要一直保持啟用狀態。

2.瀏覽器快取

瀏覽器快取可以減少HTTP請求,從而反過來提高網站的載入速度。下面就是如何利用瀏覽器快取的程式碼示例:

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

ExpiresByType image/jpeg "access 1 year"

ExpiresByType image/gif "access 1 year"

ExpiresByType image/png "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType text/html "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType text/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 1 month"

注意:如果過期時間與檔案掛鉤,而此時檔案中的內容需要更改的話,那必須先重新命名檔案,以便瀏覽器可以獲取新新增的程式碼。

3.gzip壓縮

gzip壓縮是一個壓縮實用程式,我們可以用它來快速載入網站。它的工作原理是在傳送HTML和CSS檔案到網際網路瀏覽器之前,先壓縮檔案大小。允許mod_defalte模組啟用Gzip壓縮,下面是如何使用它的'程式碼示例:

# Compress HTML, CSS, JavaScript, Text, XML

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch MSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

 4.非同步指令碼

還有一個可以提高網站頁面速度的超棒選擇就是非同步載入指令碼。如此一來網頁負載就並不必依賴於這些非同步指令碼,網站訪問者也不再需要不得不按捺下性子,等待所有的指令碼載入完之後才能呈現頁面。在非同步模式中,指令碼是在後臺下載的。通常,我們會將第三方指令碼作為非同步指令碼,因為下載這些指令碼時常會讓網站速度變得非常慢。

 5.內容分發網路(CDN)

內容分發網路(CDN)是位於不同地理位置的伺服器組成的網路。每個伺服器都擁有所有網站的檔案副本。要是有網站訪問者請求檔案和網頁時,就可以直接從就近的網站伺服器傳送過來(也可以是從負載最小的伺服器)。

 6.優化JavaScript、HTML和CSS

優化JavaScript和CSS也可以提高一個網站的網頁速度,而且這個方法非常簡單。優化JavaScript、HTML和CSS就是刪除所有不必要的空格和註釋,從而減小檔案大小。下面是一些最小化JavaScript和CSS的流行工具,非常有用。

●CSS Minifier

●Avivo

●HTML Compressor

7.置於頂部的樣式表和底部的指令碼

將樣式表放在頂部有助網站的迅速載入,因為這樣可以使得網頁漸進式呈現。一般地,所有的網際網路瀏覽器都支援在給定時間內並行下載兩個元件(影象、樣式和指令碼)。但是通常而言,霸道的指令碼會在並行下載時會阻止其他的下載,直到指令碼下載完畢。

 8.避免阻塞型的JavaScript和CSS

在瀏覽器呈現網頁之前,它首先需要通過解析HTML標記語言來構建一個DOM樹。在此過程中,如果遇到了指令碼,此過程就會中止,轉而先執行指令碼,完了才會繼續原先的活動。因此建議避免阻塞型的JavaScript,尤其是外部指令碼。

阻塞型JavaScript還會導致網站的延遲。所以不妨推遲載入那些不重要的JavaScript,或者採用非同步載入的方式。另一種選擇是將這些HTML程式碼內嵌到網站上,同時需要確保CSS的優化。

 Script的延遲解析

為了載入網頁,瀏覽器必須解析所有的<script>標記內容,從而增加了網站的載入時間。通過延遲解析指令碼,那麼就可以減少初始網站的載入時間了。