網頁優化和有利於SEO的DIV+CSS的命名規則

notebook-30492_640

許多網路行銷專家都在替企業網站進行社交網路行銷,許多資訊公司也都在替企業網站操作seo行銷,也有許多網頁設計公司或是顧問公司在協助企業進網頁優化,那今天Designrock分享一些網頁優化的方式和有利於SEO的DIV+CSS的命名規則(現在最流行的)給妳看看喔!

網頁優化

1.盡量減少HTTP請求 通過合併文件,用css文本代替圖形文本盡可能的減少HTTP請求數量,使用css間距,css精靈,圖像映射和背景顏色節省請求數。

2.調整圖片大小並優化 優化圖片可以使用TinyPng 調整圖片到所需的像素 合併圖片css精靈 用HTML高度和寬度指定圖片大小

3.優化多媒體

4.將javascript轉換為css

5.使用服務端探測 如果大量使用javascript,就有必要進行服務器探測,最小化javascript開銷,使用服務器端或PHP/jsp探測來代替。

6.優化javascript獲取更快的執行速度和更小的文件體積

7.把table佈局轉為css佈局

8.將css規則替代內聯樣式

9.最小化初始顯示時間 網站要先加載網頁最重要的部分。網頁優化的目標不僅僅是提高速度,還要改善用戶體驗。

10.理智的加載javascript 摘自Steve Sounders的《High Performance Web sites》

1.用更少的HTTP請求減少對像開銷

2.使用內容髮佈網絡CDN
內容分發網絡,意思是盡可能的避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快,更穩定。
菜鳥理解:在離你最近的地方,放置一台性能好鏈接順暢的副本服務器,讓你能夠在以最近的距離,最快的速度獲取內容

3.添加Expires頭部信息
expire頭的內容是一個時間值,值就是資源在本地的過期時間,存在本地在本地緩存階段,找到一個對應的資源值,當前時間還沒有超過資源的過期時間,就直接使用這一個資源,不會發送http請求。
Cache-CONTROL:是http協議中常用的頭部之一。顧名思義,他是負責控制頁面的緩存機制。
如果該頭部指示緩存,緩存的內容也會存在本地,操作流程的expire相似,但是有不同的地方,cache-control有更多的選擇,而且也有更多的處理方式。

簡單的理解,服務器在發送請求的時候,添加了一個時間值,本機會根據這個時間值來判斷是否要重新獲取

4.Gzip壓縮文本文件
什麼是Gzip壓縮?思想就是將文件放在服務器上進行壓縮然後再存儲,可以大大減少文件的大小,傳輸之後,瀏覽器對文件進行減壓縮並執行。

5.把樣式表放在網頁的頂部

6.把腳本放到網頁主體的底部

7.避免使用css表達式
css expression 為css表達式,是用來將css屬性與javascript表達式關聯起來。 css expression可以是javascript計算的表達式的結果。性能消耗大。

8.將javascript和css保存到外部文件
9.將同一頁面中得到域名劃分為2到4個,減少DNS查詢從而減少DNS延遲
如何減少DNS查詢?將域名轉化為IP地址,再通過IP地址對應到域名,是DNS的查找過程。既然是查找過程就是需要消耗時間,一般情況下是20ms。在這個過程中瀏覽器是不會獲取資源。

10.精簡javascript

11.不要使用降低性能的重定向
原始請求被重新轉向到了其他請求。用戶想要訪​​問的頁面a重新指向了頁面b

12.刪除重複腳本,減少IE多餘HTTP請求

13.編寫可緩存的Ajax,盡量避免不必要的HTTP請求

資料來源:http://www.w3cfuns.com/blog-5452328-5401950.html

為何要網頁優化?

Content optimization: 老掉牙了, 就是內容為王啦, 內容優化要讓你的網站充滿誘人的內容。

Layout optimization: 編排優化, 就是讓各種browser、各種解析度、各種狀況下都能讓你的網站賞心悅目。

Objective optimization: 目的優化, 就是讓網站能夠達成您賦與的目的, 電子商務網站要能夠增加成交量, 靠廣告維生的能夠讓網友去點選廣告, 不同類型網站有不同的目的要達成。

User-interface optimization: 使用者界面優化, 許多網站沒有考慮人機界面, 往往讓人不想停留, 流失掉許多應有的流量。

Display optimization: 顯示反應優化, 也就是讓你的網站快速回應, 不能顯示一頁都要等幾分鐘。

Search-engine optimization: 這個就不必再提了, 我們整個站都在談搜尋引擎優化。

資料來源:http://seo.dns.com.tw/?p=1758

有利於SEO的DIV+CSS的命名規則引擎優化
(seo)有很多工作要做,其中對代碼的優化是一個很關鍵的步驟。為了更加符合SEO的規範,下面是目前流行的CSS+DIV的命名規則:

頁頭:header
登錄條:loginBar
標誌:logo
側欄:sideBar
廣告:banner
導航:nav
子導航:subNav
菜單:menu
子菜單:subMenu
搜索:search
滾動:scroll
頁面主體:main
內容:content
標籤頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
友情鏈接:friendLink
頁腳:footer
加入:joinus

指南:guild
服務:service
熱點:hot
新聞:news
下載:download
註冊:regsiter
狀態:status
按鈕:btn
投票:vote
合作夥伴:partner
版權:copyRight

CSS ID 的命名

外套:wrap
主導航:mainNav
子導航:subnav
頁腳:footer
整個頁面:content
頁眉:header
頁腳:footer
商標:label
標題:title
主導航:mainNav(globalNav)
頂導航:topnav
邊導航:sidebar
左導航:leftsideBar
右導航:rightsideBar
旗志:logo
標語:banner
菜單內容1:menu1Content
菜單容量:menuContainer
子菜單:submenu
邊導航圖標:sidebarIcon
註釋:note
麵包屑:breadCrumb(即頁面所處位置導航提示)
容器:container
內容:content
搜索:search
登陸:login
功能區:shop(如購物車,收銀台)
當前的current

樣式文件命名

主要的:master.css
佈局版面:layout.css
專欄:columns.css
文字:font.css
打印樣式:print.css
主題:themes.css

CSS文件命名規範

全局樣式:global.css;
框架佈局:layout.css;
字體樣式:font.css;
鏈接樣式:link.css;
打印樣式:print.css;

資料來源:http://www.w3cfuns.com/blog-5431390-5400162.html

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s