網(wǎng)頁(yè)加速,谷歌AMP是這樣工作的

責(zé)任編輯:editor007

作者:訾竣喆

2015-11-05 21:47:56

摘自:雷鋒網(wǎng)

諷刺的是,Google的本意是想鼓勵(lì)出版商對(duì)自己的頁(yè)面進(jìn)行改良——將腳本內(nèi)容壓縮,并合理利用緩存?!薄 MP另一個(gè)重要的意義就是在于能夠幫助出版商加速他們的網(wǎng)頁(yè):Google將會(huì)免費(fèi)把他們的網(wǎng)頁(yè)緩存到Google自己的CDN中。

現(xiàn)在有越來(lái)越多的人抱怨移動(dòng)網(wǎng)絡(luò)的網(wǎng)速太慢。這是個(gè)永恒的話題,因?yàn)闊o(wú)論移動(dòng)網(wǎng)絡(luò)網(wǎng)速多快也滿足不了日益增長(zhǎng)的網(wǎng)速需求。在14.4K調(diào)制解調(diào)器下龜速上網(wǎng)的時(shí)代早已被人們遺忘,現(xiàn)在人們的要求是瞬間打開任何網(wǎng)頁(yè)。

然而奇怪的是,現(xiàn)在人們抱怨的并不是網(wǎng)速,而是抱怨網(wǎng)絡(luò)本身。如果單說(shuō)提高網(wǎng)速的話,可以通過(guò)提升網(wǎng)絡(luò)速度、降低網(wǎng)絡(luò)延遲、或者是直接提高瀏覽器的速度來(lái)解決。但是抱怨網(wǎng)絡(luò)本身的話,恐怕只能把鍋甩給開創(chuàng)萬(wàn)維網(wǎng)的人了吧。

網(wǎng)頁(yè)在數(shù)量上的擴(kuò)張速度是非常驚人的。由HTTP Archive進(jìn)行的調(diào)查研究結(jié)果顯示,在2012年1月,平均打開一個(gè)頁(yè)面所需加載的數(shù)據(jù)量為1239kB,共計(jì)86次請(qǐng)求;而到了2015年9月,數(shù)據(jù)量增長(zhǎng)到了2,162kB,請(qǐng)求數(shù)增加到了103次。這些數(shù)字雖然并不直接與頁(yè)面加載和渲染所需的時(shí)間相掛鉤,但是卻是網(wǎng)頁(yè)所含信息量發(fā)生變化的一個(gè)重要指標(biāo)。

而另一方面,隨著網(wǎng)絡(luò)的發(fā)展,本地移動(dòng)應(yīng)用也在更為迅猛地發(fā)展著。得益于移動(dòng)設(shè)備性能的增強(qiáng),應(yīng)用的響應(yīng)速度也越來(lái)越快。因此隨著時(shí)間的推移,應(yīng)用程序的響應(yīng)速度與移動(dòng)網(wǎng)絡(luò)的加載速度之間的差距越來(lái)越顯著。至此,才引發(fā)了人們對(duì)于網(wǎng)速的抱怨。

這也就是為什么Facebook要開發(fā)交互式媒體內(nèi)容創(chuàng)建工具Instant Articles,為什么蘋果開發(fā)新聞應(yīng)用,為什么谷歌要開發(fā)Accelerated Mobile Pages(AMP)的原因所在。谷歌雖然慢了半拍,但是其開發(fā)AMP的目的與蘋果、Facebook是一致的,都像是想要使用戶瀏覽Web的體驗(yàn)得到提升,使用戶感覺(jué)就像在使用本地應(yīng)用程序一樣。

對(duì)于AMP而言,有兩個(gè)影響用戶體驗(yàn)的關(guān)鍵點(diǎn),那就是JavaScript和基于JavaScript的廣告。AMP的優(yōu)勢(shì)在于Google的強(qiáng)大服務(wù)器,劣勢(shì)則在于Google廣告。雖然聽起來(lái)比較可笑,但廣告的確是AMP的劣勢(shì)所在。因?yàn)楣雀钃碛谢ヂ?lián)網(wǎng)上最大的網(wǎng)絡(luò)廣告服務(wù)器。如果廣告是其中的問(wèn)題根源,那Google為什么不直接從廣告的加載速度上解決問(wèn)題呢?如果你想了解AMP,那么首先你需要了解Google新服務(wù)本身。

什么是AMP?

要了解AMP,你還需要了解Facebook的Instant Articles。Instant Articles使用RSS和標(biāo)準(zhǔn)的HTML標(biāo)簽來(lái)優(yōu)化精簡(jiǎn)所創(chuàng)建的項(xiàng)目。雖然Facebook會(huì)自動(dòng)播放視頻或音頻片段來(lái)提供一些額外的內(nèi)容,但Facebook聲稱Instant Articles的加載速度仍會(huì)比直接從開放網(wǎng)絡(luò)打開快10倍以上??斐鰜?lái)的這部分速度一些來(lái)自于優(yōu)化精簡(jiǎn)的內(nèi)容,而另一些則可能得益于緩存。

但問(wèn)題的關(guān)鍵是,Instant Articles只能查看與Facebook簽署過(guò)協(xié)議的網(wǎng)站內(nèi)容。這意味著,從Facebook的Instant Articles上,只有在閱讀如美國(guó)國(guó)家地理(National Geographic),英國(guó)廣播公司(BBC),以及Buzzfeed等網(wǎng)站上的內(nèi)容時(shí)才會(huì)比直接從網(wǎng)頁(yè)上看來(lái)的更快。蘋果的News的工作方式也大致相同,使用RSS標(biāo)準(zhǔn),然后蘋果再對(duì)其中的內(nèi)容加以優(yōu)化。

所有這些應(yīng)用程序都會(huì)對(duì)網(wǎng)絡(luò)中的內(nèi)容加以削減優(yōu)化。這就基本相當(dāng)于變相改善了Web網(wǎng)頁(yè)日益臃腫的問(wèn)題。

而AMP不同于Facebook的Instant Articles和蘋果的News的地方就在于,它并沒(méi)有用RSS或者HTML標(biāo)準(zhǔn),而是使用了自己優(yōu)化過(guò)的HTML標(biāo)準(zhǔn)。AMP上的HTML看起來(lái)就跟原HTML一模一樣,一點(diǎn)也不花俏。事實(shí)上,如果你不去看頂部的AMP項(xiàng)目公告的話,你根本就不知道這個(gè)網(wǎng)頁(yè)已經(jīng)被AMP優(yōu)化過(guò),看起來(lái)就跟Web上的對(duì)應(yīng)的網(wǎng)頁(yè)一模一樣。

在AMP上用于標(biāo)記使用的tag標(biāo)簽非常有限,如表單標(biāo)簽、音頻或視頻標(biāo)簽、嵌入標(biāo)簽、腳本標(biāo)簽等全都沒(méi)有。只有在AMP的頂端會(huì)出現(xiàn)一個(gè)很短的HTML tag列表。遭受同樣命運(yùn)的還有JavaScript,AMP中不會(huì)出現(xiàn)廣告和跟蹤腳本。但是,雖然禁了其他的跟蹤腳本,Google其實(shí)還是會(huì)跟蹤你的。

AMP自己也定義了一些標(biāo)簽,像是amp-YouTube,amp-ad或是amp-pixel。這些tag標(biāo)簽將有可能成為Web標(biāo)準(zhǔn)的一部分(也可能變成“ActiveX”的第二部分)。

AMP聽起來(lái)是一個(gè)非常棒的項(xiàng)目——更快的網(wǎng)頁(yè)加載,沒(méi)有任何跟蹤腳本,沒(méi)有任何JavaScript。不過(guò),AMP上同樣也有一些設(shè)計(jì)上的缺陷。

AMP通過(guò)使用自定義組件amp-img重新設(shè)計(jì)了滾動(dòng)圖并將原有的HTML內(nèi)容替代,同理也用amp-audio替代了音樂(lè)內(nèi)容,用amp-video替代了視頻內(nèi)容。AMP的開發(fā)者認(rèn)為這可以讓AMP只有在需要時(shí)才去調(diào)用這些加載項(xiàng)。然而,這卻造成了對(duì)Web瀏覽器自身的限制,而不是HTML本身。AMP也很清楚這樣做所帶來(lái)的后果。你失去的不僅僅只是一些HTML標(biāo)簽,還有基于CSS的動(dòng)畫和滾動(dòng)條。

不過(guò)好在AMP的開發(fā)者在聽取意見上做得非常好。在初期,一個(gè)關(guān)于AMP的代碼曾遭到了強(qiáng)烈反對(duì)——原因是這條代碼禁用了閱讀時(shí)的縮放功能。值得慶幸的是Google聽取了意見,消除了影響縮放的tag標(biāo)簽。

AMP的標(biāo)記語(yǔ)言只是其中的一部分。畢竟,如果AMP真正想做的事是去掉所有的Web增強(qiáng)功能,只呈現(xiàn)頁(yè)面的內(nèi)容的話,它完全可以不必這么大費(fèi)周章。提高加載速度對(duì)用戶來(lái)說(shuō)是一個(gè)不錯(cuò)的附帶好處,但從AMP的角度來(lái)看Facebook的Instant Article的話,看起來(lái)Facebook就像是把用戶鎖到了一個(gè)特定的網(wǎng)站、形式或者說(shuō)服務(wù)中。

問(wèn)題就在于廣告服務(wù)上

Facebook開發(fā)Instant Article的目的是讓你在Facebook上就能看到其他網(wǎng)站上的內(nèi)容,這個(gè)方向是非常正確。如果能夠在Facebook里享受到比在其他瀏覽器更加快的加載速度的話,用戶又何必再去用別的應(yīng)用來(lái)看呢。

谷歌似乎是認(rèn)識(shí)到了來(lái)自于Facebook的這種威脅——通過(guò)Instant Article,F(xiàn)acebook完全可以過(guò)濾掉Google的廣告服務(wù)。于是Google迅速動(dòng)手開發(fā)了AMP項(xiàng)目,其目的實(shí)際上就是為了增強(qiáng)它在移動(dòng)廣告服務(wù)領(lǐng)域的市場(chǎng)。至于為什么電腦用戶被拋棄掉了,那是因?yàn)楣雀枰呀?jīng)掌握把廣告推送給你的能力了。

如果你看過(guò)AMP的演示視頻,那你就能知道它在明年將會(huì)如何集成到搜索結(jié)果中。AMP頁(yè)面在谷歌搜索頁(yè)的鋪設(shè)方式和在其他網(wǎng)頁(yè)中加載本地應(yīng)用的方式是相通的。使得用戶能夠享受到非??斓捻憫?yīng)速度。

為此Google需要把Web打造的和移動(dòng)應(yīng)用程序一樣快。而它也有信心能夠做到,因?yàn)镚oogle有著世界頂尖的網(wǎng)絡(luò)工程師。Google也一直在鼓吹的移動(dòng)網(wǎng)絡(luò)的優(yōu)勢(shì)。但網(wǎng)頁(yè)的發(fā)展速度似乎總要比網(wǎng)速的增長(zhǎng)更快,于是網(wǎng)速就相對(duì)上變得越來(lái)越慢了。

Google已經(jīng)竭盡自己最大的努力來(lái)嘗試優(yōu)化自家的瀏覽器,而Chrome也已經(jīng)成為世界上最快的Web瀏覽器之一了。但是Google發(fā)現(xiàn)即使再優(yōu)化也仍然是治標(biāo)不治本。所以,在此基礎(chǔ)上再對(duì)Web進(jìn)行深度優(yōu)化也就變得順理成章了。

越來(lái)越多的用戶反映,過(guò)慢的加載速度已經(jīng)成為了阻隔信息和用戶之間的一道壁壘。通常瀏覽器都會(huì)通過(guò)加載項(xiàng)控制來(lái)攔截不必要的內(nèi)容,而這項(xiàng)功能雖然從出現(xiàn)到現(xiàn)在已經(jīng)有十多年了,但一直被局限于桌面系統(tǒng)中。直到蘋果iOS 9的出現(xiàn),才標(biāo)志著終于把這一簡(jiǎn)單的內(nèi)容攔截工具移植到了移動(dòng)系統(tǒng)中。

iOS的內(nèi)容攔截以及News應(yīng)用,再加上Facebook的Instant Article,你會(huì)突然發(fā)現(xiàn)——Google的廣告都不見了。而這才是Google真正關(guān)心的問(wèn)題,也是開發(fā)AMP的核心意義。

靜態(tài)頁(yè)面需要Google的JavaScript

你可以在Web上建立的最基本的網(wǎng)頁(yè)就是一個(gè)包含一些基本的tag標(biāo)簽的HTML文件。無(wú)論拿什么來(lái)加載這種網(wǎng)頁(yè)都會(huì)快如閃電。因?yàn)槠渲兴男畔⒘亢苌?,而你所要做的只是套個(gè)模版,把信息放到網(wǎng)絡(luò)上而已。根本不需要JavaScript,甚至都不需要CSS。

AMP或多或少都希望你創(chuàng)建這種靜態(tài)頁(yè)面,不過(guò)AMP并不關(guān)心你的網(wǎng)頁(yè)實(shí)際上是靜態(tài)的還是那種可能需要從數(shù)據(jù)庫(kù)中調(diào)用的網(wǎng)頁(yè),問(wèn)題的關(guān)鍵是“什么呈現(xiàn)的是靜態(tài)的”。但隨后AMP就又要求每個(gè)頁(yè)面加載第三方腳本。直到這個(gè)腳本加載完畢前,AMP會(huì)故意將整個(gè)頁(yè)面的透明度設(shè)為0。只有這樣頁(yè)面才會(huì)被顯示出來(lái)。

這的確有點(diǎn)讓人摸不著頭腦,一名叫作Justin Avery的開發(fā)者寫道:“如果是這樣的話,那么很明顯直接加載這種頁(yè)面會(huì)來(lái)得更快啊。”

Pinboard.in的創(chuàng)作者M(jìn)aciej Ceg owski就是這樣做的,他組建了一個(gè)演示頁(yè)面,復(fù)制了AMP為基礎(chǔ)的(并且AMP主頁(yè)上沒(méi)有的)JavaScript。通過(guò)3G連接,Ceg owski的頁(yè)面在1.9秒加載完畢,而AMP的網(wǎng)頁(yè)則需要9.2秒。JavaScript拖慢了頁(yè)面的加載時(shí)間,即使這個(gè)JavaScript本身也是Google計(jì)劃中加快Web部件的一部分。

諷刺的是,Google的本意是想鼓勵(lì)出版商對(duì)自己的頁(yè)面進(jìn)行改良——將腳本內(nèi)容壓縮,并合理利用緩存。但改良之后卻意味著網(wǎng)頁(yè)將會(huì)加載的更慢,也就是說(shuō)網(wǎng)站如果真的照Google說(shuō)的那么去做了的話,在AMP上可能反而會(huì)變得更慢了。

最終,對(duì)于出版商而言最好的做法仍然是進(jìn)行常規(guī)的Web開發(fā),而不依賴于從AMP獲得的資源。不幸的是,如今獨(dú)自建立網(wǎng)站的出版商現(xiàn)在是少之又少。大多數(shù)出版商有很多地方能夠獲得與AMP相當(dāng)?shù)募虞d速度。Google表示,AMP將能夠提高15%~85%的網(wǎng)頁(yè)加載速度。這么大的變動(dòng)范圍很可能是根據(jù)網(wǎng)站上加載第三方腳本的多少而決定的。

對(duì)于JavaScript的依賴還會(huì)造成另一個(gè)不利影響。AMP依賴于JavaScript,也就是說(shuō)如果他們腳本由于某種原因無(wú)法加載,比如說(shuō)你正在駛進(jìn)了隧道之中的火車上,或是在信號(hào)比較微弱的地區(qū)來(lái)連接AMP的話,顯示的頁(yè)面將會(huì)是完全空白的。一旦AMP頁(yè)面失敗,將會(huì)導(dǎo)致整個(gè)頁(yè)面無(wú)法顯示。

Google自己心里很清楚,所以即使是它自己的Gmail中也仍然提供著基于HTML的備用版本。

為了出版商而開發(fā)的AMP

按照AMP的要求,各大媒體所必須要做的就是放棄自己的網(wǎng)絡(luò)廣告。還有交互式地圖,還有數(shù)據(jù)的可視化效果,以及評(píng)論系統(tǒng)。

用戶可以得到AMP精簡(jiǎn)后的WordPress博客。WordPress在網(wǎng)絡(luò)上所有網(wǎng)站的覆蓋率高達(dá)24%,而且還有一個(gè)簡(jiǎn)單的方法能夠迅速?gòu)腤ordPress來(lái)生成AMP文件,這對(duì)于AMP而言意義非常重大,將能夠極大的推動(dòng)AMP的發(fā)展。這當(dāng)然不是說(shuō)去讓W(xué)ordPress來(lái)建立,事實(shí)上如果這么做了的話其實(shí)會(huì)適得其反。因?yàn)閃ordPress插件往往對(duì)加載時(shí)間有很大的負(fù)面影響。我們經(jīng)常能看到往往一個(gè)WordPress站點(diǎn)加載了多個(gè)外部的JavaScript庫(kù),而這是由于用戶安裝了三個(gè)分別使用各自的庫(kù)的插件。AMP則能夠巧妙地通過(guò)優(yōu)化這些部分而解決加載過(guò)慢的問(wèn)題。

那么,為什么出版商希望使用AMP呢?因?yàn)樗荊oogle的項(xiàng)目,而它的影響力已經(jīng)滲透到各個(gè)行業(yè),對(duì)流量有著強(qiáng)大的推動(dòng)力。當(dāng)谷歌決定發(fā)展某個(gè)項(xiàng)目,往往會(huì)牽動(dòng)各大媒體的視線。

AMP不是想擺脫網(wǎng)絡(luò),這我們都明白。它的初衷只是想要建立一個(gè)平行于Web的平臺(tái)。在這個(gè)系統(tǒng)下,出版商不會(huì)停止生成常規(guī)網(wǎng)頁(yè),但他們通常也將在URL的末尾生成AMP文件(由早期采用者的例子來(lái)看)。AMP的頁(yè)面和常規(guī)的Web網(wǎng)頁(yè)將通過(guò)標(biāo)準(zhǔn)的HTML標(biāo)簽來(lái)實(shí)現(xiàn)相互轉(zhuǎn)換,用戶可以在兩者之間做出選擇。這也就是說(shuō),Google的網(wǎng)絡(luò)爬蟲可能會(huì)搶了AMP的頁(yè)面,但臺(tái)式機(jī)的Firefox也可能會(huì)把AMP頁(yè)面重新定向到常規(guī)網(wǎng)址上。

或許,多年后Web上將不會(huì)再有M標(biāo)準(zhǔn)的移動(dòng)專用網(wǎng)站,而是amp標(biāo)準(zhǔn)的移動(dòng)網(wǎng)站。而作為瀏覽者而言,我們希望的當(dāng)然是看到干凈整潔,沒(méi)有其他亂七八糟的加載項(xiàng)的網(wǎng)頁(yè)。不要等待網(wǎng)頁(yè)緩慢的加載,只要一瞬間的清爽。

如今,我們基本都是在碎片化的時(shí)間中來(lái)獲取外界信息,獲取信息的方式也越來(lái)越多樣化。有些人喜歡在網(wǎng)上閱讀,有的通過(guò)Rss閱讀器來(lái)挑選自己喜歡的內(nèi)容閱讀,有的人通過(guò)Facebook的Instant Article,有的通過(guò)在Twitter上的AMP網(wǎng)頁(yè)來(lái)閱讀,有的在自己的應(yīng)用上閱讀。我們所希望的是,從一個(gè)單一的軟件上獲取到外界所有的信息,節(jié)省我們本來(lái)就不多的碎片時(shí)間。

AMP和開放的Web

雖然AMP可能會(huì)被強(qiáng)制設(shè)計(jì)為符合amp格式要求的頁(yè)面,但到目前為止,它似乎看起來(lái)比開放的Web或是Facebook的Instant Articles更加親民化。

如果往樂(lè)觀的方面想,作為Google一直在尋找的加快網(wǎng)絡(luò)加載速度的解決方案,其實(shí)AMP的前景是很美好的。正如Web開發(fā)人員(和AMP的樂(lè)天派一員)Jeremy Keith所說(shuō):“我希望這會(huì)是一種雙贏。在出版商通過(guò)創(chuàng)建AMP版本的網(wǎng)頁(yè)以安撫Google的同時(shí),也許他們會(huì)開始問(wèn)'為什么我們常規(guī)的網(wǎng)頁(yè)無(wú)法做到這樣快?’這樣的疑問(wèn)也會(huì)促使他們改善他們自己的Web網(wǎng)頁(yè),從而一起進(jìn)步。AMP項(xiàng)目將有可能成為推動(dòng)整個(gè)Web前進(jìn)的急先鋒。”

當(dāng)然,AMP項(xiàng)目里的人也不都是那么樂(lè)觀的。開發(fā)者Tim Kadlec寫道:“AMP感覺(jué)并不像一些常規(guī)的瀏覽器那樣幫助加載網(wǎng)頁(yè),而像是把自己所制定的精簡(jiǎn)優(yōu)化規(guī)范一點(diǎn)點(diǎn)拖到Web之中。Google通過(guò)用一個(gè)非常具體的工具來(lái)改善開放網(wǎng)絡(luò)。并向用戶展示他們自己定制后的頁(yè)面,吸引人們來(lái)使用AMP規(guī)范的網(wǎng)頁(yè)。”

AMP另一個(gè)重要的意義就是在于能夠幫助出版商加速他們的網(wǎng)頁(yè):Google將會(huì)免費(fèi)把他們的網(wǎng)頁(yè)緩存到Google自己的CDN中。“AMP就是緩存...如果符合規(guī)則,您將可以使用其中的緩存。”在AMP項(xiàng)目中負(fù)責(zé)RSS的Dave Winer這樣寫道,“如果你不這樣做,你也可以使用自己的緩存,但這樣做將會(huì)嚴(yán)重影響到AMP的效果。”

這其實(shí)就是AMP最大的潛在問(wèn)題。如果谷歌決定濫用其作為網(wǎng)絡(luò)的默認(rèn)搜索服務(wù)提供商的權(quán)限,將AMP頁(yè)面設(shè)置為優(yōu)先,那AMP將會(huì)對(duì)開放Web形成嚴(yán)重威脅。

到目前為止,谷歌已經(jīng)表示,AMP的網(wǎng)頁(yè)不會(huì)在Web搜索結(jié)果頁(yè)面得到任何優(yōu)先權(quán)。但是,這隨時(shí)可能會(huì)改變。Google為什么要自廢雙手呢?為什么Google在正式發(fā)布AMP后不去使用速度更快的網(wǎng)頁(yè),而去將加載更慢的網(wǎng)頁(yè)優(yōu)先呢?畢竟,加載速度現(xiàn)在已經(jīng)成為了一個(gè)重要的衡量因素,AMP確實(shí)使網(wǎng)頁(yè)的速度變得更快了。

從長(zhǎng)遠(yuǎn)來(lái)看,很難說(shuō)AMP將會(huì)以何種方式繼續(xù)發(fā)展壯大。Google經(jīng)常會(huì)提出新項(xiàng)目。比如Gmail就對(duì)郵箱領(lǐng)域進(jìn)行了再定義。其他項(xiàng)目也是一波接著一波。還記得Google Author嗎?這是Google為了幫助出版業(yè)而做的最后一次努力。

對(duì)于Web而言,我們希望Google能夠成功說(shuō)服出版商使用AMP。在未來(lái)能夠真正幫助我們加快網(wǎng)頁(yè)加載速度。就像Ceg owski在他對(duì)AMP的評(píng)語(yǔ)上寫的那樣:“現(xiàn)在是2015年,網(wǎng)站應(yīng)該主動(dòng)提供只需更少資源,能夠快速加載的網(wǎng)頁(yè)給移動(dòng)設(shè)備......對(duì)于移動(dòng)設(shè)備而言,要求這些網(wǎng)站提供更加舒適的可讀版本是一個(gè)好主意。讓我們進(jìn)一步提高加載速度,并使其成為唯一的移動(dòng)網(wǎng)頁(yè)標(biāo)準(zhǔn)吧。”

鏈接已復(fù)制,快去分享吧

企業(yè)網(wǎng)版權(quán)所有?2010-2024 京ICP備09108050號(hào)-6京公網(wǎng)安備 11010502049343號(hào)