Site icon 盪鞦韆上班這檔事

Google行動版網站證照考試心得及考題分享 | Google考試

Google行動版網站證照考試

目前 Google Partners 共有3項認證考試

繼考過 Google Analytics 及 Google AdWords 之後
我大概花了1個月左右的時間準備”Google行動版網站“認證考試
昨天終於順利考過”行動版網站” 囉~
由於目前網路上找不到相關”行動網站”考試的準備心得
所以特別來分享一下我的準備過程

行動版網站考試攻略:

Google Partners 裡所提供的應考指南(必讀)

    4.進階網路技術  
P.S. 裡面有些影片考題都有出,英文不太好的請用中文字幕協助

行動版網站考試重點:

一、行動網站的重要性

@ 60% 的行動裝置使用者預期行動網站在 3 秒內載入完畢。平均而言,如果行動網站的載入時間超過 5 秒,75% 的使用者就會放棄瀏覽。

@ 客戶提升網站的載入速度後,收益隨之提高;載入速度下降時,收益也會受到牽連。

@ 只要將使用者體驗和轉換率最佳化,就能提升行動轉換率,進而增加客戶的獲利能力,讓他們願意投注更多廣告預算。

@ 只要調整顏色或按鈕的用字 (即行動號召),最多能讓轉換率提升 2 倍!

 

二、提升行動網站載入速度

@ Facebook 甚至設立了 2G Tuesdays 來瞭解在 2G 環境下的使用者如何使用他們的產品。每個星期二,員工都會收到可選擇是否模擬 2G 連線的彈出式通知。

@ 以下為您應關注的關鍵指標以及應力求達成的目標:
1.可用時間:顧客希望能盡快看到「不需捲動位置」的內容。請先載入重要的內容,並確保網站在 3 秒內即為可使用狀態。網頁測試會產出速度指數,也就是完全顯示不需捲動位置內容的所需時間。我們的目標是確保這個分數低於 3000
2.要求總數:建構頁面必要的資源要求總數,數量應在 80 至 100 之間。如果實際數量超過這個範圍,建議您評估是否要移除或合併特定要求。
3.頁面大小 : 建構網頁需要的所有資源不應超過 1 mb。如果您的網站大於這個目標值,建議您盡可能移除或壓縮資源。

@ 瀏覽器需要先建構 DOM CSSOM 樹狀結構,才能轉譯網頁。

@ 最佳化關鍵轉譯路徑的常見步驟如下:
1.分析及描述關鍵路徑:資源數量、位元組數、長度
2.儘可能減少關鍵資源數量:刪除資源、延遲下載、標記為非同步資源等等
3.儘可能減少關鍵位元組數,以縮短下載時間 (往返次數)。
4.最佳化剩餘關鍵資源的載入順序:儘早下載所有關鍵資源,以縮短關鍵路徑長度。

@ 最佳化圖片時,應牢記在心的訣竅和技術:
1.優先選用向量格式:向量圖片不受解析度和縮放程度影響,最適用於多裝置和高解析度的情況。
2.縮減及壓縮 SVG 資產:大多數繪圖應用程式產生的 XML 標記通常包含不必要的中繼資料,可以放心刪除;請確保伺服器設定為對 SVG 資產採用 GZIP 壓縮。
3.選擇最佳光柵圖片格式:確定功能要求,然後選擇適合每個特定資產的格式。
4.實驗找出光柵格式最適合的品質設定:請大膽降低「品質」設定,效果通常非常好,節省的位元組可能會很可觀。
5.移除不必要的圖片中繼資料:許多光柵圖片包含不必要的資產中繼資料:地理資訊、相機資訊等。請使用適合的工具刪除這些資料。
6.提供縮小的圖片:調整伺服器上的圖片大小,確保「顯示」大小盡可能接近圖片的「自然」大小。請特別留意大型圖片,因為調整這些圖片的大小時,通常會需要最大的備用空間!
7.自動化、自動化、自動化:請投資自動化工具和基礎設施,如此可以確保所有圖片資產一定會經過最佳化。

 

三、打造流暢的行動使用者體驗

@ 行動網站設計的最佳做法
1. 把號召性內容擺在最顯眼的地方
2. 選單內容應簡短有力
3. 讓使用者輕鬆返回首頁
4. 別讓宣傳內容喧賓奪主

@ 首頁及網站的瀏覽
1. 把號召性內容擺在最顯眼的地方
2. 選單內容應簡短有力
3. 讓使用者輕鬆返回首頁
4. 別讓宣傳內容喧賓奪主

@ 站內搜尋
1. 將站內搜尋功能放在醒目的位置上
2. 確保站內搜尋找出最相關的項目
3. 運用篩選器提高站內搜尋的使用量
4. 協助使用者取得更好的站內搜尋結果

@ 商務和轉換
1. 在使用者下決定前提供更多探索機會
2. 讓使用者以訪客身分購物
3. 利用現有資訊盡量提高便利性
4. 使用點選通話按鈕進行複雜的工作
5. 方便使用者從其他裝置完成轉換

@ 表單輸入
1. 資訊輸入力求精簡
2. 為所有任務選擇最簡易的輸入方式
3. 當使用者選取日期時,為他們提供視覺化日曆
4. 善用標籤和即時驗證功能以減少表單錯誤
5. 設計有效率的表單

@ 可用性和外觀設計
1. 為行動裝置最佳化整個網站
2. 別強迫使用者撥動雙指縮放畫面
3. 製作可展開式產品圖片
4. 讓使用者知道哪種螢幕方向效果最佳
5. 將使用者留在單一瀏覽器視窗中
6. 避免使用「完整版網站」這類標籤
7. 清楚交代您為何需要知道使用者的位置

@ 如何善用 Google Analytics (分析) 資料,讓使用者體驗有更好的成效?
1. 從到達網頁著手,提升使用者體驗
2. 查看裝置使用情形
3. 瞭解不同瀏覽器或螢幕解析度是否會影響使用者體驗
4. 評估站內搜尋使用情形
5. 分析購物行為以找出網站體驗中的不足之處
6. 分析結帳行為

 

四、進階網路技術

@ AMP 能用來建構可快速轉譯的靜態內容網頁,實際的 AMP 網頁是由三個不同的部分組成:
1.AMP HTML 指的是設有某些限制以提供可靠效能的 HTML,但同時又具有某些延伸功能,可以用來建構比基本 HTML 更加豐富的內容。
2.AMP JS 程式庫可以確保快速轉譯 AMP HTML 網頁。AMP JS 程式庫會採行所有 AMP 最佳效能做法、管理資源載入,並會提供上述的自訂標記,一切都是為了快速轉譯您的網頁
3.Google AMP Cache 可用於提供快取的 AMP HTML 網頁。Google AMP Cache 是以 Proxy 為基礎的內容傳遞網路,用於傳遞有效的 AMP 文件,可以擷取、快取 AMP HTML 網頁,且會自動改善網頁的效能。

@ AMP 的運作方式 : 下列幾個最佳化設定結合在一起,就是 AMP 網頁速度極快且幾乎等於立即載入的原因。
1.僅能使用非同步指令碼
2.靜態調整所有資源的大小
3.不讓延伸機制阻擋網頁轉譯
4.關鍵路徑上不可有第三方 JavaScript
5.所有 CSS 必須以內嵌方式編寫且有大小限制
6.必須以有效率的方式觸發字型
7.儘量減少樣式重新計算的次數
8.僅執行 GPU 加速動畫
9.安排資源載入順序
10.立即載入頁面

@ Progressive Web Apps (PWA) 是結合網頁和應用程式的使用者體驗,具備以下特點:
1.可靠即使在網路不穩定的情況下,也可立即載入,不會出現下載失敗的暴龍圖示。
2.快速:快速回應使用者的操作,動畫順暢呈現,捲動效果良好。
3.吸引人:感覺就像是一般裝置上的應用程式,提供精彩的使用者體驗。

@ Progressive Web Apps 可以直接在使用者的裝置主螢幕上安裝與執行,不需要透過應用程式商店取得。因為有網路應用程式資訊清單檔,所以 PWA 可以提供精彩的全螢幕體驗,甚至可以透過網頁推播通知,吸引使用者繼續參與互動。

@ Progressive Web App 擁有幾項優點:
1.適合放在主螢幕上:如果符合 Progressive Web App 的標準,Chrome 就會提示使用者在主螢幕上新增 Progressive Web App。
2.可靠穩定,不受網路狀態影響:服務工作處理程序會啟用 Konga,在第一次載入網頁時可減少傳送 63% 的資料,完成第一筆交易後可減少 84% 的資料。
3.提升主動參與度:網頁推播通知使 eXtra Electronics 的主動參與度提升了 4 倍,而且使用者在網站的停留時間也加倍。
4.提高轉換率:因為提供令人驚豔的使用者體驗,AliExpress 在所有瀏覽器的新使用者轉換率都提高了 104%,iOS 裝置的轉換率則增加了 82%。

@ 推播通知是內建應用程式最有價值的其中一項功能,現在連網頁也可以使用了。
1.及時:及時通知指的是通知要在使用者需要且有必要出現的時候出現。
2.準確:準確通知指的是通知含有使用者可以立即採取行動的特定資訊。
3.相關:相關通知指的是通知內容必須和使用者關注的人物或主題有關。

@ Payment Request API 系統旨在消除結帳表單,大幅改善購買過程中的使用者工作流程,提供更為一致的使用者體驗,並使網路商家可以輕鬆運用不同的付款方式。Payment Request API 並非新的付款方式,也沒有與付款處理方直接整合,而是建立一個處理層,旨在:
1.讓瀏覽器成為商家、使用者與付款方式三者間的媒介角色
2.盡可能將付款通訊流程標準化
3.完美支援不同的安全付款方式
4.適用於任何瀏覽器、裝置或平台,例如行動裝置等

行動版網站考題 :


最後來分享我的 “2017行動版網站的考古題(部分版)”



欲索取”2017行動網站考題”(完整版)


請至下方留言:
        1.為什麼想考”行動版網站”?  工作上需要 還是?
           (若為工作需要,請附註您的 “職務” 及 “工作內容” )
        2.目前考過Google Partner裡的哪些認證考試?
        3.留下您的Email (寄送”完整版”行動網站考題 )

 
 2018版考古題出爐囉 : 2018 Google行動網站認證考試攻略 | Google考試


 

附上證照 :