百度站長(zhǎng)近日出了一個(gè)MIP的功能入口，其實(shí)這個(gè)是谷歌的AMP的翻版，官方的解釋是：
MIP（Mobile Instant Page - 移動(dòng)網(wǎng)頁加速器），是一套應(yīng)用于移動(dòng)網(wǎng)頁的的開放性技術(shù)標(biāo)準(zhǔn)，通過提供MIP-HTML規(guī)范、MIP-JS運(yùn)行環(huán)境以及MIP-Cache頁面緩存系統(tǒng)，實(shí)現(xiàn)移動(dòng)網(wǎng)頁加速。
結(jié)合DedeCMS只需要在所有模板里增加幾句代碼即可。紅色部分是必須增加的。
<!DOCTYPE html> <html mip> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.css"> </head> <body>Hello World!</body> <script src="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.js"></script> </html>
還有許多重要說明請(qǐng)參考官方說明：https://www.mipengine.org/doc/2-tech/1-mip-html.html
自定義樣式規(guī)范
處于性能考慮，html中不允許使用內(nèi)聯(lián)的style，所有樣式只能放到head的style標(biāo)簽內(nèi)，參考本站首頁的模板。
<head>
<style mip-custom>
p{color:#c00;}
</style>
</head>
<body>
<p>Hello world!</p>
<p style="color:#c00">這樣的內(nèi)聯(lián)style不再采用</p>
</body>
什么是網(wǎng)頁加速，對(duì)網(wǎng)站SEO有多大影響
網(wǎng)頁加速顧名思義是讓網(wǎng)頁更快地傳送到客戶端，減少用戶的等待時(shí)間，對(duì)SEO來說有重要作用，用戶體驗(yàn)會(huì)影響到網(wǎng)站綜合數(shù)據(jù)（PV、停留時(shí)間、跳出率等）。因此要做好網(wǎng)站的SEO優(yōu)化，就要盡最大的努力讓網(wǎng)站的表現(xiàn)最好。
常見的網(wǎng)頁設(shè)計(jì)加速方法
1.良好的設(shè)計(jì)結(jié)構(gòu)
在網(wǎng)頁頭部添加下面代碼，遵循XHTML編碼，以提高下載和解析速度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
必須牢記的代碼標(biāo)簽規(guī)則：
①塊級(jí)元素（元素占用一行，垂直方向排列）采用單獨(dú)或者組合：<p>、<ul>-<li>、<dl>-<dt>-<dd>、<h1>~<h4>等；
②行內(nèi)元素（元素在同一行）采用：<a>、<b>、<i>、<em>、<span>；
③塊級(jí)元素包含行內(nèi)元素，行內(nèi)元素不包含塊級(jí)元素；
④行內(nèi)元素對(duì)width、height無效，可以設(shè)置line-height，margin、padding上下無效；
⑤采用display:block實(shí)現(xiàn)行內(nèi)元素變塊級(jí)元素，display:inline-block實(shí)現(xiàn)塊級(jí)元素元素變行間元素并可以設(shè)置margin、padding上下；
⑥標(biāo)簽盡量使用class類，減少使用id類，命名規(guī)則以簡(jiǎn)短小寫英文、小寫全拼音加數(shù)字或下劃線為主，不建議采用駝峰式命名，如
<p id="navHoverOne" class="navHoverOne">
例子：全通式導(dǎo)航HTML與CSS寫法
<p id="nav">
<ul>
<li class="hover"><a href="/">首頁</a></li>
<li><a href="/link1">欄目1</a></li>
<li><a href="/link2">欄目2</a></li>
<li><a href="/link4">欄目3</a></li>
</ul>
</p>
CSS樣式表
<style>
#nav{width:100%;}
#nav ul{width:1000px;margin:0 auto;}
#nav ul li a{display:inline-block;line-height:30px;padding:0 20px;background:#ccc;color:#808080;}
#nav ul li a:hover{background:#c00;}
#nav .hover{background:#c00;}
</style>
在MIP的規(guī)則下<style>被替換為<style mip-custom>，一些具體的標(biāo)簽參考官方說明。
2.網(wǎng)頁簡(jiǎn)潔，不宜填充過多內(nèi)容
特別以內(nèi)容為主題的博客類網(wǎng)站，每一篇的內(nèi)容簡(jiǎn)介盡量把重點(diǎn)概括，也可以采用文章開頭的幾十個(gè)字，建議單獨(dú)編寫簡(jiǎn)介，把關(guān)鍵詞和主要內(nèi)容包含在里面。
3.圖片和文字的合理采用
網(wǎng)站前端設(shè)計(jì)得非常大氣吸引人，圖片占據(jù)了絕大多數(shù)的空間，如果你的服務(wù)器不夠牛，請(qǐng)盡量采用文字的形式，這樣搜索引擎也能獲取更多關(guān)于這個(gè)頁面的信息。
不要用圖片代替文字，一些按鈕、不必要的小圖標(biāo)可以采用文字和CSS樣式的設(shè)計(jì)，盡量減少加載網(wǎng)頁的加載次數(shù)。現(xiàn)在瀏覽器兼容性強(qiáng)，一些ie6的兼容性完全不用考慮，可以采用CSS解決絕大多數(shù)的圖標(biāo)問題。
圖片路徑采用絕對(duì)路徑而不要帶有“/../”的相對(duì)路徑。圖片上傳前需要進(jìn)行處理，在清晰度和大小之間權(quán)衡，如果不是專業(yè)的圖片展，大可以采用純色背景+文字的形式，圖片顏色元素越多，圖片越大。 另外圖片元素需要完整，尺寸也可以在樣式表里統(tǒng)一編寫，必須含有alt標(biāo)簽。
<img src="/img/1.jpg" alt="圖片" width="100" height="200">
如果是MIP規(guī)則的話<img>標(biāo)簽被替換為<mip-img>使用的時(shí)候需要注意。
4.正確使用JavaScript
網(wǎng)頁設(shè)計(jì)中少不了JavaScript，網(wǎng)上有非常多的JS效果，采用的JavaScript封裝不一樣，往往出現(xiàn)沖突、重復(fù)等情況，而網(wǎng)頁內(nèi)聯(lián)這些內(nèi)容的話會(huì)影響加載時(shí)間，最好的辦法是讓這些外部化。
<link href="/css/Style.css" media="all" rel="Stylesheet" type="text/css" /> <script src="/js/Javascript.js" type="text/javascript"></script>
5.不使用表格布局
指的是表格而不是表單，<table>作為塊級(jí)元素，早期被用來進(jìn)行網(wǎng)頁布局，但是會(huì)增加非常多的源代碼和樣式，修改維護(hù)麻煩，采用更簡(jiǎn)單的DIV+CSS。
6.壓縮CSS、JS、PHP、HTML、XML方法
最常用的是采用Gzip，許多瀏覽器都支持這樣的壓縮算法。參考文章《萬網(wǎng)虛擬主機(jī)開啟Gzip壓縮教程測(cè)試有效》；
也可以使用在線壓縮工具，可以刪除空格、回車、符號(hào)、注釋、空白，其實(shí)自己在編寫的時(shí)候有這樣的意識(shí)后，這些問題都不是什么問題。
