logo

如何讓你的網站變慢

Hey 大家好，我是 Eric 😄

首先先謝謝對我們二月要在台北舉辦的第一個交流會有興趣的朋友們，名額也在短短兩小時內都報名完了而錯過這次的朋友也跟你們說聲不好意思，希望下次有機會可以再跟你們見面交流一下 😄

很多認識我的人知道我個人很喜歡怎麼讓 app 效能變快也會想試試任何方法可以讓工程師開發速度變快，不管是流程上、換 library、或是對語言的理解下手來讓我們提升 ship product 的速度，這週 podcast 講一些可以讓你的 web app 效能變快的方法：

  • 將你的 code 打包成多個檔案，這樣瀏覽器只需要重新下載更新過的部分也可以利用到快去的機制把沒更新過的檔案直接 serve 給你
  • 多利用 Lazy Loading，將首頁載入時不那麼重要的東西延後下載，等到需要的時候再下載，這樣可以加快首頁載入速度。這個技巧也可以用在圖片上。
  • 開啟壓縮(Gzip 或 Brotli)，大部分檔案壓縮後可以縮小 70% 以上，檔案越小傳輸速度越快。
  • 避免在 Client 端做複雜計算,這會拖慢載入速度，如果真的有必要也是可以用像是 timeslicing 的技巧計算拆開，甚至用 React useTransition 告訴 React 接下來的 function 不用一定要一次完成，不過最好的方法如果可行的話還是在 Server 端計算好後再傳給 Client。

詳細的資訊可以聽我們這集的 podcast：https://fetalk.dev/episodes/ep26

你可能錯過 🧵

React 19：React 好久沒更新了而聽說下一版會是直接發布 v19

image

CSS :has selector：Firefox 121 出來之後現在全線瀏覽器都可以用 :has 了

image

CSS Nesting Selector： Chrome 120 發佈後也可以在不用 preprocessor 幫助下使用 Nesting Selector 了

image

React-aria：一個只專注 accessibility 和 i18n 的 headless component library

預告一下 😉

我已經安排和我 Staff Software Engineer 同事錄一集了，可以期待一下一集全英文的，我試試看 ChatGPT 有沒有辦法全部翻譯 😂

如果你喜歡這內容的話幫我在 Twitter 和 Threads 上面分享給其他正在前端這條路上努力的朋友們，也別忘了訂閱我們電子報收到第一手消息喔 🚀