發(fā)表日期:2016年08月19日文章編輯:愷策網(wǎng)優(yōu)瀏覽次數(shù): 標(biāo)簽: 德州營銷型網(wǎng)站
網(wǎng)頁的加載速度是評估網(wǎng)站質(zhì)量一個重要指標(biāo),原因在于大多數(shù)用戶能夠容忍的網(wǎng)頁加載時間只有幾秒,如果超出了訪客的忍受范圍他們會毫不留情地關(guān)掉你的網(wǎng)頁,所以網(wǎng)頁載入速度會極大地影響網(wǎng)站的流量和訪問。
我們在訪問一些網(wǎng)站時,總是感覺頁面加載的速度不夠快,這是什么原因?qū)е碌哪??作為網(wǎng)站的開發(fā)者又能做哪些網(wǎng)站優(yōu)化來提高頁面的加載速度呢?
以下德州網(wǎng)站優(yōu)化服務(wù)商愷策網(wǎng)優(yōu)總結(jié)了幾種可以明顯提高網(wǎng)站加載速度的初步簡單技巧方式,如果你的網(wǎng)站存在載入速度慢的問題不妨以此為參考對網(wǎng)頁做些初步優(yōu)化。
1、使用良好的布局結(jié)構(gòu)
可擴(kuò)展 HTML (XHTML) 具有許多優(yōu)勢,但是其缺點(diǎn)也很明顯。XHTML 可能使您的頁面更加符合標(biāo)準(zhǔn),但是它大量使用標(biāo)記(強(qiáng)制性的 <start> 和 <end> 標(biāo)記),這意味著瀏覽器要下載更多代碼。
所以,事情都有兩面性,嘗試在您的網(wǎng)頁中使用較少的XHTML代碼,以減小頁面大小。
如果您確實(shí)不得不使用XHTML,試著盡可能對它進(jìn)行優(yōu)化。
2、元素不要使布局超載
堅(jiān)持簡約原則:少即是多。頁面中充斥著各種類型的圖像、視頻、廣告等,這大大違背實(shí)用性原則。
3、不要使用圖像來表示和替換文本
使用圖像表示文本的常見示例就是在導(dǎo)航欄中,美觀的按鈕更加具有吸引力,但是它們的加載速度很慢。
此外,圖像仍然不能由搜索引擎直接索引,因此,使用圖像進(jìn)行導(dǎo)航不利于搜索引擎優(yōu)化,當(dāng)無需圖像就可以通過大量 CSS 技巧創(chuàng)建漂亮的按鈕時,絕不使用圖像來表示文本。
4、檢查cookie使用情況
設(shè)置一個較早的 expire 日期或者根本不設(shè)置 expire 日期,會縮短響應(yīng)時間。
要在 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代碼,盡可能將其外部化如獨(dú)立成一個.js文件
應(yīng)該明智地使用JavaScript(僅在真正必要時才使用)并優(yōu)化腳本的大小和速度,縮短JavaScript下載時間的另一種方式是使用外部文件,而不是包含腳本內(nèi)聯(lián),這種方法也適用于CSS,因?yàn)闉g覽器會緩存外部化的文本,而(在HTML頁面自身中)以內(nèi)聯(lián)方式編碼的 CSS 或 JavaScript 每次都會隨 HTML 一起加載。
6、盡可能避免使用表格
表格被用作網(wǎng)頁的主要構(gòu)建塊,但是作為頁面布局元素,使用表格現(xiàn)在被認(rèn)為是糟糕的做法,有時候,您必須使用表格(并且它們被認(rèn)為是顯示表格數(shù)據(jù)的出色實(shí)踐),如果是這樣,明確地指定表格單元格、行和列的寬度和高度,否則,瀏覽器必須執(zhí)行許多操作來計(jì)算如何顯示它們,這會降低頁面加載速度。
7、刪除任何不必要的元素
可能這是所有技巧中顯而易見的一個,但是它也是容易忘記的一個技巧。如果您真正需要在網(wǎng)頁上放置許多內(nèi)容,考慮將網(wǎng)頁分為2個、3個或更多的獨(dú)立頁面。
8、一些優(yōu)化網(wǎng)頁的小技巧
可以使用許多方法來優(yōu)化您的網(wǎng)頁,包括壓縮JavaScript文件,使用超文本傳輸協(xié)議(Hypertext Transfer Protocol,HTTP)壓縮,以及設(shè)置圖像大小。
例如:訪客點(diǎn)擊訪問這樣一個目錄地址:http://www.mahaixiang.cn/SEO/,去打開這個目錄下的index.html文檔,當(dāng)服務(wù)器收到請求后它需要消耗一些時間來分析這是一個文件還是一個目錄,但是如果我們在后加上一個斜杠(/),服務(wù)器就知道你是在訪問一個目錄地址,然后就直接加載默認(rèn)文檔index.html或index.php就行了,這樣服務(wù)器就不用花時間來分析這個地址,也起到了一定加速的作用。
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 文件),或者可以將其包含到頁面中(對于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 文件。
另一種減少壓縮工作的技巧是使用小寫形式的 <div> 元素和類名,由于大小寫敏感性,并且使用的是無損壓縮,<header> 與 <Header> 不同,它們被壓縮為兩個不同的標(biāo)記。
11、設(shè)置圖像大小
與表格單元格、行和列一樣,當(dāng)您未明確設(shè)置圖像大小時,瀏覽器需要執(zhí)行計(jì)算來顯示圖像,這會降低處理速度。
你會給每個圖片加上height和width屬性嗎?這兩個屬性可以讓瀏覽器在加載圖片之前就知道圖片的長和寬,并預(yù)留出指定的長寬待圖片加載后顯示,如果沒有這兩個屬性,瀏覽器還需要在讀取圖片成功后再處理一次頁面布局樣式,這無疑減慢了網(wǎng)頁加載速度,所以在固定圖片大小的情況下好都使用上長和寬屬性。
12、將CSS圖像映射用于裝飾功能
使用圖像映射代替多個圖像,這是另一種縮短加載時間的方式,因?yàn)橥瑫r下載圖像的各個獨(dú)立部分能夠加快整個頁面的下載進(jìn)度?;蛘撸梢允褂媚撤N名為 CSS sprites 的工具,CSS sprites可幫助減少 HTTP 請求的數(shù)量。一個圖像可以包含裝飾或布置頁面所需的所有圖像元素,您使用 CSS 來選擇(通過調(diào)用某些位置和維度)用于特定元素的映射。
13、盡可能延遲腳本加載
一種提升頁面下載速度的潛在方式是將腳本放在頁面的底部,使頁面加載更迅速。
通常,瀏覽器只能(從同一個域)下載不超過兩個并行對象,如果一個對象是一段 JavaScript 代碼,那么在該腳本下載完之前,其他頁面組件的下載將會暫停。
如果將 JavaScript 代碼放在頁面底部,(在大多數(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)證一個函數(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控制顯示效果,所以往往我們會把CSS寫到另外一個或多個外部鏈接CSS文件中,并且CSS文件代碼也有很多行,我們可以使用一些CSS壓縮工具來刪除CSS文件中不必要的多余內(nèi)容,如重復(fù)定義樣式、空格等來瘦身。
據(jù)馬海祥的經(jīng)驗(yàn)來說,如果經(jīng)過適當(dāng)優(yōu)化和維護(hù),CSS 文件不一定很大。例如,具有很多獨(dú)立類的 CSS 文件會影響下載速度,與 JavaScript 文件一樣,您需要優(yōu)化 CSS 文件,使其包含所需的所有內(nèi)容,同時保持合理的大小。
另外,使用外部文件代替內(nèi)聯(lián)定義來適應(yīng)瀏覽器的緩存機(jī)制。
17、使用內(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ù)器快。
18、對資產(chǎn)使用多個域來增加連接
CDN 的另一個優(yōu)勢是它們是獨(dú)立的域,因?yàn)槟臑g覽器將并發(fā)連接的數(shù)量限制到一個單一的域,因此無論何時加載一個頁面,都很容易占滿所有線程。因此,到其他資產(chǎn)的連接被延遲了。
然而,您的瀏覽器能夠打開新線程或到其他域的連接,這樣,從另一個域加載的任何資產(chǎn)都可以與其他所有資產(chǎn)同時加載。
19、在合適的時候使用 Google Gears
使用Google Gears是避免用戶反復(fù)下載同一內(nèi)容的另一種好方法。Gears 允許用戶離線訪問 Web 應(yīng)用程序,但是也允許將頁面元素持久化到用戶的計(jì)算機(jī)上,因此,頻繁加載但未進(jìn)行更新的內(nèi)容可以存儲在 Gears 數(shù)據(jù)庫中,該數(shù)據(jù)庫是一個 SQLite3 關(guān)系數(shù)據(jù)庫管理系統(tǒng)。對同一內(nèi)容的所有 next 請求都可以從數(shù)據(jù)庫(而不是服務(wù)器)直接加載。
20、使用 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 圖像。
21、保持 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)。
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ù)器之間沒有必要通信時),處理速度將更快。當(dāng)然,還有大量 Ajax 優(yōu)化技術(shù),在此,馬海祥就不一一列出了。
23、在沙箱中測試代碼
還有一個經(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ù)期。
24、分析站點(diǎn)代碼
在許多場景中,自我反省是一個不錯的建議,幸運(yùn)的是,在開發(fā)過程中,我們可以使用工具來幫助反省,并盡可能客觀地進(jìn)行實(shí)踐,像 JSLint(參見 參考資源)這樣的工具的價(jià)值是無法衡量的,盡管其站點(diǎn)宣稱它“可能令您備受挫折”,因?yàn)樗蚰峁┝怂械臐撛诖a缺陷,這些缺陷不但使調(diào)試更加困難,而且可能導(dǎo)致更長的響應(yīng)時間。
25、檢查孤立的文件和丟失的圖像
檢查孤立的文件和丟失的圖像是一種明智之舉,大部分 Web 開發(fā)人員都會檢查錯誤的文件引用,但是這里仍然需要說明一下,丟失的文件容易引起各種問題,因?yàn)樗鼈儠?dǎo)致“The image/page cannot be displayed”之類的錯誤消息。
但是在網(wǎng)頁速度優(yōu)化方面,它們具有更大的缺陷:當(dāng)瀏覽器尋找丟失的或孤立的文件時,它會消耗資源,這不可避免地會導(dǎo)致頁面處理速度變慢。因此,請檢查孤立或丟失的文件,包括拼寫錯誤的文件名。
26、優(yōu)化圖像
圖像能吸引訪客的注意,但是每一張圖片都需要從服務(wù)器下載到訪客的電腦中,這無疑增加了頁面的加載時間(具體可查看馬海祥博客《實(shí)現(xiàn)網(wǎng)頁圖片預(yù)加載效果的3種技術(shù)方法》的相關(guān)介紹)。
因此,必須優(yōu)化圖像,優(yōu)化方法包括適當(dāng)減小圖片尺寸,降低圖片的顏色深度。
27、去掉不必要的插件
一些免費(fèi)的插件能夠增強(qiáng)網(wǎng)頁的功能,但是如果添加了過多的插件,就會增加服務(wù)器的負(fù)擔(dān)和頁面加載時間。
在構(gòu)建頁面時,去掉不必要的插件,用一些內(nèi)置的功能來代替插件。
28、減少DNS查詢
DNS查詢需要花費(fèi)較長時間來返回IP地址,而瀏覽器在查詢結(jié)果返回之前不會做任何操作,具有多種網(wǎng)絡(luò)元素的頁面,需要進(jìn)行多次的DNS查詢,花費(fèi)的時間更長。
對此,德州網(wǎng)站優(yōu)化的建議是減少不同域名的數(shù)量,就會減少DNS的查詢,從而加速頁面加載速度。
29、減少使用重定向
重定向增加了額外的HTTP請求,甚至有時候鏈向多個域名或是不存在的頁面,大大的增減了延遲時間,因此要減少重定向。
30、使用內(nèi)容分發(fā)網(wǎng)絡(luò)CDN
服務(wù)器在處理大流量的數(shù)據(jù)是十分困難的,這終導(dǎo)致頁面加載速度變慢。CDN是位于全球不同地方的高性能網(wǎng)絡(luò)服務(wù),它會復(fù)制你網(wǎng)站的靜態(tài)資源,并以有效的方式來為訪客服務(wù),使用CDN,可以提升頁面的加載速度。
31、把CSS文件放在頁面頭部,JS文件放在底部
把CSS文件放在頭部可以禁止逐步渲染,節(jié)省瀏覽器加載和重繪頁面元素的資源,把JS文件放在頁面底部可以避免代碼執(zhí)行前的等待時間,從而提升頁面的加載速度。
32、利用瀏覽器緩存
瀏覽器緩存是允許訪客的瀏覽器緩存你網(wǎng)站頁面副本的一個功能,訪客再次訪問時,直接從緩存中讀取內(nèi)容而不需要重新加載,優(yōu)化網(wǎng)站的緩存系統(tǒng)會降低網(wǎng)站的帶寬和托管費(fèi)用。
33、使用CSS Sprites整合圖像
圖像始終是網(wǎng)站優(yōu)化時的頑疾,可以使用CSS Sprites來整合多個圖像到幾個輸出文件,從而減少下載資源的往返次數(shù)和延遲,從而提高頁面的加載速度。
34、壓縮整合CSS、JS文件減少HTTP請求次數(shù)
壓縮會移除一些不必要的字符,從而幫助減少文件大小和網(wǎng)頁后續(xù)的加載時間。
現(xiàn)在的網(wǎng)頁都有多個圖片、CSS外部文件鏈接、Javascript外部腳本鏈接,所以當(dāng)訪問一個網(wǎng)頁時瀏覽器需要多次向服務(wù)器請求這些文件,在請求和加載之間會產(chǎn)生不少的時間差,特別是一些網(wǎng)頁上有多個小圖片、圖標(biāo)按鈕的網(wǎng)頁,有多少圖片,瀏覽器就需要請求多少將這些小文件,多將請求這些小圖片文件將明顯影響網(wǎng)頁的加載速度。
所以,我們應(yīng)該盡可能將小圖片拼合一個PNG大圖片上,然后通過坐標(biāo)來顯示圖標(biāo),一次請求一個大圖片比多次請求小圖片速度要快不少。
同樣,好將CSS和Javascript盡可能地整合到一個文件中都有助于加快網(wǎng)頁載入速度。
35、啟用GZIP壓縮
在服務(wù)器上壓縮網(wǎng)站的頁面能很好地提升網(wǎng)站訪問速度,GZIP可以幫我們完成壓縮必要資源,從而給用戶發(fā)送小的HTML文件和CSS/JS等資源。
36、服務(wù)器抗壓能力
服務(wù)器抗壓能力通常指的是服務(wù)器所能承受的大訪問人數(shù),這是一個硬件指標(biāo),不過也可以通過對軟件和頁面的優(yōu)化來提高服務(wù)器的抗壓能力。
這里的服務(wù)器主要包括兩項(xiàng),一個是http的服務(wù)器(apache或者iis),還有一個是數(shù)據(jù)庫服務(wù)器。
這是所說的優(yōu)化主要是有效減少服務(wù)器的連接數(shù)、提高程序執(zhí)行效率,比如靜態(tài)化頁面或者使用緩存可以減少數(shù)據(jù)庫的壓力,減少頁面連接數(shù)可以減少http服務(wù)器的壓力等,還可以通過安裝一些軟件或者模塊來達(dá)到這個目的,比如zend的php加速引擎,以及apc等。
德州網(wǎng)站優(yōu)化愷策網(wǎng)優(yōu)點(diǎn)評:
許多研究發(fā)現(xiàn),頁面速度和訪客的滯留時間,跳出率以及收入都有直接的關(guān)系。另外,谷歌的排名算法中也把頁面加載速度作為其中一項(xiàng)考慮因素,因此,你網(wǎng)站的頁面加載時間是至關(guān)重要的,從訪問者的角度看,測試你的瀏覽器速度的一個很好的方法是清除你的瀏覽器緩存,然后加載頁面。
1999年-2001年:
德州供銷學(xué)校99級計(jì)算機(jī)系 【德州財(cái)貿(mào)經(jīng)濟(jì)學(xué)校,現(xiàn)合并為 德州職業(yè)技術(shù)學(xué)院】2001年-2006年:
這段時間先后從事過計(jì)算機(jī)老師、CAD制圖預(yù)算、電腦售后維修服務(wù)等多種工作。2006年-2010年:
自學(xué)網(wǎng)頁制作技術(shù),2006年9月任職于德州安然資訊互聯(lián)網(wǎng)事業(yè)部,從事網(wǎng)站制作SEO優(yōu)化推廣。2010年10月:創(chuàng)辦 愷策網(wǎng)優(yōu),于2012年注冊營業(yè)執(zhí)照
2014年11月:創(chuàng)辦 易搜網(wǎng)絡(luò),實(shí)現(xiàn)網(wǎng)絡(luò)品牌多元發(fā)展!