構建高可用高性能網站的建議

轉自:

http://www.iteye.com/news/30202


雖然零零碎碎瞭解些,但是總結的這麼全面,還是收藏下,分享給各位看官!


優化了加載速度的網站不僅可以提高其搜索引擎的排名,同時也可以降低網站的跳出率,提高其轉換率,還能提供更好的終端用戶體驗,這是當今基於Web環境取得成功的關鍵。 


 

下面我將介紹幾個優化網站加載網頁速度的簡單方法,一起來看一下。 

1.服務器響應時間 

即使網站已經格外優化,但是除非服務器響應時間非常快,否則就不會有什麼大的效果。當涉及到提高網站的速度,服務器響應時間起着重要的作用。下面是一些提高服務器響應時間的小貼士。 
  • 有獨立的服務器,而不是選擇共享/託管服務器。
  • 提高Web服務器的質量。
  • 移除不必要的插件,只有那些必要的插件,才需要一直保持啓用狀態。

2.瀏覽器緩存 

瀏覽器緩存可以減少HTTP請求,從而反過來提高網站的加載速度。下面就是如何利用瀏覽器緩存的代碼示例: 
Java代碼 
  1. <IfModule mod_expires.c>  
  2. ExpiresActive On  
  3. ExpiresByType image/jpg "access 1 year"  
  4. ExpiresByType image/jpeg "access 1 year"  
  5. ExpiresByType image/gif "access 1 year"  
  6. ExpiresByType image/png "access 1 year"  
  7. ExpiresByType text/css "access 1 month"  
  8. ExpiresByType text/html "access 1 month"  
  9. ExpiresByType application/pdf "access 1 month"  
  10. ExpiresByType text/x-javascript "access 1 month"  
  11. ExpiresByType application/x-shockwave-flash "access 1 month"  
  12. ExpiresByType image/x-icon "access 1 year"  
  13. ExpiresDefault "access 1 month"  
  14. </IfModule>  

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

3.gzip壓縮 

gzip壓縮是一個壓縮實用程序,我們可以用它來快速加載網站。它的工作原理是在發送HTML和CSS文件到互聯網瀏覽器之前,先壓縮文件大小。允許mod_defalte模塊啓用Gzip壓縮,下面是如何使用它的代碼示例: 
Java代碼 
  1. <IfModule mod_deflate.c>  
  2. # Compress HTML, CSS, JavaScript, Text, XML  
  3. AddOutputFilterByType DEFLATE application/javascript  
  4. AddOutputFilterByType DEFLATE application/xhtml+xml  
  5. AddOutputFilterByType DEFLATE application/xml  
  6. AddOutputFilterByType DEFLATE text/css  
  7. AddOutputFilterByType DEFLATE text/html  
  8. AddOutputFilterByType DEFLATE text/javascript  
  9. AddOutputFilterByType DEFLATE text/plain  
  10. AddOutputFilterByType DEFLATE text/xml  
  11. # Remove browser bugs (only needed for really old browsers)  
  12. BrowserMatch ^Mozilla/4 gzip-only-text/html  
  13. BrowserMatch ^Mozilla/4\.0[678] no-gzip  
  14. BrowserMatch \bMSIE !no-gzip !gzip-only-text/html  
  15. Header append Vary User-Agent  
  16. </IfModule>  

4.異步腳本 

還有一個可以提高網站頁面速度的超棒選擇就是異步加載腳本。如此一來網頁負載就並不必依賴於這些異步腳本,網站訪問者也不再需要不得不按捺下性子,等待所有的腳本加載完之後才能呈現頁面。在異步模式中,腳本是在後臺下載的。通常,我們會將第三方腳本作爲異步腳本,因爲下載這些腳本時常會讓網站速度變得非常慢。
Css代碼 
  1. <script async src="http://www.yoursite.com/script.js"></script>  

5.內容分發網絡(CDN) 

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

6.優化JavaScript、HTML和CSS 

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


7.置於頂部的樣式表和底部的腳本 

將樣式表放在頂部有助網站的迅速加載,因爲這樣可以使得網頁漸進式呈現。一般地,所有的互聯網瀏覽器都支持在給定時間內並行下載兩個組件(圖像、樣式和腳本)。但是通常而言,霸道的腳本會在並行下載時會阻止其他的下載,直到腳本下載完畢。 
8.避免阻塞型的JavaScript和CSS 

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

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

9.JavaScript的延遲解析 

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

10.啓用Keep Alive 

當用戶通過瀏覽器請求網頁時,瀏覽器首先需要訪問HTML文件。然後它才能讀取這些文件,並請求與其他資料相關聯(此處的資料可以是CSS,JavaScript,也可以是任何相關的圖像)。 

如果“Keep Alive”選項被禁止,那麼下載網站的進程通常就會增加,從而拖累了網站速度。啓用KeepAlive的另一個好處是,它可以減少CPU的使用。 
引用
語法: KeepAlive On

11.圖像和文件格式 

圖像對於任何網站都非常有價值,因爲它能傳達一些強有力的信息給網站的訪問者。最常見的圖像格式是GIF、JPEG、PNG等。每種格式都有其長處和侷限。建議使用JPEG格式,而不是GIF和PNG圖像,除非圖像包含Alpha因子或者是透明的。 
12.優化代碼:不使用內聯CSS 

內聯了樣式就不能清清楚楚地將內容從設計中剝離開來。同時可能還會需要大量的維護工作,給網站管理員帶來各種不便,還會進一步增加網頁的大小。 

13.文件分離 

網站的文件可以分爲CSS、JavaScripts和圖像。文件分離雖然並不能直接改善網站的加載時間。但是,這麼做可以提高服務器的穩定性,特別是當網站流量突然出現了尖峯的時候。子域也可以用於託管文件,這樣可以增加並行下載的數量。 

14.儘量減少HTTP請求 

還有一種簡單的優化網頁速度的方法是,減少HTTP請求。當一個網站一下子收到太多的HTTP請求,它的訪客就會有響應時間延遲的體驗,這不僅增加了CPU使用率也增加了頁面的加載時間。那麼,又該如何減少HTTP請求?請見以下步驟。 

  • 減少網站上的對象數量;
  • 最小化網站上的重定向數量;
  • 使用CSS Sprites技術(只要你需要的那部分圖片內容);
  • 結合JavaScripts和CSS。

上述建議已被證明在優化網站的頁面加載速度上非常有效。總之,炫彩奪目的圖形,有趣的內容和更好的導航可以幫助你獲得更多的網站訪問者,但更快的網頁加載速度則能幫助你留住他們。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章