網頁優化之表格使用及網頁減肥

標簽：網頁,優化,表格,使用,減肥時間：2020年08月05日閱讀次

表格是網頁最重要的排版方式。

1.如果某個網頁采用了大段的長篇文本，除了可以將一頁文本分成多面，還可以考慮將文本置入不同表格中，這樣不僅管理方便，也使得該頁加載時每個表格內容依次加載，這樣訪問者就可以一邊看已下載內容一邊等待剩余部分加載，而不是等待很久之后才一齊加載出來。

例如：新浪新聞

2.表格之內套嵌太多表格也不利于頁面加載，因瀏覽器是先加載完大表格之后再加載內嵌的小表格，因此內嵌表格會最終降低整頁加載速度。

3.盡量采用XHTML標準，使用DIV代替表格。

具體方法是采用CSS里面的 FLOAT 屬性，position 屬性等定位

使用FLOAT 屬性的例子。復雜三欄式版面

使用position 屬性等定位。復雜版面設計.htm

網頁減肥

代碼設置不妥不僅延長網頁加載時間，也嚴重影響蜘蛛程序對網頁內容的抓取。通過對網頁代碼進行清減去掉臃腫雜亂的代碼，減小網頁文件大小，能夠加快網頁加載速度，讓蜘蛛快速索引到重要內容。整個網頁最好不要超過30K，文字內容最好5K-10K之間，Google 只對內容的前5000個字進行索引。

網頁減肥重點涉及以下幾個要點：

1.CSS 樣式

網頁制作應通過 CSS（層疊樣式表單）來統一定制字體風格。例如：

<b style="color:red;font-size:16px;">濰坊網站建設</b>

----------------------

b { color:red;font-size:16px; } /*通用對象*/

#divmain {font-size:12px;} /* ID 對象 */

.red {color:red;}/* 定制類別 */

.red b {color:green;}/* 定制類別下的通用對象*/

</style>

<b>濰坊網站建設</b>

CSS 減肥示例文件把文字的字體、字號、顏色、背景色等統一起來，不用對每段文字單獨進行格式定義，從而減少大量重復性標簽。注意把所有css文件單獨存放在命名為 css 的外部文件中。

語法： <link rel="stylesheet" type="text/css" href="/common/client.css">

作用的優先級：自身的style屬性 > 頁面的內部style對象 > 頁面外部css文件。

2.JavaScript ：

1. 簡化js中的函數名稱和變量。

例如：Google，里面的函數名稱只有 1 個或者 2 個字符。

2. 將網頁的公共部分轉換為腳本并存于 js 文件里。這樣可以減少文件大小，加快下載速度，同時也方便管理。不過不能將導航等等優化的關鍵代碼轉換成 js，否則搜索引擎搜索不到。

轉換方式：

原來：<h1>天天收藏夾</h1>

腳本：document.write(“<h1>天天收藏夾</h1>”);

例如：華軍軟件園源代碼，將標題、導航等等都放著js文件里，將導航放在js里面就不太好

了。

3. 使用 base 標簽：

Base 標簽是一個全集控制的標簽。

比如：

其中 http://wfwangluo.com/ 和 target=”_blank”: 多次重復，增加無用的代碼。

修改為：

<head>

</head>

<body>

</body>

4. 慎用網頁減肥工具

通常的網頁減肥工具，對html減肥具有一定的破壞性，常常為了減肥將標簽的后半個標簽刪除，

造成網頁的不完整。

處理前：<table><tr><td>第一行</td></tr><tr><td>第二行</td></tr></table>

處理后：<table><tr><td>第一行<tr><td>第二行</table>

處理后 </td></tr> 被去掉了，使頁面不完整。

5. 刪除空格和回車

如果要更加苛刻的減肥，那最后一步就是刪除空格了，還可以使文件大小下降很多。

不過刪除空格后的頁面由于沒有階梯排列，將很難讀懂。

例子：百度首頁的代碼就非常緊湊。

上一篇：網頁優化之圖像優化和flash優化下一篇：網站優化之不同位置的網頁優化