站長(zhǎng)之家（Chinaz.com）注：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，越來(lái)越多的網(wǎng)民從PC端轉(zhuǎn)戰(zhàn)移動(dòng)端。為了滿足用戶的需求，搜索引擎也在不斷改進(jìn)移動(dòng)算法。在這種大勢(shì)下，站長(zhǎng)們也不可避免的面臨著“轉(zhuǎn)型移動(dòng)互聯(lián)網(wǎng)”的挑戰(zhàn)。國(guó)內(nèi)是如此，國(guó)外亦是如此。

在谷歌宣布將在4月21日發(fā)布“移動(dòng)端友好度（Mobile-Friendly）”算法后，國(guó)外的站長(zhǎng)們都拼了命的優(yōu)化網(wǎng)站的“移動(dòng)友好度”，以便在算法發(fā)布后能脫穎而出。在影響移動(dòng)端用戶體驗(yàn)的各項(xiàng)因素中，網(wǎng)站加載速度無(wú)疑是重中之重。其實(shí)，無(wú)論是PC端還是移動(dòng)端，網(wǎng)站加載速度都是備受關(guān)注的一個(gè)問(wèn)題。試問(wèn)，有誰(shuí)原因把時(shí)間浪費(fèi)在等待上呢？

據(jù)研究表明，若網(wǎng)頁(yè)加載時(shí)間超過(guò)3秒，約有57%的用戶會(huì)選擇離開。移動(dòng)端的可忍受時(shí)間會(huì)稍微長(zhǎng)些，但也是因人而異。那么，該如何提高站點(diǎn)的移動(dòng)端友好度呢？

國(guó)外SEO網(wǎng)站Moz的專欄作家Billy Hoffman（下文中的我）在《How to Keep your Site Fast for Mobile-Friendly》一文中為我們解答了這個(gè)問(wèn)題。

檢測(cè)移動(dòng)站點(diǎn)的性能如何

在著手優(yōu)化之前，第一步要做的便是了解你的網(wǎng)站。監(jiān)控網(wǎng)站性能的工具有很多，付費(fèi)的、免費(fèi)的都有。我個(gè)人比較青睞Developer Tools和WebPageTest，本文中采用的Developer Tools。

Developer Tools使用比較簡(jiǎn)單，不是開發(fā)者也很容易上手：

在Chrome的更多工具中選擇開發(fā)者工具（Developer Tools），然后就進(jìn)入了Chrome開發(fā)者工具界面，Chrome自帶多設(shè)備模擬器，可以測(cè)試站點(diǎn)在不同設(shè)備上、不同分辨率下的現(xiàn)實(shí)情況。

路徑：Setting一側(cè)找到Overrides，勾選上 Show ‘Emulation’ view in console drawer 。之后點(diǎn)擊“Hide drawer”上邊的三道杠，便可看到模擬器。

優(yōu)化圖片

據(jù)http archive網(wǎng)站調(diào)查數(shù)據(jù)顯示，在網(wǎng)站所有元素中圖片這一元素平均占據(jù)了60%的地位，換句話說(shuō)，圖片承擔(dān)起了網(wǎng)站的半壁江山。由于移動(dòng)端加載速度相對(duì)較慢，因而圖片的加載需要耗費(fèi)更長(zhǎng)的時(shí)間，如果站點(diǎn)圖片過(guò)多，則會(huì)大大降低站點(diǎn)的移動(dòng)友好度，從而影響用戶體驗(yàn)。

這個(gè)問(wèn)題可以考慮通過(guò)無(wú)損/有損圖片壓縮技術(shù)減小圖片來(lái)解決。不過(guò)對(duì)于移動(dòng)端而言，還需考慮的問(wèn)題是：某些圖片是否真的有加載原圖的必要呢？也許，通過(guò)PC端訪問(wèn)站點(diǎn)需要一張1600寬的圖片才能讓我網(wǎng)站處于正常顯示狀態(tài)，但如果換做平板電腦、或者是智能機(jī)等移動(dòng)設(shè)備呢？1600px就顯得浮夸了。這時(shí)，不妨考慮為你的移動(dòng)端用戶“私人訂制”一張?bào)w積小些的圖片。

通過(guò)Viewpoint標(biāo)簽來(lái)達(dá)到圖片的自適應(yīng)效果。在標(biāo)簽中加入如下代碼（代碼需針對(duì)網(wǎng)站自行調(diào)整）：

此外，CSS樣式的寫法也是一個(gè)很重要的問(wèn)題。

錯(cuò)誤的寫法：

• <!-- DON'T DO THIS -->
• <style>
•     @media (min-width:376px) {
•         .mobile_image {
•             display: none;
•         }
•         .desktop_image {
•             display: inline;
•         }
•     }
•     @media (max-width:375px) {
•         .mobile_image {
•             display: inline;
•         }
•         .desktop_image {
•             display: none;
•         }
•     }
• </style>
• <img src="mobile.png" class="mobile_image" />
• <img src="desktop.png" class="desktop_image" />

這段代碼看上去似乎在寬屏設(shè)備下加載大圖，移動(dòng)小屏設(shè)備下則加載小圖。但實(shí)際上，這種寫法會(huì)加載兩張圖片，只是其中一張圖片未顯示罷了，完全是在浪費(fèi)時(shí)間。

如下圖：

標(biāo)簽： 谷歌移動(dòng)友好算法 網(wǎng)站加載速度 谷歌4.21算法 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。