初心者にもできる簡単なwordpressブログ高速化で20スコアUP!テーマは「ハミングバード」を使用中

wordpressブログの高速化

Romy(@romyhiromi_com)です。

wordpressブログを運営し始めて1年経ったのですが(→「このブログを書き始めて祝1周年!自分のブログの客観的な分析&2年目に向けて」)、日々ブログ改善のための対策や修正に励んでいます♪

たまたま昨日ブログのパフォーマンスチェック(読み込み速度の確認)を「PageSpeed Insights」というツールを使ってやってみたところ、かなりひどい状況だということが判明(><)

そこで、慌てていくつかの対策を取ってみたらスコアがだいぶ上がったので、やってみたことをご紹介します!

Romy
難しいことがわからない方でも簡単にできることだけです w

 

スポンサーリンク

まずは「PageSpeed Insights」で自分のブログを確認

Googleが提供している無料のツール「PageSpeed Insights」で、簡単に自分のウェブページのパフォーマンスチェックができます。

サイトのURLを入力して「分析」をクリックするだけ!

PageSpeed Insights

 

以前も確認していろいろ対策を取ったはずなのに、今回再びやってみると…

なんとスコアがガタ落ち!!

お見せするにはかなりお恥ずかしい数値ですが、公開しちゃいます w

 

モバイルは「Poor 48/100」

PageSpeed Insights

 

パソコンは「Poor 51/100」

PageSpeed Insights

 

Romy
こりゃひどい… ひどすぎるでしょ…
めちゃくちゃ読者の方が読みづらいブログになっているってことですね(><)ごめんなさい!!

 

下にスクロールすると、「適用可能な最適化」と対策方法がリストアップされていますが、この説明を読んでも今ひとつ理解できないんですよね…

PageSpeed Insights

 

というわけで、わかりやすく解説されているブログ記事を検索して、ブログ高速化のためにできることをやってみました!

 

プラグイン:「EWWW Image Optimizer」で画像を最適化(圧縮)

EWWW Image Optimizer

 

まずは何と言ってもこのブログ、写真が多いんです…

旅行やグルメ情報などは写真が大事だし、なるべく記事を見た方がそこに行った気分になれるように、と思ったらどうしてもたくさん写真を貼りたい!

なので、「EWWW Image Optimizer」というプラグインを使って画像を圧縮します。

 

プラグインを入れたら、すでに画像をアップロードしている場合最初に「一括最適化」という作業が必要(wordpress管理画面の「メディア」をクリックするとあります)。

これは画像が多いとかなり時間がかかりますが、一度やっておけば以後新たに画像をアップロードする度に自動で最適化されます!

EWWW Image Optimizer

 

私はすでに以前設定していたので問題ないかなと思いつつ、以下の記事を参考に今回改めて確認してみたところ、見落としていた箇所を発見!

ワードプレスを高速化させる画像の最適化方法
サイトの表示速度が2秒遅いだけで離脱率が50%上がると言われている。サイトの表示速度はブログを読むかどうかの重要な判断基準になる。今回はワードプレスを高速化させ...

 

その他の必要な設定は上記ブログに書いてあるのでぜひ見ていただきたいのですが、私がやっていなかったのは以下の箇所。

「高度な設定」の中にある「並列最適化」というのをチェックしていませんでした。

EWWW Image Optimizer

 

チェックしたら、緑色の字で「完全に有効化済み」と表示されました!

EWWW Image Optimizer

 

スポンサーリンク

プラグイン:「Instagram Feed」のモバイル表示を変更

Instagram Feed

 

このブログでは、パソコンから見ると右サイドバーの一番下に、モバイルで見ると下にスクロールして行ってフッターの前にInstagram投稿を表示しています。

Instagram Feed」というプラグインを使っていますが、実は前からモバイルでの表示が気になっていたのです。

このように、写真が1枚1枚、デカデカと表示されていて…

Instagram Feed

 

直し方がやっとわかったので、シェアします。

wordpress管理画面から「Instagram Feed」をクリックし、「2. Customize」へ。

Instagram Feed

 

少しスクロールすると「Layout」という項目があるので、その一番下の「Disable mobile layout」をクリックします。

Instagram Feed

 

再度ブログをスマホから確認すると、パソコンと同じように画像が小さく表示されていました♪

表示速度アップに少しは貢献してくれるかな…??

今までよりはるかに見やすくなったのは確かです!

Instagram Feed

 

テーマ:「ハミングバード」のアニメーションをOFFに

私が現在利用しているのは「WordPressテーマ「ハミングバード」」。




上にも書いてあるように、「アニメーション」と言って画像やアイコンがボコッと浮き出るようなエフェクトがあるのですが…

これがページの読み込み速度を遅くしているとの情報を入手し(まぁそりゃそうだよね 笑)、泣く泣く一度止めてみました。

Romy
アニメーションがウリのテーマなのにねぇ… 切ないけど、仕方ないよ、うん…

 

wordpressの管理画面の「外観」から「カスタマイズ」を選択して、「その他オプション」をクリック。

ハミングバードのアニメーションをオフに

 

「アニメーションを使用しない」にチェックを入れれば完了!

ハミングバードのアニメーションをオフに

 

サーバー:「エックスサーバー」の高速化

サーバー側でもやれることがあるとわかりました。

私が利用しているレンタルサーバー「エックスサーバー」の場合を調べてみると、わかりやすかったのが先ほどご紹介した方の別記事。

エックスサーバーの高速化機能でブログを高速表示させる
私が一番おすすめするサーバー。エックスサーバー。ブログを高速化する方法はプラグインを使用するなど様々ある。今回はエックスサーバーの高速化機能を紹介する。ボタ...

 

というわけで、ここからはエックスサーバーを利用している方向けです。

サーバーパネルにログインして、「mod_pagespeed設定」をクリック(表示速度の向上・転送量の軽減を図る、と書いてありますね)。

対象ドメインを選ぶと、やはり「現在の設定:OFF」になっていたので、「ONにする」をクリックすれば完了♪

エックスサーバーの高速化機能

 

その他:トップページのヘッダー画像のサイズを小さく

 

引き続き高速化について調べていると、ブログのヘッダー画像のサイズがかなりネックになっていると気づきました。

残念ながらまだパソコン用のヘッダー画像サイズは変えられていませんが、モバイル用の画像はひとまず「画像を縮小する!」で640pxに縮小!

※その画像をパソコン用に使用してみたら、小さいから3つ横に並んじゃうのよね…

 

WordPressテーマ「ハミングバード」」の場合は、「外観」から「カスタマイズ」を選び、「トップページ設定」へ。

ここで「ヘッダー背景画像(SP用)」を変更すればOKです。

ヘッダー背景画像

 

ここまでやって再び「PageSpeed Insights」をチェックしたら+20に!

実は上記の作業を一つ一つやっては「PageSpeed Insights」で分析して数値を確認していましたが、なかなか思うように上がらないので追加でいろいろやるはめに…

今度こそ!と思って分析すると、モバイル・パソコン共にだいぶ改善されていましたよ!

 

モバイルは+20で「Needs Work 68/100」に!

PageSpeed Insights

 

パソコンは+20で「Needs Work 71/100」に!

PageSpeed Insights

 

Romy
モバイル・パソコン共に最初に分析したときより「+20」上がりました!まだまだ改善の余地ありだけど、だいぶマシになったのでは?

 

あと現時点で気になっているのは以下の2つ。

  • 各記事のタイトル下にあるアイキャッチ画像
  • ソーシャルアイコン

 

明らかに記事の読み込み時に、アイキャッチ画像が時間かかっているんですよね…

そしてソーシャルアイコンもどうやら重くなる原因の一つのようです。

ただこの2つに関しては、まだどうするか決められていないので、いったんwordpressブログの最適化の作業はここまでにしました!

 

もっと難しい設定など、いろいろ試してみてスコアを上げることができたら、改めて記事にしますが…

ひとまず上記の方法で20はアップしたので、やってみる価値は大アリでした!

Romy
私のようにブログの表示速度がヤバい方は、ぜひやってみてください♪

 

アニメーションをなくしたとしても(笑)WordPressテーマ「ハミングバード」は使いやすくてオススメ!

こちらの記事もあわせてどうぞ

 

★RomyのSNS(フォローはお気軽に)

 

スポンサーリンク

ABOUTこの記事をかいた人

鎌倉在住・30代後半のバイリンガルナレーター/ブロガー/旅ライター。小3男子ママ。趣味はブログ、サーフィン、コーヒ&スイーツが美味しいカフェ巡り。海と夕焼けが大好き。

このブログでは、鎌倉のグルメ・観光・暮らし、お出かけ、ブログ運営、仕事など、30代ママフリーランサーの日常を発信しています!

Romyのプロフィール
35歳で鎌倉に移住し人生の再スタートを切った私の過去のストーリー
Romyの経歴一覧とお仕事依頼・お問い合わせフォーム