網(wǎng)站由后端和前端兩部分構(gòu)成，其中前端是呈現(xiàn)給用戶的，筆者在本文將給大家講述前端頁面代碼優(yōu)化，當(dāng)然仍然是基于seo優(yōu)化的。

就前端而言，如果做了偽靜態(tài)處理，那么基本就是普通的html代碼，正常情況下這些頁面內(nèi)容都是通過頁面模板來輸出。那么前端的頁面代碼有哪些地方需要優(yōu)化呢，我們從以下幾個方面來看看頁面優(yōu)化那些事情。

一、頭部冗余代碼

有些開源的網(wǎng)站程序在里加入了大量的代碼，如果不查看源代碼根本看不到，這對用戶來說并沒什么，但有些代碼完全是多余的，甚至有些代碼使用不當(dāng)還會導(dǎo)致一些不必要的錯誤。

筆者建議，里的代碼盡量簡潔，用不到的直接丟棄，另外，不能確定如何使用的代碼也果斷放棄。精簡代碼對于頁面打開的速度有一定的好處。

二、代碼位置

代碼的位置處理其實(shí)是個小細(xì)節(jié)，但意義不小。百度搜索引擎優(yōu)化指南明確指出，頁面應(yīng)該盡量讓主體內(nèi)容優(yōu)先呈現(xiàn)，什么叫主體內(nèi)容？舉個簡單的例子，文章頁，文章的具體內(nèi)容就是主體內(nèi)容，其他的像邊欄、相關(guān)內(nèi)容等模塊就是附加內(nèi)容。

部分使用了兩欄的網(wǎng)站頁面，左邊是邊欄，右邊是頁面主體，在前端代碼里則使用了從上到下、從左到右的順序。這樣的代碼處理對用戶閱讀沒有不妥，但對于爬取代碼的搜索引擎來說，就是先抓取了次要內(nèi)容，后再抓取到主體內(nèi)容，對seo優(yōu)化而言，這不合理。

其實(shí)要解決代碼位置的問題很簡單，現(xiàn)在絕大部分網(wǎng)站都是使用div+css，我們只需要稍微調(diào)整下代碼即可！比如通過div的float屬性處理左右位置，在頁面模板里把右側(cè)內(nèi)容區(qū)塊放置到上面。

三、結(jié)構(gòu)化和H標(biāo)簽

這里的結(jié)構(gòu)化主要是針對H標(biāo)簽及div區(qū)塊來說的，比如說H標(biāo)簽?zāi)軜?biāo)注處頁面哪些內(nèi)容是最重要的，哪些是次重要的。關(guān)于H標(biāo)簽推薦大家閱讀頁面H標(biāo)簽怎么使用一文。

至于div其實(shí)也很好理解，比如說把某些相關(guān)性強(qiáng)的內(nèi)容放到一個div中，這樣就可以很明確的跟其他內(nèi)容區(qū)分開。舉個最簡單的例子，還是說文章頁，我們可以把文章內(nèi)容放到一個div中，相關(guān)推薦內(nèi)容放到一個div中，邊欄放到一個div中，經(jīng)過這樣處理，整個頁面代碼就有了明顯的架構(gòu)化和層次感。

讓頁面代碼結(jié)構(gòu)化及設(shè)置H標(biāo)簽，目的就是輔助搜索引擎更好的識別和抓取頁面內(nèi)容，這對于seo優(yōu)化來說是有好處的。

四、css外調(diào)

css代碼應(yīng)該放置在一個獨(dú)立的文件中，因?yàn)閏ss文件中很多樣式同時被不同類型的頁面調(diào)用，設(shè)置獨(dú)立文件再進(jìn)行調(diào)用就保證了頁面代碼的整潔，避免代碼冗余。

PS：最近有種說法，就是除去公共部分的css代碼，把頁面單獨(dú)使用到的css代碼直接寫在頁面模板里，這樣精簡css文件代碼，在調(diào)用css文件的時候減少代碼渲染的時間，提供頁面打開速度。這在理論上是可行的，只是會讓工作量加大，大家具體權(quán)衡吧！

五、盡量少用js

有些朋友為了讓頁面看起來更炫酷，使用了大量的js代碼，這樣炫酷的效果是達(dá)到了，但卻忽略了這些特效的代碼會大大影響頁面打開速度！對seo優(yōu)化是極為不利的。

六、圖片處理

關(guān)于圖片的處理注意說兩點(diǎn)，一是添加圖片的alt屬性，來幫助搜索引擎識別圖片內(nèi)容；二是設(shè)置尺寸，尤其是在pc端，設(shè)置了尺寸，打開頁面后就減少了渲染的過程。

在前端頁面代碼優(yōu)化中還有很多小細(xì)節(jié)，大家需要記住，能夠提高頁面打開速度以及有助于搜索引擎識別頁面內(nèi)容的地方都值得去研究。