【ブログ】表示速度を大幅改善!やった事は4つ。

ブログ運営をしてたら必ず耳にする『SEO(サーチエンジン最適化)』。それに少なからず影響するのが「表示速度」です。

表示速度が遅いと見てくれているユーザーに「イライラ」を与えてしまい「もういいや」とブログから離脱~となってしまいます。

逆に表示速度が速いと見たいのもをサクサク見れるのでストレスを軽減できます。

そのため比較的重要度が高い項目の一つとなっています。

表示速度を調べる場合「 PageSpeed Insights – Google Developers」で調べることができます。

 

残念なことに当ブログは「そんなの関係ね~」と放置状態だったため表示速度がこの通りでした・・・・・・

 

PCの表示速度スコア

 

モバイルの表示測度スコア

 

はい、この通り大重症・・・

では、ここから

 

①「テーマ変更」と「プラグイン」を最少化

まず最初に取り掛かったのはワードプレスで使用している「プラグイン」を最小限に減らしました。その時まで使用していたプラグインは以下のものです。

 

・Jetpack

・Akismet Anti-Spam (アンチスパム)

・All In One SEO Pack

・AMP

・Gutenberg

・Classic Editor

・Contact Form 7

・EWWW Image Optimizer

・Google XML Sitemaps

・Twenty20 Image Before-After

・WP Multibyte Patch

・WP Retina 2x

・WP Fastest Cache

・AddQuickTag

・ TinyMCE Advanced

・Word Balloon

 

あまり何も考えずに入れていった結果、結構な量・・・

ここからいらないものを減らしていくんですが、その前にプラグインを最少化で運営できるワードプレステーマに変更することにしました。

色々と検索すると候補として位以下のものに

 

・THE THOR(ザ・トール)

・SANGO

・JIN

・Genesis

・Luxeritas

 

僕自身の選択条件は、

 

・SEOの設定ができること(All In One SEO Pack機能が備わっている)。・カスタムに時間をとられたくない(デザイン性もある)。

・多機能性(細かい設定が可能)。

・ビジュアル的にかっこいいもの。

・回遊率を高めたい。

 

などなど、、、きりがなかったのでこの辺までに。

 

そして決定したのが「THE THOR(ザ・トール)」でした。このテーマの詳細はそのうち記事にするかも・・いやしないかも。

 

詳細は公式ページで。

【THE THOR(ザ・トール)】

 

「THE THOR(ザ・トール)」の設定は今回の記事では省略。

 

導入後のプラグインは

・Akismet Anti-Spam (アンチスパム)・Contact Form 7

・EWWW Image Optimizer

・Twenty20 Image Before-After

・Word Balloon

・WP Multibyte Patch

・Akismet Anti-Spam (アンチスパム)

・Classic Editor

・AMP

 

ここまで減らすことができました。

 

この結果表示速度は、

 

PCの表示速度スコア

 

モバイルの表示測度スコア

 

おお~~、イイ感じになってきましたね。でもまだまだ改善できそうなのでさらに続く。

正直まだいらなそうなもの「Contact Form 7」「Classic Editor」あたりは、今後検討していきます。

「JPG」「PNG」画像を「WebP」化にする

WebP化にするにあたり導入しているプラグイン「EWWW Image Optimizer」でできるのでいざ実行へ。

【ダッシュボード】から【設定】から【EWWW Image Optimizer】を選択。

 

 

【WebP】タグを開き【JPG, PNG から WebP】内の

 

「PG から WebP への変換は非可逆ですが、品質の損失は最小です。 PNG からWebP への変換はロスレスです。オリジナルは削除されません、また WebP 画像はサポートブラウザのみ提供されるべきです。 以下の書き換えルールを使用して、Apache で WebP 画像を提供することができます。」

 

チェックをいれ【設定を保存】

 

 

 

するとコードが表示され「htaccess」ファイルに記載してくれと。

そのまま【リライトルールを挿入】

 

 

右隅の赤い【PNG】表記が緑色の【WEBP】に表示されれば大丈夫です。

 

 

これでうまく挿入できる場合と、うまくいかない場合があるようです。理由はよくわからないですが使用しているサーバーによってなどの意見もチラホラありました。

 

上手くいかなかった場合「htaccess」ファイル直接記述します。

エックスサーバー「wpX Speed」の場合、管理画面から【設定】を選択。

 

 

「.htaccess」【編集】を選択します。

 

 

ファイル内の最初のほうに先ほどのコードをコピペし設定を保存します。

 

 

これで緑色の【WEBP】に表示されます。

 

「EWWW Image Optimizer」でいざWebP化

ワードプレスのダッシュボードから【メディア】内の【一括最適化】を選択。

 

「以前に最適化された画像はデフォルトでスキップされます。スキャン前にこのボックスをチェックすると上書き出来ます。」

 

チェックをいれ最適化を開始します。

 

これでWebP、最適化が実行されます。後は待つのみ!

 

ブログで使用している画像の枚数によって非常に時間がかかります。等ブログではなんと「64605」の画像数。時間にして24時間は軽くかかりました。

 

 

完了したら確認したいブログ画面を見ている状態で【F12】キーを押すと確認できます。

 

 

変換されていない画像もありますが、これは広告の画像であったりテーマに入っている画像であったりなのでメディアにアップロードした「JPG」「PNG」画像以外なので気にせずに。もしまばらでWebP化されていないようなら何度か試みてください。

 

実際3回ほど最適化してみました・・・一週間くらいかかっています・・・・

 

「第三者コードの影響を抑えてください」を解消

「PageSpeed Insights」で確認すると「第三者コードの影響を抑えてください」という項目がありその中に「google/doubleclick ads」が一番表示速度の低下に貢献していました。

これは「アドセンス広告」のようです・・・

 

色々調べた結果「アドセンス広告」を遅延読み込みすればOKだよ。ってことみたいなので早速やってみました。

この項目については非常にわかりやすく解説されているサイトがあったので紹介しておきます。なので手順は当ブログでは省力です。

 

のーさんブログ

「サイトの読み込み速度が遅い」「Page Speed Insightsの第三者コードの影響」って何?という悩みを解決しま…

今回行った項目はここまでです。そしてその結果は、

PCの表示速度

モバイルの表示速度

まとめ

サーバー環境は、

WordPress専用の高速クラウド型レンタルサーバー『wpX Speed』

今回行ったのは、

①ワードプレステーマの変更

抜群に上位表示されやすい WP テーマ 【ザ・トール】

 

②プラグインの最小化

③画像のWebP化

④「第三者コードの影響を抑えてください」を解消(アドセンス広告の遅延読み込み)

以上4つの項目です。

 

モバイルの項目はまだまだ改善の余地がありそうなので引き続き行っていくよていです。

また今回なぜ改善を試みたかというと最近頻繁に起こっているGoogleのアップデート。これによって当ブログも少なからず検索結果、アクセス数に影響がありました。

このことからブロガーの方々の中には「オワコンだ!」と叫ぶ人もいますが、逆に言えば今しっかりやっていればライバルに少しでも差をつけていける、ピンチはチャンスだと思います。

僕にとってはGoogleからの「しっかりやれよ」というアドバイスで「見直す」きっかけとなり良かったなと感じています。

また、第二段改善の全容を書き留めていくので参考になればと。

最新情報をチェックしよう!
>「わかりやすさ」は「衝撃的」

「わかりやすさ」は「衝撃的」

脱初心者を目指すためのレタッチ学習動画です。一つずつでも真似て作っていくうちに必ずスキルはアップしていきます。

CTR IMG