兩年前決定啟動(dòng)AMP項(xiàng)目的谷歌，初衷其實(shí)是這樣的
至頂網(wǎng)CIO與使用頻道 08月23日 北京消息（文/孫博）：“隨著前端技術(shù)的增多，加上業(yè)務(wù)需要的不斷變化，前端工程師不得不學(xué)習(xí)各種框架和模塊，頁(yè)面變得越來(lái)越復(fù)雜，代碼也越來(lái)越難懂晦澀”， 谷歌（中國(guó)）移動(dòng)搞定方案負(fù)責(zé)人谷盛感慨，做一名現(xiàn)代的前端工程師有點(diǎn)艱難。 8月10日-11日，在由聽(tīng)云、極客邦和InfoQ聯(lián)合主辦的2017中國(guó)使用性能管理大會(huì)（簡(jiǎn)稱APMCon 2017）上，谷盛發(fā)表了題為《The Modern Mobile Web - From AMP to PWA》的演講，現(xiàn)場(chǎng)解讀了Google AMP (Accelerated Mobile Pages ) 項(xiàng)目的整個(gè)歷史背景，同時(shí)闡明提升移動(dòng)網(wǎng)頁(yè)在搜索引擎和社交媒體的呈現(xiàn)性能的重要性和AMP與PWA（Progressive Web Apps) 協(xié)同工作的必要性。 AMP是谷歌在2015年推出的網(wǎng)頁(yè)加速項(xiàng)目，通過(guò)AMP runtime JS框架, 新定義了 HTML標(biāo)簽，限制外部加載CSS和JS，利用第三方緩存的預(yù)加載和預(yù)渲染，提升移動(dòng)端頁(yè)面的載入速度。 “現(xiàn)在情況很殘酷，平均每個(gè)網(wǎng)頁(yè)的服務(wù)請(qǐng)求大概是214個(gè)，其中50%是跟廣告相關(guān)。而在3G環(huán)境下，頁(yè)面的加載速度平均是19秒。這樣一來(lái)，77%的網(wǎng)站首頁(yè)在3G環(huán)境下加載速度超過(guò)10秒?！惫仁⒄劦剑?0秒的網(wǎng)頁(yè)加載速度，意味著絕大部分用戶會(huì)失去耐心，更意味著77%的頁(yè)面可能從來(lái)不會(huì)出現(xiàn)在移動(dòng)設(shè)備上。 因此，谷歌推出了“AMP”，用來(lái)提升移動(dòng)網(wǎng)頁(yè)的加載速度。并且能夠?qū)崿F(xiàn)平均小于1秒的網(wǎng)頁(yè)打開(kāi)速度，而快的原因則是因?yàn)榛贏MP的移動(dòng)網(wǎng)頁(yè)夠“簡(jiǎn)單“。首先專為移動(dòng)設(shè)備規(guī)劃的網(wǎng)頁(yè)，避免不必要的流量；其次，優(yōu)化資源加載順序，用戶所需資源可以優(yōu)先下載；最后用CDN緩存搞定了移動(dòng)端加速的問(wèn)題。 谷盛談到的另一個(gè)關(guān)鍵字“PWA”，是谷歌推出的另一個(gè)開(kāi)源項(xiàng)目，目標(biāo)是基于現(xiàn)代化瀏覽器的能力來(lái)提供一個(gè)用戶友好的網(wǎng)頁(yè)使用。 PWA有幾個(gè)特點(diǎn)，讓移動(dòng)網(wǎng)站更接近原生使用，首先是離線緩存，可以讓客戶在沒(méi)有網(wǎng)絡(luò)連接的時(shí)候仍可以運(yùn)用部分服務(wù)，其次是添加到主屏幕，它可以像移動(dòng)使用一樣，主屏幕打開(kāi)，并且有開(kāi)屏畫(huà)面。第三個(gè)是推送通知，可以像原生使用一樣推送通知，用戶可以點(diǎn)擊并打開(kāi)它的PWA站點(diǎn)，完成一次再拉活。第四叫Credential Management API，可以幫助用戶完成一鍵注冊(cè)、登錄。此外還有Payment API, 讓用戶更快速的完成支付。 對(duì)于“AMP”和“PWA”，谷盛說(shuō)其實(shí)是可以協(xié)同工作的。例如阿里巴巴速賣(mài)通平臺(tái)就是一個(gè)AMP和PWA相結(jié)合的購(gòu)物模式。從用戶在搜索引擎結(jié)果中打開(kāi)基于AMP的移動(dòng)頁(yè)面，到快速瀏覽AMP商品詳情頁(yè)面，再到PWA上最后完成登錄、下單、付款，用戶可以感受到良好的“快速”購(gòu)物體驗(yàn)。 在本屆APMCon 2017會(huì)后，針對(duì)以上提到的內(nèi)容，谷盛接受了至頂網(wǎng)記者的獨(dú)家采訪，聽(tīng)他談現(xiàn)在移動(dòng)網(wǎng)頁(yè)的發(fā)展趨勢(shì)，以及AMP技術(shù)的具體細(xì)節(jié)?！ 」雀瑁ㄖ袊?guó)）移動(dòng)搞定方案負(fù)責(zé)人 谷盛 以下為嘉賓訪談實(shí)錄： 1.在您看來(lái)，影響移動(dòng)網(wǎng)頁(yè)用戶體驗(yàn)的關(guān)鍵有哪些？ 谷盛：我認(rèn)為主要有兩點(diǎn)。第一是速度，第二是性能。速度很簡(jiǎn)單，是否有辦法很快的去打開(kāi)頁(yè)面，看到我想看的內(nèi)容。性能是說(shuō)當(dāng)我打開(kāi)網(wǎng)頁(yè)，能不能完成我想做的事情，這是一個(gè)很直接的訴求。比如說(shuō)我能不能打開(kāi)我想看的新聞視頻？能不能在網(wǎng)頁(yè)上完成一個(gè)閉環(huán)的商品購(gòu)買(mǎi)流程？這些很重要，也是非常直白的。 如果暢想未來(lái)的話，其實(shí)還有很多關(guān)鍵點(diǎn)。比如我們的網(wǎng)頁(yè)能更聰明一點(diǎn)、可以提前了解用戶想做什么，更了解用戶的興趣和關(guān)心點(diǎn)，從而有針對(duì)性、個(gè)性化預(yù)加載或者推薦一些服務(wù)給他，這當(dāng)然是一個(gè)很理想的訴求。 2.谷歌在2015年啟動(dòng)了AMP項(xiàng)目，當(dāng)時(shí)的初衷是什么？ 谷盛：其實(shí)就像它名字一樣――加速移動(dòng)網(wǎng)頁(yè)，初衷就是讓移動(dòng)網(wǎng)頁(yè)變更快?；ヂ?lián)網(wǎng)興起的時(shí)候，內(nèi)容都是集中在網(wǎng)頁(yè)上，隨著移動(dòng)設(shè)備的興起，很多網(wǎng)站開(kāi)發(fā)者很難去適配各個(gè)瀏覽器和各種尺寸的設(shè)備． 這就導(dǎo)致很多基于web進(jìn)行的交互變得很差，頁(yè)面的加載通常都很緩慢，渲染不穩(wěn)定且浪費(fèi)很多流量。 此外，網(wǎng)頁(yè)的商業(yè)模式是以廣告為中心，站長(zhǎng)們?cè)谒伎既绾纹胶庥脩趔w驗(yàn)與商業(yè)化需要的矛盾。但事實(shí)上，站長(zhǎng)們已經(jīng)妥協(xié)，他們的網(wǎng)頁(yè)上有數(shù)不清的的廣告代碼和監(jiān)測(cè)代碼。這導(dǎo)致的結(jié)果就是網(wǎng)頁(yè)越來(lái)越慢，用戶體驗(yàn)越來(lái)越差。谷歌看到了這些，覺(jué)得有必要改善一下，這是第一。 第二，自從智能手機(jī)出現(xiàn)后，App變得非常流行，比如大家每天要發(fā)微信，用微博，都要有App，但是對(duì)于很多垂直領(lǐng)域，比如新聞媒體來(lái)說(shuō)，是否有必要做一個(gè)APP呢。設(shè)想一下，如果做了App后，要花很多的精力去推廣安裝、維護(hù)、去拉活用戶，有數(shù)據(jù)統(tǒng)計(jì)，平均每月每人運(yùn)用的App數(shù)量不會(huì)超過(guò)10個(gè)，并且70%的已安裝App只被用過(guò)一次就卸載了，所以對(duì)于很多品類(lèi)來(lái)說(shuō)，App的ROI可能會(huì)非常低，但是web就很好，非常簡(jiǎn)單，很容易通過(guò)搜索引擎去發(fā)現(xiàn)，也容易通過(guò)鏈接分享給朋友, 與網(wǎng)頁(yè)的互動(dòng)也非常簡(jiǎn)單，只需要點(diǎn)擊鏈接，就可以打開(kāi)，無(wú)論你是用的是智能機(jī)，平板電腦，甚至是功能機(jī)，它在任何地方都可以工作。任何新的功能，無(wú)需下載更新，都可以實(shí)時(shí)體驗(yàn)到。所以在很多垂直領(lǐng)域，沒(méi)有辦法做成大平臺(tái)，那我可不可以通過(guò)別的平臺(tái)把內(nèi)容展現(xiàn)出來(lái)？很簡(jiǎn)單，比如說(shuō)社交媒體，或者通過(guò)搜索引擎，所以谷歌基于很多這樣的考慮，決定把整個(gè)生態(tài)系統(tǒng)變得更完善，推出一個(gè)標(biāo)準(zhǔn)，讓大家能夠簡(jiǎn)單快速的開(kāi)發(fā)、呈現(xiàn)內(nèi)容，這是AMP的初衷。 3.基于AMP標(biāo)準(zhǔn)的移動(dòng)網(wǎng)頁(yè)呈現(xiàn)的內(nèi)容跟原生網(wǎng)站內(nèi)容是否是一模一樣的？ 谷盛：可以說(shuō)是一樣的，因?yàn)樗鼈兪且灰粚?duì)應(yīng)的。站長(zhǎng)或者媒體自己來(lái)決定怎么樣做這個(gè)AMP頁(yè)面，加什么廣告和監(jiān)測(cè)的標(biāo)簽，注意這些是AMP認(rèn)證過(guò)的標(biāo)簽，然后AMP平臺(tái)幫它們?nèi)ゾ彺骓?yè)面并呈現(xiàn)在搜索結(jié)果或者社交媒體上，所有的決定權(quán)都在網(wǎng)站自己手里。 4. 在發(fā)布兩年的時(shí)間中，AMP項(xiàng)目在國(guó)內(nèi)外市場(chǎng)的使用情況如何？ 谷盛：現(xiàn)在全球已經(jīng)有超過(guò)20億的AMP頁(yè)面，大概有90萬(wàn)家網(wǎng)站運(yùn)用了AMP技術(shù)，超過(guò)100家廣告平臺(tái)和分析工具供應(yīng)商支持了AMP。在國(guó)內(nèi)，2017年初得到了百度、搜狗的支持后，6月騰訊的QQ空間也宣告支持AMP，今年下半年還有更多的搜索引擎和社交媒體會(huì)加入到AMP陣營(yíng)里。 5. 用AMP技術(shù)是否需要跟谷歌簽署某種協(xié)議？ 谷盛：這是一個(gè)錯(cuò)誤認(rèn)知。AMP是隸屬于W3C的一個(gè)開(kāi)源標(biāo)準(zhǔn)，按AMP標(biāo)準(zhǔn)寫(xiě)出的網(wǎng)站，可以在任何地方呈現(xiàn)，主要看網(wǎng)站是否愿意被搜索引擎爬蟲(chóng)爬取，這個(gè)和谷歌沒(méi)有任何關(guān)系。 6.未來(lái)是否會(huì)有所有基于AMP的網(wǎng)站出現(xiàn)？ 谷盛：現(xiàn)在很多網(wǎng)站是由傳統(tǒng)的HTML頁(yè)面加一部分AMP的頁(yè)面組成，AMP使你的網(wǎng)頁(yè)快速啟動(dòng)，迅速完成第一跳，后續(xù)的頁(yè)面可以運(yùn)用PWA技術(shù), 就像原生使用一樣，有很好的可靠性和穩(wěn)定的用戶體驗(yàn)。 至于說(shuō)未來(lái)有沒(méi)有純粹的AMP的網(wǎng)站，現(xiàn)在就有，一家土耳其網(wǎng)站Mynet就是這樣的, 他們認(rèn)為AMP的功能已經(jīng)足夠用了，所以將所有移動(dòng)網(wǎng)頁(yè)都基于AMP技術(shù)進(jìn)行開(kāi)發(fā)。在中國(guó)市場(chǎng)，我們還需要把AMP的生態(tài)做起來(lái)，包括AMP平臺(tái)、網(wǎng)站媒體及廣告網(wǎng)絡(luò)分析工具等等，AMP本身很簡(jiǎn)單，又是開(kāi)源的，我堅(jiān)信未來(lái)在國(guó)內(nèi)，一定會(huì)有所有基于AMP的網(wǎng)站出現(xiàn)。