前端性能優化與 SEO

基本上性能優化就是幾個重點

1. 精簡的 Code 提昇程式的執行效率。找到網站的瓶頸試著去優化它，如果重計算也可以考慮用 Web Worker，需要頻繁跟伺服器存取資料也可以用 Service Worker，多多利用可以用的資源，此文不會討論這個項目。

2. 減少資源請求。因為建立連線成本是很貴的，也會增加 Server 的負擔，如果可以就盡量的避免，也可以試著合併請求。

3. 減少資料傳輸的大小。因為你不能保證每個使用者都是高頻寬的網路，掌握這三大重點就你就可以發現可以優化的地方很多。

資源壓縮

圖片

• 壓縮圖片 可以使用 SVG 或 WebP，以下圖為例 WebP 的 Alpha 版就幾乎是原圖的 1/10，不過目前 WebP 還有瀏覽器支援的問題，建議調整 JPG, PNG 的品質就好，至少在沒有大檔需求情況下盡可能讓圖片最小化。

• Lazy Load 圖片

• CSS Image Sprites

code

• 減少不必要的 JavaScript, CSS 程式碼

  • 靜態分析工具

  • Facebook Prepack, Google closure-compiler-js

• Minify JavaScript, CSS 文件

  • 模板引擎 HTML 也能夠 Minify 例如 Pug，Pug

  • Laravel 的 Blade 模板引擎也有人實作 HTML 的 Minify(https://github.com/renatomarinho/laravel-page-speed)

減少 request

• HTTP/2

• 合併 JavaScript, CSS 文件

• HTTP Cache

加速

• HTTP Compression

• 善用 Prefetch 來預載

• 使用 Async 屬性

• 使用 CDN

• HTTPS Cache Setting

SEO

• Structured Data Markup 結構標記

  • 利用 Microdata or JSON-LD (Google 建議使用 JSON-LD)來對網站內容進行渲染，讓爬蟲更容易了解你的網站

  • debug: https://search.google.com/structured-data/testing-tool

• 社群標記

  • OG, 還有非常多的參數可以設置

  • debig: Facebook Open Graph, Twitter Card

• Sitemap

• Search Console Google 的 Search Console 還有提供行動網站的優化檢測工具。

• 正確使用 HTML 標籤

• Server Side Render

• HTTPS

• Google AMP已宣告不列入評分