Performance

基本前端優化

• 純粹講瀏覽器的運作順序（文章日期：2017.02.09），https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572

  • 
  • 使用 PageSpeed Insights，https://developers.google.com/speed/pagespeed/insights/

  • 另外一篇好文章，https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing

  • 在爛環境測試比較準（用 build code 的環境測，電腦效能太好，沒參考價值）

  • 盡量讓 resources 的請求集中一點

  • https://varvy.com/pagespeed/defer-images.html，先載入重要的內容，再載入圖片，圖片記得縮檔

  • 字型檔案都很肥...

  • CDN

  • 在後端優化，例如：server side caching of static html，code caching，memoisation 等等

• 工具清單（文章日期：2017.06.19），https://calpa.me/2017/06/19/front-end-performance-check-list-for-production-in-chinese/

  • Favicon，https://realfavicongenerator.net/

  • Open Graph Meta Tags，https://megatags.co/

  • CSS 相關

    • Autoprefixer

    • Purifycss，minify CSS

  • 開啟 GZIP 壓縮，https://checkgzipcompression.com/

  • 自己找出可能的錯誤，Sentry，https://sentry.io/welcome/

  • Google Tag Manager，https://developers.google.com/tag-manager/