此为历史版本和 IPFS 入口查阅区,回到作品页
Xu Jiajun
IPFS 指纹 这是什么

作品指纹

Drupal 網站效能最佳化筆記

Xu Jiajun
·
·

我以前沒有研究過最佳化(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 調整長寬,兩者檔案大小天差地遠。

CC BY-NC-ND 2.0 授权