【初心者向け】Webサイトが遅い…を解決！表示速度を改善する工夫＋α
「自分のWebサイト、なんだか表示が遅い気がする…」
「ページの読み込みが終わる前に、訪問者が離れてしまうかも…」
Webサイトを運営していると、表示速度は気になるポイントですよね。サイトの表示が遅いと、ユーザー体験（UX）が悪くなるだけでなく、検索エンジン（Googleなど）からの評価が下がり、SEOにも悪影響を与える可能性があります。
…とその前に！ もしかして、サイトが遅いのではなく、今あなたが使っているインターネット回線が遅いだけ、という可能性はありませんか？ 一度、他のWi-Fi環境やスマートフォンの回線（ギガには注意！）でアクセスして、速度が変わるか確認してみるのも手です。
さて、本当にサイトの表示速度に問題がありそうな場合、初心者でも比較的取り組みやすい改善の工夫を7つご紹介します。
目次
なぜWebサイトの表示速度が重要なのか？
具体的な方法を見る前に、なぜ表示速度が重要なのかを簡単に押さえておきましょう。
- ユーザー体験（UX）の向上: 読み込みが速いサイトは、ユーザーにストレスを与えません。快適な閲覧体験は、サイトへの満足度や再訪率を高めます。
- 離脱率の低下: ページの表示に時間がかかると、ユーザーは待てずにサイトを離れてしまいます。速度改善は、この「離脱」を防ぐ効果があります。
- SEO評価の向上: Googleは、ページの表示速度を検索順位の決定要因の一つとしています（コアウェブバイタルなど）。速度改善はSEO対策としても重要です。
- コンバージョン率の向上: ECサイトなどでは、表示速度が売上（コンバージョン）に直結することが知られています。
では、具体的な改善策を見ていきましょう。
画像を最適化する（基本にして最重要！）
Webページのデータ容量の多くを占めるのが画像です。画像の最適化は、表示速度改善に最も効果的な方法の一つです。
JPGとPNGではなく、WebPを使おう
まず、次世代画像フォーマット（特にWebP）を活用しましょう。 JPEGやPNGといった従来の画像フォーマットよりも、画質をあまり落とさずにファイルサイズを大幅に削減できるのが「次世代フォーマット」です。代表的なものにWebP（ウェッピー）やAVIF（アヴィフ）があります。WebPはGoogleが開発したフォーマットで対応ブラウザも広く、導入しやすいのが特徴です。AVIFはさらに圧縮率が高いですが、まだ対応していないブラウザもあります。現時点では、対応ブラウザの広さを考えると、まずはWebP形式を使うのが無難でしょう。
WebPへの変換は、最近のPhotoshopでの書き出しや、オンラインツール（例: サルワカ道具箱のWebP変換ツール）、WordPressプラグイン（例: EWWW Image Optimizerなど）で行えます。
大きな画像を使うのはやめよう
次に、画像サイズを適切にしましょう。 Webサイトで表示したいサイズよりも、はるかに大きなサイズの画像をアップロードしていませんか？表示するサイズに合わせて画像を縮小（リサイズ）し、圧縮ツール（TinyPNGなど）やWordPressプラグイン（EWWW Image Optimizerなど）でファイルサイズを小さくしましょう。
遅延読み込みをさせよう
さらに、遅延読み込み（Lazy Loading）を活用しましょう。 これは、画面に表示されるタイミングが近づいてから画像を読み込む技術で、ページの初期表示速度を改善できます。HTMLの<img>タグに loading="lazy" という属性を追加するだけで簡単に実装できます。WordPressバージョン5.5以降では、この属性が自動で画像に追加されるため、特別な対応は不要な場合が多いです。
CSSファイルを最適化する
Webサイトのデザインを指定するCSSファイルも、最適化することで表示速度を改善できます。
ファイルサイズを圧縮する（Minify） ことが有効です。CSSファイル内の不要なスペース、改行、コメントなどを削除して、ファイルサイズを小さくします。オンラインツールやビルドツール（開発者向け）、WordPressプラグインなどで圧縮できます。
Minifyの方法
オンラインツールを使う
Webブラウザ上で簡単に試せます。CSSコードをコピー＆ペーストして圧縮ボタンを押すだけで、圧縮されたコードが生成されます。
例: CSS Minifier, Toptal CSS Minifier
ビルドツールを使う（開発者向け）
Webサイトの開発環境を構築している場合は、Viteやwebpackといったビルドツールを使って、CSSの圧縮を自動化することができます。またこれらのツールでファイルを結合することもできます。複数のCSSファイルを一つにまとめると、ブラウザがサーバーにファイルをリクエストする回数が減り、読み込み時間の短縮に繋がることがあります。
JavaScriptファイルを最適化する
Webサイトに動きや機能を追加するJavaScriptファイルも、CSSと同様に最適化が有効です。
ファイルサイズを圧縮（Minify） しましょう。CSSと同様に、不要な記述を削除してファイルサイズを小さくします。
Minifyの方法
オンラインツールを使う
CSSと同様に、Webブラウザ上で手軽にJavaScriptコードを圧縮できます。
例: JavaScript Minifier, Toptal JavaScript Minifier, UglifyJS Online
ビルドツールを使う（開発者向け）
CSSと同様に、Viteやwebpackなどのビルドツールを使えば、JavaScriptの圧縮も開発プロセスに組み込んで自動化できます。
また、読み込み位置を最適化する ことも重要です。JavaScriptの読み込みや実行は、ページの表示をブロック（遅延させる）ことがあります。可能であれば、<body>タグの閉じタグ直前にJavaScriptの読み込みコードを記述しましょう。
過度なアニメーションを避ける
Webサイトに動きをつけるアニメーション（フェードイン、スライド、パララックスなど）は魅力的ですが、多用しすぎるとブラウザの処理（レンダリング）に負荷がかかり、表示速度や動作が遅くなる原因になります。
特にJavaScriptで複雑な動きを制御している場合や、多数の要素を同時に動かすようなアニメーションは注意が必要です。デザイン上本当に必要なアニメーションに絞り、CSSアニメーションなど比較的負荷の少ない方法を選ぶことを検討しましょう。
サーバーの応答時間を短縮する
Webサイトのデータが置かれているサーバー自体の応答速度も、表示速度に影響します。
サーバープランを見直し ましょう。利用しているレンタルサーバーのプランがサイトの規模やアクセス数に対して適切か確認し、必要であればより高性能なプランやサーバーへの移行を検討するのも一つの手です。
また、CDNを利用する 方法もあります（主に企業・サービスサイト向け）。CDN（コンテンツデリバリネットワーク）は、世界各地に分散されたサーバーにWebサイトのコンテンツのコピーを配置し、ユーザーに最も近いサーバーからコンテンツを配信する仕組みです。これにより表示速度の向上が期待できますが、設定やコストがかかるため、個人サイトよりは企業サイトやアクセス数の多いサービスサイトで導入されることが多いです。
不要なリソースを削除する
Webサイトを運営していくうちに、「使っていないCSSの記述」「古いJavaScriptライブラリ」「今は使っていないWordPressプラグイン」などが溜まっていくことがあります。
これらの不要なリソースは、ページの読み込み速度を低下させる原因になります。定期的にサイトのコードや設定を見直し、不要なものは削除しましょう。特にWordPressプラグインは、入れすぎるとサイトが重くなる原因になりやすいので注意が必要です。
速度測定ツールで現状を知り、改善を続ける
「PageSpeed Insights」のようなツールを使うと、自分のWebサイトの表示速度をスコアで確認したり、具体的な改善点を指摘してもらえたりします。
PageSpeed Insights (Google) https://pagespeed.web.dev/
PageSpeed Insightsでは、「パフォーマンス」スコア（0～100点）を確認しましょう。モバイルとデスクトップの両方で評価されます。
まとめ
Webサイトの表示速度改善は、一度やったら終わりではなく、継続的な取り組みが必要です。今回ご紹介した中でも、特に「画像の最適化」は効果が出やすく、取り組みやすい項目です。
まずはWebPの導入や画像サイズの圧縮、不要なリソースの削除など、できるところから試してみてはいかがでしょうか。そして、PageSpeed Insightsで定期的にチェックする習慣をつけましょう。少しの工夫で、ユーザーにとってより快適なWebサイトを目指しましょう！
このサイトでは、本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社か教育体制のしっかりしている事業会社に正社員で入社することを強くオススメしています。
やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強い『ワークポート』です。ワークポートでも、さすがに未経験の方にWeb制作会社を紹介するのは難しいですが、事業会社のWebデザイナー・フロントエンドエンジニアを紹介してもらえる可能性があります。また、Webデザイナーにこだわらなければ、WebディレクターやECサイト担当者などの求人も多数保有しているため選択肢の幅が広がります。一度面談を受けておきましょう。
Web/IT系特化の転職サイト『Green』に登録しておきましょう。Web系転職の定番サイトです。
「デザインスキルを一気に上げる方法は「レビュー」です。つまりデザインに対するダメ出しを何度もしてもらって直すことを繰り返すことで、デザインスキルは急激にレベルアップします！
これを一番実現しやすいのが会社です。会社なら現場で上司や先輩にサイトやバナーのデザインのレビューをしてもらえるからです。じゃあ就職しておらず未経験のうちはどうすればいいかというと、「レビュー付きのデザインスクールの活用」です。普通のスクールはPhotoshopの使い方やコーディングの基礎を学ぶだけで「デザインスキル」についてはほぼ教えてくれません。レビュー付きのデザインスクールは運営側にも高いデザインスキルが求められるため非常に少なく希少性が高く『fullme』が現在は最高峰だと僕は思っています。「けっきょく、よはく」「ほんとに、フォント」など有名デザイン書籍を手がけるingectar-eの運営です。
僕が駆け出しの頃に『fullme』があれば絶対に受講していました...。デザインスキルを高めたい人はぜひ受講しましょう。
「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました！27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう！
ご質問や感想など、お気軽にどうぞ！