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工具:

https://cssminifier.com/

2. 線上壓縮HTML:

https://hreftools.com/html-compress

3. 線上壓縮JavaScript:

https://jscompress.com/

 

四、清除前幾行內容中的禁止轉譯 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:

https://tinyjpg.com/

 

以上的心得謹供參考,較適合一些不使用打包工具撰寫的網頁,
如有更好方式,請大家不嗇指教。

Last modified: 2018-06-01

Author

Comments

Write a Reply or Comment

Your email address will not be published.