#WebCRACK新手村 #網站趨勢新手知識
在專案進行的過程中很常會被客戶問到的是關於網站效能的優化問題，其實在做動態特效網站，必定會與效能的優化有所抵觸，但秉持著好還要更好的心態，我們也在效能的提升上做了些調整跟努力！因此在這裏我們整理了幾點，在網站效能優化中可以自己去注意到的一些小重點跟工具分享！
① 自己查看網站評測數據
② 自己看懂網站評分工具的數據名詞
③ 在專案開發程式進行中可以注意
④ 圖片壓縮
..
① 自己查看網站評測數據
這邊以Apple官網為例，分享4個網站評測工具
網站整體評測擴充軟體：Lighthouse
網站效能評分線上版：PageSpeed Insights、GTMetrix、WebPageTest
但 PageSpeed Insight 和 Lighthouse 所測量的向度有些差異，時間允許的話，最好兩個優化工具的指標都去完成。時間不足的話，以 PageSpeed Insight 的修改項目優先處理，因 Google 明確說到 Google 搜尋引擎會參考 PageSpeed Insight 跑分做為網站排名的依據。
..
② 自己看懂網站評分工具的數據名詞
▪網站評測重點一：效能（以Apple官網在PageSpeed Insights上的數據為例）
FCP（First Contentful Paint）
首次內容繪製，測量頁面從開始加載到第一部分的頁面內容完成渲染的時間。
LCP（Largest Contentful Paint）
最大內容繪製，測量加載性能。為了提供良好的體驗，LCP應在頁面首次加載後的2.5秒內完成。
FID（First Input Delay）
首次輸入延遲，測量互動交互性。頁面的FID應為100毫秒更短。
測量從用戶第一次與頁面互動（例如點擊連結、點按按鈕）直到瀏覽器對互動作出響應，並實際能夠開始處理事件所經過的時間。
CLS（Cumulative Layout Shift）
測量整個頁面內發生的意外佈局偏移
什麼是意外佈局偏移？
是否曾經歷過在網上閱讀一篇文章，結果頁面上的某些內容突然發生改變？文章在毫無預警的情況下移位，導致找不到先前閱讀的位置。 或者更糟糕的情況：你正要點擊一個連結或一個按鈕，但在你手指落下的瞬間，咦？連結移位了，點到了別的東西！這樣的現象就是意外佈局偏移唷～
▪ 網站評測重點二：整體表現（以Apple官網在Lighthouse上的數據為例）
效能（Performance）
參考上一點內容：網站評測效能解釋
網站實作方法（Best Practices）
使用較 「現代化」 的網頁技術，例如使用 Https、不使用已廢棄 API 等等。
網路無障礙（Accessibility）
無障礙是盡可能令更多人，使用你的網站
一般來說，會認為這屬於身心障礙者的範疇
但它其實會涵蓋其他群體：像是使用行動設備、或者網速很慢的人
網頁搜尋引擎最佳化（SEO）
提高網頁排名、流量，以及增加網頁在搜尋引擎的曝光度。
..
③ 在專案開發程式進行中可以注意
▪ 改善重點
壓縮你的圖片和檔案
挑選一個快速的虛擬主機
最佳化你的程式碼和程式
清除快取
減少 HTTP 請求數
▪ 在專案進行中可以注意的額外小技巧：
延遲載入圖片：使用延遲加載（lazy load）技術，改善網頁速度。
去除不需要的註解：程式碼註解是開發人員的最佳夥伴，但瀏覽器不需要這項資訊 只要去除 CSS 、HTML 和 JavaScript 註解，即可大幅縮減網頁的總大小。
壓縮 CSS：可以使用線上工具，如 CSS Compressor，或者使用 VS Code 編輯器套件 Easy Sass。他會自動刪除不必要的空格與註解。
移除未使用的 Javascript
網頁字型優化：使用 CSS3 屬性 font-display: swap;可以用 font-display 去設定想要怎麼顯示我們的字型，而 font-display: swap; 就是告訴瀏覽器，想先用替代字型，等真正的字型下載完畢再換上。
切圖建議 Photoshop：檢查有沒有沒用到的圖層，將多餘圖層刪減。
..
④ 圖片壓縮
▪ 網站上最常使用圖像格式
PNG：無失真壓縮點陣圖形格式
JPG：失真壓縮圖檔格式
GIF：失真壓縮點陣圖形檔案格式，支援動態、透明
SVG：二維向量圖形格式
使用時機
PNG：小尺寸照片圖形、保留照片透明
JPG：用在尺寸較大的照片以減少文件大小
GIF：可以製作小型動態圖片檔案
SVG：向量檔，縮放不失真
▪ 圖片壓縮小工具
ImageOptim
應用程式工具
支援 PNG、JPEG 和 GIF 三種常見的圖片格式
無數量上限
在進行壓縮時，會直接將壓縮結果取代原始檔案，要確認備份
ImageOptim API （需要付費）
TinyPNG
最為廣泛應用的圖片壓縮工具，支援平台多
一次最多20張，單張不超過5MB
有開發 WordPress 外掛：Compress JPEG & PNG images
免費方案每個月可以免費壓縮 500 張圖片，超過數量開始計價收費
​ ​ ​ ​ 4. Photoshop Plugin
直接從 Photoshop保存壓縮的JPEG和PNG圖像 → ＄65 / 人（買斷）
​ ​ ​ ​ 5. Web Interface Pro
不受數量限制
單張最大75MB
＄25 / 年
#網站趨勢WebCRACK