中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

三十二種提高網(wǎng)頁加載速度的方法和技巧

2016-03-14    分類: 網(wǎng)站建設(shè)

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

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

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

  二、不要使布局超載

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

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

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

  四、檢查cookie使用情況

  設(shè)置一個較早的 expire 日期或者根本不設(shè)置 expire 日期,會縮短響應(yīng)時間。要在 PHP 語言中設(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(僅在真正必要時才使用)并優(yōu)化腳本的大小和速度??s短 JavaScript 下載時間的另一種方式是使用外部文件,而不是包含腳本內(nèi)聯(lián)。這種方法也適用于 CSS,因?yàn)闉g覽器會緩存外部化的文本,而(在 HTML 頁面自身中)以內(nèi)聯(lián)方式編碼的 CSS 或 JavaScript 每次都會隨 HTML 一起加載。

  六、盡可能避免使用表格

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

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

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

  八、合并Js文件和CSS

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

  九、壓縮和縮小 JavaScript 文件

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

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

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

  AddOutputFilterByType DEFLATE text/html text/plain text/xml

  另外,考慮一下您想要壓縮的內(nèi)容。圖像、音樂和視頻在創(chuàng)建時已經(jīng)進(jìn)行了壓縮,因此您可以將壓縮對象限制為 HTML、CSS 和 JavaScript 文件。另一種減少壓縮工作的技巧是使用小寫形式的

元素和類名。由于大小寫敏感性,并且使用的是無損壓縮,
不同,它們被壓縮為兩個不同的標(biāo)記。

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

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

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

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

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

  一種提升頁面下載速度的潛在方式是將腳本放在頁面的底部,使頁面加載更迅速。通常,瀏覽器只能(從同一個域)下載不超過兩個并行對象,如果一個對象是一段 JavaScript 代碼,那么在該腳本下載完之前,其他頁面組件的下載將會暫停。如果將 JavaScript 代碼放在頁面底部,(在大多數(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)證一個函數(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)都支持它。

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

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

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

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

  十八、對資產(chǎn)使用多個域來增加連接

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

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

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

  二十、使用 PNG 格式的圖像

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

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

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

  二十二、進(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ù)器之間沒有必要通信時),處理速度將更快。當(dāng)然,還有大量 Ajax 優(yōu)化技術(shù),本教程無法一一列出。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

當(dāng)前文章:三十二種提高網(wǎng)頁加載速度的方法和技巧
文章出自:http://m.rwnh.cn/news/34258.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)靜態(tài)網(wǎng)站、商城網(wǎng)站Google、定制網(wǎng)站定制開發(fā)

廣告

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

景谷| 新竹市| 惠东县| 金门县| 天柱县| 金堂县| 神木县| 玉环县| 丰台区| 西乌| 长白| 林周县| 平昌县| 阜城县| 霍城县| 利川市| 朝阳县| 循化| 张掖市| 北辰区| 太谷县| 疏附县| 宁武县| 新安县| 德格县| 阳江市| 甘南县| 阿坝| 墨竹工卡县| 宁波市| 比如县| 新疆| 青冈县| 无极县| 清水河县| 南澳县| 通化县| 武川县| 禄丰县| 广元市| 黑龙江省|