就是愛尚生活 - 94i3 Life

 找回密碼
 免費註册

人氣: 3605|回復: 1

[交流] Google PageSpeed Insights 使用瀏覽器快取功能

  [複製鏈接]
字體大小: 正常 放大

新浪微博達人勛

總積分排名︰1
簽到
1925
鮮花(66) 雞蛋(2)
累計在線
306679分鐘
發表於 2017-11-8 17:38:56 | 顯示全部樓層 |閱讀模式
  
使用瀏覽器快取功能

0.jpg 1.jpg

製作適合在行動裝置上顯示的廣告

您有約 39% 的訪客來自行動裝置,是衝高流量及提升廣告收益的絕佳商機。

適合透過行動裝置瀏覽的設計十分重要,可確保廣告在您的網站上正確顯示。

針對行動裝置調整過的網站能提高訪客停留的意願,進而提升流量和收益。

如果網站的載入時間過長、需要放大才能閱讀,或是廣告顯示異常,行動裝置使用者就可能放棄瀏覽。

Google 搜尋也會優先顯示適合透過行動裝置瀏覽的網站。

瞭解如何針對行動瀏覽體驗將網站最佳化

當 PageSpeed Insights 偵測到來自您伺服器的回應不含特定快取標頭,或是資源指定為僅供短時間快取,就會觸發這個規則。

PageSpeed Insights

行動裝置相容性測試
行動裝置相容性測試」功能可以分析網址,然後回報該網頁的設計是否適合透過行動裝置瀏覽。根據 Googlebot 偵測的結果,如果網頁具備以下條件,即符合使用「適合透過行動裝置瀏覽」標籤的資格:
  • 避免使用較少用於行動裝置上的軟體 (如 Flash)
  • 文字不需縮放即可閱讀
  • 自動將內容調整為螢幕大小,讓使用者不需要水平捲動或縮放
  • 各連結項目之間有足夠的空間,讓使用者可以輕易按到正確的項目

總覽

如果使用者不是第一次造訪您的網站,瀏覽器快取的靜態資源將可為他們節省時間。快取標頭應套用至所有可快取的靜態資源,而非只套用至小型子集 (如圖片)。

可快取的資源包括:JS 和 CSS 檔案、圖片檔案及其他二進位物件檔案 (媒體檔案、PDF 等)。一般而言,由於 HTML 不是靜態頁面,所以預設不應視為可快取。您必須思考怎樣的快取政策適合您網站的 HTML。

建議

您可以為伺服器啟用瀏覽器快取功能。靜態資源應至少有一週的快取存留時間,廣告和小工具這類第三方資源則應至少有一天的快取存留時間。無論可快取的資源為何,我們都建議您採用以下設定:

將 Expires 設為至少 1 週,最好可設為長達 1 年 (我們建議使用 Expires 而非 Cache-Control: max-age,因為前者的支援範圍更廣)。請勿設為超過未來 1 年,以免違反 RFC 規定。

如果您明確知道資源即將變更,則可設定較短的有效期限。不過,如果您只知道「可能很快就會變更」,但不知道確切的時間,那麼建議您設定較長的有效期限並使用網址指紋比對 (請見下文)。
Expires 和 Cache-Control: max-age 標頭

這兩個標頭可指定一個時間範圍,允許瀏覽器在此期間直接使用快取資源,無需向網路伺服器確認是否有新版本。兩者都是可無條件套用的「強大快取標頭」。一旦設置這兩個標頭並完成資源下載,瀏覽器就不會對資源發送任何 GET 要求,除非到期日或最長使用期限屆滿,或是使用者清除快取。

Last-Modifed 和 ETag 標頭

這兩個標頭可指示瀏覽器如何判定檔案異同,據此來提供快取檔案。Last-Modified 標頭中指定的值為日期,ETag 標頭中指定的值則可以是用來識別資源的任何非重複值 (一般為檔案版本或內容雜湊)。Last-Modified 是一種「虛弱」的快取標頭,專供瀏覽器嘗試判定是否要從快取擷取項目。

當使用者確定重新載入網頁時,這兩者均可讓瀏覽器發送條件式 GET 要求,藉此有效率地更新快取資源。除非伺服器上的資源變更,不然條件式 GET 不會傳回完整回應,所以相比於完整的 GET,前者的延遲時間更短。

我該使用何種快取標頭?

您必須為所有可快取的資源指定 Expires 和 Cache-Control max-age 的其中一個標頭,以及 Last-Modified 和 ETag 的其中一個標頭。然而,同時指定 Expires 和 Cache-Control: max-age,或是同時指定 Last-Modified 和 ETag,都是多餘的行為。
使用網址指紋比對

對於不定期變更的資源,我們可以設定瀏覽器在伺服器上的資源變更時才予以快取,屆時伺服器會告訴瀏覽器有新版本。如要這麼做,請為每個資源版本提供一個專屬網址。舉例來說,假設有一個名為「my_stylesheet.css」的資源,我們可以將其重新命名為「my_stylesheet_fingerprint.css」。資源的變更會牽動指紋和網址一起改變,而一旦網址變更,瀏覽器就會自動重新擷取資源。利用網址指紋比對,我們可以將到期日設到很久以後,即使資源更新頻率比較短也無妨。

常見的指紋比對方法,是比對檔案內容雜湊編碼的 128 位元 16 進位數字。

另一種方法則是為每個新的應用程式版本建立新的釋出目錄,把所有資產分別歸入各版目錄中。這種做法的缺點是,即使某個資產在各版間並未變更,該資產的網址仍會隨版本而異,強制瀏覽器重新下載。使用內容雜湊雖然沒有這個問題,但會稍微複雜一點
Google PageSpeed Insights 工具中測試您的網址,就能瞭解您的行動分數。

自訂您的網站軟體
您可以透過多種方式管理網站內容。有些網站擁有者憑一己之力從零開始架設網站,而有些人則使用 WordPress、Drupal 或 Joomla 等公司提供的軟體套件,取得主題、設計和範本。如果使用現有的網站軟體,網站擁有者就不需要為了建立整個網站而自行撰寫程式碼、樣式表和指令碼,只要提供內容 (例如相片、圖片和文字) 即可。

如何建立新網站?
如果您想運用現有的軟體套件打造全新網站,可參考下列軟體套件,以利開始著手建立。這些軟體套件通常稱為「內容管理系統」(content management systems),簡稱為 CMS。部分公司除了提供網站使用的軟體之外,也會提供代管服務。如要進一步瞭解如何建立網站,請造訪 Google 網站管理員學院

如何讓我的網站適合行動裝置瀏覽?
如果您知道您的網站使用哪一款軟體,請直接前往該軟體的專屬指南:
如果您的網站軟體不在上方清單中,或是您有任何意見回饋,請填寫這份表單
為協助您著手進行,我們整理出通用的一般指南供您參考:

1. 在進行變更或更新之前,先備份您的網站。
建議您先備份您的網站內容,再進行任何變更或更新。如果您不知道如何備份網站,請與您的 CMS 供應商聯絡,或瀏覽網站管理員支援社群

2. 將您的 CMS 更新到最新版本。
在某些情況下,系統會在 CMS 更新為最新版本後自動套用網站所需的安全性更新,並讓您的網站更適合行動裝置瀏覽。如果系統未自動觸發套用程序,請務必自行啟動更新程序,避免出現安全性漏洞。舉例來說,Joomla 3 本身即提供行動版支援功能

3. 如果 CMS 提供自訂主題,請確認主題是否適合行動裝置使用:
  • 在您的 CMS 管理面板中查看網站使用的主題,並尋找主題說明文件中是否出現「行動」或「回應式」等字詞。
  • 如果有可用的範本,可複製該範本的網址,然後貼到行動裝置適用性測試中,確認該範本是否符合行動裝置的瀏覽需求。
  • 如要提供更好的使用體驗,請確認該範本可快速載入,方法是查看 PageSpeed Insights 的「速度」部分,確定其中沒有任何標示為「應修正」的問題。

4. 查看 CMS 的支援論壇,瞭解其他網站管理員所遇到的行動版網站相關問題。
如需更多指南和支援,歡迎造訪網站管理員論壇


就是愛尚生活 - 94i3Life - 歡迎您 加入 !

回復 鮮花(66) 雞蛋(2)論壇版權

使用道具 舉報

新浪微博達人勛

總積分排名︰40
鮮花(1) 雞蛋(0)
累計在線
1526分鐘
發表於 2017-11-8 17:53:46 | 顯示全部樓層

感動ㄋ!大大您的分享,真是無話可說!
想得開的人,處處是春天,想不開的人,處處是枯竭。 - 94i3Life.

就是愛尚生活 - 94i3Life - 歡迎您 加入 !

您需要登錄後才可以回帖 登錄 | 免費註册 | 新浪微博登陸

本版積分規則


快速回復 返回列表 聯繫我們 搜索

QQ|關于我們|聯絡我們|就是愛尚生活 - 94i3 Life |簡體中文

GMT+8, 2017-11-24 12:50 AM

Powered by 就是愛尚 - 94i3.tw - X3.2

© 2007-2017 愛上誠信。愛上精緻。愛上專業。愛上時尚。愛上分享

94i3就是愛尚是一個經驗分享平台,網友均可以在94i3免費互相學習別人分享之經驗。
※本站只提供空間,網友自由發表使用,也請會員網友尊重論壇規則論壇注意事項,本網站內容均從網路上收集或網友們提供,其內容及言論的完整性以及正確性並不代表本站立場,本站不負任何法律責任,均與本站無關。倘若文章、圖片或是內容言論等有任何問題,請聯絡我們,我們將會第一時間優先處理或刪除。

快速回復 返回頂部 返回列表