仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳
今日爆老師和大家分享的話題是《代碼外置優化》。 主要介紹代碼外置的意義是什麼，javascript代碼外置優化怎麼做，css代碼合併怎麼做。
首先來瞭解一下什麼是代碼外置吧。 我們知道使用者所看到的網站和搜尋引擎蜘蛛看到的是不一樣的，使用者所看到的是從瀏覽器經過視覺化後的內容，所以會有文字，圖片，動畫，登陸等等。 但搜尋引擎蜘蛛看的是這些內容背後的原始代碼(HTML)，所以我們希望這些原始代碼越是簡易對於優化而言越是好，因為代碼的簡易度直接影響搜尋引擎爬取效率，也就是頁面是否被蜘蛛所喜愛，所收錄。
基於這個之上，頭部代碼無論是css還是js越是調用多對於主機請求就越多，那這樣會降低頁面打開速度的。 就像這裡圖顯示的，比如這個頁面有4條js調用+2條css調用，每次訪問這個頁面每條調用的代碼都會有載入和請求的時間，那對於蜘蛛抓取時也會碰到這樣的問題。 所以代碼必須進行合併調用。
另有一種情況並不是調用代碼多，而是在一個頁面裡把js或是css代碼直接寫進去了。 這種情況在很多網站都有出現。 這會是比較糟糕的一種情況，因為css或是js代碼一般裡面的字元會是非常多的。 這就會稀釋我們頁面核心的內容(正文)，一大堆字元蜘蛛也是會爬取的，那這個效率就下降了不是嗎。 所以css或js代碼直接寫在頁面中，我們就要做代碼外置優化的工作了。
從原理上來講，代碼外置就是從頁面中移除代碼到資料夾中。 這個資料夾是在主機端上一個某一個適當的目錄下，比如js我們放在js目錄下，css放在style目錄下。 隨後移除掉頁面上的原始字元，並在<head>增加<link rel=」stylesheet」 href=」" type=」text/css」 media=」all」 /> 或是<ｓｃｒｉｐｔ language=」javaｓｃｒｉｐｔ」 type=」text/javaｓｃｒｉｐｔ」 src=」"></ｓｃｒｉｐｔ> 。 src和href就是填入要調用的檔路徑。
好，接下來具體聊一下怎麼優化。 首先是JS代碼寫入在頁面中的優化。
1)先要找到被大量寫入頁面的代碼，確定哪些是可以安全移出去的
2)我們用notepad(記事本)創建一個function.js文本
3)把要移除的代碼paste到這個文本中，save就好了。
4)把這個function.js新檔上傳到指定的js目錄下面
5)在被優化的頁面<head>中加入<ｓｃｒｉｐｔ language=」javaｓｃｒｉｐｔ」 type=」text/javaｓｃｒｉｐｔ」 src=「/js/function.js」></ ｓｃｒｉｐｔ> 調用並移除之前那一大堆js字元。
合併JS優化的步驟也同樣簡單：
1)在中找到要被合併的調用代碼
2)在FTP上找到這幾個JS檔的物理位置
3)打開其中一個或是創建一個新js檔，把剛才幾個js代碼所有內容拷貝在一起
4)save這個js檔並上傳到合適的週邊資料夾裡面
5)在被優化的頁面頭部增加調用代碼<ｓｃｒｉｐｔ language=」javaｓｃｒｉｐｔ」 type=」text/javaｓｃｒｉｐｔ」 src=「/js/function.js」></ｓｃｒｉｐｔ> 並移除之前那幾段調用代碼。
挨到css代碼優化了，同樣的道理先看如何優化被寫入css的頁面吧。
1)先要找到被大量寫入頁面的代碼，確定哪些是可以安全移出去的
2)我們用notepad(記事本)創建一個base.css文本
3)把要移除的代碼paste到這個文本中，save就好了。
4)把這個base.css新檔上傳到指定的style目錄下面
5)在被優化的頁面<head>中加入<link rel=」stylesheet」 href=」/style/base.css」 type=」text/css」 media=」all」 /> 調用並移除之前那一大堆css字元。
合併CSS優化的步驟也同樣簡單：
1)在中找到要被合併的調用代碼
2)在FTP上找到這幾個css檔的物理位置
3)打開其中一個或是創建一個新css檔，利用@import url(「」)來調用其他css檔裡的內容，和js不一樣不需要把內容全部copy進來
4)save這個css檔並上傳到合適的週邊資料夾裡面
5)在被優化的頁面頭部<ｓｃｒｉｐｔ language=」javaｓｃｒｉｐｔ」 type=」text/javaｓｃｒｉｐｔ」 src=「/js/function.js」></ｓｃｒｉｐｔ>調用代碼。
只要你懂了這個優化的緣由和原理，進行一次操作你就一定會了。 其實一點都不難，如果哪裡不清楚，也可以google一下，網上有非常多的解決方案也可以來諮道學堂查閱資訊。
原文來自諮道一課(含視頻講解)：HTTP://www.zvenue.cn/zclass/tactic-class/coding-removal-optimization.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
