提高網(wǎng)頁加載速度的一些方法和技巧

時(shí)間：2022-05-29 06:15:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 06:15:01 來源：網(wǎng)絡(luò)營銷

網(wǎng)頁的加載速度是評(píng)估網(wǎng)站質(zhì)量一個(gè)重要指標(biāo)，原因在于大多數(shù)用戶能夠容忍的網(wǎng)頁加載時(shí)間只有幾秒，如果超出了訪客的忍受范圍他們會(huì)毫不留情地關(guān)掉你的網(wǎng)頁，所以網(wǎng)頁載入速度會(huì)極大地影響網(wǎng)站的流量和訪問。

我們?cè)谠L問一些網(wǎng)站時(shí)，總是感覺頁面加載的速度不夠快，這是什么原因?qū)е碌哪?？作為網(wǎng)站的開發(fā)者又能做哪些網(wǎng)站優(yōu)化來提高頁面的加載速度呢？

以下億企邦總結(jié)了幾種可以明顯提高網(wǎng)站加載速度的初步簡單技巧方式，如果你的網(wǎng)站存在載入速度慢的問題不妨以此為參考對(duì)網(wǎng)頁做些初步優(yōu)化。

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

可擴(kuò)展 HTML (XHTML) 具有許多優(yōu)勢(shì)，但是其缺點(diǎn)也很明顯。XHTML 可能使您的頁面更加符合標(biāo)準(zhǔn)，但是它大量使用標(biāo)記（強(qiáng)制性的 <start> 和 <end> 標(biāo)記），這意味著瀏覽器要下載更多代碼。

所以，事情都有兩面性，嘗試在您的網(wǎng)頁中使用較少的XHTML代碼，以減小頁面大小。

如果您確實(shí)不得不使用XHTML，試著盡可能對(duì)它進(jìn)行優(yōu)化。

2、不要使布局超載

堅(jiān)持簡約原則：少即是多。頁面中充斥著各種類型的圖像、視頻、廣告等，這大大違背實(shí)用性原則（具體可查看億企邦《提高網(wǎng)站速度的6種網(wǎng)站前端優(yōu)化方法》的相關(guān)介紹）。

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

使用圖像表示文本的最常見示例就是在導(dǎo)航欄中，美觀的按鈕更加具有吸引力，但是它們的加載速度很慢。

此外，圖像仍然不能由搜索引擎直接索引，因此，使用圖像進(jìn)行導(dǎo)航不利于搜索引擎優(yōu)化，當(dāng)無需圖像就可以通過大量 CSS 技巧創(chuàng)建漂亮的按鈕時(shí)，絕不使用圖像來表示文本。

4、檢查cookie使用情況

設(shè)置一個(gè)較早的 expire 日期或者根本不設(shè)置 expire 日期，會(huì)縮短響應(yīng)時(shí)間。

要在 PHP 語言中設(shè)置 cookie 的 expire 日期，使用以下代碼：

<?php
$expire = 2592000 + time();
// Add 30 day’s to the current time
setcookie(userid, “123rrw3”, $expire);
?>

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

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

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

6、盡可能避免使用表格

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

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

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

8、一些優(yōu)化網(wǎng)頁的技巧

可以使用許多方法來優(yōu)化您的網(wǎng)頁，包括壓縮JavaScript文件，使用超文本傳輸協(xié)議（Hypertext Transfer Protocol，HTTP）壓縮，以及設(shè)置圖像大小。

例如：訪客點(diǎn)擊訪問這樣一個(gè)目錄地址：http://www.mahaixiang.cn/SEO/，去打開這個(gè)目錄下的index.html文檔，當(dāng)服務(wù)器收到請(qǐng)求后它需要消耗一些時(shí)間來分析這是一個(gè)文件還是一個(gè)目錄，但是如果我們?cè)谧詈蠹由弦粋€(gè)斜杠（/），服務(wù)器就知道你是在訪問一個(gè)目錄地址，然后就直接加載默認(rèn)文檔index.html或index.php就行了，這樣服務(wù)器就不用花時(shí)間來分析這個(gè)地址，也起到了一定加速的作用（更多的技巧，可查看億企邦《提升網(wǎng)站頁面打開速度的12個(gè)建議》的相關(guān)介紹）。

9、壓縮和縮小JavaScript文件

您可以使用 GNU zip (gzip) 來完成此任務(wù)，因?yàn)樵S多瀏覽器都支持這種壓縮算法。

另一種替代方法是縮小文件，這種方法刪除代碼中所有不必要的字符，比如制表符（tab）、新行和空格，它刪除代碼中的注釋和空白，進(jìn)一步縮小文件大小。外部和內(nèi)部樣式表都可以縮小。兩種最流行的縮小工具是 JSMin 和 YUI Compressor。

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

可以使用HTTP壓縮來減少服務(wù)器與瀏覽器之間的通信量，可以在Apache中配置HTTP壓縮（.htaccess 文件），或者可以將其包含到頁面中（對(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)容。圖像、音樂和視頻在創(chuàng)建時(shí)已經(jīng)進(jìn)行了壓縮，因此您可以將壓縮對(duì)象限制為 HTML、CSS 和 JavaScript 文件。

另一種減少壓縮工作的技巧是使用小寫形式的 <div> 元素和類名，由于大小寫敏感性，并且使用的是無損壓縮，<header> 與 <Header> 不同，它們被壓縮為兩個(gè)不同的標(biāo)記。

11、設(shè)置圖像大小

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

你會(huì)給每個(gè)圖片加上height和width屬性嗎？這兩個(gè)屬性可以讓瀏覽器在加載圖片之前就知道圖片的長和寬，并預(yù)留出指定的長寬待圖片加載后顯示，如果沒有這兩個(gè)屬性，瀏覽器還需要在讀取圖片成功后再處理一次頁面布局樣式，這無疑減慢了網(wǎng)頁加載速度，所以在固定圖片大小的情況下最好都使用上長和寬屬性。

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

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

13、盡可能延遲腳本加載

一種提升頁面下載速度的潛在方式是將腳本放在頁面的底部，使頁面加載更迅速。

通常，瀏覽器只能（從同一個(gè)域）下載不超過兩個(gè)并行對(duì)象，如果一個(gè)對(duì)象是一段 JavaScript 代碼，那么在該腳本下載完之前，其他頁面組件的下載將會(huì)暫停。

如果將 JavaScript 代碼放在頁面底部，（在大多數(shù)情況下）它將在最后下載，這時(shí)所有其他組件都已下載完。

14、按需加載 JavaScript 文件

要按需加載 JavaScript，使用 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);
}

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

也可以驗(yàn)證一個(gè)函數(shù)是否被加載，如果沒有，加載 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）都支持它。

16、優(yōu)化 CSS 文件

DIV+CSS是現(xiàn)在流利的網(wǎng)頁布局方式，DIV定義了元素，CSS控制顯示效果，所以往往我們會(huì)把CSS寫到另外一個(gè)或多個(gè)外部鏈接CSS文件中，并且CSS文件代碼也有很多行，我們可以使用一些CSS壓縮工具來刪除CSS文件中不必要的多余內(nèi)容，如重復(fù)定義樣式、空格等來瘦身。

據(jù)億企邦的經(jīng)驗(yàn)來說，如果經(jīng)過適當(dāng)優(yōu)化和維護(hù)，CSS 文件不一定很大。例如，具有很多獨(dú)立類的 CSS 文件會(huì)影響下載速度，與 JavaScript 文件一樣，您需要優(yōu)化 CSS 文件，使其包含所需的所有內(nèi)容，同時(shí)保持合理的大?。ǜ嗟募记煽刹榭磧|企邦《網(wǎng)站CSS代碼優(yōu)化的7個(gè)原則》的相關(guān)介紹）。

另外，使用外部文件代替內(nèi)聯(lián)定義來適應(yīng)瀏覽器的緩存機(jī)制。

17、使用內(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ù)器的加載速度如何，其響應(yīng)速度都比小型的超載服務(wù)器快。

18、對(duì)資產(chǎn)使用多個(gè)域來增加連接

CDN 的另一個(gè)優(yōu)勢(shì)是它們是獨(dú)立的域，因?yàn)槟臑g覽器將并發(fā)連接的數(shù)量限制到一個(gè)單一的域，因此無論何時(shí)加載一個(gè)頁面，都很容易占滿所有線程。因此，到其他資產(chǎn)的連接被延遲了。

然而，您的瀏覽器能夠打開新線程或到其他域的連接，這樣，從另一個(gè)域加載的任何資產(chǎn)都可以與其他所有資產(chǎn)同時(shí)加載。

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

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

20、使用 PNG 格式的圖像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 圖像格式都已過時(shí)了：Portable Network Graphic (PNG) 是未來流行的格式。當(dāng)然，您可以說 GIF 和 JPEG 已經(jīng)消亡，或者 PNG 沒有任何缺陷，但是所有事物都有各自的優(yōu)缺點(diǎn)，PNG以最佳的文件大小提供了出色的質(zhì)量，因此，如果進(jìn)行選擇的話，應(yīng)該盡可能使用 PNG 圖像（想用其他格式的站長，可查看億企邦《JPG、PNG和GIF圖片的基本原理及優(yōu)化方法》的相關(guān)介紹）。

21、保持 Ajax 調(diào)用簡短、準(zhǔn)確

當(dāng)統(tǒng)稱為 Asynchronous JavaScript + XML (Ajax) 的技術(shù)在兩年前出現(xiàn)時(shí)，這些技術(shù)為處理頁面請(qǐng)求和響應(yīng)提供了一種革命性方法。

然而，撥號(hào)用戶可能從來沒機(jī)會(huì)體驗(yàn)其真正的優(yōu)勢(shì)，因?yàn)樵谠S多情形下，Ajax 需要在瀏覽器與服務(wù)器之間大量通信，因此，如果您能夠保持 Ajax 調(diào)用簡短和準(zhǔn)確，可以避免用戶花費(fèi)無止盡的時(shí)間來等待元素刷新或響應(yīng)。

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

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

23、在沙箱中測試代碼

還有一個(gè)經(jīng)常被遺忘的常用技巧，盡管清醒的 Web 開發(fā)人員通常會(huì)在啟動(dòng)應(yīng)用程序之前對(duì)其進(jìn)行測試，但是有時(shí)候測試會(huì)使他們不那么重視維護(hù)任務(wù)，或者新功能添加得太快，并且未經(jīng)過充分考慮或測試，結(jié)果，余下的腳本減緩了應(yīng)用程序的速度。

如果您添加一項(xiàng)新功能，可以首先在沙箱里（完全脫離了應(yīng)用程序的其余部分）進(jìn)行測試，查看它作為單個(gè)函數(shù)的行為。通過這種方式，您可以反復(fù)檢查，并分析性能和響應(yīng)時(shí)間，無需考慮 Web 應(yīng)用程序的其余部分。

然后，當(dāng)新功能的行為符合預(yù)期時(shí)，可以將其引入到應(yīng)用程序的其余部分中，運(yùn)行其他測試，保證功能本身的行為符合預(yù)期。

24、分析站點(diǎn)代碼

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

25、檢查孤立的文件和丟失的圖像

檢查孤立的文件和丟失的圖像是一種明智之舉，大部分 Web 開發(fā)人員都會(huì)檢查錯(cuò)誤的文件引用，但是這里仍然需要說明一下，丟失的文件容易引起各種問題，因?yàn)樗鼈儠?huì)導(dǎo)致“The image/page cannot be displayed”之類的錯(cuò)誤消息。

但是在網(wǎng)頁速度優(yōu)化方面，它們具有更大的缺陷：當(dāng)瀏覽器尋找丟失的或孤立的文件時(shí)，它會(huì)消耗資源，這不可避免地會(huì)導(dǎo)致頁面處理速度變慢。因此，請(qǐng)檢查孤立或丟失的文件，包括拼寫錯(cuò)誤的文件名。

26、優(yōu)化圖像

圖像能吸引訪客的注意，但是每一張圖片都需要從服務(wù)器下載到訪客的電腦中，這無疑增加了頁面的加載時(shí)間（具體可查看億企邦《實(shí)現(xiàn)網(wǎng)頁圖片預(yù)加載效果的3種技術(shù)方法》的相關(guān)介紹）。

因此，必須優(yōu)化圖像，優(yōu)化方法包括適當(dāng)減小圖片尺寸，降低圖片的顏色深度。

27、去掉不必要的插件

一些免費(fèi)的插件能夠增強(qiáng)網(wǎng)頁的功能，但是如果添加了過多的插件，就會(huì)增加服務(wù)器的負(fù)擔(dān)和頁面加載時(shí)間。

在構(gòu)建頁面時(shí)，去掉不必要的插件，用一些內(nèi)置的功能來代替插件。

28、減少DNS查詢

DNS查詢需要花費(fèi)較長時(shí)間來返回IP地址，而瀏覽器在查詢結(jié)果返回之前不會(huì)做任何操作，具有多種網(wǎng)絡(luò)元素的頁面，需要進(jìn)行多次的DNS查詢，花費(fèi)的時(shí)間更長。

對(duì)此，億企邦的建議是減少不同域名的數(shù)量，就會(huì)減少DNS的查詢，從而加速頁面加載速度。

29、減少使用重定向

重定向增加了額外的HTTP請(qǐng)求，甚至有時(shí)候鏈向多個(gè)域名或是不存在的頁面，大大的增減了延遲時(shí)間，因此要減少重定向。

30、使用內(nèi)容分發(fā)網(wǎng)絡(luò)CDN

服務(wù)器在處理大流量的數(shù)據(jù)是十分困難的，這最終導(dǎo)致頁面加載速度變慢。CDN是位于全球不同地方的高性能網(wǎng)絡(luò)服務(wù)，它會(huì)復(fù)制你網(wǎng)站的靜態(tài)資源，并以最有效的方式來為訪客服務(wù)，使用CDN，可以提升頁面的加載速度。

31、把CSS文件放在頁面頭部，JS文件放在底部

把CSS文件放在頭部可以禁止逐步渲染，節(jié)省瀏覽器加載和重繪頁面元素的資源，把JS文件放在頁面底部可以避免代碼執(zhí)行前的等待時(shí)間，從而提升頁面的加載速度。

32、利用瀏覽器緩存

瀏覽器緩存是允許訪客的瀏覽器緩存你網(wǎng)站頁面副本的一個(gè)功能，訪客再次訪問時(shí)，直接從緩存中讀取內(nèi)容而不需要重新加載，優(yōu)化網(wǎng)站的緩存系統(tǒng)會(huì)降低網(wǎng)站的帶寬和托管費(fèi)用。

33、使用CSS Sprites整合圖像

圖像始終是網(wǎng)站優(yōu)化時(shí)的頑疾，可以使用CSS Sprites來整合多個(gè)圖像到幾個(gè)輸出文件，從而減少下載資源的往返次數(shù)和延遲，從而提高頁面的加載速度。

34、壓縮整合CSS、JS文件減少HTTP請(qǐng)求次數(shù)

壓縮會(huì)移除一些不必要的字符，從而幫助減少文件大小和網(wǎng)頁后續(xù)的加載時(shí)間。

現(xiàn)在的網(wǎng)頁都有多個(gè)圖片、CSS外部文件鏈接、Javascript外部腳本鏈接，所以當(dāng)訪問一個(gè)網(wǎng)頁時(shí)瀏覽器需要多次向服務(wù)器請(qǐng)求這些文件，在請(qǐng)求和加載之間會(huì)產(chǎn)生不少的時(shí)間差，特別是一些網(wǎng)頁上有多個(gè)小圖片、圖標(biāo)按鈕的網(wǎng)頁，有多少圖片，瀏覽器就需要請(qǐng)求多少將這些小文件，多將請(qǐng)求這些小圖片文件將明顯影響網(wǎng)頁的加載速度。

所以，我們應(yīng)該盡可能將小圖片拼合一個(gè)PNG大圖片上，然后通過坐標(biāo)來顯示圖標(biāo)，一次請(qǐng)求一個(gè)大圖片比多次請(qǐng)求小圖片速度要快不少。

同樣，最好將CSS和Javascript盡可能地整合到一個(gè)文件中都有助于加快網(wǎng)頁載入速度。

35、啟用GZIP壓縮

在服務(wù)器上壓縮網(wǎng)站的頁面能很好地提升網(wǎng)站訪問速度，GZIP可以幫我們完成壓縮必要資源，從而給用戶發(fā)送最小的HTML文件和CSS/JS等資源。

36、服務(wù)器抗壓能力

服務(wù)器抗壓能力通常指的是服務(wù)器所能承受的最大訪問人數(shù)，這是一個(gè)硬件指標(biāo)，不過也可以通過對(duì)軟件和頁面的優(yōu)化來提高服務(wù)器的抗壓能力。

這里的服務(wù)器主要包括兩項(xiàng)，一個(gè)是http的服務(wù)器（apache或者iis），還有一個(gè)是數(shù)據(jù)庫服務(wù)器。

這是所說的優(yōu)化主要是有效減少服務(wù)器的連接數(shù)、提高程序執(zhí)行效率，比如靜態(tài)化頁面或者使用緩存可以減少數(shù)據(jù)庫的壓力，減少頁面連接數(shù)可以減少http服務(wù)器的壓力等，還可以通過安裝一些軟件或者模塊來達(dá)到這個(gè)目的，比如zend的php加速引擎，以及apc等。

億企邦點(diǎn)評(píng)：

許多研究發(fā)現(xiàn)，頁面速度和訪客的滯留時(shí)間，跳出率以及收入都有直接的關(guān)系。另外，谷歌的排名算法中也把頁面加載速度作為其中一項(xiàng)考慮因素，因此，你網(wǎng)站的頁面加載時(shí)間是至關(guān)重要的，從訪問者的角度看，測試你的瀏覽器速度的一個(gè)很好的方法是清除你的瀏覽器緩存，然后加載頁面。