🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付

當您造訪dev.to的主頁時,頁面本身會被緩存在邊緣,以便盡快從最近的伺服器傳送給您。

這很好,但這種靜態傳遞也意味著我們無法根據您關注的標籤和人員立即顯示您的個人化提要和側邊欄

為了獲取該訊息,我們非同步呼叫您的提要,並且該請求一直傳輸到資料庫以動態加載回應。

這是一種正常的模式,但盯著加載螢幕確實很煩人,而且等待的時間通常比我們預期的要長。這種延遲是由於需要優先載入大量其他資源(例如 CSS、JavaScript 和圖片)造成的。

一個簡單的優化

我們最近進行了調整,透過在主頁的<head>頂部加入「預先載入」指令來優先處理您的 feed。

它看起來像這樣:

<link rel="preload" href="/stories/feed/?page=1&type_of=discover" as="fetch" crossorigin="same-origin">

這行簡單的程式碼指示瀏覽器優先處理此端點,而不是其他可能優先處理的資源。請謹慎選擇向瀏覽器發出優先權訊號。當所有資源都重要時,就沒有什麼資源重要了。但如果有一些端點對使用者體驗至關重要,請幫忙瀏覽器,告訴它該做什麼!

前往主頁並刷新。如果你還記得幾天前的體驗,你應該會注意到體驗更加流暢。由於存在一些差異,刷新體驗並非每次都完美,但這是一個明顯的進步。

雖然沒有進行徹底的前後對比測試,但結果顯而易見。動態訊息和側邊欄的載入速度比之前顯著加快。這些關鍵資源能夠優先加載,而不是被埋沒在圖片之下,因為圖片很容易被向下移動,而不會對使用者體驗造成負面影響。

所有商品運送至 Forem

DEV 執行在Forem 開源程式碼之上——我們最近開始擴展 Forem 軟體的功能,以最大限度地提高其重複使用率。我們希望未來能夠實現更多自託管功能,所有這些改進都將在所有這些功能中實現。

自架服務對於大規模採用來說仍然有點太複雜,我們無法優先解決 - 但與此同時,我們已經啟動了subforems。 core.forem.com是我們主要發布有關該專案的小更新的地方。

如果您管理軟體專案,並且有興趣快速上線yourproject.forem.com ,我們很樂意支援這個用例。如果您對此感興趣,請填寫表格

編碼愉快!


原文出處:https://dev.to/devteam/preloading-the-dev-and-forem-home-feed-and-sidebar-for-substantial-performance-benefits-2cg8


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝18   💬9   ❤️5
680
🥈
我愛JS
📝4   💬14   ❤️7
252
🥉
御魂
💬1  
3
#5
2
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付