讓使用者可以更順暢瀏覽網頁的處理，除此之外網站速度也會被當成搜尋引擎SEO的參考之一，可能的情況最好能避免網站進入緩慢(紅色)的評分。

檢測網站，直接輸入要檢測的網址等他執行就可以了，原則上錯誤都會有提示說怎麼處理，照問題直接搜尋也能找到方法抄。
https://pagespeed.web.dev/
處理的參考網站
https://web.dev/optimize-lcp/
下方會記錄一些之前有進行過的調整

資源壓縮

自己碰到最影響網站速度的地方就是圖片檔案，一般來說將圖片處理好通常就能得到不錯的速度。

圖片

將圖片調整為剛好的大小與高壓縮減少讀取時間，如果要用WebP和AVIF要注意瀏覽器支援程度。
方便壓縮圖片的網站
https://squoosh.app/
https://imageoptim.com/api

CSS瘦身

沒有嘗試過這些工具，在網路上看到執行後有可能會有問題，比如說javascript變動後才會使用的css可能會被當作無用的css而遭到移除，最好是一開始就自己寫乾淨，另外手動移除也可以利用chrome工具右方的…->more tools->coverage檢查
掃描工具
https://uncss-online.com/
https://purifycss.online/
https://purgecss.com/

快取設定

直接更改伺服器設定或調整.htaccess，把不常更動的檔案快取設定成1周以上。
參考網站https://stackoverflow.com/questions/50772357/upload-new-files-when-htaccess-cach-is-set-to-one-week

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|woff2|woff|svg)$">
Header set Cache-Control "max-age=10, public, must-revalidate"
</FilesMatch>

html資源異步載入

css

將不影響排版的css設定成最後讀取，讓使用者以較快的速度讀好最開始需要的資料。
參考網站
https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously
下面這幾種寫法都可以，當時使用最上面這種，避免使用者的瀏覽器無法使用javascript，最好使用noscript加上一般載入的設定。

<!--當時最後使用這個-->
<link media="screen" rel="stylesheet" as="style" onload="this.rel='stylesheet'" href="style.css">

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

<link rel="preload" href="style.css" as="style">

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

<noscript><link rel="stylesheet" href="style.css"></noscript>

javascript

將可以異步讀取的設定async，最後才讀也沒關係的設定defer，要注意這些設定可能會影響js執行，有調整的話一定要再確認網站的執行狀況。

<script async src="/js/bootstrap.min.js"></script>
<script defer src="/js/bootstrap.min.js"></script>
<script type="module" defer>
	//行內js
</script>

圖片延後載入

在圖片加上屬性 loading=“lazy”

<img src="url" loading="lazy" >

css設定

設定media屬性，避免使用all
參考https://www.oxxostudio.tw/articles/201810/css-media-queries.html
all 所有裝置。
print 印刷裝置，包含使用列印預覽產生的所有畫面 ( 例如列印為 pdf )。
screen 螢幕裝置，不屬於 print 和 speech 的設備。
speech 朗讀裝置，針對可以「讀出」頁面的設備。

<link media="screen" href="/www/css/style_.css" rel="stylesheet">

避免CLS(Cumulative Layout Shift)

先取出固定版面用的css，或是一開始先使用額外的div卡住位置等等方式，先建立布局避免後來執行的javascript或延後載入的CSS造成大量的版面位移狀況，這部分的偵測目前只有判斷網頁上方的緣故，可以只對網站上面1000px以內的進行處理。