網(wǎng)站優(yōu)化對(duì)于阿清來(lái)說(shuō)最重要的網(wǎng)站的內(nèi)部?jī)?yōu)化，只要把網(wǎng)站內(nèi)部?jī)?yōu)化做好了，其他seo步驟才能起到事半功倍的效果。阿清會(huì)在后面陸續(xù)寫(xiě)關(guān)于站內(nèi)優(yōu)化的方法，今天先講seo之站內(nèi)優(yōu)化—css優(yōu)化。為什么說(shuō)站內(nèi)優(yōu)化才是seo中最重要的一個(gè)環(huán)節(jié)呢。各位SEOer可以想想網(wǎng)站優(yōu)化其實(shí)無(wú)非就那么幾個(gè)重要的環(huán)節(jié)，而那些環(huán)節(jié)都是需要持續(xù)重復(fù)每天要做的事情。不需要太花腦力，只需要把自己當(dāng)苦力使喚就行了。
而站內(nèi)優(yōu)化卻不一樣，不知道大家有沒(méi)有體會(huì)，幾個(gè)人同一時(shí)間做網(wǎng)站，都是更新的原創(chuàng)文章，也內(nèi)部鏈接和外部鏈接、文章優(yōu)化等等都是差不多的。但是卻 又好壞之分呢?在說(shuō)一個(gè)例子，一些做淘寶客等迅速搶占排名的網(wǎng)站，大都愿意使用博客程序去建站。不僅僅在于博客自身的定義，(博客中的文章，可以解釋為博 主自己寫(xiě)的，而博主自己寫(xiě)的定義為原創(chuàng)文章)。這種博客自身的定義對(duì)以前來(lái)說(shuō)還是有很大作用的。但是隨著博客的泛濫和大量低質(zhì)量的博客出現(xiàn)，這點(diǎn)占的比重 也越來(lái)越低了。但是大家會(huì)說(shuō)，現(xiàn)在使用博客程序還是會(huì)比網(wǎng)站程序容易收錄。的確，這是因?yàn)椴┛统绦虻膬?nèi)部結(jié)構(gòu)對(duì)搜素引擎來(lái)說(shuō)更加友好。博客程序的結(jié)構(gòu)一般 都會(huì)比較扁平，內(nèi)容頁(yè)面離首頁(yè)的距離很近，更加利于蜘蛛抓取。當(dāng)然還有很多方法。阿清列舉出這點(diǎn)，只是想說(shuō)明一點(diǎn)，網(wǎng)站的內(nèi)部?jī)?yōu)化十分重要。站長(zhǎng)們不要想 著草草做了站，靠什么偽原創(chuàng)、垃圾外鏈等等來(lái)提高排名。這樣不僅很累，而且效果還不好。大家可以去看看這兩篇文章《新站長(zhǎng)需做的準(zhǔn)備》和《精簡(jiǎn)代碼詳解》。這兩篇都是介紹網(wǎng)站內(nèi)部?jī)?yōu)化的。
好了言歸正傳，講css優(yōu)化，主要講css執(zhí)行效率。畢竟網(wǎng)站的執(zhí)行效率跟seo也是有很大關(guān)系的。在這之前阿清需要介紹一下css選擇器的執(zhí)行和瀏覽器渲染過(guò)程。
首先瀏覽器是從右至左來(lái)處理選擇器的，那么再來(lái)說(shuō)下瀏覽器工作的過(guò)程，這里是渲染的過(guò)程，得到數(shù)據(jù)之后，瀏覽器要先繪制一個(gè)DOM樹(shù)，然后再有一個(gè) “reflow” 的過(guò)程，這個(gè)過(guò)程就是在CSS 文件下載之后，確定要渲染的元素在DOM中的位置，而CSS 樣式中，很多很多在應(yīng)用的時(shí)候都要有一個(gè)“reflow” 的過(guò)程，所以，避免這個(gè)過(guò)程，后者減少這個(gè)過(guò)程，都會(huì)相當(dāng)大的提升瀏覽器的效率。
還有一個(gè)就是 CSS 選擇器的優(yōu)先問(wèn)題了，這個(gè)這里不多說(shuō)了。那么阿清來(lái)講個(gè)例子吧，直接上代碼例如，我們通常的選擇器會(huì)這么寫(xiě)：
.main .pright div a{color:red;}
那么根據(jù)上面說(shuō)的幾條，瀏覽器的工作過(guò)程是繪制好DOM 樹(shù)之后，就會(huì)查找頁(yè)面中所有a 元素了。查找到所有的 a 元素之后，又開(kāi)始查找出于 .main類下面的.pright類再找div，最后找到a標(biāo)簽，如果這個(gè)div里面有好多好多a元素就會(huì)是一個(gè)非常耗費(fèi)資源的事情。那么如果這里有更多 個(gè).XXX 呢?
所以我們可以這么寫(xiě)，在div里的所有a元素都加上class=“XXX”，選擇器就會(huì)這樣寫(xiě)了：
.main .pright div a .XXX{color:red;}
這樣寫(xiě)效率就會(huì)高很多，此類例子還有很多。例如層div嵌套過(guò)多寫(xiě)的樣式可能也會(huì)有這種情況。其實(shí)現(xiàn)在很多CMS還有一些前端的高手都注意到了這一問(wèn)題。不明白的人會(huì)比較郁悶，為什么都是底層了還要在每個(gè)元素中加上class樣式呢?
