合肥seo：網站(zhàn)首頁代碼怎麽優化?相信很(hěn)多的網絡公司和(hé)企業老(lǎo)闆，都有考慮過這(zhè)個問題，我們對(duì)網站(zhàn)首頁代碼進行seo優化的目的在于提高(gāo)網站(zhàn)首頁打開(kāi)速度，而加快(kuài)網站(zhàn)打開(kāi)速度則有利于用(yòng)戶體驗度的提升和(hé)對(duì)搜索引擎的友好(hǎo)，因此，掌握如何優化網站(zhàn)首頁代碼方法和(hé)原則就顯得尤爲重要。下(xià)面拓野網絡就來(lái)爲大(dà)家分析，一起來(lái)看(kàn)看(kàn)吧：

　　一、如何提升網站(zhàn)打開(kāi)速度?

　　很(hěn)多網站(zhàn)，爲了(le)吸引訪客的注意，添加很(hěn)多組件，殊不知(zhī)這(zhè)樣的組件越多，會(huì)越加延遲網站(zhàn)的打開(kāi)速度;另外(wài)一方面，如果你(nǐ)的網站(zhàn)是圖片站(zhàn)，那麽更要合理(lǐ)的優化首頁代碼，有數據顯示，通過代碼瘦身可以讓頁面最高(gāo)縮減百分之三十。在此，seo教程自(zì)學網推薦閱讀網站(zhàn)頁面速度優化原則，衍生知(zhī)識點。

　　作(zuò)爲seo人員，需要懂得如何精簡代碼，如何加快(kuài)網站(zhàn)打開(kāi)速度，即使不是技術流，也(yě)因知(zhī)曉原理(lǐ)。在此，seo教程自(zì)學網總結了(le)一部分網站(zhàn)首頁代碼優化方法與原則，詳細如下(xià)：

　　1：删除多餘的社交類組件。

　　二、如何優化網站(zhàn)首頁代碼：社交組件

　　這(zhè)裏需要指出，我們在網站(zhàn)中放(fàng)入恰當的社交組件是建議(yì)的，但(dàn)我們應該删除多餘的社交類組件以提升網站(zhàn)加載打開(kāi)速度。舉個例子：某第三方網站(zhàn)提供的分享按鈕代碼體積大(dà)約爲1/2M，另外(wài)平台的分享代碼更小(xiǎo)，我們就可以選擇更小(xiǎo)的;在舉個例子，網站(zhàn)上(shàng)遍布各種組件，留言闆，在線溝通工(gōng)具，分享按鈕等，站(zhàn)長的初衷是好(hǎo)的，但(dàn)更多的組件意味着很(hěn)多網絡連接或強制在加載頁面之前進行，拉低(dī)了(le)網站(zhàn)的打開(kāi)速度，另外(wài)一方面也(yě)不利于用(yòng)戶體驗。在這(zhè)種情況下(xià)，我們就要優化首頁代碼，選擇更小(xiǎo)體積的代碼，删除多餘的組件代碼。

　　2：采用(yòng)用(yòng)戶點擊加載技術。

　　三、如何優化網站(zhàn)首頁代碼：響應式

　　如果你(nǐ)的網站(zhàn)是視(shì)頻站(zhàn)點或圖片站(zhàn)點，是不應該一次性加載網站(zhàn)的所有内容的，自(zì)動加載視(shì)頻，圖片等内容會(huì)加載API，這(zhè)會(huì)直接拉低(dī)整站(zhàn)的速度，建議(yì)的做法是根據用(yòng)戶的需要，讓他(tā)們自(zì)由點擊，通過點擊行爲加載應該呈現(xiàn)的資源;舉個例子，如果首頁有大(dà)量圖片内容，就可以采取滾動式頁面，通過用(yòng)戶的下(xià)拉行爲加載新的頁面，這(zhè)樣做有利于用(yòng)戶體驗，也(yě)有利于首頁打開(kāi)速度的提升。

　　3：使用(yòng)矢量技術處理(lǐ)圖片。

　　四、如何優化網站(zhàn)首頁代碼：矢量技術處理(lǐ)圖片

　　可縮放(fàng)矢量圖形是基于可擴展标記語言(标準通用(yòng)标記語言的子集)，用(yòng)于描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開(kāi)放(fàng)标準。

　　矢量技術處理(lǐ)圖片具備很(hěn)多優點，如：

　　五、用(yòng)戶可以任意縮放(fàng)圖像顯示，而不會(huì)破壞圖像的清晰度、細節等;

　　SVG圖像中的文(wén)字獨立于圖像，文(wén)字保留可編輯和(hé)可搜尋的狀态。也(yě)不會(huì)再有字體的限制，用(yòng)戶系統即使沒有安裝某一字體，也(yě)會(huì)看(kàn)到(dào)和(hé)他(tā)們制作(zuò)時(shí)完全相同的畫(huà)面。

　　總體來(lái)講，SVG文(wén)件比那些(xiē)GIF和(hé)JPEG格式的文(wén)件要小(xiǎo)很(hěn)多，因而下(xià)載也(yě)很(hěn)快(kuài)。

　　六、SVG 圖像可被搜索、索引、腳本化或壓縮。

　　也(yě)就是說，使用(yòng)矢量技術處理(lǐ)的圖片，可被搜索引擎識别，且相同情況下(xià)其文(wén)件會(huì)更小(xiǎo)。

　　在此，推薦的工(gōng)具有SVG edit，它可以将普通格式的文(wén)件轉換爲矢量圖。

　　4：巧用(yòng)css3代替圖片效果。

　　七、如何優化網站(zhàn)首頁代碼：css3

　　基于css3的進化，其已經可以生成陰影，圓角邊框，按鈕，背景等效果，幾乎可以取代傳統的切片技術。在這(zhè)樣的前提條件下(xià)，完全可以通過css代碼代替某些(xiē)圖片效果，其優點顯而易見，代碼比圖片要小(xiǎo)得多，也(yě)會(huì)提升網站(zhàn)首頁打開(kāi)速度。

　　另外(wài)一方面，如果使用(yòng)大(dà)量圖片布局網站(zhàn)，在不同的浏覽器下(xià)，就會(huì)形成某些(xiē)視(shì)覺問題，但(dàn)css3技術就不存在這(zhè)些(xiē)問題，它們可以完美(měi)的支持各浏覽器的兼容問題，而又不至于犧牲網站(zhàn)前端效果。

　　再次，seo教程自(zì)學網提醒：使用(yòng)css3制作(zuò)陰影等效果，其難度不小(xiǎo)，需要更專業的前端技術人員才能(néng)實現(xiàn)。

　　5：javascript簡稱js代碼優化。

　　八、如何優化網站(zhàn)首頁代碼：js代碼優化

　　衆所周知(zhī)，javascript特效的使用(yòng)是阻礙網站(zhàn)打開(kāi)速度的一個重要因素，對(duì)于這(zhè)個點，需要着重把握和(hé)注意。前面講了(le)css3可以取代很(hěn)多圖片效果，其還有别的功能(néng)，如可以取代部分js特效效果，效果強大(dà)。

　　使用(yòng)css3，取代部分js特效，有一些(xiē)優勢：

　　很(hěn)多情況下(xià)css3代碼的特效可以直接取代js代碼。

　　css3代碼體諒更小(xiǎo)，也(yě)更容易編寫。

　　6：用(yòng)圖标字體(icon fonts)代替首頁圖片。

　　如何優化網站(zhàn)首頁代碼：圖标字體(icon fonts)

　　利用(yòng)字體工(gōng)具把我們平時(shí) Web 上(shàng)用(yòng)的圖形圖标(icons)轉換成 web fonts，就成了(le) icon fonts，它可以借助 CSS 的 @font-face 嵌入到(dào)網頁裏，用(yòng)以顯示 icons。因爲字體是矢量化圖形，它天生具有「分辨率無關」的特性，在任何分辨率和(hé)PPI下(xià)面，都可以做到(dào)完美(měi)縮放(fàng)，不會(huì)像傳統位圖，如：png，jpeg，放(fàng)大(dà)後有鋸齒或模糊現(xiàn)象。

　　由于圖标字體的靈活性和(hé)易用(yòng)性使得圖标字體使用(yòng)越來(lái)越廣泛了(le)，我們經常可以看(kàn)到(dào)不同的UI框架都整合了(le)各種的圖标字體。

　　除了(le)「分辨率無關」這(zhè)個最大(dà)的優點之外(wài)，icon fonts 還具有：

　　文(wén)件小(xiǎo)：相比圖片幾十幾百KB的容量，icon fonts 幾乎是羽翼級輕量。

　　加載性能(néng)好(hǎo)：因爲圖标都被打包進一套字體内，http request 減少。這(zhè)如同我們常用(yòng)的 css sprites 技術。

　　支持CSS樣式：和(hé)普通字體一樣，你(nǐ)可以利用(yòng)CSS來(lái)定義大(dà)小(xiǎo)、顔色、陰影、hover狀态、透明(míng)度、漸變等等…

　　兼容性好(hǎo)：web fonts 起源很(hěn)早，别說主流浏覽器，連IE6/7都能(néng)良好(hǎo)支持。除了(le)一些(xiē)老(lǎo)的移動端浏覽器，如Android 2.1以下(xià)的初代浏覽器，Opera mini 這(zhè)類自(zì)限型浏覽器。

　　當然 icon fonts 也(yě)有它的不足：

　　樣式單一，無法針對(duì)不同分辨率來(lái)調整icon 的細節，比如降低(dī)大(dà)尺寸icon 的線條粗細。

　　顔色單一，CSS 無法方便的去定義彩色的 icon，倒是有通過疊加組合的方式來(lái)達到(dào)彩色圖标的目的。

　　移動端浏覽器兼容性還不夠完善，像Opera mini、Windows phone 7.0-7.8 都不能(néng)正常顯示icon fonts。

　　有少量的移動設備有可能(néng)會(huì)和(hé) icon fonts 的字符編碼沖突，導緻icon 顯示不正常(我們自(zì)己風(fēng)車Android 版本就碰到(dào)了(le)這(zhè)個問題)。

　　所以 icon fonts 也(yě)并不是一套完美(měi)的響應式圖片的解決方案，當它适宜你(nǐ)的應用(yòng)場景時(shí)，比如：

　　你(nǐ)的網站(zhàn)是扁平化或簡約風(fēng)格，圖标樣式單一，顔色爲純色。

　　你(nǐ)的目标用(yòng)戶使用(yòng)桌面浏覽器爲主，或者，

　　你(nǐ)願意爲非兼容設備做兼容hack。

　　icon fonts 是一個令設計(jì)師和(hé)前端工(gōng)程師都心花(huā)怒放(fàng)的方案。

　　icon fonts 的制作(zuò)主要有兩條思路：

　　利用(yòng)字體工(gōng)具手動制作(zuò)

　　利用(yòng)在線工(gōng)具自(zì)動生成

　　7. sprite技術優化首頁圖片體積。

　　如何優化網站(zhàn)首頁代碼：sprite(精靈)

　　Sprite”(精靈)這(zhè)個詞在計(jì)算(suàn)機圖形學中有它獨特的定義，由于遊戲、視(shì)頻等畫(huà)質越來(lái)越高(gāo)，必須有一種技術可以智能(néng)的處理(lǐ)材質和(hé)貼圖，并且要同時(shí)保持畫(huà)面流暢。“Sprite”就是這(zhè)樣一種技術，它将許多圖片組合到(dào)一個網格上(shàng)，然後通過程序将每個網格的内容定位到(dào)畫(huà)面上(shàng)。

　　Sprite被定位到(dào)一副靜态圖片上(shàng)，并且通過簡單的程序或硬件即可正确定位到(dào)畫(huà)面上(shàng)，一幅幅圖片就像是被“變”出來(lái)的，他(tā)們并沒有單獨占用(yòng)内存，所以被取名爲“Sprite精靈”。

　　時(shí)間進行到(dào)2000年，Web設計(jì)向着精緻、巧妙的方向發展。設計(jì)師們開(kāi)始考慮使用(yòng)非Javascript的方 式制作(zuò)鼠标滑過、懸停菜單的效果，這(zhè)時(shí)CSS Sprite應運而生，它基于同上(shàng)文(wén)提到(dào)的遊戲Sprite同樣的原理(lǐ)，并且使用(yòng)CSS更容易控制，很(hěn)快(kuài)的流行開(kāi)來(lái)。

　　當頁面加載時(shí)，不是加載每個單獨圖片，而是一次加載整個組合圖片。這(zhè)是一個了(le)不起的改進，它大(dà)大(dà)減少了(le)HTTP請(qǐng)求的次數，減輕服務器壓力，同時(shí)縮短了(le)懸停加載圖片所需要的時(shí)間延遲，使效果更流暢，不會(huì)停頓。

　　CSS Sprites可以用(yòng)在很(hěn)多場合，大(dà)型網站(zhàn)可以将許多單獨的圖片，以有機的方式組合起來(lái)，從(cóng)而使其便于維護和(hé)更新。圖片之間通常會(huì)留出較大(dà)的空(kōng)白(bái)，使 得圖片不會(huì)影響網頁的内容。但(dàn)同時(shí)CSS Sprite大(dà)多使用(yòng)于較固定的像素定位中，它的彈性較差，收到(dào)定位等因素的制約。所以，你(nǐ)需要在可維護性vs降低(dī)負載之間權衡利弊，選擇最适合你(nǐ)的項目 的方式。

　　在網站(zhàn)圖片的解決方案中，CSS3應該是首選，其次是SVG和(hé)icon font,最後才是Bitmap。經常使用(yòng)的Bitmap文(wén)件應該打包放(fàng)在一個單獨的sprite中，這(zhè)樣一來(lái)圖片就可以在CSS中訪問到(dào)了(le)，像這(zhè)樣：

　　.sprite {

　　width: 16px;

　　height: 16px;

　　background: url(“sprite.png”) 0 0 no-repeat;

　　}

　　.sprite.help { background-position: 0 -16px; }

　　.sprite.info { background-position: 0 -32px; }

　　.sprite.user { background-position: 0 -48px; }

　　換句話(huà)說我們把圖像檔案的内容内置在 HTML 檔案中，節省了(le)一個 HTTP 請(qǐng)求。

　　data uri的主要優點是減少了(le)http請(qǐng)求數，調用(yòng)起來(lái)比css sprite更加靈活，缺點是增加了(le)客戶端的資源消耗。

　　在所有浏覽器的非緩存的模式下(xià)， CSS sprite 方式比 data URI 方式快(kuài)了(le)數百微秒。但(dàn)事(shì)實上(shàng) CSS Sprite 比 Data URI 方式多發送了(le)一次連接請(qǐng)求，包括 TCP 慢啓動招緻所有相關的連接開(kāi)銷。

　　緩存條件下(xià) Android 4.2 和(hé) iOS 6 的 CSS sprite 模式都有大(dà)概 2 倍的速度提升，隻是 iOS 條件下(xià)減少了(le) 220ms 而 Android 減少了(le) 70ms (原生浏覽器)。相對(duì)來(lái)說，Chrome 和(hé) Firefox 的情況平衡得好(hǎo)點，緩存和(hé)非緩存情況下(xià)隻有 50% 到(dào) 60ms 左右的性能(néng)差異。

　　在這(zhè)裏我建議(yì)将 data URIs 用(yòng)于非常小(xiǎo)的資源，并且不能(néng)在 CSS 和(hé) 内聯 HTML 中多次使用(yòng)它們。

　　在利用(yòng)相關技術對(duì)網站(zhàn)首頁代碼，圖片，組件進行瘦身處理(lǐ)後，就需要使用(yòng)相關檢測工(gōng)具對(duì)網站(zhàn)速度進行測試。一般情況下(xià)，網站(zhàn)打開(kāi)速度應低(dī)于4秒。

　　推薦的網站(zhàn)速度檢測工(gōng)具包括“奇雲測 — 測試你(nǐ)的網站(zhàn)速度”，免費提供ping檢測,get檢測,DNS劫持檢測和(hé)網站(zhàn)打分等服務,努力打造最幹淨的網站(zhàn)檢測平台。

　　地址：ce.cloud.360.cn/

　　另外(wài)，百度官方也(yě)主推了(le)移動網頁加速MIP相關技術，是一套應用(yòng)于移動網頁的開(kāi)放(fàng)性技術标準,使用(yòng) MIP無需等待加載,頁面内容将以更友好(hǎo)的方式瞬時(shí)到(dào)達用(yòng)戶。

　　地址：https://www.mipengine.org/