怎麼提高網站頁面打開加載速度優化
1、儘可能減小HTTP請求次數php
1、合併js文件和css文件css
將js代碼和css樣式分別合併到一個共享的文件，這樣不只能簡化代碼，並且能夠減小HTTP請求次數。html
2、cssSprites圖片技術java
CSS Sprites是減小圖像請求的有效方法。把全部的背景圖像都放到一個圖片文件中，而後經過CSS的background-image和 background-position屬性來顯示圖片的不一樣部分；jquery
CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分。CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減小你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。數據庫
優勢：json
(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代碼來執行。
2、減少文本和圖片的空間
一、壓縮文本和圖片
壓縮技術如gzip【http://www.cnblogs.com/peida/archive/2012/12/06/2804323.html】能夠有效減小頁面加載的時間。包括html，xml，json(javascript對象符號)，javascript和css等，壓縮率均可以在大小70%左右。文本壓縮用得比較多，通常直接在空間開啓就行，而圖片的壓縮就比較隨意，不少都是直接上傳，其實還有很大的壓縮空間。
二、圖片格式優化
不恰當的圖像格式是一種極爲常見的減慢加載速度的罪魁禍首。正確的圖片格式可讓圖片縮小數倍，若是保存爲最佳格式。能夠節省大量帶寬，減小處理時間時間，大大加快頁面加載速度，這是一種很常見的作法。
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>的缺點：即時內容爲空，加載也須要時間會阻止頁面加載 沒有語意
3、頁面加載順序
一、延遲顯示可見區域外的內容
爲了確保用戶能夠更快地看見可見區域的網頁能夠延遲加載或展示可見區域外的內容，爲了不頁面變形，可使用佔位符標籤制定正確的高度和寬度。好比wp的jqueryimage lazyload插件【http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html】就能夠在用戶停留在第一屏的時候，不加載任何第一屏如下的圖片信息，只有當用戶把鼠標往下滾動的時候，這些圖片纔開始加載。這樣很明顯提高可見區域的加載速度，提升用戶體驗。
注意事項：須要真正實現圖片延遲加載，必須將真實圖片地址寫在 data-original 屬性中。若 src 與 data-original 相同，則只是一個特效而已，並不達到延遲加載的功能。
二、確保功能圖片優先加載
網站主要考慮可用性的重要性，一個功能按鈕要提早加載出來
三、從新佈置call-to-action按鈕
其實這個和上面一條是差很少的，都是從用戶體驗速度着手，跳過了網頁的總體加載速度。速度沒變，只是讓一些行爲按鈕提早，call-to-action按鈕通常習慣設計在頁面底部，這樣的習慣對於用戶來講並不老是好的，購買用戶須要等到最下面加載出來才能點擊下一步操做。能夠調整cta按鈕的位置。
四、使用 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中你能夠看到如何在你輸入內容時加載額外的頁面內容。
有預期的加載：載入從新設計過的頁面時使用預加載。這種狀況常常出如今頁面通過從新設計後用戶抱怨「新的頁面看起來很酷，可是卻比之前慢」。問題可能出在用戶對於你的舊站點創建了完整的緩存，而對於新站點卻沒有任何緩存內容。所以你能夠在訪問新站以前就加載一部內容來避免這種結果的出現。在你的舊站中利用瀏覽器的空餘時間加載新站中用到的圖像的和腳原本提升訪問速度。
4、可緩存的AJAX
Ajax常常被說起的一個好處就是因爲其從後臺服務器傳輸信息的異步性而爲用戶帶來的反饋的即時性。可是，使用Ajax並不能保證用戶不會在等待異步的 JavaScript和XML響應上花費時間。在不少應用中，用戶是否須要等待響應取決於Ajax如何來使用。例如，在一個基於Web的Email客戶端中，用戶必須等待Ajax返回符合他們條件的郵件查詢結果。記住一點，「異步」並不異味着「即時」，這很重要。爲了提升性能，優化Ajax響應是很重要的。提升Ajxa性能的措施中最重要的方法就是使響應具備可緩存性
5、減小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查找次數和保持較高程度並行下載二者之間的權衡了。