論網頁的優化與網站優化的方式

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

談起網頁的優化這個問題很多人都沒有什麼概念，有很多的業內人士都對網頁優化一無所知或者知之甚少。 說起對網頁優化的理解，我曾經去各大搜尋引擎上搜索過"網頁優化"一類的話題，結果都是介紹如何優化搜尋引擎排名的文章，其實這只是優化概念的一個組成部分，而網頁的優化工作是由很多方面的優化組成的， 作為一名優秀的網頁優化工作人員必須具備多方面的知識，不僅僅要掌握網站設計製作技術(包括網站架構設計、網頁設計以及製作頁面編寫代碼等等);還要掌握很多電腦其他方面的知識(包括電子商務、人機交互、 易用性和一些相關的軟體知識等等);甚至需要掌握心理學、商業運作等相關知識。

我認為網頁的優化應該是由兩個方面組成的:1.技術優化，2.人文優化(這個分類只是我總結的，沒有人給出過具體定義)。 技術優化指的是代碼的優化、目錄結構的優化和針對搜尋引擎的優化等等針對技術方面的優化工作，一般都是看不見摸不著的但是會給使用者帶來不少方便也會給網站帶來更大的效益， 技術優化有一定的模式而且需要優化的東西也比較固定相對簡單一些只是時間問題;人文優化指的是交互性優化、易用性優化等等針對使用者使用方面的優化工作，這一部分是網站使用者看得見摸的著的東西， 人文優化是最花經歷最困難的因為我們要猜測消費者的心理。 下面我就分別對這兩個方面進行解釋。

1.技術優化:

技術優化主要分為代碼優化、目錄結構優化和針對搜尋引擎的優化三個部分。 這一部分的優化工作主要是由網站開發人員測試提出方案完成的，而且有一定的規則，所以相對要簡單一些只是時間問題。

(1)代碼優化:

　　代碼優化主要解決的問題就是頁面流覽速度和適應性的問題。 文字和圖片是構成頁面的兩個主要因素，所以我們的優化也要從文字和圖片開始。 文字我們在製作頁面的時候基本上都是定義好的一般使用宋體和12px，隨著代碼的標準化字體的樣式大小等等的指定應該使用css樣式表來完成，而現在被廣泛應用的< h1 >< /h1 >、< font size =×× color=×× >< /font >等等標籤都是不標準的，也會慢慢被css取代，現在很多大型的網站包括各個入口網站像是這樣不標準的問題還是廣泛存在幾乎每個頁面都會有， 所以css樣式表是我們在優化過程中應該注意檢查的問題(其實這個問題應該是在頁面製作的時候就解決的)。 圖片問題主要存在size過大的問題，在這裡我們把圖片的優化歸在代碼優化一部分一起介紹而不另分一類，是因為圖片優化與代碼內容優化的目的是一樣的。 網頁中一般應用兩種格式的圖片jpeg和gif，這兩種圖片的應用很多人把握的並不是很好，jpeg適用于顏色比較多、構成比較複雜的圖片(比如一些照片、漸變顏色等等)，gif適用于顏色比較少、構成比較簡單的圖片( 比如網站的logo、大的色塊構成的圖片等等)。 Gif圖片尤其要注意匯出的時候選擇顏色數目這樣也會達到很好的減小尺寸的效果。 對於一些比較大的圖片我們還可以將它切割成比較小的圖片進行拼接這樣也可以提高網頁的下載速度。 減小網頁size提高網頁下載速度還有一種簡易的方法就是使用一些網頁減肥的小工具，我們可以去下載一些這樣的工具他們可以使你的網頁縮小20%～50%達到事半功倍的效果。 表格是頁面最重要的排版方式，在瀏覽器讀取網頁代碼的時候，必須讀完一個完整的table才會顯示出來，

如果一個大的table裡邊含有很多小的table那麼瀏覽器會在讀完整個大的table才將整個的內容顯示出來。 我們在流覽一些頁面的時候經常會出現頁面半天才會顯示出來，最後是在等不及了按了"停止"按鈕，頁面一下子顯示出來了，這就是在一些小的table外邊嵌套了一個大的table， 而小table已經讀完了就是還沒讀完整個的table瀏覽器不會顯示，這樣會大大減慢頁面流覽速度。 因此我們要儘量減少表格層次，儘量避免將一些小的表格嵌套在大的表格中間。 還應該注意的是在使用dreamweaver製作網頁的時候經常會出現很多垃圾代碼，注意檢查刪除一些沒有用的代碼。 網頁的適應性就是在不同系統、不同瀏覽器和不同解析度的適應能力。 要注意的是解析度，應該最低照顧到800×600的使用者(解析度800×600的顯示尺寸780×428、解析度1024×768的顯示尺寸1007×600)，所以頁面最寬不要超過780，一定不要讓使用者橫向拖頁面。

如果一個大的table裡邊含有很多小的table那麼瀏覽器會在讀完整個大的table才將整個的內容顯示出來。 我們在流覽一些頁面的時候經常會出現頁面半天才會顯示出來，最後是在等不及了按了"停止"按鈕，頁面一下子顯示出來了，這就是在一些小的table外邊嵌套了一個大的table， 而小table已經讀完了就是還沒讀完整個的table瀏覽器不會顯示，這樣會大大減慢頁面流覽速度。 因此我們要儘量減少表格層次，儘量避免將一些小的表格嵌套在大的表格中間。 還應該注意的是在使用dreamweaver製作網頁的時候經常會出現很多垃圾代碼，注意檢查刪除一些沒有用的代碼。 網頁的適應性就是在不同系統、不同瀏覽器和不同解析度的適應能力。 要注意的是解析度，應該最低照顧到800×600的使用者(解析度800×600的顯示尺寸780×428、解析度1024×768的顯示尺寸1007×600)，所以頁面最寬不要超過780，一定不要讓使用者橫向拖頁面。

(2)目錄結構優化:

現在很多網站都將所有的頁面零散的放在同一個資料夾下而沒有分類，這樣做雖然可以但是會對以後的維護等工作帶來很大的麻煩。 我建議應該是建立一個大資料夾，裡邊包括各個頻道的資料夾、網頁頁面圖片資料夾、網頁內容圖片資料夾等等一個一個的單獨類別的資料夾，使得在維護時候可以方便的找到每一個頁面的具體位置。

(3)針對搜尋引擎的優化:

搜尋引擎優化是很多人都知道的一種優化專案，也是完整的優化工作必不可少的一個步驟。

"關鍵字"在搜尋引擎這個話題裡是一個核心的字眼，幾乎所有的針對搜尋引擎優化問題都是圍繞著"關鍵字"展開的。 有很多人盲目的追求在網頁中處處體現關鍵字，覺得這樣就會更容易被搜尋引擎搜到，其實這樣做並不一定合適。 比如前一陣子流行過的"鬼影秘笈"，方法就是用和網頁背景相同的顏色在頁面中隱藏了很多關鍵字，很多人現在還在用這個方法，但是隨著搜尋引擎功能越來越強大這個方法已經不那麼好用了，甚至會起到反作用。 "關鍵字"的體現要合理，比如我們可以製作一個"網站導航"的頁面，網站導航頁面會淋漓盡致的體現各個關鍵字，這個頁面不但方便使用者使用也會更容易的被搜尋引擎找到起到事半功倍的作用。

隨著搜尋引擎都有了圖片搜索功能，網頁裡邊的圖片也是體現關鍵字的好地方，在頁面裡邊加入圖片後千萬別忘記給圖片起一個"名字"(如:< IMG SRC="images.gif" WIDTH="100" HEIGHT="100" BORDER=0 ALT="圖片名稱" >)我們給圖片的名稱就可以是關鍵字。 功能變數名稱裡邊含有關鍵字也很重要，但是不宜過多，一般一個或者兩個最重要的就可以了，如果過多就會影響網站在搜尋引擎的排名而且不方便使用者記憶。 子頁面的名稱也是一樣，現在很多網站的子頁面名稱就是關鍵字的堆砌，其實這樣會降低每個關鍵字的出現機率，結果每個關鍵字都被打了折扣甚至被忽略適得其反。

在子頁面的命名上也有很大的學問，幾個關鍵字構成了子頁面的名稱，但是這幾個關鍵字用什麼連接呢?如果用分隔符號斷開關鍵字那麼搜尋引擎不會認為他們是一個一個的詞而會當他們是一個詞處理，但是有的分隔符號搜尋引擎同樣認不出來，比如"_ "和"-"在google裡邊底線"_"就不被接受，所以建議大家使用"-"和空格(空格碼:%20)，一般所有的搜尋引擎都會接受。 千萬不要用中文給頁面命名，頁面名稱、圖片名稱等等都要用英文字母(如:"首頁.html"或者"圖片.gif"一定要寫成"index.htm""image.gif" 等等)。

現在很多網頁雖然很好看但是並不實用，我們就拿現在很流行的跳越網頁面來說吧!現在很多企業網站都流行做一個跳越網頁面，或者是一段動感的flash或者是一張漂亮的圖片，他們認為這樣很漂亮特別能夠體現公司的形象， 其實他們並不知道這樣做非常影響搜尋引擎搜索你的網站。

2.人文優化:

人文優化主要是交互、易用性和網站表現的優化。 我曾經看過一本書是美國著名的優化大師斯蒂夫.克魯格寫的，他推崇的效果優化第一原則就是"別讓我動腦"。 也許這個概念看上去好像一點頭緒沒有，我第一次接觸這句話的時候也是有點暈，如果想要做到這一點那可是非常困難的。 "別讓我動腦"這個概念在不同的人身上有著不一樣的概念，這就回到了上邊所說的"人文優化是最花經歷最困難的因為我們要猜測消費者的心理"這句話。 人和人是不一樣的，每個人會因為生活的地域不同有著文化差異，或者因為受到的教育經歷不同有著理解問題的差異，或者是個人觀點和習慣的不同等等有著各種各樣的差異， 我們要讓所有人都能夠理解我們的網站能夠方便的使用網站達到他想要達到的目的這簡直是太難了，而人文優化要做的就是要把這些差異變為統一。

各個網站都會有不同的目的，有電子商務網站、企業的展示網站、個人網站等等。 現在我們就以最最需要進行人文優化的電子商務類型網站為例研究人文優化的大概過程。 電子商務網站這個概念很明確，就是要體現商務，可以是網上購物的、可以是線上票務的、可以是網上的交易平臺，總之就是讓使用者在網路上實現商務目的。 現在電子商務網站大體會有兩個部分B2B(商家對商家)、B2C(商家對普通零散使用者)，B2C是電子商務網站設計的最高境界，如果能夠做出成功的B2C網站那麼別的什麼企業展示網站或者B2B的商務網站等等就都不算什麼了， 原因也很簡單，就是因為上邊所提過的人和人的差異。 電子商務網站有一個很重要的指標就是"轉化率"(也就是上網流覽網頁的流覽者轉變為顧客的比率)。 這個概念也就是我們衡量一個電子商務網站是否成功的重要指標，他也在優化過程中佔有重要地位。 介紹完電子商務的一些相關概念我們言歸正傳，當我們要對網站進行優化的時候，我們很快的就完成技術優化，因為技術優化有特定的步驟需要優化的專案也比較固定而且有據可依。

但是很多人不知道人文優化該如何入手，其實也很簡單那就是"試用"，一般試用會分為兩個部分:首先我們會自己試用一下對網站有一個大概的瞭解，然後我們需要找一些普通使用者進行試用， 在普通使用者試用過程中我們不會給予任何提示只需要默默的觀察他們的操作步驟記錄每一個步驟的操作過程和所用時間瞭解他們的一些想法。 在"試用"以後我們就可以根據測試的結果分析出需要修改的部分。 切記在試用過程中我們千萬不能給被測試的使用者任何提示儘量不要打擾他們。 說回上邊提到的"別讓我動腦"這個概念，其實這句話就表達了一個意思就是"簡單"，使用簡單是一個電子商務網站成功的基礎。 "簡單"宗旨我們需要貫穿整個網站的每一個部分。

下邊我們按照"試用"流程分析一下在優化過程中需要注意的問題。 從登陸這個網站開始，我們是不是能夠清楚的看到這個網站叫什麼名字?是幹什麼的?那裡是產品的目錄?那裡是導航功能表?那裡是今天的重點推薦產品?那裡是折扣產品專區?這一連串的問號是針對電子商務網站而言的， 如果對於別的網站我們會考慮別的因素，比如針對一個新聞頁面而言，我們就會考慮那裡是今天的頭條新聞?我要看昨天晚上中國隊足球賽的比分和圖片在那裡?等等。 這種測試並沒有特定的規範，任何動作都是隨機的都是我們突發的動作，所以這樣的測試不能像是那種商場或者專賣店等等地方的測試一樣給我們一個很長的表格讓我們去畫對勾畫杈子。 一切測試做的都要非常自然，只有這樣我們才可以真正瞭解到使用者在使用過程中齙降睦?選N頤怯械氖焙蛞部梢願?徊饈勻艘桓鎏餑咳盟?ネ瓿桑?熱紓喝盟?ネ?舊下蛞徽拋鈈碌拇篤珼VD， 或者然他們去查找一個最新的消息甚至是一條一個月以前的消息。 整個測試都要在和諧的環境下進行，不要讓參與測試的人感到緊張，那樣會大大降低測試結果的正確性。 測試還需要根據經費、網站規模等等情況制訂不同的方案。

下面是一個使用者流覽一個網站的過程圖，這張圖有助於我們瞭解使用者流覽網站的整個過程。 我們可以根據這張圖列出的步驟細心觀察測試時候使用者在網站上完成一個工作時候在每一個步驟裡所用的時間、都做了些什麼，並記錄下來認真分析這些資料，這些資料也是我們優化動作的依據。

通常我們優化的重點都會集中在導航功能表、產品目錄、站內搜索、頁面配置、購買流程等等。 下邊我要舉一些小例子分析一下現在很多網站所犯的錯誤，我們如何進行優化。

我們先看一個大多數網站都會犯下的文字錯誤，文字是構成網頁的最重要的元素之一，我們文字可以用文字的顏色、大小和位置來區分他們的重要性，分為標題、內容等等。 有很多網站的首頁進去我們一眼看到的是黑壓壓的一片文字，馬上我們會對這個網站都沒有好感。 這就是我們國內很多網站都有的錯誤，網站會因不同的目的有不同的設計方向，很多企業的領導者並不懂得設計，他們會去參考一些別人的網站來對設計者提出自己網站的設計要求和想法，這樣就會造成不管什麼方向的網站感覺都一樣， 從而失去了自己的主題。

比如現在我們去一些企業的網站，上去之後沒看到這個企業是幹什麼的，第一眼就是大片的企業新聞，這樣的大片新聞感覺企業網站變成了新聞網站。 有人說了那我們把企業介紹放在首頁吧，這樣一上網站的首頁人家就看見我們公司是做什麼的了。 看上去真是好主意，但是我們應該明確一點使用者是在"流覽網頁"而不是在"閱讀網頁"，這樣大片的文字根本不會有人有興趣看，使用者只會對自己感興趣的東西進行閱讀，其它基本上都是流覽。

我們可以作一個簡單的試驗，現在你可以遞給你身邊的一個人一張報紙，讓他們看報紙，細心觀察一下他們怎麼看報紙，每一個人都會整個把報紙翻一下，起碼他會看完一整版的標題然後開始閱讀一個文章。 絕對沒有人會拿起報紙從左上角或者右下角開始一個字一個字的閱讀報紙。 網站的好處就是在於"連結"，我們可以充分的利用連結引導使用者閱讀他們感興趣的東西，或者引導他們閱讀我們希望他看見的東西。 我們現在就可以去優化一下以前的網站了，去掉首頁大片的文字，根據需要改成連結。

還有一個各個商業網站都會犯下的錯誤，就是在讓客戶填寫註冊資訊的時候需要必填的欄目太多。 很多上網的人都有這樣的經歷，現在大多說商務網站都會有註冊一欄，如果註冊成為會員就會有什麼什麼樣的服務，很好我們進去註冊一下吧。 點擊註冊按鈕，打開頁面，好傢伙怎麼要天那麼多條，還都是畫著紅色星號的必填!算了還是不註冊了!一下子這個網站會因為註冊少了很多顧客。

有的人沒被嚇跑堅持填寫，好吧開始填寫了使用者名、密碼、確認密碼......"身份證號碼"?" 手機號碼"?一下子我們停住了，不填這些可以麼?但是畫著紅色星號，算了我不想讓別人知道這些資訊，我也走吧，看看別的網站有沒有同樣的服務而且需要的資訊少一點，儘管別的網站服務不好而且不如這個網站有名氣。 這就是很多人上網的經歷，很多網站的擁有者急於求成，想馬上控制到客戶的資料，他們會覺得這樣就會占到市場的先機。 其實他們錯了，想一下我們先讓使用者都來使用我們的網站慢慢的他們覺得我們這裡很安全而且服務很好就會有人想得到更多的服務，他們自然而然的就會註冊這些資訊了。

但是我們在使用者還沒有了解這個網站的時候就把他們嚇跑了我們就會徹底的失去這部分使用者的，這樣給網站和企業帶來的損失要遠遠大於那些不管怎麼都會註冊的使用者帶來的利益要大。 所以當我們在優化過程中看到網站的註冊過程中有這些欄目的時候我們要建議他們把必填改為自願填寫，而且在一些關鍵頁面裡邊添加一些關於註冊客戶和普通客戶會享受不同待遇的提示，這樣會起到事半功倍的作用。

我們已經介紹了兩個關於人文優化的例子，由於這樣的例子很多我們也不一一列舉，要在實際的工作中去總結。 並不是最好看的網頁就是最好的網頁，實用性要比藝術性更重要。

上邊這些優化的問題適用于我們對一個已有的網站進行優化，如果我們要重新做一個新的網站，最好在初期就考慮一些這樣的問題，畢竟做任何事事先考慮要比事後彌補強的多。 這些緊緊是我自己的一些經驗總結和大家分享，文章還有很多不足之處，希望大家多多提點!