您希望加快網(wǎng)頁(yè)的加載速度嗎？了解如何通過(guò)縮短加載時(shí)間來(lái)改善用戶的瀏覽體驗(yàn)？用戶最滿意的打開(kāi)網(wǎng)頁(yè)時(shí)間是2-5秒，如果等待超過(guò)10秒，99%的用戶會(huì)關(guān)閉這個(gè)網(wǎng)頁(yè)。什么原因會(huì)導(dǎo)致網(wǎng)站打開(kāi)慢，網(wǎng)站速度慢的原因是什么？下面的方法在某些情形下，加載時(shí)間最多可縮短80%。下面就介紹提高網(wǎng)頁(yè)加載速度的方法和技巧。

　　一、使用良好的結(jié)構(gòu)

　　可擴(kuò)展 HTML(XHTML)具有許多優(yōu)勢(shì)，但是其缺點(diǎn)也很明顯。XHTML 可能使您的頁(yè)面更加符合標(biāo)準(zhǔn)，但是它大量使用標(biāo)記（強(qiáng)制性的 <start>和 <end>標(biāo)記），這意味著瀏覽器要下載更多代碼。所以，事情都有兩面性，嘗試在您的網(wǎng)頁(yè)中使用較少的XHTML代碼，以減小頁(yè)面大小。如果您確實(shí)不得不使用XHTML，試著盡可能對(duì)它進(jìn)行優(yōu)化。

　　二、不要使布局超載

　　堅(jiān)持簡(jiǎn)約原則：少即是多。頁(yè)面中充斥著各種類(lèi)型的圖像、視頻、廣告等，這大大違背實(shí)用性原則。

　　三、不要使用圖像來(lái)表示文本

　　使用圖像表示文本的最常見(jiàn)示例就是在導(dǎo)航欄中。美觀的按鈕更加具有吸引力，但是它們的加載速度很慢。此外，圖像仍然不能由搜索引擎直接索引，因此，使用圖像進(jìn)行導(dǎo)航不利于搜索引擎優(yōu)化（search engine optimization，SEO）。當(dāng)無(wú)需圖像就可以通過(guò)大量 CSS 技巧創(chuàng)建漂亮的按鈕時(shí)，絕不使用圖像來(lái)表示文本。

　　四、檢查cookie使用情況

　　設(shè)置一個(gè)較早的 expire 日期或者根本不設(shè)置 expire 日期，會(huì)縮短響應(yīng)時(shí)間。要在 PHP 語(yǔ)言中設(shè)置 cookie 的 expire 日期，使用以下代碼：

　　$expire = 2592000 + time();

　　// Add 30 day’s to the current time

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

　　這段代碼設(shè)置 cookie userid，并將 expire 日期設(shè)置為自當(dāng)前日期之后 30 天。

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

　　應(yīng)該明智地使用 JavaScript（僅在真正必要時(shí)才使用）并優(yōu)化腳本的大小和速度?？s短 JavaScript 下載時(shí)間的另一種方式是使用外部文件，而不是包含腳本內(nèi)聯(lián)。這種方法也適用于 CSS，因?yàn)闉g覽器會(huì)緩存外部化的文本，而（在 HTML 頁(yè)面自身中）以內(nèi)聯(lián)方式編碼的 CSS 或 JavaScript 每次都會(huì)隨 HTML 一起加載。

　　六、盡可能避免使用表格

　　表格被用作網(wǎng)頁(yè)的主要構(gòu)建塊，但是作為頁(yè)面布局元素，使用表格現(xiàn)在被認(rèn)為是糟糕的做法。有時(shí)候，您必須使用表格（并且它們被認(rèn)為是顯示表格數(shù)據(jù)的出色實(shí)踐）。如果是這樣，明確地指定表格單元格、行和列的寬度和高度，否則，瀏覽器必須執(zhí)行許多操作來(lái)計(jì)算如何顯示它們，這會(huì)降低頁(yè)面加載速度。

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

　　可能這是所有技巧中最顯而易見(jiàn)的一個(gè)，但是它也是最容易忘記的一個(gè)技巧。如果您真正需要在網(wǎng)頁(yè)上放置許多內(nèi)容，考慮將網(wǎng)頁(yè)分為 2 個(gè)、3 個(gè)或更多的獨(dú)立頁(yè)面。

　　八、合并Js文件和CSS

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

　　九、壓縮和縮小 JavaScript 文件

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

　　十、使用 HTTP 壓縮，并始終使用小寫(xiě)的 div 和類(lèi)名

　　可以使用 HTTP 壓縮來(lái)減少服務(wù)器與瀏覽器之間的通信量?？梢栽?Apache 中配置 HTTP 壓縮（.htaccess 文件），或者可以將其包含到頁(yè)面中（對(duì)于 PHP，可以使用一個(gè) HTTP_ACCEPT_ENCODING 選項(xiàng)）。但是請(qǐng)注意：不是所有瀏覽器都支持壓縮。即使是支持壓縮的瀏覽器，壓縮和解壓縮都會(huì)加重處理器的負(fù)載。要在 Apache 中啟用地毯式（blanket）壓縮（即壓縮所有文本和 HTML），使用以下命令：

　　AddOutputFilterByType DEFLATE text/html text/plain text/xml

　　另外，考慮一下您想要壓縮的內(nèi)容。圖像、音樂(lè)和視頻在創(chuàng)建時(shí)已經(jīng)進(jìn)行了壓縮，因此您可以將壓縮對(duì)象限制為 HTML、CSS 和 JavaScript 文件。另一種減少壓縮工作的技巧是使用小寫(xiě)形式的 <div> 元素和類(lèi)名。由于大小寫(xiě)敏感性，并且使用的是無(wú)損壓縮，<header> 與 <Header> 不同，它們被壓縮為兩個(gè)不同的標(biāo)記。

　　十一、設(shè)置圖像大小

　　與表格單元格、行和列一樣，當(dāng)您未明確設(shè)置圖像大小時(shí)，瀏覽器需要執(zhí)行計(jì)算來(lái)顯示圖像，這會(huì)降低處理速度。

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

　　使用圖像映射代替多個(gè)圖像，這是另一種縮短加載時(shí)間的方式，因?yàn)橥瑫r(shí)下載圖像的各個(gè)獨(dú)立部分能夠加快整個(gè)頁(yè)面的下載進(jìn)度?；蛘?，您可以使用某種名為 CSS sprites 的工具。CSS sprites 可幫助減少 HTTP 請(qǐng)求的數(shù)量。一個(gè)圖像可以包含裝飾或布置頁(yè)面所需的所有圖像元素。您使用 CSS 來(lái)選擇（通過(guò)調(diào)用某些位置和維度）用于特定元素的映射。

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

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

　　十四、按需加載 JavaScript 文件

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

　　import() 函數(shù)：

　　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);

　　}

　　十五、驗(yàn)證函數(shù)加載

　　也可以驗(yàn)證一個(gè)函數(shù)是否被加載，如果沒(méi)有，加載 JavaScript 文件。

　　驗(yàn)證函數(shù)是否被加載：

　　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）都支持它。

　　十六、優(yōu)化 CSS 文件

　　如果經(jīng)過(guò)適當(dāng)優(yōu)化和維護(hù)，CSS 文件不一定很大。例如，具有很多獨(dú)立類(lèi)的 CSS 文件會(huì)影響下載速度。與 JavaScript 文件一樣，您需要優(yōu)化 CSS 文件，使其包含所需的所有內(nèi)容，同時(shí)保持合理的大小。另外，使用外部文件代替內(nèi)聯(lián)定義來(lái)適應(yīng)瀏覽器的緩存機(jī)制。

　　十七、使用內(nèi)容分布網(wǎng)絡(luò)

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

　　十八、對(duì)資產(chǎn)使用多個(gè)域來(lái)增加連接

　　CDN 的另一個(gè)優(yōu)勢(shì)是它們是獨(dú)立的域。因?yàn)槟臑g覽器將并發(fā)連接的數(shù)量限制到一個(gè)單一的域，因此無(wú)論何時(shí)加載一個(gè)頁(yè)面，都很容易占滿所有線程。因此，到其他資產(chǎn)的連接被延遲了。然而，您的瀏覽器能夠打開(kāi)新線程或到其他域的連接，這樣，從另一個(gè)域加載的任何資產(chǎn)都可以與其他所有資產(chǎn)同時(shí)加載。

　　十九、在合適的時(shí)候使用 Google Gears

　　使用 Google Gears（參見(jiàn) 參考資料）是避免用戶反復(fù)下載同一內(nèi)容的另一種好方法。Gears 允許用戶離線訪問(wèn) Web 應(yīng)用程序，但是也允許將頁(yè)面元素持久化到用戶的計(jì)算機(jī)上。因此，頻繁加載但未進(jìn)行更新的內(nèi)容可以存儲(chǔ)在 Gears 數(shù)據(jù)庫(kù)中，該數(shù)據(jù)庫(kù)是一個(gè) SQLite3 關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng)。對(duì)同一內(nèi)容的所有 next 請(qǐng)求都可以從數(shù)據(jù)庫(kù)（而不是服務(wù)器）直接加載。

　　二十、使用 PNG 格式的圖像

　　Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 圖像格式都已過(guò)時(shí)了：Portable Network Graphic (PNG) 是未來(lái)流行的格式。當(dāng)然，您可以說(shuō) GIF 和 JPEG 已經(jīng)消亡，或者 PNG 沒(méi)有任何缺陷，但是所有事物都有各自的優(yōu)缺點(diǎn)，PNG 以好的文件大小提供了出色的質(zhì)量。因此，如果進(jìn)行選擇的話，應(yīng)該盡可能使用 PNG 圖像。

　　二十一、保持 Ajax 調(diào)用簡(jiǎn)短、準(zhǔn)確

　　當(dāng)統(tǒng)稱(chēng)為 Asynchronous JavaScript + XML (Ajax) 的技術(shù)在兩年前出現(xiàn)時(shí)，這些技術(shù)為處理頁(yè)面請(qǐng)求和響應(yīng)提供了一種革命性方法。然而，撥號(hào)用戶可能從來(lái)沒(méi)機(jī)會(huì)體驗(yàn)其真正的優(yōu)勢(shì)，因?yàn)樵谠S多情形下，Ajax 需要在瀏覽器與服務(wù)器之間大量通信。因此，如果您能夠保持 Ajax 調(diào)用簡(jiǎn)短和準(zhǔn)確，可以避免用戶花費(fèi)無(wú)止盡的時(shí)間來(lái)等待元素刷新或響應(yīng)。

　　二十二、進(jìn)行一次較大的 Ajax 調(diào)用并在本地處理客戶機(jī)數(shù)據(jù)

　　如果不能進(jìn)行簡(jiǎn)短的 Ajax 調(diào)用，或者如果這些調(diào)用不能提供期望的結(jié)果，可以考慮一種替代方法：進(jìn)行一次大的 Ajax 調(diào)用來(lái)獲取所需的一切內(nèi)容，然后讓客戶機(jī)在本地處理數(shù)據(jù)。通過(guò)這種方式，客戶機(jī)只需等待一次（獲取傳入的數(shù)據(jù)），但是在此之后（當(dāng)瀏覽器與服務(wù)器之間沒(méi)有必要通信時(shí)），處理速度將更快。當(dāng)然，還有大量 Ajax 優(yōu)化技術(shù)，本教程無(wú)法一一列出。

　　二十三、在沙箱中測(cè)試代碼

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

　　二十四、分析站點(diǎn)代碼

　　在許多場(chǎng)景中，自我反省是一個(gè)不錯(cuò)的建議。幸運(yùn)的是，在開(kāi)發(fā)過(guò)程中，我們可以使用工具來(lái)幫助反省，并盡可能客觀地進(jìn)行實(shí)踐。像 JSLint（參見(jiàn) 參考資源）這樣的工具的價(jià)值是無(wú)法衡量的，盡管其站點(diǎn)宣稱(chēng)它 “可能令您備受挫折”，因?yàn)樗蚰峁┝怂械臐撛诖a缺陷，這些缺陷不但使調(diào)試更加困難，而且可能導(dǎo)致更長(zhǎng)的響應(yīng)時(shí)間。

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

　　檢查孤立的文件和丟失的圖像是一種明智之舉。大部分 Web 開(kāi)發(fā)人員都會(huì)檢查錯(cuò)誤的文件引用，但是這里仍然需要說(shuō)明一下。丟失的文件容易引起各種問(wèn)題，因?yàn)樗鼈儠?huì)導(dǎo)致 “The image/page cannot be displayed” 之類(lèi)的錯(cuò)誤消息。但是在網(wǎng)頁(yè)速度優(yōu)化方面，它們具有更大的缺陷：當(dāng)瀏覽器尋找丟失的或孤立的文件時(shí)，它會(huì)消耗資源，這不可避免地會(huì)導(dǎo)致頁(yè)面處理速度變慢。因此，請(qǐng)檢查孤立或丟失的文件，包括拼寫(xiě)錯(cuò)誤的文件名。

　　二十六、Sprites圖片技術(shù)

　　Spriting是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式，它是將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，然后利用CSS技術(shù)展現(xiàn)出來(lái)。這樣一來(lái)，當(dāng)訪問(wèn)該頁(yè)面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了，可以減少了整個(gè)網(wǎng)頁(yè)的圖片大小，并且利用CSSSprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能。CSSSprites在國(guó)內(nèi)很多人叫css精靈，很早就有了，在很多大型網(wǎng)站都有用到，特別是一些所有頁(yè)面都存在的圖標(biāo)用得比較多，很好的提升加載速度。

　　二十七、延遲顯示可見(jiàn)區(qū)域外的內(nèi)容

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

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

　　其實(shí)這個(gè)和上面一條是差不多的，都是從用戶體驗(yàn)速度著手，跳過(guò)了網(wǎng)頁(yè)的整體加載速度。速度沒(méi)變，只是讓一些行為按鈕提前，Call-to-Action按鈕一般習(xí)慣設(shè)計(jì)在頁(yè)面底部，這樣的習(xí)慣對(duì)于用戶來(lái)說(shuō)并不總是好的，購(gòu)買(mǎi)用戶需要等到最下面加載出來(lái)才能點(diǎn)擊下一步操作?？梢哉{(diào)整CTA按鈕的位置或使用滑動(dòng)的圖片按鈕。很多大型購(gòu)物網(wǎng)站的加入購(gòu)物車(chē)就是這種類(lèi)型。

　　二十九、刪除FLASH頁(yè)面或減少FLASH使用

　　如果沒(méi)有特殊需要和目的盡量不用FLASH，特別對(duì)于要做SEO的網(wǎng)站，無(wú)論對(duì)網(wǎng)站打開(kāi)速度還是用戶體驗(yàn)、和搜索引擎的抓取來(lái)說(shuō)都沒(méi)有好處，如果確定要使用FLASH頁(yè)面，建議在頁(yè)面顯示位置放跳過(guò)按鈕，為迫不及待想進(jìn)網(wǎng)站潛在客戶提供進(jìn)入網(wǎng)站的快速通道。

　　三十、將統(tǒng)計(jì)代碼放在頁(yè)面底部

　　將統(tǒng)計(jì)代碼放在底部的好處在于，如代碼出現(xiàn)不能正常用訪部，不會(huì)因而拖延整個(gè)網(wǎng)站的打開(kāi)速度。

　　三十一、多使用靜態(tài)頁(yè)面

　　有些內(nèi)容可以靜態(tài)化就將其靜態(tài)頁(yè)面，以減少服務(wù)器的負(fù)擔(dān)。

　　三十二、網(wǎng)址后加斜杠

　　有些網(wǎng)址，比如"www.domain.com/seo"，當(dāng)服務(wù)器收到這樣一個(gè)地址請(qǐng)求的時(shí)候，它需要花費(fèi)時(shí)間去確定地址的文件類(lèi)型。如果seo是一個(gè)目錄，不妨在網(wǎng)址后多加一個(gè)斜杠，讓其變成www.domain.com /seo/，這樣服務(wù)器就能清楚知道要訪問(wèn)該目錄下的index或default文件，節(jié)省加載時(shí)間。

文章題目：三十二種提高網(wǎng)頁(yè)加載速度的方法和技巧
當(dāng)前鏈接：http://www.rwnh.cn/news8/34258.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、外貿(mào)建站、網(wǎng)站內(nèi)鏈、手機(jī)網(wǎng)站建設(shè)、App設(shè)計(jì)、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)