聖僑資訊公司部落格-大幅提高行動版網頁速度 AMP網頁設計教學-人才招募,面試,評價,薪水,薪資,PPT
聖僑資訊 公司部落格-大幅提高行動版網頁速度 AMP網頁設計教學 ( 2017 . 01 . 25 ) 在用手機上網的時候，您有計算過自己會花多少時間等待頁面載入嗎？試著想像一下，如果連您都不願花3~5秒左右去等一個網站的話，又怎能期望消費者能夠給您機會呢? 什麼是AMP(Accelerated Mobile Pages) 簡單來說就是指加速版的行動網頁，它是Google為了與FB的Instant Articles和Apple News等即時新聞功能相抗衡，於2015年10月所推出的一種開源方案，它具有以下優點： 一、 網頁載入速度較過去快了四倍且數據量僅佔原本的十分之一 二、 支援Chrome、Firefox、Safari及Opera等瀏覽器 三、 會在Google搜尋結果頂端的Top Stories中以卡片的方式呈現，方便使用者瀏覽 四、 讓內容發佈者有更多的平台可以經營，從而獲得更大的收益 它與目前常見的RWD一樣是因應行動裝置而開發的技術，但RWD的目的是隨著設備不同自由改變解析度，雖然網站必須要重新改版設計但在使用上相當靈活，適用於所有類型的網站；而AMP的重點則是即時向移動用戶提供內容，只要在既有的網站上加入AMP機制即可，常用於新聞發佈、產品頁面、評論、網誌等靜態型的網頁，但在今年Google有意擴展讓所有行動網站都能支援AMP技術。 雖然Google官方已證實AMP不會影響網頁的排名，但正如我們先前提到的，SEO的重點就在於優化使用者體驗，有了提高網頁速度這個重大優勢，AMP領域在2017年必定是SEO業者必爭之地。 AMP三大組成要素 一、 AMP HTML 與傳統的HTML標籤相似，如<body>、<article>等可直接使用，但有些具有規範限制，如DTD 必須為 <!doctype html>、頂層必須包含AMP屬性、<img>應替換為<amp-img>等，詳細的使用方式可參考↓↓ AMP HTML 二、 AMP JS 為了有效管理資源載入並提供客製化標籤，所以僅能使用AMP的元件，詳細的操作實例請參考↓↓ AMP JS庫 三、 Google AMP Cache 內建驗...