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

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

2018-02-20-cmsprores-vol03-01.jpg会場となったロフトワークさんのイベントブースには、なんとDJブースも!

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

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

対戦結果

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

  • 1回戦 5秒で勝利
  • 準決勝 6秒で敗退(勝者は5秒)

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

実装について

2018-02-20-cmsprores-vol03-02.jpgmod_pagespeedの実装について説明しましたが、画像最適化もとても重要です!

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

テーマ

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

実装内容

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

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

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

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

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

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配信は定番といえば定番ですが、これは別ブログ記事で詳しく書きます。

最後に

2018-02-20-cmsprores-vol03-03.jpgかなりの人数のイベントでした。最後は集合写真。

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

前へ

「遊々空間」「がらくたチップス」:Ranklet活用事例

次へ

LightFileの新型シミュレータ画面を、MT東京vol.44でLightning Talkしてきました!