悩めるWEB担当者様のための最新ノウハウをお届け

共用サーバでも表示速度高速化!第3回CMSプロレス「表示速度改善」に出場しました

DSC01501

こんにちわ、バックエンドエンジニアのしょごたんです。

先日ロフトワーク様主催の「第3回CMSプロレス ウェブサイト速度表示王決定戦」に気づいたら参加することになって参加してきました。

DSC01809

事前に本大会の企画を聞きつけウチのボスである小林の度々行われる参加確認リマインドとブランディング強化施策提案があったことと、
CMSプロレスは第一回の際MTチームで参加して優勝した実績があったためこれは負けられない戦いやでという気持ちに切り替え挑みました。

とはいえ実は参加が決まったのが開催日の4日前、予定工数で3人日の中でどうにかやりくりするという事態に陥っており、
内心どげんしてやろうかと右往左往したのは内緒です。

大会概要

お題となる名門女子大学津田塾大学の受験生向け特設ページをCMSで更新できるようにし、計測は「testMySite」を利用し表示速度を一秒でも早くしようという内容でした。

実際お題となるサイトを計測したところ19秒という結果、果たしてどれほど速度向上を図れるのであろうか。

事前のtestmysiteでは19秒

施策方針

DSC01489

高層化施策ではフロントエンドとバックエンドでそれぞれの作業を行う必要があります。
高機能のサーバに設置すればその分処理は早くなりますが、今回はあえて共用サーバを利用しそこで行える作業でどれだけの軽量化を行えるかを方針としました。

  • 使用画像ファイルの圧縮
  • JSミニファイ
  • CSSミニファイ、CSS一部最適化
  • HTML最適化(JSの配置変更、余計なスペース、インデントの削除)
  • gzipによるHTML、CSS、JS、フォントファイルの圧縮
  • ブラウザキャッシュ設定
  • CMSでアップロードされた画像の圧縮(ImageUploadUtilityプラグイン)
  • cloudflare(フリーCDN)の導入
  • cloudflareによるSSL化(SPDYとHTTP/2対応してるのでアクセス高速化)

共用サーバのためバックエンドで行える施策は限られてしまいます。
そのためフロントエンドでの施策を中心に行いました。

ソースを確認したところ重複しているCSSや不必要と思われる処理などがいくつか存在しました。
そのためソースの最適化を行いつつ使用画像の圧縮、Minify化を行いました。

加えて共用サーバでも行えるgzipやブラウザキャッシュ有効期限付与。
この時点で5秒程度をマークしていたのですがCMSから画像アップロードしたものを付与したところ
計測結果が8秒前後に落ち込んでしまいました。
そこでCDNを導入、加えて今回利用したcloudflareの機能によるSSL化によるHTTPS2を実現することで最速で2秒をマークする結果になりました。
こう見るとSSL化は今後サイト制作にあたって必須と言ってもいいですね。

頑張ったら2秒出た!
↑事前準備中に叩き出した最速の2秒!

しかし若干キャッシュ周りで不安定なところがあり、大会当日は最速4秒〜5秒を維持する形となり2回戦敗退という結果になりました。

しかし本番の結果は3秒…
↑しかし本番は惜しくも3秒…

今回行った以外で試してみたい施策

DSC01513

今回共用サーバ縛りであったため実施できなかったものもいくつかありました。

  • VPSやクラウドサーバなど環境を整えやすいサーバを利用(今回apacheだったのでnginxに変えてみたり)
  • 画像optimaizeが可能なCDNのプラン、サービスの利用
  • protli圧縮の採用
  • mod_pagespeedの導入

でしょうか。

弊社メディアでこの辺を導入して結果を見ていきたいと思います。

まとめ

DSC01621

半ば共用サーバを利用というネタ勢レベルで速度向上施策になりましたが、
各社AWSなど高機能クラウドやCDNを利用している傾向を見る限り、低コストでも見合うものは展開できるということの証明ができたのは大きいのではないでしょうか。

もちろん高コストをかければその分安定するものは展開できますが、限られた中でも正しく施策を行う事で速度改善は見込めます。

また速度改善ではフロントエンド、バックエンドそれぞれで考慮した作業をする必要がありますので、
リニューアル時に速度改善を視野に置く場合はそれらを見越した形で制作、設計してください。

関連記事