怎么提升網站頁面打開加載速度優化
一、盡量減少HTTP請求次數
1、合並js文件和css文件
將js代碼和css樣式分別合並到一個共享的文件，這樣不僅能簡化代碼，而且可以減少HTTP請求次數。
2、cssSprites圖片技術
CSS Sprites是減少圖像請求的有效方法。把所有的背景圖像都放到一個圖片文件中，然后通過CSS的background-image和 background-position屬性來顯示圖片的不同部分；
CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合並技術，該方法是將小圖標和背景圖像合並到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
優點：
(1)減少加載網頁圖片時對服務器的請求次數
可以合並多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
(2)提高頁面的加載速度
sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。
由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
(3)減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
缺點：
(1) CSS雪碧的最大問題是內存使用
可以合並多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
(2) 影響瀏覽器的縮放功能
(3) 拼圖維護比較麻煩
(4)使CSS的編寫變得困難
(5) CSS 雪碧調用的圖片不能被打印
CSS 雪碧調用的圖片不能被打印，除非在@media中特別添加 print聲明
(6) 錯誤得使用 Sprites 影響可訪問性
3、不要出現404錯誤
HTTP請求時間消耗是很大的，因此使用HTTP請求來獲得一個沒有用處的響應（例如404沒有找到頁面）是完全沒有必要的，它只會降低用戶體驗而不會有一點好處。
有些站點把404錯誤響應頁面改為“你是不是要找***”，這雖然改進了用戶體驗但是同樣也會浪費服務器資源（如數據庫等）。最糟糕的情況是指向外部 JavaScript的鏈接出現問題並返回404代碼。首先，這種加載會破壞並行加載；其次瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分當作JavaScript代碼來執行。
二、減小文本和圖片的空間
1、壓縮文本和圖片
壓縮技術如gzip【http://www.cnblogs.com/peida/archive/2012/12/06/2804323.html】可以有效減少頁面加載的時間。包括html，xml，json(javascript對象符號)，javascript和css等，壓縮率都可以在大小70%左右。文本壓縮用得比較多，一般直接在空間開啟就行，而圖片的壓縮就比較隨意，很多都是直接上傳，其實還有很大的壓縮空間。
2、圖片格式優化
不恰當的圖像格式是一種極為常見的減慢加載速度的罪魁禍首。正確的圖片格式可以讓圖片縮小數倍，如果保存為最佳格式。可以節省大量帶寬，減少處理時間時間，大大加快頁面加載速度，這是一種很常見的做法。
3、精簡代碼
這個可以說是最直接的一個方法，也是用得比較多的，對網頁代碼進行瘦身，刪除不必要的沉冗代碼，比如不必要的空格、換行符、注釋等，包括js代碼中的無用代碼也需要清除。其中對於注釋代碼的清除可能有些人存在誤區，甚至有的在里面堆砌關鍵詞。
4、減少DOM元素數量
一個復雜的頁面意味着需要下載更多數據，同時也意味着JavaScript遍歷DOM 的效率越慢。比如當你增加一個事件句柄時在500和5000個DOM元素中循環效果肯定是不一樣的。
大量的DOM元素的存在意味着頁面中有可以不用移除內容只需要替換元素標簽就可以精簡的部分。你在頁面布局中使用表格了嗎？你有沒有僅僅為了布局而引入更多的<div>元素呢？也許會存在一個適合或者在語意是更貼切的標簽可以供你使用。
YUI CSS utilities可以給你的布局帶來巨大幫助：grids.css可以幫你實現整體布局，font.css和reset.css可以幫助你移除瀏覽器默認格式。它提供了一個重新審視你頁面中標簽的機會，比如只有在語意上有意義時才使用<div>，而不是因為它具有換行效果才使用它。
DOM元素數量很容易計算出來，只需要在Firebug的控制台內輸入：document.getElementsByTagName_r(’*’).length
那么多少個DOM元素算是多呢？這可以對照有很好標記使用的類似頁面。比如Yahoo!主頁是一個內容非常多的頁面，但是它只使用了700個元素（HTML標簽）。
5、使iframe的數量最小
ifrmae元素可以在父文檔中插入一個新的HTML文檔。了解iframe的工作理然后才能更加有效地使用它，這一點很重要。
<iframe>優點：解決加載緩慢的第三方內容如圖標和廣告等的加載問題 Security sandbox 並行加載腳本
<iframe>的缺點：即時內容為空，加載也需要時間會阻止頁面加載 沒有語意
三、頁面加載順序
1、延遲顯示可見區域外的內容
為了確保用戶可以更快地看見可見區域的網頁可以延遲加載或展現可見區域外的內容，為了避免頁面變形，可以使用占位符標簽制定正確的高度和寬度。比如wp的jqueryimage lazyload插件【http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html】就可以在用戶停留在第一屏的時候，不加載任何第一屏以下的圖片信息，只有當用戶把鼠標往下滾動的時候，這些圖片才開始加載。這樣很明顯提升可見區域的加載速度，提高用戶體驗。
注意事項：需要真正實現圖片延遲加載，必須將真實圖片地址寫在 data-original 屬性中。若 src 與 data-original 相同，則只是一個特效而已，並不達到延遲加載的功能。
2、確保功能圖片優先加載
網站主要考慮可用性的重要性，一個功能按鈕要提前加載出來
3、重新布置call-to-action按鈕
其實這個和上面一條是差不多的，都是從用戶體驗速度着手，跳過了網頁的整體加載速度。速度沒變，只是讓一些行為按鈕提前，call-to-action按鈕一般習慣設計在頁面底部，這樣的習慣對於用戶來說並不總是好的，購買用戶需要等到最下面加載出來才能點擊下一步操作。可以調整cta按鈕的位置。
4、使用 progressive jpegs
progressivejpegs圖片是jpeg格式的一個特殊變種，名為“高級jpeg”。在創建高級jpeg文件時，數據是這樣安排的：在裝入圖像時，開始只顯示一個模糊的圖像，隨着數據的裝入，圖像逐步變得清晰。它相當於交織的gif格式的圖片。高級jpeg主要是考慮到使用調制解調器的慢速網絡而設計的，快速網絡的使用者通常不會體會到它和正常jpeg格式圖片的區別。對於網速比較慢的用戶，這無疑有很好的體驗。
5、延遲加載和執行非必要腳本
網頁中有很多腳本是在頁面完全加載完前都不需要執行的，可以延遲加載和執行非必要腳本。這些腳本可以在onload事件之后執行，避免對網頁上重要內容的呈現造成影響。這些腳本可能是你自己網頁的腳本，往往更多的是一些第三方腳本，這樣的有很多，比如評論、廣告、智能推薦、百度雲圖、分享等等，這些完全可以等主體內容加載完后再執行。如果你有用於實現拖放和動畫的JavaScript，那么它就以等待稍后加載，因為頁面上的拖放元素是在初始化呈現之后才發生的。其它的例如隱藏部分的內容（用戶操作之后才顯現的內容）和處於折疊部分的圖像也可以推遲加載。
6、預加載
預加載和后加載看起來似乎恰恰相反，但實際上預加載是為了實現另外一種目標。預加載是在瀏覽器空閑時請求將來可能會用到的頁面內容（如圖像、樣式表和腳本）。使用這種方法，當用戶要訪問下一個頁面時，頁面中的內容大部分已經加載到緩存中了，因此可以大大改善訪問速度。
下面提供了幾種預加載方法：
無條件加載：觸發onload事件時，直接加載額外的頁面內容。以Google.com為例，你可以看一下它的spirit image圖像是怎樣在onload中加載的。這個spirit image圖像在google.com主頁中是不需要的，但是卻可以在搜索結果頁面中用到它。
有條件加載：根據用戶的操作來有根據地判斷用戶下面可能去往的頁面並相應的預加載頁面內容。在search.yahoo.com中你可以看到如何在你輸入內容時加載額外的頁面內容。
有預期的加載：載入重新設計過的頁面時使用預加載。這種情況經常出現在頁面經過重新設計后用戶抱怨“新的頁面看起來很酷，但是卻比以前慢”。問題可能出在用戶對於你的舊站點建立了完整的緩存，而對於新站點卻沒有任何緩存內容。因此你可以在訪問新站之前就加載一部內容來避免這種結果的出現。在你的舊站中利用瀏覽器的空余時間加載新站中用到的圖像的和腳本來提高訪問速度。
四、可緩存的AJAX
Ajax經常被提及的一個好處就是由於其從后台服務器傳輸信息的異步性而為用戶帶來的反饋的即時性。但是，使用Ajax並不能保證用戶不會在等待異步的 JavaScript和XML響應上花費時間。在很多應用中，用戶是否需要等待響應取決於Ajax如何來使用。例如，在一個基於Web的Email客戶端中，用戶必須等待Ajax返回符合他們條件的郵件查詢結果。記住一點，“異步”並不異味着“即時”，這很重要。為了提高性能，優化Ajax響應是很重要的。提高Ajxa性能的措施中最重要的方法就是使響應具有可緩存性
五、減少DNS查找次數
域名系統（DNS）提供了域名和IP的對應關系，就像電話本中人名和他們的電話號碼的關系一樣。當你在瀏覽器地址欄中輸入http://www.kuqin.com/ 時，DNS解析服務器就會返回這個域名對應的IP地址。DNS解析的過程同樣也是需要時間的。一般情況下返回給定域名對應的IP地址會花費20到120毫秒的時間。而且在這個過程中瀏覽器什么都不會做直到DNS查找完畢。
緩存DNS查找可以改善頁面性能。這種緩存需要一個特定的緩存服務器，這種服務器一般屬於用戶的ISP提供商或者本地局域網控制，但是它同樣會在用戶使用的計算機上產生緩存。DNS信息會保留在操作系統的DNS緩存中（微軟Windows系統中DNS Client Service）。大多數瀏覽器有獨立於操作系統以外的自己的緩存。由於瀏覽器有自己的緩存記錄，因此在一次請求中它不會受到操作系統的影響。
Internet Explorer默認情況下對DNS查找記錄的緩存時間為30分鍾，它在注冊表中的鍵值為DnsCacheTimeout。Firefox對DNS的查找記錄緩存時間為1分鍾，它在配置文件中的選項為network.dnsCacheExpiration（Fasterfox把這個選項改為了1小時）。
當客戶端中的DNS緩存都為空時（瀏覽器和操作系統都為空），DNS查找的次數和頁面中主機名的數量相同。這其中包括頁面中URL、圖片、腳本文件、樣式表、Flash對象等包含的主機名。減少主機名的數量可以減少DNS查找次數。
減少主機名的數量還可以減少頁面中並行下載的數量。減少DNS查找次數可以節省響應時間，但是減少並行下載卻會增加響應時間。我的指導原則是把這些頁面中的內容分割成至少兩部分但不超過四部分。這種結果就是在減少DNS查找次數和保持較高程度並行下載兩者之間的權衡了。