1、源碼優(yōu)化源碼優(yōu)化目錄1代碼精簡與排序2頭部標簽優(yōu)化3body內(nèi)標簽優(yōu)化4一些不建議使用的代碼5實踐：對某一網(wǎng)站首頁進行頁面優(yōu)化2目錄1代碼精簡與排序2頭部標簽優(yōu)化3body內(nèi)標簽優(yōu)化4一些1 代碼精簡盡量精簡網(wǎng)頁中的代碼，能夠突出網(wǎng)頁的主題，減少服務器的負載，增快網(wǎng)站的打開速度。代碼精簡一般重點在以下幾個方面：1.div結(jié)構(gòu)調(diào)整2.css精簡3.js精簡4.垃圾代碼處理思路31 代碼精簡盡量精簡網(wǎng)頁中的代碼，能夠突出網(wǎng)頁的主題，減少服結(jié)構(gòu)精簡table轉(zhuǎn)化divjinhuifeng/全部用table布局，對網(wǎng)頁的加載和代碼的精簡都有不好的影響4結(jié)構(gòu)精簡table轉(zhuǎn)化divjinhuifeng/

2、4結(jié)構(gòu)精簡table轉(zhuǎn)化divjinhuifeng/全部用table布局，對網(wǎng)頁的加載和代碼的精簡都有不好的影響5結(jié)構(gòu)精簡table轉(zhuǎn)化divjinhuifeng/5哪些頁面不適合div精簡代碼:大家都說DIV的布局精簡代碼，但是用DIV替代TABLE所節(jié)約的代碼又被CSS(樣式)所占用，而這些樣式大多用于控制DIV的排版布局。那你會說了，CSS可以放在外部重用啊，要想得到這個問題的答案請往下看。哪些頁面不適合div哪些頁面不適合div重用性與下載量:統(tǒng)一使用一個.css的樣式表文件，可以實現(xiàn)修改一次，全站修改的效果，這樣使得維護的成本更低。但是請大家換一個角度想，如果所有頁面在加載時都要訪問

3、一個文件，那這個文件每天的下載量，特別時在搜狐、新浪的網(wǎng)站平臺上將達到幾億次，這就需要后面有很多臺前端web服務器在做支撐，那后臺的成本無形中也提高了很多。如果后臺支撐沒有做好，那么頁面就會出現(xiàn)花屏，之前所作的工作也是白費。很多人會問，這樣的幾率太小了。我們所作的工作就是為了避免這一兩次意外的發(fā)生，如果意外發(fā)生了，對于門戶后果將是不堪設想的。哪些頁面不適合div哪些頁面不適合divHTTP通訊:統(tǒng)一的樣式表文件采用外部調(diào)用的形式，這樣每次加載單個頁面都會多一次對服務器的http請求服務器都會增加一次響應，這樣對前端web服務器會是很大的消耗。而原來很長時間都是將css和js寫在頁面前端(大家可

4、以看看和sina的頁面，大多都是采用這樣的形式)，而不是作為外部調(diào)用的形式，也是為了盡量避免給服務器增加消耗。哪些頁面不適合div哪些頁面不適合div頁面緩存:每次用戶訪問的頁面，都會在瀏覽器緩存中保存一定時間，以保證用戶下次再訪問該頁面時能夠大大提高頁面顯示速度。而每次修改都會使頁面重新下載，對于每個外部導入的樣式文件也是如此，如果CSS文件修改，那么訪問網(wǎng)站的每一個頁面都會重新下載，而以往的將樣式寫在頁面中的方式，只是修改的頁面需要重新下載。哪些頁面不適合div哪些頁面不適合div兼容性:對于CSS(樣式表)并不是所有瀏覽器的所有版本都支持的很好，比如IE5以前的瀏覽器對于CSS的支持就不

5、是很好。而現(xiàn)在使用IE5以前版本瀏覽器的用戶不在少數(shù)，這樣就使得在頁面制作的過程中需要針對不同瀏覽器版本進行測試，以保證兼容性，無形中也增加很多工作量(至少我接觸的開發(fā)人員制作div頁面比table頁面的標準時間要長一些)。哪些頁面不適合div哪些頁面不適合div橫切與延展性:橫切傳統(tǒng)的布局方式為了使頁面下載的更快，把頁面自上而下分成若干個塊，但是往往采用DIV進行布局的頁面都會出現(xiàn)這樣的情況，由于每塊中間欄或者其他欄內(nèi)容條數(shù)不固定導致兩邊欄目沒有同時自適應，而出現(xiàn)留白。相比之下傳統(tǒng)的table方式更容易規(guī)避這樣情況的發(fā)生。哪些頁面不適合divCSS精簡1.改內(nèi)部樣式為外部樣式表2.合并不必要

6、的樣式類3.合并相關(guān)樣式表4.統(tǒng)一，簡化css樣式12CSS精簡1.改內(nèi)部樣式為外部樣式表12CSS代碼精簡工具介紹 CleanCSS 是一個免費的CSS 精簡壓縮工具，通過這個在線工具，可以將你的CSS文件壓縮、優(yōu)化成更精簡，這將大大提高你的網(wǎng)站的載入速度。進入CleanCSS后, 你可以輸入要壓縮的CSS代碼或是該CSS文件的所在URL地址, 然后選擇代碼布局和相應的精簡壓縮選項, 最后點擊生成即可. more CSS壓縮與優(yōu)化工具 是一個中文版的CSS代碼精簡工具. 進入CSS壓縮與優(yōu)化工具之后，選擇簡體或繁體中文選項，然后其他的操作就比較簡單了。您可以將CSS代碼貼入文本框或者輸入您網(wǎng)

7、站或博客的CSS文件地址，如果您不懂CSS相關(guān) 知識，那么選擇默認設置即可；而懂得CSS相關(guān)的朋友則可以進行其他相關(guān)設置。除此之外，如果您希望導出經(jīng)過“減肥”的CSS文件，則需要選擇最后一個“ 導出優(yōu)化后的CSS ”選項。via chadaCSS代碼精簡工具介紹CSS精簡思路1,css的定義名，盡可能的不超過4個字母： 其實4個字母已經(jīng)可以滿足各種名稱的千變?nèi)f化了。這個是我在9rules和一些設計師討論得出的結(jié)論，我們一直在致力于最高效執(zhí)行的css編寫方式，首個字母可以代表一類比較明了的意思，下面的注釋/*xxx*/純粹為了解釋，真的寫網(wǎng)頁的時候千萬不要這么廢話哦，比如：一個背景顏色color

8、定義，我常常寫為.cwbackground:#fff /*白色white背景，這個相信最常用，我常常獨立寫出來，需要時就用*/ .chu1background:#333/*灰色hui背景，按照DW的色譜從深到淺按1n數(shù)字排列，作為中國人hui這個拼音自己好懂*/.chu3background:#666我在所有的單獨顏色css定義都使用c打頭，就是為了方便統(tǒng)一查看，這類定義經(jīng)常可以使用在class=w100 cw這樣的靈活組合編寫方式中，其實這類定義我都喜歡在css表里寫在一個區(qū)里，比如/*顏色*/.cwbackground:#fff .chu1background:#333 .chu3back

9、ground:#666/*字體顏色*/.zcwcolor:#fff .zch1color:#333 .zch2color:#666CSS精簡思路CSS精簡思路2，利用好總集定義（常用的東東一起）和組合定義方式！這個是重點： 很多的常用標簽 和使用的屬性的定義比如整個網(wǎng)站的最基本字體顏色，大小，連接字體的屬性等等，我們經(jīng)常重復使用的，最好能在前面一起定義完，比如： html,body,table,td,afont-size:12px;color:#333;font-family:宋體, Arial, Helvetica, sans-serif;letter-spacing:normala:hov

10、ercolor:#cc000e /*注意不同的定義名用,分隔這樣以后除了特殊要求，基本不用再重復定義字體的這些屬性，table和td之所以在這里強調(diào)是因為表格標簽經(jīng)常不能繼承css屬性，寫多幾個詞以后會少很多奇怪的問題，a:hover會繼承a的其他定義，無需啰嗦*/順便寫點其他總集定義：* margin:0;padding:0;border:0 /*這個定義所有的頁面元素，非常狠不過寫了網(wǎng)頁很“穩(wěn)當”以后稀奇古怪的小問題比如這個撐開點，那個框框不靠邊等等麻煩事就少，放在css最頂部，以后特殊定義寫在后面就可以優(yōu)先執(zhí)行*/bodybackground:#fff;text-align:center

11、;word-break:break-all /*白色body是最常用的，后面這個定義配合容器使用margin:0 auto 布局居中必備*/tableborder-collapse:collapse /*表格無邊框線*/CSS精簡思路CSS精簡思路3，一個標簽下的同類標簽重復定義的精煉表達方式：我們經(jīng)常看到這樣的寫法，代碼冗長而效率低下： #t .tawidth:200px;text-align:left .tbwidth:250px;background:#ccc .hahawidth:50px;float:left .kkcolor:#198080.kk2color:#ff0000列a_1

12、列a_2列a_3列b_1列b_2列b_3行a1行a2紅色字體行a3CSS精簡思路3，一個標簽下的同類標簽重復定義的精煉表達方式CSS精簡思路#t #t ulwidth:200px;text-align:left #t liwidth:50px;float:left .tb pcolor:#198080.tbwidth:250px;background:#ccc /*tb寫在后面，雖然重復了width，但后面的優(yōu)先執(zhí)行，前面的ul寬度定義無效！這樣正好合服我們的意圖*/.kk2color:#ff0000 /*和上面同理*/列a_1列a_2列a_3列b_1列b_2列b_3行a1行a2紅色字體行a3

13、CSS精簡思路CSS精簡思路4，活用傳統(tǒng)html標簽：很多人用了css制作網(wǎng)頁以后，以為以前的傳統(tǒng)htm標簽沒用了，其實傳統(tǒng)標簽在一些細節(jié)表達上比全部用css定義的標簽來得簡煉，我在這里下載的chinaren模板里，經(jīng)常看到 哈哈哈這樣的css定義過的標簽來加粗字體，其實，你只要用標簽就可以實現(xiàn)同樣的效果如 哈哈哈這類傳統(tǒng)標簽有其默認的獨特含義，很多屬性無需專門定義，節(jié)省了頁面代碼同時也減少了css表的代碼。CSS精簡思路4，活用傳統(tǒng)html標簽：很多人用了css制作CSS精簡1.改內(nèi)部樣式為外部樣式表2.合并不必要的樣式類3.合并相關(guān)樣式表4.統(tǒng)一，簡化css樣式19CSS精簡1.改內(nèi)部樣式

14、為外部樣式表19html精簡由css類屬性替代不具有實際意義的標簽：比如：strong，b，等。20html精簡由css類屬性替代不具有實際意義的標簽：比如：shtml精簡教程HTML 4HTML （非XHTML），MIME type 為 text/html ，允許省略一些標簽。通過 HTML 4 DTD，你可以省略以下標簽（那些所謂可避免的元素，這里用刪除線加以標記）21html精簡教程HTML 421html精簡教程HTML-Optimizer HTML-Optimizer 是一套專門替 HTML減肥的工具，借著去除各種瀏覽器會直接跳過的注解、空白、換行符號等字符，讓你的網(wǎng)頁功能不變，大小

15、減半22html精簡教程HTML-Optimizer 22js排序盡量將js代碼放置在網(wǎng)頁的最后。23js排序盡量將js代碼放置在網(wǎng)頁的最后。232 頭部標簽優(yōu)化概述 頭標簽即內(nèi)的所有標簽。其中有以下幾個標簽需要重點優(yōu)化三個關(guān)鍵詞titledescrptionkeyword標題描述關(guān)鍵字242 頭部標簽優(yōu)化概述 頭標簽即/headtitle1.title的唯一性：任何一個網(wǎng)頁頁都應該有一個唯一的title。該標題應該是這個網(wǎng)頁的核心內(nèi)容。title關(guān)鍵詞是經(jīng)過一變二的，很多新手站長都犯的錯誤，就是貿(mào)然的進入一個領(lǐng)域，跳過關(guān)鍵詞研究，title是憑感覺寫出來的，并沒有去利用工具去分析，后來tit

16、ile關(guān)鍵詞排名是上去了，但就是沒流量。25title1.title的唯一性：任何一個網(wǎng)頁頁都應該有一個title26title26title2.title的長度：標題的長度建議在25-30個漢字之間。大家都知道百度收索結(jié)果能顯示30個漢字，那么我們就應該把title長度控制在30以內(nèi)，很多人都去仿一些比較成功的網(wǎng)站title，筆者認為是不可行的，應該要以自己的實際情況為主，因為大部分比較成功的網(wǎng)站已經(jīng)不是從SEO的角度來寫網(wǎng)站title。太短無法清楚的表達頁面內(nèi)容，太長則搜索引擎的返回結(jié)果不全，同時也不利于用戶體驗。27title2.title的長度：標題的長度建議在25-30個title2

17、8title28title3.關(guān)鍵字分布：標題中應涵蓋該網(wǎng)頁內(nèi)容的關(guān)鍵字。但是要注意1，符合用戶的閱讀習慣，不要生硬的堆砌關(guān)鍵字。關(guān)鍵詞不要堆積“返利網(wǎng)可信嗎,返利網(wǎng)是真的嗎,返利網(wǎng)怎么樣,如何返利,商城返利,天貓返利,我要返利,淘寶返利網(wǎng),返利網(wǎng)不謬返利,返利網(wǎng)登陸-返利寶” 這應該是一個典型的關(guān)鍵詞堆積，我的建議是如果是沒有品牌力的網(wǎng)站(比如凡客誠品、卓越等);最好把關(guān)鍵詞確定在一到兩個左右為宜。29title3.關(guān)鍵字分布：標題中應涵蓋該網(wǎng)頁內(nèi)容的關(guān)鍵字。2title30title30title4.標題要有一定的吸引力，吸引更多的用戶感興趣并點擊。排名再好的頁面沒有人愿意點擊也是徒勞的。

18、網(wǎng)站title要根據(jù)實際情況來寫，title必須能準確的表達頁面內(nèi)容，讓用戶看到title就能想到頁面的大致內(nèi)容，有利于提高用戶體驗從而獲得更多的流量。31title4.標題要有一定的吸引力，吸引更多的用戶感興趣并點title32title32title5.內(nèi)容頁的標題構(gòu)成：本頁內(nèi)容標題+欄目名+網(wǎng)站名。關(guān)鍵詞分隔符關(guān)鍵詞的分隔符大致有 “ , _ - |” 關(guān)于具體用哪個比較好，我個人認為沒有多大區(qū)別，都是一樣一樣的。33title5.內(nèi)容頁的標題構(gòu)成：本頁內(nèi)容標題+欄目名+網(wǎng)站名title6.不要頻繁修改title很多新手站長都是頻繁的修改title，修改了title就等于你換了門牌號，搜

19、索引擎就需要一段時間重新認識你，title應該在網(wǎng)站上線前就要確定好。34title6.不要頻繁修改title很多新手站長都是頻繁title35title35descrption36descrption36descrption描述的要求：1.80-110個中文字符。2.符合語言邏輯3.含有關(guān)鍵詞4.具有一定的吸引人眼球的功能。5.是整個頁面的概述。37descrption描述的要求：37descrption對排名的影響 description的作用是配合title，相當于title的助手，都知道title很重要那么title的助手也當然有一定的重要性了，比如說某 個很重要的領(lǐng)導，他的助手說的話

20、是不是很有分量呢？description是title的延伸，用于輔助title，title里出現(xiàn)的關(guān)鍵詞在 description野出現(xiàn)一兩次，就等于告訴搜索引擎這個詞很重要。38descrption對排名的影響38descrption帶來流量 有研究發(fā)現(xiàn)，人們對排在搜索引擎前幾位的頁面關(guān)注度相差不大，在眾多的所搜結(jié)果中，別人憑什么點擊你的站呢，除了排名以外，title和 description夠不夠吸引人也是一個很重要的因素。而title就那么幾個字，帶來的信息量太少了，那么這個艱巨的任務當然要交給 description了，description兩行字可以帶來的信息量不多，但是給人一個大致

21、的了解還是足夠的，如果description的內(nèi)容足 夠吸引他們、包含他們要找的內(nèi)容，那么這些人就極有可能點擊這個站了。39descrption帶來流量39descrptiondescription的寫法 說說description的寫法，description的可讀性很重要。description是對一個頁面的概述，應該是一段總結(jié)的話。不能做關(guān)鍵 詞的羅列和堆砌（那是keywords的功能了），但是有必要將title里的關(guān)鍵詞重復一兩次或者做他們的長尾關(guān)鍵詞，這就要把關(guān)鍵詞巧妙的融入進去寫 成一段通順的話了，這樣對被重復的關(guān)鍵詞的排名有比較大的幫助。40descrptiondescripti

22、on的寫法40keyword體現(xiàn)該頁面的核心關(guān)鍵詞。注意：不要過多羅列關(guān)鍵詞，3-5個即可。用“ , ”隔開。每個頁面的關(guān)鍵詞都不應一樣，應該是該頁面的核心內(nèi)容的濃縮體現(xiàn)。keyword標簽對搜索引擎的影響越來越低。41keyword體現(xiàn)該頁面的核心關(guān)鍵詞。41descrption42descrption42body內(nèi)標簽優(yōu)化A標記2H標簽31圖片優(yōu)化3343body內(nèi)標簽優(yōu)化A標記2H標簽31圖片優(yōu)化3343H標記h標記作為一種衡量網(wǎng)頁內(nèi)重要程度的標記在seo的作用中非常重要。H1：經(jīng)常被作為內(nèi)容標題出現(xiàn)。h2-h6重要性逐次下降。分別被作為二級到六級標簽。注意：h1在頁面中出現(xiàn)且僅出現(xiàn)一次

23、為宜。h2標簽可出現(xiàn)2-4次，其他h3-h6標簽視需要而定。44H標記h標記作為一種衡量網(wǎng)頁內(nèi)重要程度的標記在seo的作用中H標記h標記作為一種衡量網(wǎng)頁內(nèi)重要程度的標記在seo的作用中非常重要。H1：經(jīng)常被作為內(nèi)容標題出現(xiàn)。h2-h6重要性逐次下降。分別被作為二級到六級標簽。注意：h1在頁面中出現(xiàn)且僅出現(xiàn)一次為宜。h2標簽可出現(xiàn)2-4次，其他h3-h6標簽視需要而定。45H標記h標記作為一種衡量網(wǎng)頁內(nèi)重要程度的標記在seo的作用中A標記a標記醫(yī)圣圣網(wǎng)站注意兩點：1.建議target屬性為“_blank”2.必須使用title對鏈接進行描述。46A標記a標記46圖片優(yōu)化1.圖片要盡量小，加快圖片

24、的下載速度。（一般png格式的圖片占用空間小）2.圖片要有描述“alt”47圖片優(yōu)化1.圖片要盡量小，加快圖片的下載速度。（一般png格代碼優(yōu)化程序1、清理垃圾代碼。是指刪除頁面中的冗余代碼，可以刪除80%的冗余代碼，垃圾代碼主要指那些刪除了也不會對頁面有任何影響的非必要代碼。 下面請看常見的垃圾代碼。空格 空格字符是網(wǎng)頁中最常見的垃圾代碼。但并不是指 標簽，而是有代碼編輯環(huán)境下敲擊空格所產(chǎn)生的符號，每個空格相當一個字符，那么也就是說，一個頁面，空格就占頁面體積的15%，100K的頁面，有15K是空格字符。 空格字符最常出現(xiàn) 在代碼的開始和結(jié)束處，還有就是空行中。 這些都是容易產(chǎn)生垃圾代碼的地

25、方。 消除這樣的垃圾代碼的方法就是選中代碼然后按shift+tab鍵左對齊。48代碼優(yōu)化程序1、清理垃圾代碼。48代碼優(yōu)化程序2、HTML標簽的轉(zhuǎn)換 這個主要就是使用短標簽替換在網(wǎng)頁中有同樣效果的長標簽，例如：,與兩者都是對字體加粗但是卻比多了5個字符。如果一個頁面出現(xiàn)上百個加粗標簽，就會產(chǎn)生不少的冗余代碼。 解決方法 是利用DW的查找功能替換長標簽。49代碼優(yōu)化程序2、HTML標簽的轉(zhuǎn)換49代碼優(yōu)化程序3.CSS優(yōu)化 CSS可以以調(diào)用的方式，避免同樣的標簽重復寫樣式，從而達到精簡代碼的效果。另外，CSS有3種調(diào)用方式 1頭部調(diào)用，也就是在和之間，這樣是最不明智的，如果內(nèi)容少則影響不大，否則大大增加頁面的體積，還占用了頂部的重要位置。 2主體調(diào)用，例子如下： 我的網(wǎng)頁 這樣的調(diào)用方式既不能發(fā)揮CSS的優(yōu)勢，又大大增加頁面的代碼量。