子どもの風邪って本当に強烈であるとひしひしと実感している今日このごろの Katz です。
去る、2018年2月17日、第3回CMSプロレス ウェブページ速度改善「最速王者決定戦」が、ロフトワーク様で開催され、2年ぶりに選手として参加。遅くなりましたが、後日検証を含めたレポートです。
私のテーマは、可能な限り追加カスタマイズを行わず標準機能を活かして持続し続ける戦法でした、結果、準備不足が祟ってしまいました。更新した画像が Google のプレビュー画面に表示されず失格に。しかし、優勝チーム以上のスピードを出すことが出来ました。
下記画像は、試合終了後、ブログ用に再び計測したスクリーンショットです。
試合当日の原因が分からず困った顔の自分（下記写真 左）。当日はキャッシュの影響なのか、スマホのプレビューで画像が表示されず困り果てました。
結局、何もせずに、時間が経ったら表示されたので、キャッシュが敗因であると考えられます (?) 。
しかし、今回は良い機会でした！高速化の検証ができ、このブログに書かれていないノウハウもいろいろ溜めることができました。
しかし、優勝した RedBox チームのみなさんは、プロ中のプロだけあって、やっぱりすごかったです。
簡単に、今回行った施策を紹介します。
目指したのは省エネ設計
今回のプロレス参加で目指したのは、省エネ設計。サーバーのチューンアップの知識やフロントエンド、プログラミングでの開発のスキルがあまり無い方でも簡単にスピード向上を図れるように。ミドルウエアアップデートなどの負担も少なくするということをテーマにしました。
SSH という黒い画面での操作は必要なものの、少ないステップで高速サーバーをゲットできるような仕組みを作り上げました。
特別なチューンアップは無し、教科書通り！
インフラやサーバーの設定も特別なことはせず教科書通り。concrete5 を動かすための基本的な設定に Google さんが推奨する方法を追記した程度。
特に目立ったコーディング、CMS のチューンアップもせず、concrete5 CMS も標準機能だけを使って実現しました。
作業時間は7~8時間。作業効率化！
今回、Ansible や Git を使って作業効率化を図りしました。仕事が忙しかったのもあるのですが、今回の CMS プロレスで費やした時間は、7〜8時間ほど。AWS インフラ設定、EC2インスタンス立ち上げ、concrete5 インストール、初期設定、テーマ作成など全部含めた合計作業時間です。短い時間でも十分にサイト高速化を図ることが出来るようにしました。
通常の業務の合間にちょっとだけ時間を費やすだけで実現できます。
かかった費用は $2.38 ドル！
そして、なんと、今回のプロレス参加で使ったお金は、たったの $2.38！
開催期間中の数日だけしか走らせていなかっただけなので、ココイチのカレーより安く済ますことが出来ました！
ちなみに、ざっくり月額概算換算だと、(10万PV、月間 10GB 転送量)で 約$100 (1万円) ほどでの試算です。
画像圧縮は concrete5 標準のサムネイル機能
concrete5 には、サムネイル画像を自動的に生成し、その JPG や PNG の画質を細かく設定できる機能が標準で実装されています。
標準で JPEG や PNG の圧縮比率も設定できます！
今回は特別に外部サービスや、追加プログラムのインストールを行わず、標準機能だけを使うようにしました。
サイト制作作業
そして最後はサイト制作です。
本当であれば concrete5 のドラッグアンドドロップを活かした実装をしたかったのですが、今回の課題は画像を更新できるだけということだったので、できるだけ簡単に実装。
concrete5 でページ属性を使った埋め込み実装を行いました。
ちなみに、2018年4月17日に、concrete5 最新の解説本「世界一わかりやすいconcrete5導入とサイト制作の教科書」が技術評論社様より出版されますので、詳しいテーマ作成はそちらでご覧ください（宣伝）。
計測結果
実は CloudFront & Google の Test My Site のキャッシュが影響していたのか、試合当日は画像が表示されず反則負け。ただ、何もせず放置しただけで再度計測したら、2秒と優勝チームより速いスピードを出すことが出来ました！（但し時々遅い。）
その他の機能やカスタマイズ
今回のプロレスでは実装しなかったのですが、concrete5 のキャッシュをクリアした時に CloudFront のキャッシュもクリアできるアドオンや、CloudFront のキャッシュを最大限に活かすために動的ページをどうするかなど、普段の案件でも取り組ませていただきます。
当日使用したコードを公開
本当はもっと整理したかったのですが、当日使ったコーディングを GitHub で公開しました。
Ansible スクリプト
https://github.com/katzueno/cmsprowresling-2018-ansible
Ansible から少し変更した /etc 設定部分
https://github.com/katzueno/cmsprowresling-2018-etckeeper
concrete5 実装
https://github.com/katzueno/cmsprowresling-2018-concrete5
※ Ansible スクリプトについては Best Practice 版を作成中なので、易しめに見てあげて下さい。。
使用サーバーの構成
今回はシンプルに以下のような構成です。
- AWS
- EC2
- m4.large
- Amazon Linux 2
- nginx
- MariaDB
- Let's Encrypt
- CloudFront
- EC2
最後に
2年ぶりに参加させていただいた CMS プロレス。プライベートのこともあり、ギリギリまで準備できるかどうか分からなかったのですが、水曜日に参戦決定。勝負を楽しむことが出来ました。
川竹様をはじめとするロフトワークの皆様、ありがとうございました。
写真：山田さん。
