Drupal 網站效能最佳化筆記

我以前沒有研究過最佳化（optimization），是手上進行的這個專案，客戶要求網站在 Google Pagespeed 的跑分要達到90分以上，我才第一次把作品拿去測試。不測還好，測下去發現我網站在行動版居然才 20 幾分，簡直奇恥大辱！這才開始接觸效能調校。

其實 Drupal 官方文件有一份最佳化方法列表，不過我也沒有全部跟著做。以下列出我實做過的部份：

※ 伺服器方面

1. 提高 PHP 記憶體上限：

在設定檔 php.ini（/etc/php/7.2/apache2/php.ini），找到 memory_limit 這一行，調整至想要的數字。

2. 修改 Apache rewrite rules

上一篇我有寫到，要啟用 Clean URLs 有個很簡單的方法，就是在 apache 的設定檔加入這一段：

AllowOverride All

不過後來看資料發現，AllowOverride All 的效能其實不好，直接設定重寫規則才能提昇效率。根據這篇，我們可以寫成這樣：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

3. 啟用 Apache pagespeed 和 gzip

• Pagespeed 是 Google 出的一個前端優化模組。安裝可參考這篇。
• Gzip 有壓縮傳輸的功能，安裝 mod_deflate 後可啟用。安裝方法見這篇。
• 要查看 Apache 已啟用的模組，指令為 apache2ctl -M

※ Drupal 方面

1. Caching

Internal Page Cache 是 Drupal 8 預設啟用的模組，不過預設的 cache maximum age 是 “No caching”，我們可以依照需求，把時限設長一點。

2. Advanced CSS/JS Aggregation

被眾多教學文提到的神器級最佳化模組，a.k.a. “AdvAgg”，主要處理 CSS/JS 的合併跟壓縮。
因為選項太多，其實我不太能掌握它在幹嘛，反正憑感覺把子模組都啟用就對了啊哈哈 XD

3. Responsive Images

這是 Drupal RWD 解決方案的一個環節，我用很久了，但都只是用來處理版面呈現而已，沒想到對瀏覽效能也是至關重大。 詳細教學可參考這篇，在此我們只簡單談談概念：

我們會先設定多個不同大小的圖片樣式（image styles），例如：

• X-Small（400x300）
• Medium(600x400)
• Large(1200x600)

當圖片套用了樣式，Drupal 就會在後台，自動將這圖片裁切或縮放，並另存新檔。接著我們新增一組 responsive images，便可以根據佈景主題提供的 breakpoints，指定不同的圖片樣式給各個 breakpoint。

Responsive Images 對於瀏覽效能的意義是，另如一張 1600x900 的原圖，我們可以指定在電腦螢幕出現的是 1200x600 的圖，而在手機出現的是 400x300 的縮圖，而不只是用 CSS 調整長寬，兩者檔案大小天差地遠。