2月17日渋谷のロフトワークで行われた「CMSバトルイベント 第3回CMSプロレス」を見てきました。 このイベントは去年末話題となった爆速すぎるサイト「dev.to」のように、CMSでのサイト表示をいかに早くすることができるのかを競い合う技術トーナメントです。 さまざまな企業や団体のエンジニアの方たちがどう工夫をしてCMS高速化を実現したのかをレポート形式で紹介していきます。

イベントの趣旨は「最近のユーザー体験の変化に併せて技術がどれぐらい追いつけるのか」

ここ最近のGoogleはサイトの表示スピードを重要な指標の一つに置いています。なかでもモバイルユーザーの増加によりPCよりもモバイルを評価軸とする「モバイルファースト」を宣言しました。 CMSはWebやサーバーの知識がなくてもサイトの構築と編集ができる便利な機能ですが、機能が充実しているゆえにファイル数が多く、データベースとWebサーバーを介した構造がサイト表示のパフォーマンスを低くしてしまうこととして知られています。CMSの特徴をいかに改善できるかがポイントです。

会場とルール説明

■会場

株式会社loftwork（渋谷）

■ルール

ミッション：津田塾大学特設ページをデザインを変えずにモバイル表示での速度を改善する 判定：Test My Siteでの速度解析で速いほうが勝ち 方法：サイトのメインビジュアルとキャンパスライフの画像をその場で更新して計測 審査員：金谷 武明さん（グーグル株式会社）、藤田 拓さん（株式会社ミツエーリンクス／言問株式会社） あとの細かいルールは提供していただいたスライドよりご確認ください

トーナメントスタート

出場者は壇上に出てその場で画像をアップロードし解析結果を表示します。

第一回戦　能勢弘光さん（Movable Type）VS　菱川拓郎さん（concrete5）

結果 能勢弘光さん（Movable Type）　5秒 菱川拓郎さん（concrete5）　9秒

■工夫したポイント

能勢弘光さん（Movable Type） 画像を自動で圧縮するようにしており、課題の画像をアドオンを使い80％に抑えるようにしました。記述もインデントがある状態ではなく、キャッシュオンすると改行が省略されてファイル容量を減らすようにしています。 菱川拓郎さん（concrete5） concrete5はJS、CSSファイルなどを自動で結合することができるが、圧縮したせいでサイトが崩れてしまうので、それをオフにしてスピード表示をして9秒となってしまった。 エラーが起こりがちで難しい部分だが、キャッシュありでは4秒を出せた。

第二回戦　mtempaさん（Hugo）VS しょごたんさん（Movable Type）

結果 mtempaさん（Hugo）　4秒 しょごたんさん（Movable Type）　4秒　※審査員判定で勝利

■工夫したポイント

しょごたんさん（Movable Type） インフラを整えるために、AWSでなくロリポップのスタンダードプランを採用。高機能でコストがかかるものでなくあえてロリポップをサーバーとして使用し、低コストでも高速表示を実現できることをテーマに作りました。ロードバランスを取ることはしておらず、HTML最適化、インデントを一行にして省略するよう工夫しました。 同じ秒数のため審査員からの質問 ・全ページで展開できる作りでしょうか ・本サイトがあるため「robot.txt」で検索エンジンからの拒否など配慮をしましたか

第三回戦　能勢弘光さん（Movable Type） VS Katz Curryさん（concrete5）、安藤さん（Craft CMS）、佐々木さん（concrete5）

結果 能勢弘光さん（Movable Type）　6秒 Katz Curryさん（concrete5）　3秒 安藤さん（Craft CMS）　12秒 佐々木さん（concrete5）　5秒

第四回戦　しょごたんさん（Movable Type） VS 小川勝久さん（WordPress）

結果 しょごたんさん（Movable Type）　5秒 小川勝久さん（WordPress）　3秒 小川勝久さん（WordPress） CDNの会社として今回特注でつくった。画像のリサイズを工夫してやっておりフロントエンド、バックエンドの二人体制で望んだ。WPだけでなくコンテンツをいじらなくてもCDNをつかって他のCMSでも使えることが強みです。

決勝戦　佐々木さん（concrete5） VS小川勝久さん（WordPress）　3秒

佐々木さん（concrete5）4秒 小川勝久さん（WordPress）　3秒

■工夫したポイント

小川勝久さん（WordPress） 画像の最適化にはgzipで圧縮することでコンテンツサイトが全体で3.5メガになることを実現した。 CDNのキャッシュが切れると重くなる部分は、事前読み込みはしてません。キャッシュが切れないよう工夫はしていますが、万が一切れた際は、状況に応じてデータが残るようにしています。

結果発表！優勝はWordPressを使った小川勝久さん

審査員特別賞　菱川さん（concrete5） 準優勝　佐々木さん（concrete5） 優勝　小川勝久さん（WordPress）

■審査員コメント

・藤田 拓さん（株式会社ミツエーリンクス 取締役／言問株式会社）

安定感のあるスピード結果が評価ポイントでした。 小川さんの会社レッドボックスのCDNの技術にすごく興味が出ました。

・金谷 武明さん（グーグル株式会社）

GoogleではPageSpeed InsightやLighthouseなどいろんな解析ツールを出していますが、Test My Siteによる3G回線を想定されたツールを使っての結果が面白かったです。回線が早くなったときにどうなるかを見てみたいと思いました。 今後としてGoogleはページの読み込み速度が7月からランキングに反映されていきます。 何秒ならいいというわけではなく、サイトの高速化によるユーザー体験がもっと重要となることをエンジニアさんには意識してほしいです。

感想

CMSといえばWordPressかMovable Typeでの意識しかなかったのですが、今回でいろんなCMSの特徴を知ることができました。非エンジニアなので内容に追いつけないところが多少ありましたが、どのチームも画像圧縮とコードのインデント、データを統合するテクニックの技術を駆使したものが多いため、その中でも画像圧縮という部分はCMSユーザー自身でもできるため今後配慮するべきだと思いました。