CMSプロレス ウェブサイト表示速度王決定戦にて、スパイスファクトリー泰がWordPressで挑み優勝しました!
2018年2月17日、Webエンジニアの体育祭として知られるCMSバトルイベントCMSプロレスにて
インテグレーション事業部 事業部長の泰が見事、王者に輝きました!
Contents
Webエンジニアの体育祭?CMSプロレスとは
CMSプロレスとは、Webエンジニアの体育祭として、毎回、選手・観客ともに熱狂するCMSバトルイベント。
今回で3回目を迎えました。
審査・解説は、グーグル株式会社の金谷武明さん、株式会社ミツエーリンクス取締役の藤田拓さん、株式会社ロフトワークのテクニカル・ディレクター大森誠さん。
CMSプロレスは各チームのエンジニアや審査員の解説付きで観戦できます。
当日は、格闘技のプロレスさながらの臨場感がありました。
ミッションは表示速度を0.1秒でも早くすること!判定はあえて長期間で
今回のテーマは表示速度改善。
また、見どころは当日の対戦だけではありません。
エントリー期間中である12~1月、選手達には、Test My Siteを使って日々の成果を月毎にレポートするという課題も与えられました。
ところでTest My Siteとは?
ユーザーがページから離脱してしまう大きな要因の1つとして挙げられるページの読み込み時間。
Googleの「Test My Site」はページの読み込み時間を診断し、改善に当たって参考になる情報を提示してくれる便利なツール。
他にも、読み込み中の想定離脱数や業種別平均速度との比較も可能です。
Test My Site
「今」、ユーザーが求めている表示速度に技術はどこまで追いつける?
近年、Googleはサイトの表示スピードを重要な指標のひとつとして掲げています。
また、PCよりもモバイルを評価軸とする「モバイルファースト」も既に宣言済み。
今回対象となったサイトは、創立100年以上の伝統ある津田塾大学の受験生向け特設ページ。
受験生からの閲覧が非常に多いことは容易に想像できますが、注目したいのは彼女達のほとんどがスマートフォンでこのページを見ているという事実。
スマートフォンでのサイト表示スピードが倍率を大きく揺るがす、といっても過言ではありません。
今回のCMSプロレスは長期戦!当日までの道のり
今回は泰が公私共に付き合いのある、合同会社レッドボックスの小川 勝久さんと強力タッグを組み参戦しました。
CMSと一口で言えど、種類は様々。concrete5, MovableTypeが並ぶ中、唯一WordPressで挑んだふたり。
バックエンドはレッドボックスの小川さん、Wordpressの実装やフロントエンドは泰が全て担当し、素晴らしい連携を見せました。
テキストや画像などの情報を入力するだけでサイト構築を自動的に行うことが出来る非常に便利なシステムのこと。
Webやサーバー側の知識がない素人でも使いやすい便利な機能です。
しかしその反面、機能が充実しているゆえにサイトの表示速度が遅めなのがデメリット。
まさかのトラブル勃発……
実はこのふたり、当日含め何度もプチトラブルに見舞われたそう。
本番前にサイトの表示速度が1~2秒遅くなるというアクシデントも。
表示速度を競う今回のCMSプロレス、表示が遅くなるのは致命的。
当日ギリギリまで調整しました。
気合を入れていざ参戦!大会本番……順調に勝ち進む泰と小川さん
どうにかアクシデントを乗り越え迎えた、大会本番。
今までの努力の甲斐あってか順調に勝ち進む泰と小川さん。
いざトーナメント!Movable Type VS WordPress
結果はMovable Typeで挑んだ対戦相手が5秒、WordPressで挑んだ泰と小川さんチームが3秒で、無事勝利。
決勝戦!concrete5 VS WordPress
結果はconcrete5で挑んだ対戦相手が4秒、泰と小川さんチームが3秒。
CMSプロレス優勝……!決め手は?
トーナメントを勝ち抜き、泰、小川さんチームが表示最速王の栄冠を手に入れました!
「何回計測しても安定のスピードを継続できたことが優勝の決め手」となったそう。
改めて、今回の戦いを振り返る
無事優勝したおふたりに今回を振り返って頂きましょう。
最低限の高速化対応
Web高速化の基本となる、HTTP2対応やjs/cssのconcat + minify、コードのリファクタリングを行ないました。
また、元のコードのDOCTYPEがHTML5になっていなかったため、HTML5へ変更し省略可能属性やタグの書き換えも行っています。
これを行うことにより、コンテンツのサイズを落としていくことが可能になります。
webpやtinypngによる画像の圧縮
表示速度に大きく関わる画像。津田塾大学のページでは写真の枚数が多く、画像のサイズが大きくなりがちでした。
今回はCMSで画像をアップロードするという仕様が義務付けられていたため、アップロード時に自動で画像を圧縮するプラグインを使用しました。
また、画像の圧縮にはGoogleが開発したロスレスの圧縮方式であるwebpを使用しました。
非常に圧縮率が高いにも関わらずロスレスであるという脅威の圧縮方式です。
また、webpに対応していないブラウザについてはtinypngで圧縮した画像を配信するように調整しています。tinypngはjpegやpngの圧縮率が高いと定評のあるサービスです。
brotliによるコンテンツの圧縮
javascriptやcssなどのコンテンツについてはGoogleの開発したbrotliという圧縮形式で配信しています。従来はgzipを利用した圧縮がデファクトスタンダードとなっていましたが、brotliを使用することにより更に高い圧縮率でファイルサイズを落とすことが可能になります。
CDNを使って他のCMSでも使えることが強み
小川さんが経営する合同会社レッドボックスはCDNの会社。CDNの会社として恥じぬよう、今回特注で制作したそう。
ちなみに、コンテンツをいじらなくとも、CDNを使うことで他のCMSでも高速化出来ることが強みとのこと。
さすが、徹底されていますね。改めておめでとうございます!
また応援してくださった皆さま、本当にありがとうございました!
遊ぶように仕事に没頭し、クライアントを笑顔にする
スパイスファクトリーの目指す姿は「愉快なる理想工場の建設」。
私たちは新たな時代を切り開くのはクリエイターだと固く信じています。
「モノづくり」が大好きなメンバーがイキイキと自分の能力を遺憾なく発揮できるプラットフォームで、私たちは日々真剣に仕事に向き合っています。
今回のCMSプロレスの結果は、そんな弊社のカラーを非常によく表しているように思います。
弊社のスーパーエンジニア泰が率いるスパイスファクトリー。
ご興味のある方は是非ください。
About The Author
ShintoTatsuo