ロフトワーク社主催となるイベント「第3回CMSプロレス　ウェブサイト表示速度　最速王者決定戦」に参加してきましたので、まずはご報告です。

会場となったロフトワークさんのイベントブースには、なんとDJブースも！

当日対戦で行なった実装などは、詳細を書いていくので順次ブログ記事にしていきます。

主催のロフトワーク川竹さんを含め運営側のみなさま、本当にお疲れさまでした＆ありがとうございました。そして、優勝したREDBOXの小川さん＆スパイスファクトリーの秦さん、おめでとうございます！

対戦結果

対戦方法はシンプルで、Test My Siteで計測して、早かった方が勝ちです。普通のWeb制作同様に、レイアウトが崩れていないこと、エラーが出ていないことなどが条件として存在します。もともとの素材は、Test My Siteで約13秒かかるものです。

• 1回戦　5秒で勝利
• 準決勝　6秒で敗退（勝者は５秒）

ということで、残念ながら準決勝で敗退しました。実装テスト時は最速で3秒だったのですが、どうしても計測時間に揺れがありました。

実装について

mod_pagespeedの実装について説明しましたが、画像最適化もとても重要です！

今回は、以下のような構築で準備しました。

テーマ

• リソースを手動でアレコレいじらず、できるだけ開発を必要としないで速度を上げる

実装内容

1. CMS：Movable Type
2. 画像最適化：LightFile
3. サーバチューニング：Google mod_pagespeed / gzip配信
4. 配信：AWS CloudFront（CDN）

テーマについては、LightFileが持っているテーマを採用しました。

JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に！

自動でJPEGファイルを容量削減し、表示の高速化/転送量の削減を実現します。

https://core.lightfile.net/

LightFileは、HTMLやJSなどに変更は一切行わず、サーバレス処理（またはサーバ処理）だけで画像の最適化を行います。クラウド型の画像最適化サービスは、API経由になることが多く、どうしても開発が発生します。そうすると開発と検証で初期コストが上がっってしまうので、導入の閾値が上がってしまうことに。このイベント専用ではなく、「シンプルに、スムーズに導入ができるように」というのを念頭において参加しました。

実装内容は、静的パブリッシングのMTは表示速度について非常に強いCMSです。ほかのCMSは、みなキャッシュを行なって対応していました。今回参加された挑戦者は、配信するデータが「静的ファイルか、キャッシュファイルか」のどちらかになっていましたね。単体ページでの計測だったので、シングルページアプリケーションの人はいなかったと思います。

画像最適化は、弊社謹製のLightFileを利用しました。今回の対戦データを処理しました結果を載せておきます。

一回戦で対戦したコンクリートファイブジャパンの菱川さんも、約80%の軽量化を行なっていたので、ほぼ同等の処理はできていたと思います。今回はコマンドラインでの処理だったので、画面がみせれるconcrete5はビジュアル的に説明ができていいなと思いました。

サーバチューニングと、CDN配信は定番といえば定番ですが、これは別ブログ記事で詳しく書きます。

最後に

かなりの人数のイベントでした。最後は集合写真。

もともと13秒くらい表示にかかるページを、どこまで速くできるのかという企画は面白かったです。今回はほぼ自分ひとりでの戦いだったので、次回はもう少し巻き込んで参戦したいと思います！今回はconcrete5の参戦が多かったですね。管理画面もかなりスマートに進化していました。Movable Typeは、もうすぐ7が登場ですね！楽しみ！