DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> 重視網站前端代碼優化幾個細則
重視網站前端代碼優化幾個細則
編輯:SEO優化集錦     

歷經2年的學習,我對網站優化總結了幾點:網站結構優化,前端代碼優化,網頁設計優化,鏈接優化等四個方面。每個優化細節,都產生著交叉式的影響,而且對網站產生著不同的作用。然而前端代碼是網站的基礎語言,也是搜索引擎認知的語言,所以每個網站都要重視前端代碼,今天分享一下,我是如何進行優化前端代碼的。

前端代碼主要包括CSS語言和HTML語言。這裡主要說一下CSS代碼優化。

Css代碼優化對網站的好處是:

(1)加快用戶打開網站的速度,一般情況一下,用戶打開網站超過8秒,用戶就排除了這個網站。所以在優化代碼的時候,代碼簡單是重要的一個方面。簡單代碼是網頁的字節數減少了,減少了浏覽器下載代碼的時間。

(2)網站改版css便於修改,標准的css讓代碼整齊,簡單,不管是網站的改版,還是網站修改內容,都便於維護,省去大量的時間。

代碼優化細則:

(1)CSS代碼簡寫。這裡說的簡寫主要解決的問題是,網站代碼冗余,去除不必要的空格等等。如果可以用一句表達的語言,就不要多出幾行代碼,符合W3C標准。

代碼冗余

例如:最長用的margin,屬於多個屬性簡化為一條綜合屬性

未優化前

margin-left:2px;

margin-right:4px;

margin-top:8px;

margin-bottom:6px;

可以簡寫為

margin:8px 4px 6px 2px;

去除代碼空格

去除多余的空格鍵,可以有效減少網頁的字節數

例如:

.a{

Font-size:14px;

Border:2px solid red;

Padding:1px 2px;}

可以簡寫為:

.a{ Font-size:14px; Border:2px solid red; Padding:1px 2px;}

(2)同屬性提出

如果2個樣式帶有同樣的屬性,可以把同屬性單獨提出處理。例如A樣式和B樣式的字體顏色、大小、邊框都一樣,那麼就可以考慮提出。

例如:

.gongyong{font-size:12px;border:1px solid red}

.yangshi{ width:10px;}

.yangshi2{width:20px;}

(3)結構清晰優化

網站代碼清晰是指,把代碼分區處理:網站頭部、網站身體,網站底部,3個區域進行不同的布局。不同區間的代碼要區別總的選擇器,選擇不同顏色加以區分隔開處理。

總結:網站的前端代碼,搜索引擎重視評估程度為20%。代碼簡化,爬行的目錄層次淺,這樣加強了搜索引擎對代碼的友好程度,進而提高網站的權重,關鍵詞才會有良好的排名。如果代碼冗余,煩瑣,搜索引擎也就關注的少了。

來源:沈陽196團,http://www.196tuan.com

感謝 shimiao 的投稿

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved