如何利用極客精神優(yōu)化網(wǎng)站的網(wǎng)絡(luò)組件和代碼

時間：2022-05-30 15:18:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-30 15:18:01 來源：網(wǎng)絡(luò)營銷

如今，很多的網(wǎng)站為了美化網(wǎng)站頁面或網(wǎng)站功能的完善，常常為網(wǎng)站加了很多的組件，但作為一名SEO人員，我們就要為我們的網(wǎng)站做些頁面優(yōu)化和代碼精簡了，尤其是一些圖片網(wǎng)站，合理的頁面優(yōu)化技巧可以使網(wǎng)站的頁面縮減10%-30%（具體可查看億企邦《網(wǎng)站頁面精簡的10個優(yōu)化技巧》的相關(guān)介紹），這樣可以最大限度提高網(wǎng)站的打開速度。

可如果你是一名擁有極客精神的SEO人員，你還需要對你的社交網(wǎng)絡(luò)組件和常規(guī)代碼進行再次的優(yōu)化，對此，億企邦特意整理了以下10個建議，教大家如何優(yōu)化網(wǎng)站的網(wǎng)絡(luò)組件和代碼。

1、移除網(wǎng)站中社交網(wǎng)絡(luò)的組件

看到這個標題請不要驚訝，我并不是讓你放棄第三方社交平臺，而是希望你能放棄那些肥胖的官方組件，你的網(wǎng)站中有社交平臺的分享按鈕么？這些按鈕會為你的網(wǎng)站增重大概0.5M，我們知道，這些分享功能都是由JavaScript實現(xiàn)的，有些分享組件的網(wǎng)絡(luò)連接會強制在加載頁面之前進行。

太大的社交組件完全沒有必要，你完全可以添加一個輕量級的社交分享按鈕在你的網(wǎng)頁中，幾行html代碼就能搞定的事為什么要弄的這么復(fù)雜呢？很多人可能都沒有在意到一個小細節(jié)，F(xiàn)aceBook的官方“贊”按鈕就要270KB，現(xiàn)在你應(yīng)該明白這么做的必要性了，我們應(yīng)該深入研究如何優(yōu)化社交組件。

2、檢查所有第三方組件的大小

社交網(wǎng)絡(luò)并不是唯一的原因，其它第三方的組件也大大增大了你網(wǎng)站的大小，這些組件有時候甚至會加載其它網(wǎng)站的內(nèi)容，這些加載的數(shù)據(jù)可能高達幾百KB。

如果你必須要使用這個組件，那我們要考慮的就是如何更好的處理和簡化這個組件了，理想情況下，億企邦認為JavaScript組件應(yīng)該都是輕量級的，它們在頁面底部被加載。

3、考慮使用懶加載或內(nèi)容點播

假設(shè)你的網(wǎng)站是用來顯示視頻供應(yīng)商提供的視頻，無論用戶是否有意要播放，頁面都會加載視頻API和其它相關(guān)的資源，為什么不讓用戶請求之后，再加載這些東西呢？

你也可以采用滾動式頁面，在用戶往下拉滾動條時再開始加載新的內(nèi)容，這樣做雖然可能會對SEO造成影響，但是在特定的情況下，如照片展示，微博內(nèi)容展示等都會有不錯的效果。

4、使用可縮放矢量圖(SVGs)

SVGs包括點，線和圖形，它們被以矢量的形式被定義在XML中，SVGs是響應(yīng)式設(shè)計中比更理解的解決方案，它們可以縮放成任意大小而且不會影響到顯示的效果，而且文件大小一般都會小于bitmap。

當然，SVGs并不是在任何情況下都適用，如果是相冊或是混合通道的圖片就應(yīng)該使用JPG或是PNG格式，其他比如logo，圖表可以放心選用SVGs。

有一些工具可以直接把bitmaps格式的圖轉(zhuǎn)成矢量格式，但是多少影響到圖片的效果，這里推薦Inkscape和SVG edit，它們都是很不錯的創(chuàng)建SVGs的工具包。

5、用CSS取代圖片

你還在用切片技術(shù)創(chuàng)建圖片的圓角邊框等樣式嗎？我們都知道，CSS可以生成很多種前臺效果，包括各種樣式的按鈕，背景……，雖然他們在不同的瀏覽器中可能會有不同的展示樣式，但用戶并不會在意這些，他們不會像你一樣開很多個瀏覽器對比同樣的代碼會有什么樣的區(qū)別。

你完全不用擔心古代瀏覽器會對CSS樣式造成影響，當你構(gòu)建一個響應(yīng)式設(shè)計的頁面，你要通配各種大小的屏蔽，這個時候如果你還是用圖片就會有很多問題，所以CSS是很好的選擇（具體可查看億企邦《CSS無圖片技術(shù)的實現(xiàn)方法有哪些》的相關(guān)介紹）。

不過需要注意的是重繪CSS的陰影和梯度代價也是非常大的，特別是你同時在幾十個元素中都添加了這些特性，所以你必須多次去實踐，對比在你的網(wǎng)站中是用CSS好還是用圖片好，這些都要因網(wǎng)站具體情況而定。

6、用CSS效果和動畫取代JavaScript

如果在你的JavaScript代碼中到處都是$("#x").fade() 和 $("#y").slideDown()這會對你的網(wǎng)站造成很大的影響。

在幾年前我們必須得這么做，但是現(xiàn)在不同了，我們可以選擇用CSS3的animations，transitions和transformations取代了JavaScript的效果，原因如下：

（1）、CSS3 animation是由本地瀏覽器自主繪制的，在沒有錯誤的情況下，它會比JavaScript效果好，而且快很多。

（2）、CSS3 animation代碼更容易編寫，而且代碼量少。

（3）、如果JavaScript不使用第三方類庫，3D效果的實現(xiàn)會比CSS3提供3D轉(zhuǎn)換難很多。

7、用圖標字體(icon fonts)代替圖片

利用字體工具把我們平時Web上用的圖形圖標（icons）轉(zhuǎn)換成web fonts，就成了icon fonts，它可以借助CSS的@font-face 嵌入到網(wǎng)頁里，用以顯示icons，因為字體是矢量化圖形，它天生具有“分辨率無關(guān)”的特性，在任何分辨率和PPI下面，都可以做到完美縮放，不會像傳統(tǒng)位圖，如：png，jpeg，放大后有鋸齒或模糊現(xiàn)象（具體可查看億企邦《JPG、PNG和GIF圖片的基本原理及優(yōu)化方法》的相關(guān)介紹）。

由于圖標字體的靈活性和易用性使得圖標字體使用越來越廣泛了，我們經(jīng)?？梢钥吹讲煌腢I框架都整合了各種的圖標字體。

除了“分辨率無關(guān)”這個最大的優(yōu)點之外，icon fonts還具有：

（1）、文件小：相比圖片幾十幾百KB的容量，icon fonts幾乎是羽翼級輕量。

（2）、加載性能好：因為圖標都被打包進一套字體內(nèi)，http request減少，這如同我們常用的css sprites技術(shù)。

（3）、支持CSS樣式：和普通字體一樣，你可以利用CSS來定義大小、顏色、陰影、hover狀態(tài)、透明度、漸變等等。

（4）、兼容性好：web fonts起源很早，別說主流瀏覽器，連IE6/7都能良好支持，除了一些老的移動端瀏覽器，如Android 2.1以下的初代瀏覽器，Opera mini這類自限型瀏覽器。

當然icon fonts也有它的不足：

（1）、樣式單一，無法針對不同分辨率來調(diào)整icon的細節(jié)，比如降低大尺寸icon的線條粗細。

（2）、顏色單一，CSS無法方便的去定義彩色的icon，倒是有通過疊加組合的方式來達到彩色圖標的目的。

（3）、移動端瀏覽器兼容性還不夠完善，像Opera mini、Windows phone 7.0-7.8都不能正常顯示icon fonts。

（4）、有少量的移動設(shè)備有可能會和icon fonts的字符編碼沖突，導(dǎo)致icon顯示不正常（我們自己風車Android版本就碰到了這個問題）。

所以，icon fonts也并不是一套完美的響應(yīng)式圖片的解決方案，當它適宜你的應(yīng)用場景時，比如：

（1）、你的網(wǎng)站是扁平化或簡約風格，圖標樣式單一，顏色為純色。

（2）、你的目標用戶使用桌面瀏覽器為主，或者你愿意為非兼容設(shè)備做兼容hack。

icon fonts是一個令設(shè)計師和前端工程師都心花怒放的方案。

icon fonts的制作主要有兩條思路：

（1）、利用字體工具手動制作。

（2）、利用在線工具自動生成。

8、使用sprite來優(yōu)化圖片資源

“Sprite”(精靈)這個詞在計算機圖形學中有它獨特的定義，由于游戲、視頻等畫質(zhì)越來越高，必須有一種技術(shù)可以智能的處理材質(zhì)和貼圖，并且要同時保持畫面流暢。

“Sprite”就是這樣一種技術(shù)，它將許多圖片組合到一個網(wǎng)格上，然后通過程序?qū)⒚總€網(wǎng)格的內(nèi)容定位到畫面上。

Sprite被定位到一副靜態(tài)圖片上，并且通過簡單的程序或硬件即可正確定位到畫面上，一幅幅圖片就像是被“變”出來的，他們并沒有單獨占用內(nèi)存，所以被取名為“Sprite精靈”。

時間進行到2000年，Web設(shè)計向著精致、巧妙的方向發(fā)展，設(shè)計師們開始考慮使用非Javascript的方式制作鼠標滑過、懸停菜單的效果，這時CSS Sprite應(yīng)運而生，它基于同上文提到的游戲Sprite同樣的原理，并且使用CSS更容易控制，很快的流行開來。

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

CSS Sprites可以用在很多場合，大型網(wǎng)站可以將許多單獨的圖片，以有機的方式組合起來，從而使其便于維護和更新，圖片之間通常會留出較大的空白，使得圖片不會影響網(wǎng)頁的內(nèi)容。

但同時CSS Sprite大多使用于較固定的像素定位中，它的彈性較差，收到定位等因素的制約，所以，你需要在可維護性vs降低負載之間權(quán)衡利弊，選擇最適合你的項目的方式。

在網(wǎng)站圖片的解決方案中，CSS3應(yīng)該是首選，其次是SVG和icon font，最后才是Bitmap，經(jīng)常使用的Bitmap文件應(yīng)該打包放在一個單獨的sprite中，這樣一來圖片就可以在CSS中訪問到了，像這樣：

.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; }

9、使用data URIs

假設(shè)你有一個圖片，把它在網(wǎng)頁上顯示出來的標準方法是：

<img src="http://www.mahaixiang.cn/images/A.png"/>

這種取得資料的方法稱為http URI scheme，同樣的效果使用data URI scheme可以寫成：

<img src="data:image/png;base64,iVBOKGgoAAAAQAAAADCAIAAAA7ElFQmCC" />

換句話說我們把圖像檔案的內(nèi)容內(nèi)置在HTML檔案中，節(jié)省了一個HTTP請求。

data uri的主要優(yōu)點是減少了http請求數(shù)，調(diào)用起來比css sprite更加靈活，缺點是增加了客戶端的資源消耗。

在所有瀏覽器的非緩存的模式下，CSS sprite方式比data URI方式快了數(shù)百微秒，但事實上CSS Sprite比Data URI方式多發(fā)送了一次連接請求，包括TCP慢啟動招致所有相關(guān)的連接開銷。

緩存條件下Android 4.2和iOS 6的CSS sprite模式都有大概2倍的速度提升，只是iOS條件下減少了220ms而Android減少了70ms（原生瀏覽器）。

相對來說，Chrome和Firefox的情況平衡得好點，緩存和非緩存情況下只有50%到60ms左右的性能差異。

在這里，億企邦建議大家將data URIs用于非常小的資源，并且不能在CSS和內(nèi)聯(lián)HTML中多次使用它們。

10、使用網(wǎng)站評估工具

檢查是否減肥成功的最好方法就是站到稱上稱一下，同樣，你需要使用網(wǎng)站評估工具評估一下你給網(wǎng)站“瘦身”的效果。

很多開發(fā)者工具和免費的在線測試工具都不錯，百度和Google的站長分析工具都很好用。

億企邦點評：

搜索引擎進入你網(wǎng)站的每一步工作就是提取文字內(nèi)容，而作為一名專業(yè)的站長或SEO來說，我們可以做的就是盡量減少搜索引擎提取文字內(nèi)容的難度，優(yōu)化網(wǎng)站頁面，精簡html代碼，盡量減少不必要的組件或代碼，減少文件大小，用一種極客精神來做SEO優(yōu)化，你會得到一種意想不到的效果。