Flying Pages by WP Speed Matters

外掛說明

Flying Pages 會在使用者點擊頁面連結前便預先載入頁面,這會讓使用者點擊後產生立即載入頁面的效果。

快速連結

外掛運作方式

Flying Pages會為網站插入一段經過 GZIP 演算法壓縮、約莫 1KB 大小的 JavaScript 程式碼,在瀏覽器發生閒置狀況時便會開始執行。接下來外掛會偵測檢視區中的頁面,游標暫留於連結上時,便會進行預先載入。

Flying Pages 會自動進行偵測,確保預先載入行為不會造成網站停擺或執行速度大幅降低。

  • 預先載入檢視區中連結的頁面:使用 Intersection Observer 技術偵測檢視區 (使用者當下檢視的區域) 中的連結,並通知瀏覽器使用 prefetch 技術預先載入這些內容,並在連結有問題時,切換至 XHR 模式 (類似 Quicklink)。

  • 游標暫留便預先載入頁面:當游標暫留於連結上時,如果檢視區的連結內容尚未預先載入,則 Flying Pages 便會立即自動預先載入 (類似 Instant.page)。

  • 限制每秒預先載入數量:當頁面中包含太多連結時,同時預先載入全部連結會造成伺服器停擺或速度大幅降低,產生對網站使用者的不良影響。Flying Pages 使用內建的佇列方式,限制了每秒預先載入的數量 (預設每秒 3 個要求)。舉例來說,如果在檢視區中有 10 個連結,外掛會需要約莫 4 秒的預先載入時間。

  • 伺服器負載過重便停止預先載入:當伺服器回應速度變慢或傳回錯誤時,便會停止預先載入以降低伺服器負載。

  • 偵測使用者連線及偏好:檢查使用者是否處於如 2G 等慢速連線或啟用精簡模式。偵測到這些狀況時,Flying Pages 不會預先載入任何資源。

螢幕擷圖

  • Flying Pages 設定

安裝方式

自動安裝

  1. 前往 [外掛] 頁面,並點擊 [安裝外掛]。
  2. 搜尋「Flying Pages」。
  3. 在 WordPress 的 [外掛] 頁面啟用 Flying Pages 外掛。
  4. 前往 [設定]→[Flying Pages] 進行設定。

手動安裝

  1. 將完整的 flying-pages 資料夾上傳至網站的 wp-content/plugins/ 目錄中。
  2. 在 WordPress 的 [外掛] 頁面啟用 Flying Pages 外掛。
  3. 前往 [設定]→[Flying Pages] 進行設定。

常見問題集

安裝 Flying Pages 後,網站的 GTmetrix 完整載入時間有所增加,這個狀況該如何處理?

當其他資源完全下載且瀏覽器處於閒置時,Flying Pages 便會開始進行預先載入。它不會對瀏覽器開始接收資料時間、優先內容轉譯或可開始互動時間產生影響。如果網站管理員對 GTmetrix/Pingdom 的完整載入時間有疑義,請將 [Delay to start preloading] 設定為較高的數值,或設定為游標暫留於連結上時才進行預先載入。

如何檢查 Flying Pages 是否產生預期的效果?

請觀看這支影片,便會發現 [prefetch cache] 狀態的載入項目。請注意,如果啟用了 [Disable for logged in admins] 功能,請務必在無痕模式中進行測試。

這個外掛是否無法改善網站在 GTmetrix、Pingdom、Google PageSpeed Insights 的評測表現?

網站載入後,Flying Pages 會預先載入連結,並僅改善有點擊的連結的載入速度,這代表這個外掛無法提升初始載入速度。

使用這個外掛後,網站還需要快取外掛嗎?

每次進行頁面/連結的預先載入,都會執行若干 PHP 程式碼及耗用大量資源的 MySQL 查詢,因此強烈建議使用快取外掛,例如 WP Rocket

這個外掛推薦的主機服務提供傷及快取外掛有哪些?

Flying Pages 能執行於不同主機服務提供商的主機,且不須安裝任何快取外掛。但如果要取得與外掛官方網站相同的效能表現及零停機時間相同的最佳效果,建議採用 Cloudways 的主機及 WP Rocket 快取外掛。

Flying Pages 會影響 Google Analytics 或其他類似服務的追蹤指令碼嗎?

Flying Pages 僅會下載 HTML 內容,並不會在外掛中執行任何程式碼,因此不會影響 Google Analytics 或類似指令碼。

Flying Pages 會增加網站主機的頻寬使用量嗎?

根據統計,網站上的視訊及圖片會使用 80% 的頻寬。Flying Pages 僅會預先載入 HTML 頁面 (通常小於 30KB),並且不會下載外掛所需的任何資源 (例如圖片、CSS、JS)。安裝 Flying Pages 後,使用的頻寬不會超過 5%。

Flying Pages 是否會增加伺服器負載?

簡而言之,會。但是網站管理員可以為 Flying Pages 設定每秒預先載入數量限制,或僅有游標暫留於連結上才進行預先載入,藉此降低伺服器負載。此外,使用優秀的主機服務提供商 (例如 Cloudways) 及快取外掛 (例如 WP Rocket),便能有效降低伺服器負載。

如何取得技術支援?

請在官方技術支援論壇中提中技術支援要求,也可以在 WP Speed Matters 的 Facebook 社團中獲得協助。

使用者評論

2020 年 5 月 24 日
So easy to setup and get going. Seconds. Speeds up site navigation dramatically! Also, top class support! I highly recommend this plugin!
2020 年 4 月 15 日
This plugin is amazing, I don't understand how this system isn't more common on the internet. I tried it now and it's compatible with WP Rocket and does NOT even break my logged-in users' dynamic content. Thank you
2020 年 3 月 12 日
It surprises me just how much this works, it's almost like a magic bullet to increase your overall load time. Now I haven't done a complete stress test of it yet but with how its performing right now, I've no doubt it will deliver. When you click on any element in your site, it just loads, it kind of reminds me of React in some respects. Though don't expect Single Page App experience, that's still not the case here, it's just really fast, or maybe the illusion of being fast. Your site will still be slow if you add too much bloat on it, so be wary of that.
閱讀全部 43 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Flying Pages by WP Speed Matters〉的開發相關工作。

參與者

Flying Pages by WP Speed Matters 外掛目前已有 5 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將 Flying Pages by WP Speed Matters 外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

2.4.1

  • [BUGFIX] Warnings and errors in Compatibility tab

2.4.0

  • [NEW] Compatibility tab

2.3.0

  • [BUGFIX] Stopped preloading when ignore list is empty
  • [NEW] FAQ
  • [NEW] Optimize more

2.2.2

  • Bug fix for Fast Velocity Minify plugin

2.2.1

  • Addtional options to mouse hover delay (0ms) and max rps (2s)
  • Disable for logged in admins by default

2.2.0

  • Moved option’s config object to window
  • Separate option for ‘preload only on mouse hover’
  • Start flyingPages() without waiting for DOMContentLoaded
  • Improved babel setup
  • Removed arrow functions for IE compatibility

2.1.2

  • Removed XMLHttpRequest and improved minification of JS file (reduce size by ~300bytes)
  • Added option ‘2 secs’ to delay to start preloading

2.1.1

  • Changing JavaScript scope to prevent conflicts with other plugins using same variables

2.1.0

  • Option to disable preloading when logged in as administrator

2.0.9

  • Disable on Internet Explorer
  • Renamed observer object to prevent conflicts with other plugins

2.0.8

  • Ignore query strings by default

2.0.7

  • Allow 1 second in delay

2.0.6

  • Better compatibility for WooCommerce
  • Prefetching on mobile using ‘touchstart’

2.0.5

  • Bug fix – Start queue only after calling main function, causing errors in browser console

2.0.4

  • Bug fix – Issues with Swift Performance cache plugin when ‘Merge Scripts’ is enabled

2.0.3

  • Bug fix – Prevent max rps from resetting to default value on plugin update

2.0.2

  • Support WordPress 4.5+
  • Copy fixes

2.0.1

  • Bug fix – Set default config on plugin update/activation

2.0.0

MAJOR UPDATE!
* Configure ignore keywords
* Configure delay for prefetching from viewport
* Configure to prefetch on mouse hover only
* Configure maximum requests per second
* Configure mouse hover delay

1.0.5

  • Bug fix – Prevent wp-admin links from preloading

1.0.4

  • Bug fix for Safari/iOS Safari

1.0.3

  • Prevent logout links from preloading

1.0.2

  • Prevent external links from preloading on hover

1.0.1

  • Support for Microsoft Edge browser
  • Prevents current page from preloading

1.0.0

  • Initial release