画像等のキャッシュで速度を稼ぐ

この投稿で十数ページ目になるのだが、このNibbleblogというPHPで動作するフラットファイルCMSであっても、ここ海外無料サーバーで応答速度のパフォーマンスが低下してきている。しかし、かつてここでフラットファイルDBで利用していたBlognPlus（PHP5で動作）というCMSのときもそうだったので、驚きはない。しかしページ遷移くらい何とかしようと、以下のとおり.htaccessを弄り、クライアントのウェブブラウザ―に画像、CSS、JavaScript等のファイルをキャッシュさせることにした。

コードの修正内容

Cache-ControlとExpiresでは僅かに意味が異なるので、ウェブブラウザー等の対応状況を考慮し、念のため両方設定しておいた。

<IfModule mod_headers.c>
# 画像、CSS、JavaScript等のキャッシュのみ最大寿命を秒で30日と設定
<filesMatch "\/(|[^/]*\?.*)$">
  Header set Cache-Control: "no-cache"
</filesMatch>
<filesMatch "\.(s?html?|php|xml|txt)$">
  Header set Cache-Control: "no-cache"
</filesMatch>
<filesMatch "\.(gif|jpe?g|png|ico|css|js|ttf|woff2?)$">
  Header set Cache-Control: "public, max-age=2592000"
</filesMatch>
# 画像、CSS、JavaScript等のキャッシュのみ有効期限を1か月と設定
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault                         "access plus 0 seconds"
  ExpiresByType image/gif                "access plus 1 month"
  ExpiresByType image/jpeg               "access plus 1 month"
  ExpiresByType image/png                "access plus 1 month"
  ExpiresByType image/x-icon             "access plus 1 month"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 month"
  ExpiresByType text/css                 "access plus 1 month"
  ExpiresByType text/javascript          "access plus 1 month"
  ExpiresByType application/javascript   "access plus 1 month"
  ExpiresByType application/x-javascript "access plus 1 month"
  ExpiresByType font/ttf                 "access plus 1 month"
  ExpiresByType application/font-ttf     "access plus 1 month"
  ExpiresByType application/x-font-ttf   "access plus 1 month"
  ExpiresByType font/woff                "access plus 1 month"
  ExpiresByType application/font-woff    "access plus 1 month"
  ExpiresByType application/x-font-woff  "access plus 1 month"
</IfModule>
</IfModule>

ライブラリーのCDN化で速度を稼ぐ

次に、現在利用しているGoogleSimpleというテーマの/htdocs/themes/google_simple/templates/default.bitを弄り、normalize.css及びjQueryライブラリーをCDNから読み込むようにしてみた。我ながら涙ぐましい。

<?php
  // Charset, title, description, keywords, robots, etc
  echo Blog::meta_tags();

  // Include CSS from theme
  // echo Blog::css(array('normalize.css', 'main.css', 'post.css', 'page.css', 'plugins.css', 'rainbow.css'));
  echo '<link rel="stylesheet" type="text/css" href="https://unpkg.com/normalize.css@3.0.3/normalize.css">'.PHP_EOL;
  echo Blog::css(array('main.css', 'post.css', 'page.css', 'plugins.css', 'rainbow.css'));

  // Include Jquery
  // echo Blog::jquery();
  echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>'.PHP_EOL;

  // Include Javascript from theme
  echo Blog::javascript('rainbow-custom.min.js');

  // Include Favicon, default path: theme/css/img/favicon.ico
  echo Blog::favicon();

  // Plugins for <head></head>
  foreach($plugins as $plugin)
  {
    echo $plugin->blog_head();
  }
?>

Nibbleblogにはキャッシュ機能がないっぽい

せめてCMS側にキャッシュ機能があれば速度をカバーできるのだけど、Nibbleblogはキャッシュせず単純に動的生成しているのかな。でもPHP+MySQLで動作するWordPress及びNucleus CMSというCMSをかつてここで利用していたとき、更に遅かった（特にMySQLが遅かった）からそれに比べればマシか。