優化網站加載速度的技巧
優化了加載速度的網站不僅可以提高其搜索引擎的排名,同時也可以降低網站的跳出率,提高其轉換率,還能提供更好的終端用户體驗,這是當今基於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>標記內容,從而增加了網站的加載時間。通過延遲解析腳本,那麼就可以減少初始網站的加載時間了。
-
JavaScript數組去重的四種方法
javascript數組去重方法彙總ue1=function(){varn=[];//一個新的臨時數組for(vari=0;i<th;i++)//遍歷當前數組{//如果當前數組的第i已經保存進了臨時數組,那麼跳過,//否則把當前項push到臨時數組裏面if(xOf(this[i])==-1)(this[i]);}returnn;};ue2=function(){var...
-
javascript設置創建動態表格的方法
兩種JavaScript動態創建table表格的方法,分享給大家,具體實現如下方法一:最原始的方法,創建一一元素vara1=teElement("table");vara2=teElement("tbody");vara3=teElement("tr");vara4=teElement("td");//開始appendchild()追加各個元素ndChild(a4);ndChild(a3);nd...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...