Flying Pages – WordPress 外掛介紹

Flying Pages WordPress Plugin

Flying Pages WordPress 外掛,主要的目的是在使用者點擊頁面連結前便預先載入頁面,這會讓使用者點擊後產生立即載入頁面的效果,而達到即時加載網站頁面或文章的效果。

而這種預先載入頁面的技術,有別於大家熟知的 WordPress 快取、CDN、網頁靜態化的網站加速方式。

在更早時候,Quicklink 及 Instant.page 外掛就已經運用這種技術,可以點擊下方的連結,閱讀詳細的說明:

⚡️ 透過在閒置時間預先擷取檢視區連結的方式,加速後續頁面載入速度。
Make your site’s pages instant in 1 minute.
甚麼是 Quicklink 快速的連結?

通過在網頁空閒時間,預先取得網頁內的連接來加快後續頁面加載速度 – Quicklink, Google

簡單地說,Quicklink plugin 是一個很小的 JavaScript 文件,啟用後,它可以檢測網頁 (可見區域) 中的連接,並甚至在用戶點擊連接之前就將其頁面預加載。

Advertisement

Quicklink 問題?

如果網頁中的連接過多,則 Quicklink 會告訴瀏覽器同時預加載所有鏈結,這將導致伺服器產生高負載。

如果你是使用共享主機,在沒有足夠資源的主機中,它將在你的網站高流量時段中,被主機商停止服務。

也因為這個因素,Quicklin 外掛一直沒有被大量使用。

什麼是 Instant.page?

使用即時預加載,在用戶點擊連接頁面之前立即預加載,也就是用戶將鼠標游標暫留在該連結上,才開始立即加載頁面。

它在某種程度上類似於 Quicklink 的概念,但是不同的是預加載網頁中的所有連結,而是在滑鼠游標暫留在連結時才預取連結。

這種方式解決了 Quicklink 一次加載太多的連結,造成主機的高負載;但是 Instant.page 技術需要取決於高效能的伺服器上才會有感覺。

通常,用戶從滑鼠游標暫留到點擊連結,大約需要 300 毫秒 (ms),因此,如果你的伺服器在 300 ms 內沒有響應,那麼你很可能不會感覺有何速度上的差異。

實現上,一般網站 < 300ms TTFB 是不多見的,大多數共享託管主機所提供的時間約為 400 ms,甚至是 1S (秒)。

Flying Pages 的介紹

就如 Flying Pages WordPress 官方網頁的說明 (感謝 Alex Lion 的翻譯),它解決了 Quicklink 和 Instant.page 的問題。

  • 預先載入檢視區中連結的頁面 (類似於 Quicklink)
  • 游標暫留便預先載入頁面 (類似於Instant.page)
  • 限制每秒預先載入數量
  • 伺服器負載過重便停止預先載入
  • 偵測使用者連線及偏好
  • JS 文件只有 1KB
以智慧型偵測方式即時載入內部網頁。

Flying Pages 會檢測檢視區中的所有連結,並將其添加到列隊中,列隊中的連結每秒受到 3 個請求的限制 (默認情況下),這將防止立即發送大量請求,如果檢視區的連結內容尚未預先載入,它將立即在鼠標游標暫留時預加載連結,Flying Pages 還非常智能,可以檢測到當伺服器回應速度變慢或傳回錯誤時,便會停止預先載入以降低伺服器負載。

檢測 Flying Pages 的運作

Quicklink 和 Instant.page 是隨裝即用,啟用外掛後是沒有介面可以設置,而 Flying Pages 啟用後可以依照你的主機效能去調整設定。

Flying Pages default

使用 Chrome 開發者工具 (Google Chrome DevTools) 按 F12 選擇 Network,查看網頁請求和下載的資源文件,在最下方部分可以看到 FlyingPages 標籤,表示已經檢視區中連結開始預先載入了,如圖:

Flying Pages 預先載入

你可以試試看,點擊連結時,網頁反應的速度是不是變快了。

結語

這個概念因該是從 Quicklink 開始,當初因網路頻寬和主機負載的問題,造成很多的討論,Flying Pages 解決了以上兩大問題後,因該會越來越多人嘗試,但還有一個與快取外掛能不能契合的問題,這要靠使用者去測試了。

不過,Flying Pages 的作者非常積極,每一個問題都會回覆,是非常佛心的作者。

//Featured Photo 攝影師:Free-Photos,連結:Pixabay

Follow me

yungke

視咖啡如命的癮君子,沒有厲害的技術,只會小打小鬧的電腦工程師,其實是個打雜小弟,修電燈、水管也都是我的工作。
yungke
Follow me
Advertisement

Follow Me

查看本文
喜愛 Like 點擊數!!
Back to top