どうしたんだい？
これは表示の速度が遅いんだね！
表示されるよ。
だけどこの速度だと誰も見てくれないね。。。
どうしたらいいの？
それでは今回は
【ブログの表示速度の改善】に関してお話ししましょう。
一般的な解決方法は全部で5つ存在する
みんなもサイトを表示したい時に
凄い待ち時間でイライラすることはありませんか？
特にウェブサイトやブログは重いコンテンツで構成をされていると
表示できないくらい重い時もありますよね。
それらの状況を防ぐためにも、5つの対策を取る必要があります。
しっかりと確認していきましょう！！
①画像の最適化
まずは画像の最適化を行いましょう。
画像はWebサイトやブログの中で主要な要素となりますが、
重い画像は表示速度の遅さの原因となります。
画像を最適化するツールとしてはTinyPNGがあります。
TinyPNGはPNG形式の画像を圧縮することができるオンラインツールです。
画像をアップロードするだけで
簡単に40〜80％圧縮することができます。
TinyPNGにはWordPressのプラグインも用意されています
-
WordPressの管理画面にログインし、左側のメニューから「プラグイン」を選択します。
-
画面上部の「新規追加」をクリックし、検索ボックスに「tinypng」と入力します。
-
検索結果から「TinyPNG」を選択し、「今すぐインストール」ボタンをクリックします。
-
インストールが完了すると、「アクティブ化」ボタンが表示されるので、クリックして有効化します。
-
WordPress管理画面の左側メニューの「設定」を選択し、「TinyPNG」をクリックします。
-
表示される設定画面で、TinyPNGのAPIキーを入力します。APIキーはTinyPNGのウェブサイトで取得できます。
-
設定を保存し、TinyPNGプラグインが使用できるようになります。
②テンプレートの見直し
テンプレートとはブログの外観やレイアウトを決めるために使用される
デザインテンプレートのことを言います。
デザインや機能によってブログの表示速度に大きな影響を与えるので
選ぶ際には下記に注意しましょう。
- テンプレートの評価や評判を調べる：テンプレートの評価やレビューを事前に調べ、どれくらい高速であるかを確認しましょう。定期的に更新されているテンプレートは、高速でセキュリティにも優れていることが多いです。
- 軽量なコードを使う：テンプレートのコードはHTMLやCSSなどで構成されています。軽量なコードを使うテンプレートは高速で読み込みが速く、表示速度が向上します。
- シンプルなデザイン：デザインがシンプルであるほどテンプレートの軽量化が可能になり、表示速度が向上します。過剰なJavaScriptの使用はブログの表示速度に悪影響を与えることがあります。
- キャッシュ機能のサポート：テンプレートがキャッシュ機能をサポートしている場合、より高速にページが読み込まれるようになります。キャッシュ機能はページを一度読み込んだ後、次回以降は読み込み速度を向上させる機能になります。
③クエリとスクリプトの見直し
ブログページでは外部のスクリプトやクエリを読み込むことがあります。
これらのスクリプトはブログの機能を拡張するために使用されることが多く
Google AnalyticsやFacebookのウィジェットなどが挙げられます。
一部のスクリプトは、
ページの読み込み速度に大きな影響を与えることがあるので注意が必要です。
下記のような対応を取ることで、
ページの読み込み速度を向上させることが出来るので
是非チャレンジしてみよう！！
- 不要なスクリプトを削除する：不要なスクリプトを削除することで、ページの読み込み速度を向上させることができます。例えば、Google Analyticsのスクリプトが必要ない場合は、それを削除することができます。
- スクリプトを最適化する：スクリプトを最適化することで、ページの読み込み速度を向上させることができます。JavaScriptの圧縮や最小化を行うと、ページの読み込み速度が大幅に向上する場合があります。
- スクリプトをキャッシュする：スクリプトをキャッシュすることで、同じスクリプトを再度読み込まなくても済むため、ページの読み込み速度を向上させることができます。
- クエリの最適化：クエリの最適化を行うことで、ページの読み込み速度を向上させることができます。例えば、必要な時に必要なデータのみをリクエストすることで、不要なデータの取得を防ぐことができます。
④CDNを利用する
CDN（コンテンツ配信ネットワーク）は
世界中に分散された複数のサーバーを利用して
ユーザーに最適な場所からコンテンツを配信する仕組みのことをいいます。
例えば、ブログの画像やファイルなどを
最も近い場所(サーバー)から配信することで、
ブログの表示時間は短縮することができます。
-
ブログの表示時間を短縮できる：CDNではコンテンツ配信に最適なサーバーを自動的に選択するため、ブログの表示時間を短縮することができます。
-
リクエストの集中を分散できる：CDNは複数のサーバーを利用するため、リクエストの集中を複数のサーバーに分散することができます。これによって、サイトの表示スピードが向上します。
-
ネットワークの状況に応じた最適な配信を行える：CDNはネットワークの状況に応じて最適な配信を行うことができるため、ブログの読み込み速度が安定している状態を維持できます。
-
セキュリティ強化が可能：CDNはDDoS攻撃や不正アクセスからのブログの保護も可能となります。
CDNの利用方法
CDNを利用するにはCDNプロバイダを選択し、
ブログにCDNのURLを追加する必要があります。
一般的なCDNプロバイダには下記があります。
CDNプロバイダによっては、無料のプランや有料のプランがあります。
使用する際には、自分のブログに合ったプロバイダとプランを選択しましょう。
⑤キャッシュは有効にする
ウェブサイトを表示する際は
必要なファイルやコンテンツをサーバーからダウンロードしてきます。
しかし、同じウェブサイトを再度アクセスした場は
ファイルやコンテンツを再度ダウンロードする必要がありません。
これは前回ダウンロードしてきた内容を
キャッシュ（一時的な保管場所）に保存しているためです。
キャッシュを有効にすることで
最初にウェブサイトを読み込んだ時にダウンロードしたファイルやコンテンツを
再度同じサイトにアクセスする際に再利用することができる。
これにより、サイトの読み込み時間が大幅に短縮されます。
キャッシュを有効にするとデメリットもあります。
キャッシュされたファイルやコンテンツは再利用されることから
最新の状態が反映されなくなる場合があります。
キャッシュの設定方法
また、キャッシュを有効にする方法には
ウェブサイトのキャッシュ設定を変更する方法と
キャッシュ制御拡張機能を使用する方法の2つがあります。
キャッシュ制御拡張機能の一例として、
WordPressでは「WP Super Cache」というプラグインがあります。
表示速度の確認をPageSpeed Insightszで確認しよう
・ページスピードインサイトにアクセスする
https://developers.google.com/speed/pagespeed/insightsにアクセスします。
・テストしたいサイトのURLを入力する
ウェブサイトのURLを入力します。スマートフォンかデスクトップか選択することもできます。
・分析を開始する
「分析を実行」をクリックし、タスクが開始されるのを待ちます。
・結果を見る。
完了すると、詳細な結果が表示されます。この結果には、レスポンス時間（詳細ごとに指定されたミリ秒単位）、もう一方表は最適化の提案を示します。
・ 改善策を実行する。
提案列で示された各改善策を実施することで、レスポンス時間を短縮することができます。
PageSpeed Insightsを使ってウェブサイトの読み込み時間を改善することで、
訪問者の体験を向上させ多くの人々を引きつけることができます。
また検索エンジンのランキングにも影響するとされているので、
SEO効果を高めるうえでも重要なツールですので
是非みなさん使っていきましょう！！
まとめ
- 5つの一般的な改善方法を実施
- PageSpeed Insightsにて計測と改善を実施
この2つのこと実施すればのんちゃんのサイトもすぐに表示されるよ^ ^
ありがとう！！！ケンティ！！！
