サイトが重い？9つの原因とページ表示速度を改善する方法
公開日 2016年10月26日、更新日 2023年10月31日
気になるサイトがあるのにクリックしてもなかなかページが開かない、画像がいつまでたっても表示されない、という経験はありませんか？
サイトの表示速度は、ユーザーエクスペリエンス（UX）に関わる非常に重要な要素です。サイトがなかなか読み込まれないために、せっかく興味をもってくれた訪問者を逃してしまっているかもしれません。
そこで、今回はサイトが重くなる原因、そして Web サイトの表示速度を改善するためのヒントをご紹介します。
目次
信頼性の高い Web 制作プラットフォームを探しているなら、ぜひ Wix の無料ホームページ作成プラットフォームお試しください。
＼全世界ユーザー数2億人以上／
プロフェッショナルな Web サイトの作り方など、Wixブログではお役立ち情報を更新しています。ぜひお役立てください。
サイト読み込みに時間がかかる9つの原因
サイトの読み込みに時間がかかる原因はさまざまです。これはサイトを閲覧している側にも、サイト制作者側にも原因が考えられます。
サイト閲覧側に考えられる原因として、
インターネット速度
ブラウザの環境
コンピュータ自体の速度が遅い（プロセッサまたはメモリが狭い）
サイト作成者側に考えれる原因として、
サイト上の画像を最適化していない
容量が非常に大きいMP3ファイルが読み込まれている
HTMLアプリを使い外部コードを多数埋め込んでいる
コンテンツが非常に多い
フォント（1~3個が最適）や色を多用している
などが挙げられます。
もちろん上記以外にも多くの原因が考えられますが、訪問者のパソコンやモバイルのプロセッサになるべく負担をかけないように、コンテンツを最適化することが重要です。
01. カスタムフォントの多用
日本語のフォントは特に、文字数が多いため重くなりがちです。カスタムフォントを利用する際には、本当に必要なのかどうかよく考えましょう。
フォントファイルが大きすぎるとサイトパフォーマンスに影響が及びます。大半のコンピュータではウェブフォント（最もよく見かける Times New Roman や Arial などのフォント）が保存されているため、ページが素早く表示されます。
ところが、「カスタムフォント」を使用すると、テキストを表示するためにファイルのダウンロードが必要になります。できる限りシステムフォントを使用し、どうしてもカスタムフォントが必要な場合は、1種に抑えるなど工夫しましょう。
02. 非推奨の画像形式の利用
ファイル形式の処理も厄介な問題の一つです。
まずは画像の種類に合わせて、最適なファイル形式を選択しましょう。
Wix で作成されたサイトでは、自動で画像ファイルを最適化することで、デザインを維持しながら、迅速な読み込みを実現しています。このとき、Wix は画像を「WebP」ファイルに変換し、画質を維持しつつファイルサイズを縮小しています。この処理をしっかり行うには、オリジナルファイルが高画質であり、アップロードとダウンロードがスムーズに行える必要があります。
JPG 画像は PNG の 10 分の 1 のサイズに圧縮できるため、可能であれば PNG ではなく JPG の使用がおすすめです。
SVG ファイルは、ファイルサイズがはるかに小さく、画像をサイトのコードに直接埋め込めるため、ページの表示速度が速くなります。
写真は JPG ファイル、ロゴやイラストの画像は SVG ファイルにすることがおすすめです。
03. ポップアップやバナーの使用過多
訪問者向けに重要なメッセージやお知らせを表示させたい場合は、ポップアップ（ライトボックス）を追加するか、メインページのコンテンツの一番上にバナーを表示しようと考えることでしょう。
訪問者がサイトを開いてから、ほんの短時間だけセールのポップアップ広告が表示されるならまだよいのですが、数秒おきになんらかのポップアップが表示されると、訪問者の邪魔になるだけでなく、サイトの読み込みが遅くなる要因にもなります。
04. サードパーティサービスのむやみな埋め込み
最近の Web デザイントレンドでは、サードパーティコンテンツを埋め込むことが増えています。つまり、Instagram や Youtube を自分のページに表示させることです。
これに関するベストプラクティスは、サイトのトップページではない部分に iframe（他の Web サイトを表示するための小さな画面）を適用し、サードパーティスクリプトの数を制限することです。
重要なサードパーティ製アプリは読み込み属性を「ノンブロッキング」にして追加しましょう。この処理を行うには、HTML コードの body 要素を「defer」や「async」と呼ばれる特別なスクリプトで操作するか、メインコンテンツの最後にコードを追加します。
どちらの方法も、メインコンテンツの読み込みが完了してからこれらのリソースを読み込むように Web サイトに指示します。
Wix では、サードパーティ製アプリに代わってさまざまな種類のマーケティングツールをサイトに統合できます。こうすれば、カスタムコードを使用せずに同様の機能をサイト上で利用できます。
05. トップページのデザインを最初に読み込ませる
ギャラリーや動画、カスタムフォントといったビジュアルコンテンツの重いトップページを最初に読み込んでいる場合、これも Web サイトの表示速度が遅い要因になり得ます。
これを防ぐには、トップページのファーストビュー部分を努めてシンプルに作成します。ウェブフォントや静止画を活用し、ファーストビューにはできる限りシンプルにしましょう。
Wix は自動的に画像の遅延読み込みを行い、ファーストビューより下にある画像を、まず非常に小さく解像度の低いダミー画像としてダウンロードしています。その後、ユーザーがページをスクロールすると、代わりに表示されていた画像が元の高画質な画像に置き換わります。
06. GIFの使用
GIF 画像はコンテンツとしては魅力的ですが、実は動画よりも処理しづらい形式です。ページの表示速度にも大きな影響が生じるため、アニメーションコンテンツを表示する際は GIF ではなく動画のほうがおすすめです。
GIF の代わりに、Wix の動画ボックスを使って動画を表示させられます。このツールを使用すれば、オリジナルの動く画像をサイト内に配置できます。もちろん、背景透過も可能です。
07. 未処理のサイトのDOMオーダー（命令）
Wix エディタは、シンプルなドラッグアンドドロップの操作で大半の作業を実行できるインターフェイスを採用していますが、人（ユーザー）がエディタを操作する以上、ミスは起こり得ます。
初めて作成した Web サイトでは、画像やテキスト、動画などのサイト上の要素の順序（DOM）が、エディタのレイヤーパネルの順序と一致しないというエラーがよく発生します。
DOM とはドキュメントオブジェクトモデルのことで、コンピュータが Web サイトの要素の重要度と順序を読み込む仕組みを指します。
Wix では、DOM がサイト内の要素を読み込む順番を決定します。自動 DOM 順序はエディタから有効にできますが、この機能は Web サイトの要素をレイヤーごとに操作するレイヤーパネルを経由して通信を行います。
そのため、レイヤーがサイトの要素の重要度に対応していなければ、Web サイトは要素の順序を読み取ることができません。
08. 自動キャッシュの蓄積
これは簡単に解消できるポイントです。Wix はコンテンツデリバリネットワーク（CDN）を使用し、キャッシュ（または保存）することで、すばやいレスポンスを提供しています。
ただし、Wix と Velo を使用する経験豊富な Web 開発者は、Web ページの読み込みをより高速化したいと思うこともあるでしょう。
この場合は、サイトのキャッシュ設定を手動で有効に切り替え、最も使用頻度の高いコンテンツを CDN サーバに保存する必要があります。
09. モバイル向けに設計されていない
ページの表示速度を最適化するための最後のポイントは、モバイルサイトをスマホ表示専用に設計することです。
Wix で作成したサイトの場合、一般的な端末のサイズに合わせてシステムが自動でサイトのデザインを最適化し、モバイルユーザーにも優れたエクスペリエンスを提供できるようにしています。
ところが、モバイル版の見え方や動作をきちんと確認していないという人は意外に多いものです。
モバイル版では PC 版と同じような外観で表示できなかったり、実は必要がない要素が存在していることがあります。
モバイルサイトのレイアウトを最適化し、不要な要素を削除するステップを必ず設けましょう。
重いサイトの表示速度を改善する5つのポイント
上記を踏まえ、あなたができる事は以下の通りです。
01．掲載するコンテンツを厳選する
サイトを作成するからには、より多くの情報を発信したい！と考えるのは当然のことです。でも情報量が多ければ多いほど、サイト訪問者の為になるという訳ではありません。
コンピュータ環境が良くない訪問者にとっては、莫大な情報量で負担をかけてしまうだけでなく、一番伝えたいことが伝わらないという結果に終わってしまうことも。
「一番伝えたいこと」は何かを見極めて、掲載するページ数、画像、動画の数やWixアプリなどを調整しましょう。アプリの中でも、Instagramフィード等の画像を読み込むアプリは重くなりがちなので絞って使ってください。
02．各ページのゴールを定める
掲載するコンテンツを厳選するのに苦労しているという方は、各ページのゴールを考えてみてください。そのページの目的が『新商品の宣伝』であれば、新商品の画像と説明がそのページのメインになるべきです。他の情報は最小限に抑えましょう。
ロックバンドのオフィシャルサイトであれば、一番聞いて欲しい曲を動画として、音楽紹介ページの一番目立つところにもってきましょう。音楽ファイルと動画ファイルをアップする際の注意点は以下の通りです。
音楽ファイル ビットレート128kbps のファイルをアップロードすることをお勧めします。
動画 YouTube や Vimeo など、複数の動画をサイトに追加することは避けてください。サイトの読み込み時間に影響を与えます。
03．デザインをシンプルにする
昔のサイトの読み込み速度が速かったのは、コンテンツがテキストと画像に限られていたという理由も挙げられます。
今は、アニメーション、動画、スライドショーなど様々な機能が利用可能になりました。これらの機能はユーザー・エクスペリエンスを向上させる一方で、サイトを重くし、サイト読み込み時間に影響を与えます。
アニメーション効果やスライドショーは最小限にとどめましょう。特に自動再生が設定されているパーツには注意しましょう。効率的な読み込み時間を考えるとおススメのウェブデザインはフラットデザインです。
04．サイトの画像を最適化する
サイトの読み込み速度を改善する一番手軽な方法が、画像の最適化です。
Wixにはアップロードされた画像を編集するための画像編集ツールが入っていますが、撮影した写真をそのままアップしてしまうと、ファイルサイズが大きく、サイトが重くなってしまいます。
画質を保ちつつ、ファイルサイズ圧縮してくれる優れた無料ツール(以下参照)を活用して、画像を最適化しましょう。画像ファイルを圧縮してからサイトへアップすることで、ページの読み込み時間を短縮することができます。このひと手間が大きな違いを生みますので、ぜひお試しを！
Optimizilla 日本語対応の画像最適化ツールです。
TinyPNG 中心にある「Drop your .JPG or .PNG file here」をクリックして、ファイルをドロップすると、あっという間にファイルを圧縮してくれる優れもの。「Download」をクリックすると、圧縮されたファイルをダウンロードすることができます。
Compressor.io 「TRY IT !」をクリックし、JPEGファイルをアップデートすると、画質はそのままでファイルサイズを大幅に縮小してくれます。縮小後に、オリジナルと圧縮後の画質を見比べることができます。
05．ランディングページを利用する
多くの情報をどうしてもたくさん掲載したい場合にはランディングページを利用しましょう。メニューにリンクを追加し、訪問者がそこをクリックするとランディングページに飛ぶような仕組みにすることで、読み込み速度を犠牲にする必要がなくなります。
まとめ
最後に、読み込み速度を自分で確認してみてください。 読込み速度を把握するために役立つ無料ツールをご紹介します。
Google社が提供する「PageSpeed Insights」は、ウェブページのコンテンツを解析し、ページの読み込み時間を短縮するための方法、ユーザーエクスペリエンスの改善案を提案してくれます。
ページのURLを入力して分析をクリックすると、モバイルとパソコンの両方を分析してくれます。
自分のサイトが重いかも...と感じている方は、是非、ここで紹介した方法をお試しください。
編集者：Miyuki Shimose
SEO & ブログコンテンツマーケター
