ロフトワークの今を伝えるブログメディア

デザインは変えずにウェブサイトの表示速度を改善するには?

昨年、モバイルサイトの読み込み速度をテストできる「Test My Site」が発表され、
更に「日経電子版」や「dev.to」などが「表示が爆速」と言われ話題になりました。

日経電子版

dev.to

今年に入って「ページの読み込み速度をモバイル検索のランキング要素に使用」という
アナウンスも出るなど、ウェブサイトの表示の速さは必須になっていくように思います。

ウェブサイトが新規構築、もしくはリニューアルのタイミングで
「表示が爆速」になるように意識していくのは当然の流れですが、
既に公開されているウェブサイトの表示速度を改善するには なにが有効でしょう?

90年代後半のホームページ感のデザインにできれば爆速だが…

そこで腕に覚えのある方を集め、厳しい条件下でTest My Siteの計測結果を競ってもらうイベントを企画しました。

2/17(土) 第3回CMSプロレス ウェブページ速度改善「最速王者決定戦」

選手としてエントリーしていただいた6チームが「Test My Site」の計測結果を対戦形式で競い、
トーナメントを最後まで勝ち上がったチームが優勝、最速王者の栄冠を掴むこととなります。

今回、このトーナメント戦を懇親会も含めて無料で観戦できます。

観戦申し込み
https://cms3rd.peatix.com/

画像圧縮だけで速くなるとは限らない

既に公開されているウェブサイトの表示速度を改善するのは、画像を圧縮すればいいのでは?
そう思うかもしれません。

画像の圧縮前

画像の圧縮後

しかし、デザイン的に大きいサイズの画像が使われていると画像圧縮だけでは速くなるとは限りません。

これを腕に覚えのある方がやるとどうなるのか。
CMSプロレスでは選手エントリーの際、まず静的なHTMLの状態のままで計測結果を15秒以下にしてくださいとお願いしました。

エントリーNo.1

エントリーNo.2

エントリーNo.3

エントリーNo.4

エントリーNo.5

これでまだ小手調べなので、本戦では一体どうなるのでしょう…
CMSも実装した上で5秒切ってるなんて噂も聞いてます。

ウェブサイトの表示速度改善

画像圧縮にとどまらず、多岐にわたる改善方法があります。
どの方法がどのくらい有効なのか、参加選手に聞いてみると教えてくれるかもしれません。

  • より高性能なサーバーに変える
  • ネットワークの通信速度を上げる(HTTP/2)
  • CMSのレスポンス処理を速くする
  • CMSのキャッシュを利用する
  • 画像を圧縮する
  • HTML、CSS、Javascriptなどのリソースを圧縮する
  • 大きいサイズの画像は使わないデザインにする
  • CDN(コンテンツ・デリバリー・ネットワーク)を利用する

などなど…

画像の圧縮やリサイズなども可能なCMSもありますが、
デジカメで撮った容量の大きい画像を、ぽんと載せても大丈夫か知りたいところです。
今後、画像をちょうどよく圧縮して容量を小さくするとか表示速度のための運用が増えるとしたら
それを軽減できるソリューションもCMSプロレスで現れるかもしれません。

そうなると喜んでいただけるウェブ担当者の方もいらっしゃるのではないでしょうか。

川竹 敏晴 川竹 敏晴

大学卒業後、システム開発会社にエンジニアとして勤務。Java等を用いて大小様々なWeb系システムを開発。その後、Web制作会社にて数多くのCMS導入案件の開発を担当したのち、2011年にロフトワーク入社。主にCMS導入案件の技術的なサポートを担当している。自他共に認めるCMS好きで、日々新しいCMSの研究を行なっている。>>プロフィール詳細

関連記事