スマホ表示最速王決定戦！CMSプロレスvol.03に参加してきました！

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

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

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

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

対戦結果

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

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

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

実装について

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

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

テーマ

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

実装内容

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

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

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

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

https://core.lightfile.net/

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

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

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


ファイル	ファイルサイズ	処理後のサイズ	削減容量	削減割合
メインビジュアルPC	1,085,231	443,534	641,697	59.13%軽量化
メインビジュアルSP	317,218	228,046	89,172	28.11%軽量化
キャンパス画像(外)	1,095,328	217,647	877,681	80.13%軽量化
キャンパス画像(スポーツ)	826,610	155,284	671,326	81.21%軽量化
キャンパス画像(図書館)	1,028,058	175,326	852,732	82.95%軽量化

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

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

最後に

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

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