FANDOM


改善手機閱讀體驗

從2017年底開始,FANDOM上wiki社區的平均頁面加載時間減少了46%,這得益於去年的Wiki現代化項目。然而,這只是冰山一角,我們的團隊一直在努力改善網站的手機頁面的性能。目前我們已經取得了一些成功,尤其是用戶連接移動數據的時間已經有了足足好幾秒鐘的提高。

那我們是怎樣做到的呢?

我們採取的步驟

在評估加載時間的時候,需要考慮多種因素。對於手機和電腦桌面有一些主要的因素需要考慮。

  • 首次有效渲染 - 這是在即時呈現某些頁面元素之前呈現主要元素所需要的時間。
  • 交互式時間 - 當你可以開始閱讀頁面上的內容時所需要的時間。

為了在這兩個方面取得改進,我們一直努力進行各種嘗試。其中包括:

  • 在手機架構上移除沒有太多作用的代碼。例如,減小CSS和JS的文件大小,從而使頁面加載時間更快。
  • 我們已經重新設計了頁面元素的加載順序,確保最有用的部分首先加載,同時減少頁面元素在加載過程中移動的頻率。

我們還優化了一些「屬性」,例如和縮略圖存儲器的連接時間等。這意味着讓圖像加載的速度變得更快。

這對於所有人來說都是一件值得慶祝的事情。你可以通過下面的簡短視頻將2018年初和現在進行對比,了解瀏覽手機網頁時頁面加載速度效果的變化情況。這個視頻是使用Moto G4手機在3G的網絡環境下完成的。

MobilePagePerformance

結果

在測試這些改進的時候,我們查看了大量不同的頁面。您可以看到這些嘗試對於你的手機體驗意味着什麼:

  • 首次有效渲染從2.8秒下降到大約1.1秒,將近60%的下降。
  • 交互時間從7秒下降到3.4秒,下降幅度為51%。

而這不僅僅對於wiki社區產生影響!FANDOM的英文新聞站和討論版在移動和電腦桌面上加載速度都有所提升。僅僅在2017年現代化工作後的這一小段時間裡,我們的整個站點加載速度比一年前要快出許多倍。

下一步計劃

網站下載速度加快對所有用戶來說都是非常棒的事情,讓用戶訪問體驗變的更加愉快。而這也意味着更多的人將更快速的閱讀更多的內容。我們的數據顯示,隨着頁面加載時間的減少,用戶閱讀頁面的數量也在大幅度增加。

當然,我們還有很多工作要做。在未來將還會有一些列的改進措施,包括:

  • 頁面上的第一個圖像加載速度將變得更快,從而簡化了文章中所有元素加載順序,也會讓頁面之間的跳轉速度加快。
  • 我們將會考慮對廣告的加載時間進行更改。
  • 我們還將研究搜尋引擎如何抓取網站結果,尋找更多的機會讓社區的搜索結果排名更加靠前。

除了我們去年為實現Wiki現代化所做的努力,以及對討論版和FANDOM英文版新聞站的內容加載時間進行改進之外,手機用戶現在可以更快地瀏覽FANDOM網站上的大量內容。我們將繼續實現網頁的移動現代化,並且期待在未來告訴大家更多相關的進展情況!



Chen

Chen Shen

Chen Shen於2013年加入公司,目前已離職,曾任高級社區主管,當時主要負責Fandom新產品在英文社區上的應用和測試。在加入Fandom之前,他在電視媒體和時尚行業工作多年。
除了特别提示,社区内容遵循CC-BY-SA 授权许可。