之所以本文標題是叫初步制作，是因為我覺得模板的制作與修改應該是基于大量的現有數據研究而得出的，但是一個網站上線，你必須要設計出一個初始模板才能獲取數據，而初始模板的設計也是有技巧的，若是我們模板過于糟糕，則需要我們修正數次才有可能得到最終的數據結果，這顯然對網站是不利的。

那么我們如何制作初始模板？

1.制作草圖。

在制作草圖時，我們要考慮以下幾個方面：

?競爭對手的網站設計。這里所說的競爭對手，是指你主關鍵詞自然排名前三的站點，在這里你要注意這么幾個方面：

a.對手的頁面布局。這個應該是你在設計第一套模板時耗時長的步驟，任何一個優(yōu)化站其訪問縱深和跳出率都是優(yōu)化人員格外關心的數據，既然你的前輩們如此布局網站，那可能有一定的道理在里面，比如其輪展的圖片的選擇、首頁調用欄目的選擇、首頁設計與其目標關鍵詞的相關性等，找出設置它們的理由，然后根據自身情況來制定首頁布局。

b.首頁打開的速度。若對方打開很快，那你至少要和其速度持平，但倘若對方打開較慢，則你的速度必須快過他。

c.分析你用戶的實際需求與潛在需求。實際需求由何而來，來自于入站的關鍵詞，比如你用戶搜索的是“天津人流多少錢”這個詞，那么其實際需求是想知道價格，但是其潛在需求是想在天津地區(qū)做人流，則無痛、安全等諸多因素可能是影響其最終轉化的重要環(huán)節(jié)，這時候你就要依托于模板，利用不同的位置將用戶進行細分，進行精心的轉化。這方面，可以參考那些做得好的競爭對手。

②優(yōu)化制作草圖時的細節(jié)。設計僅僅是一個方面，將設計由代碼實現的時候，就由很多seo因素要優(yōu)化了。

a.重要文字的css控制。一些重要文字，可以用h2或h3標簽，不必擔心h1標簽會引起不美觀，因為你完全可以通過css來控制你文字的展現。但要注意，切記不可多用，太多重點等于沒重點。

b.圖片web化，縮小大小。這沒什么好說的。

c.無意義的錨文字，例如“更多”，“點擊了解詳情”等，改用圖片鏈。

d.細節(jié)代碼要補全，例如為img標簽添加alt屬性等。

e.避免文字截斷。有時候一些開源程序中調用的錨文本若是文字太長，會被自動截斷（例如織夢CMS），我們要編寫css,將溢出的文字由“....”替代顯示，但是html代碼中依舊存在。

2.優(yōu)化模板速度。

說道優(yōu)化模板速度，我就需要先說一下瀏覽器的工作原理。

瀏覽器是如何工作的呢？簡單來說，其工作原理很簡單，用戶在瀏覽器中提供一個URL，比如“http://www.letians.cn/231.html”,則瀏覽器會將這段URL拆分為三部分。

然后將域名發(fā)給DNS解析，當解析成功后，再將文件名發(fā)給服務器，由服務器提取文件返回給瀏覽器，瀏覽器將文件解析展示給用戶。而這里要注明一點，就是當我們訪問網站首頁的時候，瀏覽器會自動將最后那個“/”過濾掉。

在此展開說一下，很多人問我做外鏈的時候，首頁加不加那個“/”有區(qū)別嗎，我想通過上述講解大家就應該明白了，是有區(qū)別的，但是隨著搜素引擎的發(fā)展，我感覺影響不大，但是還是建議大家做的時候統(tǒng)一一下，要么就都加，要么就都不加。

那么瀏覽器接收到文件開始處理的時候，主要是5大組件進行工作，這5大組件分別是：

用戶界面：我們平時看到的界面。

渲染引擎：負責解析文件源碼。

核心引擎：將渲染引擎與端口相結合的接口。

JS解析器：解析JS代碼。

數據存儲：存儲一些臨時文件，例如cookie。

這里要說一下，上述是功能性的組件，并非是瀏覽器的構成，不同的瀏覽器內核實現這些功能的方法不同。這5個部分只是對瀏覽器很膚淺、很模糊的概念性了解。

那么我們在模板中，要盡量如何操作呢？

a.減少請求路徑，凡是有一個路徑，我們的瀏覽器的就會多一次向服務器發(fā)送一次請求，如果在網頁中把多次使用的css、js等統(tǒng)一的放在的head，就需要一次請求。

b.減少JS代碼。JS代碼盡可能放在標簽內。

c.盡可能減少文件大小。

通過上述步驟，基本上初始的模板就已經制作完成了，剩下的就是在網站的運營過程中監(jiān)控用戶的聚焦點以及站內流量，來根據數據來具體的優(yōu)化用戶體驗了。

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復、物聯網開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！