沖縄でがんばるフリーランスの応援人・タイラミオ(@miolalaclip)です。
自分のブログやホームページが表示されるのがやたら遅くて困っていませんか?
ブログやホームページの表示速度は、ユーザーの満足度に大きく影響します。
今回は「ブログ・ホームページの表示速度のチェック方法」に引き続き、表示速度が遅い時の対策方法をご紹介します。
【1】画像のサイズを小さくする
まず最初に見直してもらいたいのが画像のサイズです。
初心者がやりがちなのが、スマホやカメラで撮った写真を、撮ったサイズのままアップロードしてしまうこと。画像のサイズが4000pxのように特大になっていませんか?
対策:パソコン内でリサイズしてからアップロードする
オンラインにアップロードする前に、まずはパソコンで画像を開いてリサイズしましょう。
Macの場合は、画像を開いて「ツール」メニューの中から【サイズの調整】を選びます。幅が1000を超えている場合は、600〜900pxくらいに調整しましょう。
縦長の画像の場合は、高さを600〜900pxくらいに調整しましょう。
対策:tiny pngを使ってpngファイルを圧縮する
「tiny png」というサイトを使って、画像のクオリティーを保持したまま、圧縮してくれます。
画像の幅や高さを調整した後に、「tiny png」でさらに圧縮すれば、オンライン上にスムーズにアップロードできるでしょう。
【2】プラグインで対策する【ワードプレス】
ワードプレスを使っている方は、プラグインを使って表示速度の対策をすることができます。以下、初心者でも取り入れやすい2つのプラグインを見ていきましょう。
EWWW Image Optimizerを使う
まず最初は、アップロードした画像が自動的にリサイズされる設定ができたり、アップロード済みの画像を圧縮することができる「EWWW Image Optimizer」というプラグインです。
プラグインの新規追加で検索、インストール完了後に【有効化】をクリックしましょう。
アップロード画像を自動でリサイズ
左側のサイドメニューの「設定」の中から「EWWW Image Optimizer」の項目を探してクリックします。
設定画面の中に「リサイズ」というタブがあるので選択し、「メディア画像をリサイズ」という項目で画像の幅と高さの上限を設定できます。
私は高さと幅の上限を990ピクセルに設定しているので、990以上の大きさの画像がアップロードされた場合は、自動的に990にリサイズされるようになっています。
アップロード済みの画像をボタン1つで最適化
「EWWW Image Optimizer」を使えば、アップロード済みの画像のサイズを最適化することもできます。
サイドメニューから「メディアライブラリ」のページを開きます。一覧表示になっている方は、詳細表示に切り替えます。
右側に「画像最適化」の項目が表示され「今すぐ最適化!」をクリックすればOKです。
Lazy Loadをインストール→有効化する
2つ目はインストールして有効化するだけでOKのプラグイン。設定は不要です。
「Lazy Load」は画像を遅れて読み込ませるテクニックのことで、画像が画面内に映るタイミングで、初めて読み込みを実行させるプラグインです。
ページすべての画像を読み込む必要がなく、ユーザーが見ている画面内の画像だけを読み込むので、その分表示が速くなるという仕組みです。
不要なプラグインは削除 or 無効化
ちなみにプラグインを入れすぎていることも、表示速度が遅くなる原因になります。使っていないプラグインは定期的に削除するか無効化するように意識してみましょう。
【3】JavaScriptなどのアニメーション機能をオフにする
アニメーションがある方が見栄えはいいかもしれませんが、重くなって表示速度が落ちる原因の一つです。
テーマのカスタマイズ設定などでオン/オフが切り替えられる場合は、オフにして対策しましょう。
【4】デフォルトのフォントにする
意外かもしれませんが、フォントタイプも表示速度が遅くなる原因になります。
フォントをカスタマイズしている方は、デフォルトの標準フォントに戻してみると、表示速度にも変化が見られるかもしれません。
【5】サーバーまたはサーバーのプランを変える
最後に、現在使っているレンタルサーバーの容量が足りていない可能性もあります。
特に100〜500円ほどの格安レンタルサーバーは、容量が少なかったり、速度が遅くてイライラするという声を聞くことがあります。
個人的におすすめのレンタルサーバーは「エックスサーバー」です。月額900円〜で利用できて、表示も速く容量もたっぷりで安定感バツグンです。
まとめ
以上、ブログやホームページの表示速度が遅い時の対処法&対策をご紹介しました。
せっかく良い記事がたくさんあるのに、表示速度が遅いことによってユーザーが離れていってしまうのはもったいないですよね。
初心者でもすぐに試せる対策ばかりなので、ぜひ参考にしてみてください。