Google 推出的 PageSpeed Insights 已成為一個檢測網站效能和標準，尤其對於客戶與PM來說，更是讓他們信服的的權威。因此要讓網站在 PageSpeed Insights 的分數名列前茅，搞懂它所遵守的規則，便顯得十分重要，以下是我們在使用過程中的一些經驗，從而整理出來的解決方法，供自己記錄和參考。
三、壓縮 CSS、壓縮 HTML、壓縮 JavaScript
四、清除前幾行內容中的禁止轉譯 JavaScript 和 CSS
一、使用瀏覽器快取功能
這個問題要因為伺服器沒有提供快取功能，故要在伺服器端進行設定，以自身為例，我們網站使用 AWS Linux， Apache架設，
要開啟快取功能，要先登入伺服器，進入 /etc/httpd/conf/httpd.conf 中啟用快取功能。
1. 編輯 httpd.conf
$ vim /etc/httpd/conf/httpd.conf
加入下面這一行並儲存
LoadModule expires_module modules/mod_expires.so
2. 新增快取設定檔(expires.conf)
$ sudo vim /etc/httpd/conf.d/expires.conf
加入下面對各類型檔案進行快取的設定，
如 ExpiresByType application/javascript “access plus 1 month” 這行是指對 .js 檔案進行快取，並儲存超過一個月。
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/html A900
ExpiresByType text/xml A14400
ExpiresByType text/plain "access plus 1 hours"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/bmp "access plus 1 month"
ExpiresByType image/svg "access plus 1 month"
ExpiresByType application/x-shockwave-flash A3600
</IfModule>
3. 儲存後重啟Apache
$ sudo service httpd restart
二、啟用壓縮功能
同樣，這個問題要因為伺服器沒有提供壓縮傳輸功能，故要在伺服器端進行設定，
要開啟快取功能，要先登入伺服器，進入 /etc/httpd/conf/httpd.conf 中啟用快取功能。
1. 修改httpd.conf
$ vim /etc/httpd/conf/httpd.conf
加入下面這一行來啟用壓縮功能
LoadModule deflate_module modules/mod_deflate.so
2. 新增壓縮設定檔(deflate.conf)
$ vim /etc/httpd/conf.d/deflate.conf
加入下面壓縮檔的設定，然後儲存
#Set to gzip all output SetOutputFilter DEFLATE #AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php #exclude the following file types SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|iso|tar|bz2|sit|rar|png|jpg|gif|jpeg|flv|swf|mp3)$ no-gzip dont-vary #set compression level DeflateCompressionLevel 6 #Handle browser specific compression requirements BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html SetEnvIf User-Agent ".*MSIE.*" nokeepalive ssl-unclean-shutdown downgrade-1.0 force-response-1.0
其中DeflateCompressionLevel是指壓縮的程度，數字愈大代表壓縮效果愈好，但相對對伺服器的負擔較大。
3. 儲存後重啟Apache
$ sudo service httpd restart
三、壓縮 CSS、壓縮 HTML、壓縮 JavaScript
如果你是使用 create-react-app 、 vue-cli 、 laravel-mix 這些腳手架來進行編譯，
基本上打包的工具都會幫你用到好。 但如果是沒有使用打包工具的專案，則可以用上一些線上的工具幫忙。
1. 線上壓縮CSS工具:
2. 線上壓縮HTML:
https://hreftools.com/html-compress
3. 線上壓縮JavaScript:
四、清除前幾行內容中的禁止轉譯 JavaScript 和 CSS
本啾認為這個規則超奇怪，完全無視現在網頁開發的程序。
在剛學網頁開發時，我們都會把載入CSS的程式放入<head>，避免載入頁面時沒有樣式，
而js 則放在<body>結尾避免頁面渲染被阻塞，但在PageSpeed Insights 的評分標準，卻會是形成低分的原因。
1. JavaScript:
對於使用<script/>標籤引入的js檔案，無論你放在<head/>當中還是<body/>的結尾，
這個錯誤還是會出現，解決的辦法是在標籤中加入 defer 和 async 的屬性，讓檔案在讀取頁面的時候，延遲載入js檔：
<script src="js/XXX.js" defer async></script>
另一個方式，可以用使require.js 來延後載入js檔案，但這裡不多敍述，以後再深入研究require.js。
2. CSS:
如果使用<link/>標籤引入css檔案，則無論放在哪裡也沒有解，暫時現在成功的方式是把css直接放入<style/>標籤。
五、最佳化圖片
如果專案有使用打包工具，並且使用import引入圖片，則應該不會有太大問題。
但如果是沒有使用任何框架的專案，則可以使用一些線上工具來解決。
tinyjpg:
以上的心得謹供參考，較適合一些不使用打包工具撰寫的網頁，
如有更好方式，請大家不嗇指教。
留言