【初心者ブロガー必見】SEO対策にも大事!ページスピード改善は早めが大切

アイキャッチ

最近のSEO対策で重視されていることの一つが、WEBページスピードの評価です
一度は皆さんも聞いたことがあるのではないでしょうか?

聞いたことあるだけで放置している方いませんか?

Googleもページスピードを重視しており、クリックしても表示の重たいページは評価されにくいことがわかってきています

ページの読み込みが遅いと離脱原因にもなりますので、早めの対策が必要です

特にアイキャッチなど最近便利なCanva使っている方もおられると思いますが、圧縮せずそのまま使用されていませんか
そのまま使っているとファイルサイズが大きくページ速度低下の原因になりますよ

シビスケ

この機会に改善していきましょう

ページ速度改善するメリット
  • Googleからの評価が上がる(SEO対策)
  • ページ速度があがると直帰率が下がる
  • サーバー負荷が下がる

▼引用元は2018年にGoogleから発表された情報です

引用元Think with Google

表示速度が1秒から3秒に落ちると、直帰率は32%上昇する
表示速度が1秒から5秒に落ちると、直帰率は90%上昇する
表示速度が1秒から6秒に落ちると、直帰率は106%上昇する
表示速度が1秒から10秒に落ちると、直帰率は123%上昇する

Googleも公式の認めている情報です
ページスピード気になりましたか?

気になった方まずはご自身のサイトをチェックしてみましょう

GoogleサービスPageSpeed Insightsはこちら

赤丸に自身のURLを入れ分析をクリック

ページスピード改善

想像してたよりも数字低い方が多かったのではないでしょうか?

ページスピード改善2
当サイトの数値

ちなみに当のサイトは改善前26でした
現在はモバイルで72前後です

パソコンの数値は皆さん数値が高いはずですが、パソコンで早くても意味がありません

今やほとんどがスマホの方、ぜひこの機会にモバイルの速度改善に取り組みましょう

私が改善したポイントを紹介します

スポンサーリンク


ページスピードの改善方法

ページ改善と言っても実は奥が深くとても複雑です
しかしプラグインを使用することで簡単に行うことが出来ますのでぜひやってみましょう

まず初心者向けのページ改善方法は以下の通りになります

改善方法
  • WordPressに投稿する前にファイルサイズを小さくしておく
  • すでに投稿した画像はEWWW Image Optimizer(プラグイン)を使用し圧縮する
  • WebPファイルに変換することでより画像データを削減
  • Flying Scripts(プラグイン)を使用しjavascriptの実行を遅らせる(アドセンスなど)
  • Autoptimize(プラグイン)を使用しcss・html・javascriptなど必要がない部分を取り除いて最適化

以上5つを実行してみましょう
それでは改善について詳しく説明していきます

シビスケ

諦めないでくださいね〜そんなに難しくありません

画像データの縮小

私も画像圧縮サイトやアプリを使用しましたが、ブログ仲間のゆーちゃまさんが紹介している
tiny pingというサイトがEWWW Image Optimizerを使用するよりも圧縮率も高いです

アップロードする前に圧縮しておけば、よりファイルを軽量化出来るでしょう

パンダが怪しげですが笑

ファイルをドラッグ・アンド・ドロップ後、ファイルをDownloadをクリックすればOK

シビスケ

ファイルサイズが下がらなければ圧縮したファイルをもう一度圧縮すると下がることも

画像縮小

画像縮小というサイトもおすすめ

画像サイズも縮小してくれるので、macやiPhoneのスクリーンショットなどの大きなサイズの圧縮に便利
画像サイズを選択し(おすすめは1024px)データドロップしたら、縮小するをクリックし、縮小画像が表示されたらDownloadをクリック

*デメリットは縮小クリック後広告が出てくるので邪魔のときも

シビスケ

画像縮小を使い大きなサイズを縮小してtiny pingで圧縮すればファイルサイズかなり小さくなります

こちらはこだわる方向けのやり方で、こだわらなければ次に紹介するEWWW Image Optimizerを利用して画像データを圧縮だけでも十分の効果があります

EWWW Image Optimizerを利用して画像データを圧縮

EWWW Image Optimizer

プラグインEWWW Image Optimizerを利用して過去の画像データ及びこれからアップロードする画像データも圧縮していきます

まずはWordPressのプラグイン項目から新規追加をクリックします

プラグイン説明

プラグイン検索の項目に「EWWW Image Optimizer」で検索すると出てきますので、インストールして有効化しましょう

有効化すると以下の画面になります

EWWW Image Optimizerの初期設定

EWWW Image Optimizer設定
EWWW Image Optimizer初期画面1
  1. サイト高速化にチェック
  2. 今は無料モードのままにするにチェック

以上2項目にチェック入れたら

EWWW Image Optimizer設定
EWWW Image Optimizer初期画面2

各項目にチェックを入れ、サイズを幅800に変更、高さ0に設定後、設定保存クリック

EWWW Image Optimizer
EWWW Image Optimizer初期画面3

そのまま完了をクリックすれば終了です

EWWW Image Optimizer
EWWW Image Optimizer設定画面

次に赤い矢印のEnable Ludicrous Modeをクリック

Enable Ludicrous Mode
Enable Ludicrous Mode画面

変換タブをクリック

Enable Ludicrous Mode
Enable Ludicrous Mode画面変換

変換リンクを非表示にチェックを入れ変更を保存をクリック

変換リンクを非表示にチェックを入れないと拡張子が勝手に変更される可能性があります

EWWW Image Optimizerの設定確認

EWWW Image Optimizer設定
EWWW Image Optimizerの設定1
メタデータの削除にチェック入れる
メタ情報とは写真データの中にある撮影データの記録です
使用カメラ、レンズ、などの情報、位置情報などを削除する項目です
画像のリサイズは800が目安
大きな画像を自動でリサイズしてくれます
使用しているテーマで変わってきますが、800ピクセルに設定しておけば、テーマが変わっても大丈夫です
遅延読み込みにチェック入れる
遅延読み込みとは画像表示を送れて読み込ます事でスピードアップをします
使用しているテーマやプラグインなど同じ機能がある場合はチェックを外すこと

以上の項目にチェックが入っているか確認

WebPを使用する

WebPとはGoogleが開発している静止画用の非可逆圧縮フォーマット
JPEGやPNGといったファイルよりも圧縮率が高いため、ページスピードにアップには欠かせない設定です

WebP設定
EWWW Image Optimizer設定2

難しそうなことが書いてありますが飛ばして

リライトルールを挿入するをクリックして挿入成功赤のPNGマーク緑のWebPに変われば、一番下の変更を保存をクリックして終了です

過去の画像を一括最適化
一括最適化説明
最適化中の画面

次にダッシュボード上にあるメディアタブの中にある一括最適化をクリック
最適化されていない画像をスキャンをクリック
その後スキャンが行われて最適化されていない画像は、最適化をクリックすることで画像が変換されます

シビスケ

画像の枚数によってかなり時間がかかりますので余裕を持って行いましょう
私は20分ぐらいかかりました

これで画像関係のデータ縮小は完了になります

次からはアップロード時に自動的に変換されます

速度変化が気になる方はもう一度測定してみてください

PageSpeed Insightsはこちら

Flying Scripts使いJavascriptの実行を遅延させる

プラグインFlying Scripts

このプラグイン「Flying Scripts」を利用することにより、JavaScriptを遅延してサイトスピードをあげる事ができます

シビスケ

主にGoogle AdSenseなど利用している方などに効果があります

プラグインインストールや検索方法は先ほど紹介したEWWW Image Optimizerと一緒になります

インストール後有効化してください

次にWordPressメニュの設定より「Flying Scripts」を選択してください

Flying Scripts設定
Flying Scripts設定

Include Keywordsの部分に
pagespeed insights測定時に記載されていた、改善できる項目JavaScriptの削減のURL部分より、JavaScriptファイル名をコピーし入力後SaveChangesをクリックで完了です
〇〇jsとついた部分ですね

シビスケ

私はひとつずつコピーし試してみました
上記画像はその時のものです

JavaScript削減
pagespeed insights 改善できる項目

シビスケ

私はFlying Scriptsを使用することによりスコア30近く改善されました

Autoptimizeを利用し最適化する

Autoptimize

プラグイン「Autoptimize」を利用してcss・html・javascriptなどの最適化します

他のプラグインと同様にインストール後有効化してください

WordPressメニューより設定から「Autoptimize」を選択

Autoptimize設定
Autoptimize設定

javascriptオプション

JavaScriptコードの最適化にチェックを入れるとJSファイルを連結するが現れますのでチェックを入れます

JSファイルを連結するは他のプラグインと干渉する恐れがありますので
エラーが出た場合・わからない場合はチェックを外し連結しないで遅延にチェック

CSSオプション・HTMLオプション

Autoptimize設定2
Autoptimize設定2
チェックを入れる項目
  • CSSコード最適化
  • CSSファイルを連結する
  • インラインのCSSも連結

上記3点にチェックを入れます

最後に「変更の保存とキャッシュの削減」ボタンクリックで完了です

シビスケ

実は私にはスコアが下がるなど効果がなかった為現在使用しておりません

その他改善点

使用しているWordPressテーマによってもページスピードが変わってきます
私が使用しているストーク19はブロックエディタに特化されており、モバイルに最適化されています
またアドセンス広告タグやアクセス解析タグの追加なども簡単に行なえますので初心者さんにも安心です

その他改善点
  • Twitterなどの埋め込みを外す
  • モバイルスピードを意識したテーマを利用する
  • アドセンス狩り対策プラグイン無効化してみる
    AdSense Invalid Click Protector」と「Code Snippets」など
  • 使ってないプラグインは削除しておく
  • レンタルサーバーを変える

など対策もあります
PageSpeed Insightsを確認しながら徐々に変更してみてください
アドセンス狩り対策についてはこちらも御覧ください

アドセンスアイキャッチ

アドセンス狩りにあった場合は早めの無効クリック申請を行いましょう▼

無効申請アイキャッチ

ページスピード改善のまとめ

ページスピード改善は早めの対策が必要です

Googleもサイト読み込みスピードを優先して評価してくれています
少しでもSEOの有利になるように、ページ速度の改善に取り組んでみてください

必要なプラグインは

EWWW Image Optimizer
画像圧縮でデータを軽量化
Flying Scripts
Javascriptの実行を遅延させ読み込み速度UP
Autoptimize
css・html・javascriptなどの最適化

有名なプラグインばかりですので安心して使用できます
この機会にお試しください

シビスケ

ブログに疲れたとき、記事ネタが無いときなどに設定するのもいいかもしれません

その他SEO対策ブログに関して
まるさんが運営されているまるのブログ塾が参考になりおすすめです
ぜひこちらもご覧ください

またグーグルアドセンスにお悩みの方はこちらもご参考ください

アイキャッチ画像

ここまでご覧いただきありがとうございました

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA