合肥做網站,選擇瘋狗科技,專業、敬業的合肥網絡公司
首頁 > 網站SEO優化 > 詳情

專業前端開發必備:SEO 小知識

2017-10-27 13:43:29   來源:互聯網   瀏覽:  次
文 李晶晶前段時間官網優化,從而進一步的了解了 SEO,正好總結一下 SEO 知識,對于以后寫界面也是一個參考和標準。1 減少HTTP請求當我們請求的網頁文件中有很多圖片、CSS、JS 甚至音樂等信息時,將會頻繁的與服務器建立連接,

文/李晶晶

前段時間官網優化,從而進一步的了解了 SEO,正好總結一下 SEO 知識,對于以后寫界面也是一個參考和標準。

1.減少HTTP請求

當我們請求的網頁文件中有很多圖片、CSS、JS 甚至音樂等信息時,將會頻繁的與服務器建立連接,與釋放連接,這必定會造成資源的浪費,且每個 HTTP 請求都會對服務器和瀏覽器產生性能負擔。

網速相同的條件下,下載一個 100KB 的圖片比下載兩個 50KB 的圖片要快。

解決: 1.合并圖片(css sprites)

2.合并 CSS 和 JS 文件

3.圖片較多的頁面也可以使用 lazyLoad 等技術進行優化。

2.高效使用HTML標簽和css樣式

HTML 是一門用來描述網頁的一種語言,它使用標記標簽來描述網頁,作為一名合格的前端開發,你有必要去知道其常用標簽代表的含義(SEO)和屬性(表現形式)。

CSS 指層疊樣式表 (Cascading Style Sheets),如果說把頁面想象成一個人, HTML 就是人的骨架,CSS 就是人的衣裝,一個人的品味從他的衣裝就能一目了然。

一名專業的前端開發也是一名優秀的重構,因為在頁面中經常會有各種不合理的嵌套和重復定義的 CSS 樣式,不是說要你重構頁面,只是希望在碰到這種情況的時候解決這些問題。如這樣不合理的 HTML:

專業前端開發必備:SEO 小知識

或者這樣的 CSS: 

專業前端開發必備:SEO 小知識

以上都是對 HTML 和 CSS 非常糟糕的使用方法。

正確理解:HTML 是一門標記語言,使用合理的 HTML 標簽前你必須了解其屬性,比如 Flow Elements(流元素),Metadata Elements(元數據元素),Phrasing Elements(語法元素)。比較基礎的就是得知道塊級元素和內聯元素、盒模型、 SEO 方面的知識。

CSS 是用來渲染頁面的,也是存在渲染效率的問題。CSS 選擇符是從右向左進行匹配的,這里對 css 選擇符按照開銷從小到大的順序梳理一下:

ID 選擇符 #box

類選擇符 .box

標簽 div

偽類和偽元素 a:hover 當頁面被觸發引起回流(reflow)的時候,低效的選擇符依然會引發更高的

開銷,所以請避免低效。

3.CSSJS放到外部文件中引用,CSS放頭部,JS放尾

將 CSS 放在頂部能加快頁面內容顯示,并且能避免頁面產生白屏

將 JS 放在底部

JS 會阻塞對其后面內容的呈現

JS 會阻塞對其后面內容的下載

維護、易擴展,方便管理和重復利用。

正確理解:JavaScript 是瀏覽器中的霸主,為什么這么說,為在瀏覽器在執行 JavaScript 代碼時,不能同時做其它事情即<script>每次出現都會讓頁面等待腳本的解析和執行(不論 JavaScript 是內嵌的還是外鏈的,JavaScript 代碼執行完成后才繼續渲染頁面。這個也就是 JavaScript 的阻塞特性。

因為這個阻塞的特點,建議把 JavaScript 代碼放到</body>標簽以前,這樣既能有效的防止 JavaScript 的阻塞,又能使得頁面的 HTML 結構能更快的釋放。

4.壓縮圖片和使用圖片Sprite技術

其實壓縮圖片和圖片精靈是兩個方面的技術

現在由于工作的細分,專業的前端工程師已經少有機會去切圖了,可是關于圖片壓縮還是得略微了解,一般圖片壓縮的方式有:

1.縮小圖片分辨率;

2.改變圖片格式;

3.降低圖片保存質量;

關于圖片精靈(Sprite)技術就和我們工作直接相關,不管是在 CSS 中的圖片還是在 HTML 結構中的圖片都會產生 HTTP 請求,前端優化的第一條就是減少請求數,最直接有效的方法是使用圖片精靈(CSS Sprite)。圖片精靈就是把許多圖片放到一張大圖片里面,通過 CSS 來顯示圖片的一部分。在背景整合的時候,也需要考慮圖片質量同時也需要考慮圖片的大小,注意控制 Cookie 大小技術,Cookie 是有生命周期的,所以請注意設置合理的過期時間,合理地 Expire 時間和不要過早去清除 coockie,都會改善用戶的響應時間。

5.減少對DOM的操作

在《高性能 JavaScript》中這么比喻:“把 DOM 看成一個島嶼,把 JavaScript(ECMAScript)看成另一個島嶼,者之間以一座收費橋連接”。所以每次訪問 DOM 都會教一個過橋費,而訪問的次數越多,交的費用也就越多。所以一般建議盡量減少過橋次數。

解決辦法:修改和訪問 DOM 元素會造成頁面的 Repaint 和 Reflow,循環對 DOM 操作更是罪惡的行為。所以請合理的使用 JavaScript 變量儲存內容,考慮大量 DOM 元素中循環的性能開銷,在循環結束時一次性寫入。

減少對 DOM 元素的查詢和修改,查詢時可將其賦值給局部變量。注:在 IE 中:hover 會降低響應速度。

6.代碼性能優化

(1)display:none;優于 visibility:hidden;前者隱藏不占用物理空間,后者會占用。

(2)合并 margin,padding,border 的-top,-left,-right,-bottom 的設置,簡短簡潔。

(3)選擇器在滿足效果的基礎上,盡量簡單,減少嵌套,查詢的消耗。

(4)如若值為 0,則去掉單位,如 border-right:0px;可以寫為 border-right:0; (5)沒有邊框,用 border:none;優于 border;0;

(6)如果可以,顏色值盡量用三位字符表示,如 color:#336699;寫為:color:#369;

(7)在保持代碼解耦的前提下,盡量合并重復的代碼。

(8)background,font 的多個屬性盡可能縮寫。

如: 背景顏色,背景圖片,背景圖片的重復次數及背景圖片處于左右上下的位置,背景圖片的大小,都可以合在一起寫。

專業前端開發必備:SEO 小知識

(9)用 href="javascript:vold(0)"代替原來的 href="#",避免空鏈接點擊后重置到頁面首端。

(10)所有內頁指向首頁的鏈接寫成<a href="/">不必寫全。

(11)在 body 中,盡量少用圖片 repeat,且若用,圖片寬和高不少于 8px,否則加載背景圖片時候需要重復的次數會影響性能。

(12)圖片若小,盡可能使用 sprite 技術,減少 http 請求次數?!?200KB 圖片所需的加載時間基本是差不多的??蛻舳嗣匡@示一張圖片都會向服務器請求一次。所以圖片越多,請求次數越多,造成的延遲的可能性就越大。

(13)作為大型網站來說,首頁使用內聯式樣式表,這樣可以減少 http 請求數的同時,也可以防止裸奔。當然其他頁面需要使用外聯樣式表,這樣才可以方便維護。因為作為大型網站來說,他的首頁訪問量是非常的大的,所以:

把樣式表置于頂部

把腳本置于頁面底部

避免使用 CSS 表達式(Expression)

使用外部 JavaScript 和 CSS

削減 JavaScript 和 CSS

用 <link> 代替 @import

避免使用濾鏡

剔除重復腳本

減少 DOM 訪問

開發智能事件處理程序

最好的方案就是按照 HTML 規范在文檔 <head></head> 內加載你的

樣式表。

7.提高HTML加載速度

1頁面減肥頁面的肥瘦是影響加載速度最重要的因素;

刪除不必要的空格、注釋;

將 inline 的 script 和 css 移到外部文件;

可以使用 HTML Tidy 來給 HTML 減肥,還可以使用一些壓縮工具來給

JavaScript 減肥;

2減少文件數量

減少頁面上引用的文件數量可以減少 HTTP 連接數;

許多 JavaScript、CSS 文件可以合并最好合并;

3減少域名查詢

DNS 查詢和解析域名也是消耗時間的,所以要減少對外部 JavaScript、CSS、圖片等資源的引用,不同域名的使用越少越好;

4緩存重用數據使用緩存;

5優化頁面元素加載順序首先加載頁面最初顯示的內容和與之相關的 JavaScript 和 CSS; 然后加載 DHTML 相關的東西;

像什么不是最初顯示相關的圖片、flash、視頻等很肥的資源就最后加載;

6減少 inline JavaScript 的數量

瀏覽器 parser 會假設 inline JavaScript 會改變頁面結構,所以使用 inline JavaScript 開銷較大;

不要使用 document.write()這種輸出內容的方法,使用現代 W3C DOM 方法來為現代瀏覽器處理頁面內容;

7使用現代 CSS 和合法的標簽

使用現代 CSS 來減少標簽和圖像,例如使用現代 CSS+文字完全可以替代一些只有文字的圖片;

使用合法的標簽避免瀏覽器解析 HTML 時做“error correction”等操作,還可以被HTML Tidy(是用來清理 HTML 代碼的免費工具)來給 HTML 減肥;

8不要使用嵌套 tables 9指定圖像和 tables 的大小

如果瀏覽器可以立即決定圖像或 tables 的大小,那么它就可以馬上顯示頁面而不要重新做一些布局安排的工作,這不僅加快了頁面的顯示也預防了頁面完成加載后布局的一些不當的改變 image 使用 height 和 width;

table 使用 table-layout: fixed 并使用 col 和 colgroup 標簽指定 columns 的 width;

8.正確理解RepaintReflow

Repaint(重繪)就是在一個元素的外觀被改變,但沒有改變布局(寬高)的情況下發生,如改變 visibility、outline、背景色等等。

Reflow(重排)就是 DOM 的變化影響到了元素的幾何屬性(寬和高),瀏覽器會重新計算元素的幾何屬性,會使渲染樹中受到影響的部分失效,瀏覽器會驗證 DOM 樹上的所有其它結點的 visibility 屬性,這也是 Reflow 低效的原因。如:改變窗囗大小、改變文字大小、內容的改變、瀏覽器窗口變化,style 屬性的改變等等。如果 Reflow 的過于頻繁,CPU 使用率就會噌噌的往上漲。解決辦法:上面提到通過設置 style 屬性改變結點樣式的話,每設置一次都會導致一次 reflow,所以最好通過設置 class 的方式;有動畫效果的元素,它的 position 屬性應當設為 fixed 或 absolute,這樣不會影響其它元素的布局;如果功能需求上不能設置 position 為 fixed 或 absolute,那么就權衡速度的平滑性。

總之,因為 Reflow 有時確實不可避免,所以只能盡可能限制 Reflow 的影響范圍。

9.書寫html的時候做到結構語義化

結構中主要包括了 head 和 body 兩個部分,但是我們經常說的是結構語義化主要是 body 中的標簽,但是我在這里還是簡單的說一下 head,head 中其實包括了一些對于我們 seo 很有用的一些東西,比如 title,Description,Keywords,這些東西在爬蟲抓取的時候都是有幫助的,當然,還有其他的一些,比如設置緩存等一些其他的信息。

那么 body 中的話,包括的標簽就很多了,我覺得作為一個合格的前端開發人員你應該去熟悉他們,比如 div,span,h,ul,ol,dl,p 等等這類的標簽的使用。應該非常合理,還有就是注意 h 標簽的斷層,及 h1 標簽的使用,這些都是非常重要的。

同時在我們的結構中不要出現 style 和 onclick 這樣的內聯的樣式和事件。能夠注意結構與表現、行為的分離。

標簽語義化的好處:

(1)有利于搜索引擎;

(2)結構清晰的 HTML 在團隊合作中的作用 (3)有利于盲人屏幕閱讀器

10.使用JSON格式來進行數據交換

基本原理:

JSON 是一種輕量級的數據交換格式,采用完全獨立于語言的文本格式,是理想的數據交換格式。同時,JSON 是 JavaScript 原生格式,這意味著在 JavaScript 中處理 JSON 數據不需要任何特殊的 API 或工具包。

與 XML 序列化相比,JSON 序列化后產生的數據一般要比 XML 序列化后數據體積小,所以在 Facebook 等知名網站中都采用了 JSON 作為數據交換方式。

JS 操作 JSON:

在 JSON 中,有兩種結構:對象和數組。

  1. 一個對象以 “ { ” 開始,“ } ” 結束。每個“名稱”后跟一個 “ : ” ;“名稱/ 值對”之間使用 “ , ”(逗號)分隔。名稱用引號括起來;值如果是字符串則必須用引號括起來,數值型則不需要。如:

專業前端開發必備:SEO 小知識

2. 數組是值(value)的有序集合。一個數組以 “ [ ” 開始, “ ] ” 結束。值之間使用 “ , ” (逗號)分隔。如:

專業前端開發必備:SEO 小知識

對這種數組和對象字面量的操作是非常方便且高效的。如果預先知道 JSON 結構的情況下,使用 JSON 進行數據傳遞簡直是太美妙了,可以寫出很實用美觀可讀性強的代碼。

11.注意控制Cookie大小和污染

基本原理和使用方法:

有關 Cookie 的基礎和高級知識可以去看一篇文章《JavaScript 操作 Cookie》; 因為 Cookie 是本地的磁盤文件,每次瀏覽器都會去讀取相應的 Cookie,所以建議去除不必要的 Cookie,使 Coockie 體積盡量小以減少對用戶響應的影響;

使用 Cookie 跨域操作時注意在適應級別的域名上設置 cookie 以便使子域名不受其影響;

Cookie 是有生命周期的,所以請注意設置合理的過期時間,合理地 Expire時間和不要過早去清除 cookie,都會改善用戶的響應時間。

12.使用CDN加速(內容分發網絡)

CDN 的全稱是 Content Delivery Network,即內容分發網絡。

當頁面中有很多資源的時候,可以從不同的服務中去讀取,同時可以提高并行下載速度

其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定。通過在網絡各處放置節點服務器所構成的在現有的互聯網基礎之上的一層智能虛擬網絡,CDN 系統能夠實時地根據網絡流量和各節點的連接、負載狀況以及到用戶的距離和響應時間等綜合信息將用戶的請求重新導向離用戶最近的服務節點上。

不足之處:實時性不太好是 CDN 的致命缺陷。隨著對 CDN 需求的逐漸升溫, 這一缺陷將得到改進,使來自于遠程服務器的網絡內容網頁與復本服務器或緩存器中的網頁保持同步。

解決方法:是在網絡內容發生變化時將新的網絡內容從服務器端直接傳送到緩存器,或者當對網絡內容的訪問增加時將數據源服務器的網絡內容盡可能實時地復制到緩存服務器。

13.添加http Expires

為圖片視頻之類很少改變的資源設置長的 Expires 時間將直接減少 http 請求; 如果資源設置了 Expires 頭為將來的某個時間,下次訪問時候瀏覽器發現資源還沒有過期,會直接從緩存中讀取,不會再次產生 http 請求

14.壓縮組件

在 Server 端對 Response 資源進行壓縮再傳給瀏覽器,一般使用 GZIP。

15.確保Ajax請求遵守性能,必要時候應具備長久的expires

簡化要點:

(1)語義化 html 標簽,用合適的標簽嵌套合適的內容,不可過分依賴 div,對瀏覽器更友善就能更容易被抓取

(2)重要的內容 html 代碼放在前面,放在左邊。搜索引擎爬蟲是從左往右,從上到下進行抓取的,利用布局來實現重要的代碼在上面

(3)重要內容要寫在 html 架構里面,蜘蛛不會抓取 js 的內容

(4)盡量減少使用 iframe,因為蜘蛛不會抓取 iframe 的內容

(5)為圖片 img 加上 alt 屬性,加了 alt 就不必加 title 了,避免搜索引擎認為我們惡意優化。alt 能讓圖片沒加載時都能有文字提示

專業前端開發必備:SEO 小知識

(6)需要強調的地方加上 title,本頁面內跳轉 a 標簽內也要加 title (7)重要的地方可以保留文字,有些地方必須用圖,但是蜘蛛不會爬 img,這時應該設置文本,再用縮進隱藏的方法去掉文字,例如 logo 的優化就是這樣做的。注意隱藏不能用 display:none,蜘蛛不會檢索 display:none 的內容,應用這個方法的標簽一般是 logo,標題等重要信息

(8)盡量做到 js、css、html 的分離,不要在 html 中寫樣式代碼 (9)注釋的東西能去掉應該去掉,對搜索引擎更加友好

(10)css 放在頭部,js 放在尾部,盡量使用外鏈或者工具對 css 和 js 進行壓縮 (11)減少 http 的請求,使頁面更快加載 (12)使用本地緩存更快地訪問網站,使用 cdn 網絡,加快用戶訪問速度

(13)使用 G-ZIP 壓縮,瀏覽速度更快,搜索引擎抓取信息量更大

(14)Robots.txt 文件

(15)鏈接可根據實際需求添加 tilte 屬性以及 nofllow 值;非特殊性鏈接,鏈接地址一定要寫入 herf 屬性,有些前端開發人員為了省事,直接用 div 加個 click 事件當鏈接, 在視覺上和使用上確實是實現了鏈接效果,但是做過 SEO 優化的人員都知道,蜘蛛目前對于 js 的支持很差,基本無法讀取里面的鏈接地址。所以說用 click 事件是絕對不允許的,特別是一些重要的導航鏈接。

專業前端開發必備:SEO 小知識

(16)關鍵一點是頭部的 title,description,keyword 的設置。

1.title 設置不宜過長,要簡短,網站的名字與相關的小內容,一般為 10-20 個字。不能重復

2.keywords 設置 10 個關鍵詞,沒個詞不能太長,簡短且符合你網站的特點,

不能重復

3.description,50 個字內描述你的網站。注:description 寫原創的話,并包含 2-3 個關鍵詞比較好;

相關熱詞搜索:前端 知識 專業 上一篇:關于英文網站SEO優化技巧 下一篇:網站建設必須要牢記的知識
多人做人爱的视频vip