CJ Column

コラム

ファイルの読み込み数を減らしてWebサイトの表示速度を上げる方法

以前「Webサイトの表示速度を改善しよう!誰でもできる画像圧縮のすすめ」にて、画像のサイズを削減して読み込み速度をアップさせる方法をお伝えしました。

しかし、軽量化以外にも速度向上のための対策はまだまだあります。
今回はもう少し深掘りして、"サーバーとの通信を減らす"ことに焦点を当ててご紹介したいと思います。


重要なのは、リクエスト数と容量を減らすこと

ここで言うリクエストとは、サーバーへ「このファイルをください!」と要求することをいいます(HTTPリクエスト)。リクエストを受けたサーバーは、該当のファイルを返します(HTTPレスポンス)。サーバーとの通信を減らすためには、当然ですがファイル数はできるだけ少なく、軽くしたほうがベターです。
とはいえ、なんでも少なく!軽く!と言っていると、デザイン性や機能性を損なってしまうので、「必要のない読み込みを減らす」ことに重点を置いてご紹介します。

ファイルを圧縮する

CSSやJavaScriptの圧縮ツールを使うと、インデントや改行、コメントなどのページの表示に影響のない部分を削除できます。

試しに圧縮してみたファイルでは、92KBが40KBに削減されました!
ただし、可読性、メンテナンス性がかなり落ちるので、よく更新するファイルは編集用にオリジナルのファイルを保存しておきましょう。

ファイルを1つに集約する

JavaScriptのライブラリを使っていると、呼び出すファイルがいつのまにか増えてしまいますよね。1つのファイルにまとめると、リクエストが1度で済み、HTMLソースもすっきりします。

画像では「CSS Sprite」という、複数枚の画像を1枚に集約し、CSSを使って1枚ずつ表示する方法が一般的です。複数の画像をまとめるとこのようになりますが、画像1つ分の範囲をCSSで指定するのでブラウザでの表示は問題ありません。

デメリットとしては、画像を変更する場合に画像とCSSどちらも修正が必要になる点です。
更新頻度の少ない画像(SNSアイコンなど)に使うのがおすすめです。

画像の非表示はCSSではなくコメントアウトで

どういうことかと言うと、CSSで「display: none;」と書くと要素が非表示になりますが、画像はしっかり読み込まれているよ!ということです。「display: none;」も非常に便利なのですが、通信のことを考えるとHTMLの<img>タグをコメントアウトして非表示にするほうが良いです。

キャッシュを利用する

ブラウザにキャッシュを残しておけば、再度アクセスした際はキャッシュしたデータを使用するため、サーバーとの通信を減らすことができます。.htaccessで、キャッシュ利用の有無とキャッシュを保存しておく期間の設定ができるので、上手く活用したいですね。個人的には、CSSやJavaScriptのキャッシュが残っていると、予期せぬ表示崩れが起きそうだなと心配になるので、動画やフォントファイルなどの更新頻度の低いものだけ設定をしておくと安心かと思います。

いかがでしたでしょうか。
軽量化に取り組むことはUXの向上に直結し、Googleからの評価アップにもつながりますので、できるところから対策をしましょう!

A.U  フロントエンドエンジニア

コラム一覧に戻る
シトラスジャパン チラシ・フライヤー デザインサービス

お問合せ

以下のフォームにご入力の上、送信ボタンをクリックしてください。

企業名 企業名を入力してください
お名前 [必須] お名前を入力してください
メールアドレス [必須] メールアドレスを入力してください
電話番号 電話番号を入力してください
お問い合せ内容 [必須] お問い合わせ内容を入力してください

個人情報保護方針

個人情報の取り扱いについて

個人情報の取り扱いについて同意してください

ログインをすると、
会員限定記事を全文お読みいただけます。

パスワードを忘れた方へ

  • ログインIDを入力してください。
  • ログインIDを正しく入力してください。
  • パスワードを入力してください。
  • パスワードを正しく入力してください。
  • ログインID、パスワードが間違っています。


ログイン実行中

ログイン完了!ページを再読込します。