相對于CSS及javascript優化來講,表格現在前臺頁用得比較少,但遇到需要用表格我們還是要會進行優化控制,以確何整個網站的品質,前面我們通過《在SEO過程如何對頁面中javascript進行優化》介紹網頁中js調用的幾種方式,例如頭部調用、底部調用、外部調用,最好就是使用外調用來提高整個頁面的運行效率和速度,接下來南昌網站制作公司百恒網絡SEO專員介紹基本的CSS優化操作方式.
? ? ?精簡代碼的最后一步就是對表格進行優化。表格優化主要是解決表格之間的嵌套問題,讓表格之間保持獨立,從而加快頁面在瀏覽器中的顯示速度,提高用戶體驗。同時,又可以精簡頁面代碼,提高頁面的搜索引擎友好性。 ? ? ? ?在介紹表格優化之前,我們先來了解一下瀏覽器解析HTML代碼的過程。當瀏覽器的編譯器遇到一個開始標簽時,就會尋找與之匹配的結束標簽,直至匹配上才會在瀏覽器中顯示該標簽中的內容。例如,當瀏覽器的編譯器遇到
,直至匹配上才顯示表格里的內容。否則將繼續往下尋找,直至匹配為止。所以,如果表格間出現多次嵌套,特別是當這些表格里的內容較多的時候,打開頁面的速度就會特別慢,因為需要下載及編譯的內容特別龐大。
? ? ? ?目前絕大多數的網站都是使用DIV+CSS方式進行切版,表格嵌套方式會被逐步淘汰。?
? ? ? ?請看下面這個例子。一個3行1列的大表格,每個單元格里嵌套著一個小表格。假設每個小表格里內容的代碼量有50 KB,則大表格里代碼量至少有150 KB。也就是說,瀏覽器至少需要下載并執行150 KB的代碼后才能顯示表格里的內容。換句話說,只有下載并執行150KB的代碼后,這個頁面才會顯示。代碼內容如下所示,頁面效果如圖所示。
表格間相互嵌套的頁面
代碼:
? ? ? ?
? ? ? ?
? ? ? ? ? ? ?
? ? ? ?
? ? ? ? ? ? ? 50K內容 |
? ? ? ?
? ? ? ? ? ? ?
|
? ? ? ?
? ? ? ?
? ? ? ? ? ? ?
? ? ? ?
? ? ? ? ? ? ? 50K內容 |
? ? ? ?
? ? ? ? ? ? ?
|
? ? ? ?
? ? ? ?
? ? ? ? ? ? ?
? ? ? ?
? ? ? ? ? ? ? 50K內容 |
? ? ? ?
? ? ? ? ? ? ?
|
? ? ? ?
? ? ? ?如果讓表格之間保持獨立,即把所有的小表格及內容從大表格中抽離出來,頁面內容就會分散在3個小表格里,每個表格里內容的代碼量在50 KB左右,如下面代碼所示,這時瀏覽器只需下載并執行50 KB左右的代碼量,就可以顯示相應的內容,如圖所示:
表格間彼此獨立的頁面 經過精簡代碼,有效地刪除了頁面中的冗余代碼,降低了頁面體積,提高了頁面的搜索引擎友好性。 盡管我們總是想方設法地降低頁面的體積,但并不代表頁面的體積越小就越好。因為,頁面體積越小意味著頁面中的內容就會越少,能向用戶提供的信息量也就越少。然而,頁面的體積究竟多大才合理呢?這取決于網站的類型。一般認為,頁面的體積控制在100 KB左右會更受用戶及搜索引擎的歡迎(僅指HTML源代碼的部分,不包括圖片及其他多媒體元素)。?
? ? ? ?如果一個頁面超過100 KB,搜索引擎就可能會拒絕收錄100 KB后面的那部分內容甚至放棄抓取該頁面。除非這個頁面具有更高的權重或者相對重要的內容。例如,對于網站的首頁,即使是三四百KB,也極有可能會被收錄(如新浪網的首頁)。 由此可得出以下結論。
? ? ? ?一個頁面的體積保持在100 KB左右對于搜索引擎最為友好。?
? ? ? ?搜索引擎更加重視頁面中前100 KB的內容。?
? ? ? ?搜索引擎更愿意收錄體積在100 KB左右的頁面。換句話說,如果網站上大部分的頁面保持在100 KB左右,被搜索引擎收錄的機會就會大大增加。 隨著各方面技術的成熟,搜索引擎會慢慢接受體積更大的頁面。但是,為了提高用戶體驗,建議在規劃頁面的時候,頁面體積盡量保持在100 KB左右。 通過上面的操作,基本上清除了頁面中的冗余代碼。接下來,將介紹代碼優化的另一個重要任務——提高頁面相關性,主要包括頁面頭部優化及權重標簽使用。
? 本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://www.527701.com/如轉載請注明出處!