您希望加快網頁的加載速度嗎？了解如何通過縮短加載時間來改善用戶的瀏覽體驗？用戶最滿意的打開網頁時間是2-5秒，如果等待超過10秒，99%的用戶會關閉這個網頁。什么原因會導致網站打開慢，網站速度慢的原因是什么？下面的方法在某些情形下，加載時間最多可縮短80%。下面就介紹提高網頁加載速度的方法和技巧。

　　一、使用良好的結構

　　可擴展 HTML(XHTML)具有許多優勢，但是其缺點也很明顯。XHTML 可能使您的頁面更加符合標準，但是它大量使用標記（強制性的 <start>和 <end>標記），這意味著瀏覽器要下載更多代碼。所以，事情都有兩面性，嘗試在您的網頁中使用較少的XHTML代碼，以減小頁面大小。如果您確實不得不使用XHTML，試著盡可能對它進行優化。

　　二、不要使布局超載

　　堅持簡約原則：少即是多。頁面中充斥著各種類型的圖像、視頻、廣告等，這大大違背實用性原則。

　　三、不要使用圖像來表示文本

　　使用圖像表示文本的最常見示例就是在導航欄中。美觀的按鈕更加具有吸引力，但是它們的加載速度很慢。此外，圖像仍然不能由搜索引擎直接索引，因此，使用圖像進行導航不利于搜索引擎優化（search engine optimization，SEO）。當無需圖像就可以通過大量 CSS 技巧創建漂亮的按鈕時，絕不使用圖像來表示文本。

　　四、檢查cookie使用情況

　　設置一個較早的 expire 日期或者根本不設置 expire 日期，會縮短響應時間。要在 PHP 語言中設置 cookie 的 expire 日期，使用以下代碼：

　　$expire = 2592000 + time();

　　// Add 30 day’s to the current time

　　setcookie(userid, “123rrw3”, $expire);

　　這段代碼設置 cookie userid，并將 expire 日期設置為自當前日期之后 30 天。

　　五、不要包含不必要的 JavaScript 代碼，盡可能將其外部化

　　應該明智地使用 JavaScript（僅在真正必要時才使用）并優化腳本的大小和速度。縮短 JavaScript 下載時間的另一種方式是使用外部文件，而不是包含腳本內聯。這種方法也適用于 CSS，因為瀏覽器會緩存外部化的文本，而（在 HTML 頁面自身中）以內聯方式編碼的 CSS 或 JavaScript 每次都會隨 HTML 一起加載。

　　六、盡可能避免使用表格

　　表格被用作網頁的主要構建塊，但是作為頁面布局元素，使用表格現在被認為是糟糕的做法。有時候，您必須使用表格（并且它們被認為是顯示表格數據的出色實踐）。如果是這樣，明確地指定表格單元格、行和列的寬度和高度，否則，瀏覽器必須執行許多操作來計算如何顯示它們，這會降低頁面加載速度。

　　七、刪除任何不必要的元素

　　可能這是所有技巧中最顯而易見的一個，但是它也是最容易忘記的一個技巧。如果您真正需要在網頁上放置許多內容，考慮將網頁分為 2 個、3 個或更多的獨立頁面。

　　八、合并Js文件和CSS

　　將JS代碼和CSS樣式分別合并到一個共享的文件，這樣不僅能簡化代碼，而且在執行JS文件的時候，如果JS文件比較多，就需要進行多次“Get”請求，延長加載速度，將JS文件合并在一起后，自然就減少了Get請求次數，提高了加載速度。

　　九、壓縮和縮小 JavaScript 文件

　　您可以使用 GNU zip (gzip) 來完成此任務，因為許多瀏覽器都支持這種壓縮算法。另一種替代方法是縮小文件。這種方法刪除代碼中所有不必要的字符，比如制表符（tab）、新行和空格。它刪除代碼中的注釋和空白，進一步縮小文件大小。外部和內部樣式表都可以縮小。兩種最流行的縮小工具是 JSMin 和 YUI Compressor。

　　十、使用 HTTP 壓縮，并始終使用小寫的 div 和類名

　　可以使用 HTTP 壓縮來減少服務器與瀏覽器之間的通信量。可以在 Apache 中配置 HTTP 壓縮（.htaccess 文件），或者可以將其包含到頁面中（對于 PHP，可以使用一個 HTTP_ACCEPT_ENCODING 選項）。但是請注意：不是所有瀏覽器都支持壓縮。即使是支持壓縮的瀏覽器，壓縮和解壓縮都會加重處理器的負載。要在 Apache 中啟用地毯式（blanket）壓縮（即壓縮所有文本和 HTML），使用以下命令：

　　AddOutputFilterByType DEFLATE text/html text/plain text/xml

　　另外，考慮一下您想要壓縮的內容。圖像、音樂和視頻在創建時已經進行了壓縮，因此您可以將壓縮對象限制為 HTML、CSS 和 JavaScript 文件。另一種減少壓縮工作的技巧是使用小寫形式的 <div> 元素和類名。由于大小寫敏感性，并且使用的是無損壓縮，<header> 與 <Header> 不同，它們被壓縮為兩個不同的標記。

　　十一、設置圖像大小

　　與表格單元格、行和列一樣，當您未明確設置圖像大小時，瀏覽器需要執行計算來顯示圖像，這會降低處理速度。

　　十二、將 CSS 圖像映射用于裝飾功能

　　使用圖像映射代替多個圖像，這是另一種縮短加載時間的方式，因為同時下載圖像的各個獨立部分能夠加快整個頁面的下載進度。或者，您可以使用某種名為 CSS sprites 的工具。CSS sprites 可幫助減少 HTTP 請求的數量。一個圖像可以包含裝飾或布置頁面所需的所有圖像元素。您使用 CSS 來選擇（通過調用某些位置和維度）用于特定元素的映射。

　　十三、盡可能延遲腳本加載

　　一種提升頁面下載速度的潛在方式是將腳本放在頁面的底部，使頁面加載更迅速。通常，瀏覽器只能（從同一個域）下載不超過兩個并行對象，如果一個對象是一段 JavaScript 代碼，那么在該腳本下載完之前，其他頁面組件的下載將會暫停。如果將 JavaScript 代碼放在頁面底部，（在大多數情況下）它將在最后下載，這時所有其他組件都已下載完。

　　十四、按需加載 JavaScript 文件

　　要按需加載 JavaScript，使用 import() 函數。

　　import() 函數：

　　function $import(src){

　　var scriptElem = document.createElement('script');

　　scriptElem.setAttribute('src',src);

　　scriptElem.setAttribute('type','text/javascript');

　　document.getElementsByTagName('head')[0].appendChild(scriptElem);

　　}

　　// import with a random query parameter to avoid caching

　　function $importNoCache(src){

　　var ms = new Date().getTime().toString();

　　var seed = "?" + ms;

　　$import(src + seed);

　　}

　　十五、驗證函數加載

　　也可以驗證一個函數是否被加載，如果沒有，加載 JavaScript 文件。

　　驗證函數是否被加載：

　　if (myfunction){

　　// The function has been loaded

　　}

　　else{ // Function has not been loaded yet, so load the javascript.

　　$import('http://www.yourfastsite.com/myfile.js');

　　}

　　注意：可以使用 defer 屬性，但不是所有瀏覽器（包括 Firefox）都支持它。

　　十六、優化 CSS 文件

　　如果經過適當優化和維護，CSS 文件不一定很大。例如，具有很多獨立類的 CSS 文件會影響下載速度。與 JavaScript 文件一樣，您需要優化 CSS 文件，使其包含所需的所有內容，同時保持合理的大小。另外，使用外部文件代替內聯定義來適應瀏覽器的緩存機制。

　　十七、使用內容分布網絡

　　內容分布網絡（Content-distribution network，CDN）是另一種縮短下載時間的好方法。當您將靜態圖像放在 Internet 上的許多服務器上時，用戶能夠從離他們最近的服務器下載這些圖像。此外，大多數 CDN 都在快速服務器上運行，因此無論服務器的加載速度如何，其響應速度都比小型的超載服務器快。

　　十八、對資產使用多個域來增加連接

　　CDN 的另一個優勢是它們是獨立的域。因為您的瀏覽器將并發連接的數量限制到一個單一的域，因此無論何時加載一個頁面，都很容易占滿所有線程。因此，到其他資產的連接被延遲了。然而，您的瀏覽器能夠打開新線程或到其他域的連接，這樣，從另一個域加載的任何資產都可以與其他所有資產同時加載。

　　十九、在合適的時候使用 Google Gears

　　使用 Google Gears（參見 參考資料）是避免用戶反復下載同一內容的另一種好方法。Gears 允許用戶離線訪問 Web 應用程序，但是也允許將頁面元素持久化到用戶的計算機上。因此，頻繁加載但未進行更新的內容可以存儲在 Gears 數據庫中，該數據庫是一個 SQLite3 關系數據庫管理系統。對同一內容的所有 next 請求都可以從數據庫（而不是服務器）直接加載。

　　二十、使用 PNG 格式的圖像

　　Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 圖像格式都已過時了：Portable Network Graphic (PNG) 是未來流行的格式。當然，您可以說 GIF 和 JPEG 已經消亡，或者 PNG 沒有任何缺陷，但是所有事物都有各自的優缺點，PNG 以好的文件大小提供了出色的質量。因此，如果進行選擇的話，應該盡可能使用 PNG 圖像。

　　二十一、保持 Ajax 調用簡短、準確

　　當統稱為 Asynchronous JavaScript + XML (Ajax) 的技術在兩年前出現時，這些技術為處理頁面請求和響應提供了一種革命性方法。然而，撥號用戶可能從來沒機會體驗其真正的優勢，因為在許多情形下，Ajax 需要在瀏覽器與服務器之間大量通信。因此，如果您能夠保持 Ajax 調用簡短和準確，可以避免用戶花費無止盡的時間來等待元素刷新或響應。

　　二十二、進行一次較大的 Ajax 調用并在本地處理客戶機數據

　　如果不能進行簡短的 Ajax 調用，或者如果這些調用不能提供期望的結果，可以考慮一種替代方法：進行一次大的 Ajax 調用來獲取所需的一切內容，然后讓客戶機在本地處理數據。通過這種方式，客戶機只需等待一次（獲取傳入的數據），但是在此之后（當瀏覽器與服務器之間沒有必要通信時），處理速度將更快。當然，還有大量 Ajax 優化技術，本教程無法一一列出。

　　二十三、在沙箱中測試代碼

　　還有一個經常被遺忘的常用技巧。盡管清醒的 Web 開發人員通常會在啟動應用程序之前對其進行測試，但是有時候測試會使他們不那么重視維護任務，或者新功能添加得太快，并且未經過充分考慮或測試。結果，余下的腳本減緩了應用程序的速度。如果您添加一項新功能，可以首先在沙箱里（完全脫離了應用程序的其余部分）進行測試，查看它作為單個函數的行為。通過這種方式，您可以反復檢查，并分析性能和響應時間，無需考慮 Web 應用程序的其余部分。然后，當新功能的行為符合預期時，可以將其引入到應用程序的其余部分中，運行其他測試，保證功能本身的行為符合預期。

　　二十四、分析站點代碼

　　在許多場景中，自我反省是一個不錯的建議。幸運的是，在開發過程中，我們可以使用工具來幫助反省，并盡可能客觀地進行實踐。像 JSLint（參見 參考資源）這樣的工具的價值是無法衡量的，盡管其站點宣稱它 “可能令您備受挫折”，因為它向您提供了所有的潛在代碼缺陷，這些缺陷不但使調試更加困難，而且可能導致更長的響應時間。

　　二十五、檢查孤立的文件和丟失的圖像

　　檢查孤立的文件和丟失的圖像是一種明智之舉。大部分 Web 開發人員都會檢查錯誤的文件引用，但是這里仍然需要說明一下。丟失的文件容易引起各種問題，因為它們會導致 “The image/page cannot be displayed” 之類的錯誤消息。但是在網頁速度優化方面，它們具有更大的缺陷：當瀏覽器尋找丟失的或孤立的文件時，它會消耗資源，這不可避免地會導致頁面處理速度變慢。因此，請檢查孤立或丟失的文件，包括拼寫錯誤的文件名。

　　二十六、Sprites圖片技術

　　Spriting是一種網頁圖片應用處理方式，它是將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，然后利用CSS技術展現出來。這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了，可以減少了整個網頁的圖片大小，并且利用CSSSprites能很好地減少網頁的http請求，從而大大的提高頁面的性能。CSSSprites在國內很多人叫css精靈，很早就有了，在很多大型網站都有用到，特別是一些所有頁面都存在的圖標用得比較多，很好的提升加載速度。

　　二十七、延遲顯示可見區域外的內容

　　為了確保用戶可以更快地看見可見區域的網頁可以延遲加載或展現可見區域外的內容，為了避免頁面變形，可以使用占位符標簽制定正確的高度和寬度。比如WP的jQueryImage LazyLoad插件就可以在用戶停留在第一屏的時候，不加載任何第一屏以下的圖片信息，只有當用戶把鼠標往下滾動的時候，這些圖片才開始加載。這樣很明顯提升可見區域的加載速度，提高用戶體驗。

　　二十八、重新布置Call-to-Action按鈕

　　其實這個和上面一條是差不多的，都是從用戶體驗速度著手，跳過了網頁的整體加載速度。速度沒變，只是讓一些行為按鈕提前，Call-to-Action按鈕一般習慣設計在頁面底部，這樣的習慣對于用戶來說并不總是好的，購買用戶需要等到最下面加載出來才能點擊下一步操作。可以調整CTA按鈕的位置或使用滑動的圖片按鈕。很多大型購物網站的加入購物車就是這種類型。

　　二十九、刪除FLASH頁面或減少FLASH使用

　　如果沒有特殊需要和目的盡量不用FLASH，特別對于要做SEO的網站，無論對網站打開速度還是用戶體驗、和搜索引擎的抓取來說都沒有好處，如果確定要使用FLASH頁面，建議在頁面顯示位置放跳過按鈕，為迫不及待想進網站潛在客戶提供進入網站的快速通道。

　　三十、將統計代碼放在頁面底部

　　將統計代碼放在底部的好處在于，如代碼出現不能正常用訪部，不會因而拖延整個網站的打開速度。

　　三十一、多使用靜態頁面

　　有些內容可以靜態化就將其靜態頁面，以減少服務器的負擔。

　　三十二、網址后加斜杠

　　有些網址，比如"www.domain.com/seo"，當服務器收到這樣一個地址請求的時候，它需要花費時間去確定地址的文件類型。如果seo是一個目錄，不妨在網址后多加一個斜杠，讓其變成www.domain.com /seo/，這樣服務器就能清楚知道要訪問該目錄下的index或default文件，節省加載時間。

文章題目：三十二種提高網頁加載速度的方法和技巧
當前鏈接：http://m.newbst.com/news8/34258.html

成都網站建設公司_創新互聯，為您提供網站導航、外貿建站、網站內鏈、手機網站建設、App設計、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯