Google AMP調(diào)研

what?

Accelerated Mobile Pages垒迂,加速移動網(wǎng)頁

項目相關(guān)文檔:

官網(wǎng)
github
amp html規(guī)范
演示
體驗地址(好吧國內(nèi)好像并體驗不到~)

整體思路:

  1. 將跳轉(zhuǎn)至的復(fù)雜內(nèi)容頁精簡至僅是堇椋“內(nèi)容”(以及規(guī)范后的廣告..)
  2. 用戶查看內(nèi)容時由網(wǎng)頁跳轉(zhuǎn)改為僅拉取“內(nèi)容”展現(xiàn)

實施:

  • 搜索方提供規(guī)范
  • 內(nèi)容提供方提供符合規(guī)范的頁面供抓取(至amp cache)展現(xiàn)

推廣普及:

  • 搜索結(jié)果頁優(yōu)先展現(xiàn)amp內(nèi)容(橫向滾動匯聚)

適應(yīng)場景:

新聞、閱讀類內(nèi)容

加速思路:

  • 縮減完整html至特定子集吗讶、增強限制
  • 犧牲靈活性,提供更高抽象層次的擴展標(biāo)簽/組件
    • 替代靈活但需自行組裝處理的底層html標(biāo)簽
    • 省去用戶自定義實現(xiàn)
    • 實現(xiàn)針對性優(yōu)化
  • 限制樣式的使用并禁止腳本的使用以降低/去除相應(yīng)時間消耗

具體加速點:

官方說明文檔

  • 禁止內(nèi)容提供方在直接頁面中使用js恋捆,amp本身的js也async加載
    • 免去了js對渲染的阻塞
    • 允許iframe中加載js等照皆,但不會影響至主頁面
  • 圖片與iframe等資源內(nèi)容需靜態(tài)指定其尺寸
    • 避免回流
  • amp提供的擴展組件不阻塞渲染
  • 只允許內(nèi)聯(lián)樣式表且限制在50k以內(nèi),且只允許特定選擇器與樣式的使用
    • 減少css阻塞渲染的時間
  • 字體立即下載
    • 所有script為async沸停、沒有外聯(lián)樣式表膜毁,故可達(dá)到
  • 僅允許GPU加速的動畫
    • 僅允許transform及opacity動畫(不觸發(fā)layout,可僅由GPU即完成)
  • 控制資源加載優(yōu)先級
    • 按優(yōu)先級加載愤钾、預(yù)加載等優(yōu)化方案
  • 搜索結(jié)果頁(及內(nèi)容頁內(nèi)?)進(jìn)行必要的preconnect
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瘟滨,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子能颁,更是在濱河造成了極大的恐慌杂瘸,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,820評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伙菊,死亡現(xiàn)場離奇詭異败玉,居然都是意外死亡,警方通過查閱死者的電腦和手機镜硕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評論 3 399
  • 文/潘曉璐 我一進(jìn)店門运翼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人兴枯,你說我怎么就攤上這事血淌。” “怎么了财剖?”我有些...
    開封第一講書人閱讀 168,324評論 0 360
  • 文/不壞的土叔 我叫張陵悠夯,是天一觀的道長癌淮。 經(jīng)常有香客問我,道長疗疟,這世上最難降的妖魔是什么该默? 我笑而不...
    開封第一講書人閱讀 59,714評論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮策彤,結(jié)果婚禮上栓袖,老公的妹妹穿的比我還像新娘。我一直安慰自己店诗,他們只是感情好裹刮,可當(dāng)我...
    茶點故事閱讀 68,724評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著庞瘸,像睡著了一般捧弃。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上擦囊,一...
    開封第一講書人閱讀 52,328評論 1 310
  • 那天违霞,我揣著相機與錄音,去河邊找鬼瞬场。 笑死买鸽,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的贯被。 我是一名探鬼主播眼五,決...
    沈念sama閱讀 40,897評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼彤灶!你這毒婦竟也來了看幼?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,804評論 0 276
  • 序言:老撾萬榮一對情侶失蹤幌陕,失蹤者是張志新(化名)和其女友劉穎诵姜,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搏熄,經(jīng)...
    沈念sama閱讀 46,345評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡茅诱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,431評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了搬卒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,561評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡翎卓,死狀恐怖契邀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情失暴,我是刑警寧澤坯门,帶...
    沈念sama閱讀 36,238評論 5 350
  • 正文 年R本政府宣布微饥,位于F島的核電站,受9級特大地震影響古戴,放射性物質(zhì)發(fā)生泄漏欠橘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,928評論 3 334
  • 文/蒙蒙 一现恼、第九天 我趴在偏房一處隱蔽的房頂上張望肃续。 院中可真熱鬧,春花似錦叉袍、人聲如沸始锚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瞧捌。三九已至,卻和暖如春润文,著一層夾襖步出監(jiān)牢的瞬間姐呐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評論 1 272
  • 我被黑心中介騙來泰國打工典蝌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留曙砂,地道東北人。 一個月前我還...
    沈念sama閱讀 48,983評論 3 376
  • 正文 我出身青樓赠法,卻偏偏與公主長得像麦轰,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子砖织,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,573評論 2 359

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,296評論 25 707
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案款侵? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,759評論 1 92
  • 前端開發(fā)面試知識點大綱: HTML&CSS: 對Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異侧纯、兼容性新锈、hack、CSS基本功:...
    秀才JaneBook閱讀 2,383評論 0 25
  • AMP簡介 Google推出移動網(wǎng)頁加速項目AMPAMP介紹 AMP是如何提升性能? 以下的優(yōu)化點是AMP頁面能被...
    RY_zheng閱讀 1,835評論 0 4
  • 坐在耗仁希口飛西安的飛機上拳缠,手里只有筆,沒有紙贸弥,只好在飛機上提供的放垃圾的清潔袋上寫下了以下的文字窟坐。 剛剛,在空姐的催...
    老男人樹先生閱讀 580評論 4 9