メディア運営

【祝2秒達成】ブログの表示スピードを徹底的に改善した方法を公開!!

2019年3月12日

  1. HOME >
  2. ライフログ >
  3. ライフスタイル >
  4. メディア運営 >

【祝2秒達成】ブログの表示スピードを徹底的に改善した方法を公開!!

2019年3月12日

ここ一週間ほど、ブログの表示スピードを上げることに四苦八苦していた。

2月にブログテーマを変えたことにより、ある程度表示スピードは上がったのだが、それでも完璧とは言えなかった。

特にモバイルの表示スピードが遅かったのだが、いろいろ対策をして改善することが出来た。

 

ちなみに、テーマを変える前は表示スピードは10秒程度で、モバイルの速度スコアが20程度でパソコンの速度スコアが40程度だったと思うw

テーマを変えただけで表示スピードは6秒程度で、モバイルの速度スコアが35程度でパソコンの速度スコアが65程度になった。

今回は、ここからのスタートだ!

 

ブログの表示スピードは速い方が良い

Googleは2018年7月に、モバイルページのスピードをモバイル検索のランキング要素として使う、新しいアルゴリズムを導入した。

このアップデートは「スピードアップデート(Speed Update)」と言われていて、ブログ記事のランキングにスピードが影響するようになったんだ。

また、ブログの表示スピードが3秒以上かかると40%のユーザが離脱すると言われていて、表示が遅いブログはSEO的にもユーザビリティ的にも良くない。

 

でも、ブログの表示スピードの改善方法って、イマイチよく分からないじゃん!?w

ということで、このブログも表示スピードの改善はおざなりになっていたんだ。

しかし、表示スピードの改善はブログの成長には絶対に必要な条件なので、とうとう重い腰をあげて本格的に取り組んでみた。

 

 

前提となる環境

ブログ環境

  • エックスサーバー X10プラン
  • 親テーマ「AFFINGER5EX」
  • 子テーマ「JET」

サーバーはエックスサーバーで、プランはX10を使用している。

親テーマはAFFINGER5EXで、子テーマにJETを使用している。

AFFINGER5EXとブログカード型の子テーマJETを使うことによって、それだけでスピードはある程度改善した。

 

ブログカード型はあまり凝ったデザインとは言えないが、今の時代はモバイルでのアクセスが中心となっているのでこれで充分だと思うんだ。

ブログカード型は最近の流行りのスタイルだしスピードアップも兼ね備えていて、JETは優秀な子テーマだと思う。

 

AFFINGER5EXとは、WING(AFFINGER5)購入者がグレードアップ出来るテーマだ。

AFFINGER5EXにするためには、まずはWING(AFFINGER5)を購入する必要がある。

子テーマJETはWING(AFFINGER5)でも使えるので、必要に感じた人だけAFFINGER5EXにグレードアップしよう。

 

 

 

ブログの表示スピードを徹底的に改善した後

今回解説する表示スピードを速くする対策後にスピードを計測してみると、かなり良好な結果が得られた。

測定に使用したツールは、

の、3つのツールで測定した。

 

PageSpeed Insightsの結果

PageSpeed Insightsの結果 モバイルPageSpeed Insightsの結果 パソコン

モバイルとパソコン共に、速度スコア90以上を叩き出した。

コレ、かなり速いからね!

 

 

GTmetrixの結果

GTmetrixの結果

いいぞいいぞ!

こちらもページスピードスコアはAだ。

 

 

TestMySiteの結果

TestMySiteの結果 2秒達成

TestMySiteの結果 上位サイトより上

はい!出ました2秒!!

どう!?みんなも自分のブログを速くしたいよね~!!

ということで、さっそくスピードアップ対策を始めていくよ~!

 

 

ブログの表示スピードを徹底的に改善した方法

スピードアップ対策は全部で8項目あるので、順番に解説していこう。

一部有料プラグインを使うため、誰でも直ぐに出来ることではないかもしれない。

全てのスピードアップ対策をしなくてもある程度速くなると思うので、出来るところだけでもやっていこう。

基本的にPageSpeed Insightsを使って改善していくのだが、その前に出来ることから片付けていくぞ~。

 

 

デザインの見直し

基本的に、ブログのデザインをコテコテにしていけばしていくほど表示スピードは遅くなる。

特に、スライダーの設置や画像のアニメーション処理などは遅くなる原因の1つだね。

ユーザーはブログのスライダーなんて見てないし、画像のアニメーション処理なんてうざいと思っていて、ブログ主の独りよがりの場合が多いw

 

こうした方がもっと記事を読んでくれるんじゃないか?と思って設置するが、ユーザーは必要な記事しか読まない。

シンプルな方が記事に集中できるし、スピードが速ければイライラせずに最後まで記事を読める。

なので、デザインを見直してシンプルにしていこう。

その中でも、自分の色を出すのがテクニックだね。

 

この記事を読んでいる時点で、あなたはブログのスピードアップに興味があるんだと思う。

俺もそうなんだが、そういった人はブログ装飾は散々やりつくしたよねwww

ここらで独りよがりのコテコテブログは卒業して、ユーザビリティ重視のブログを作っていこう。

 

 

プラグインの見直し

次に、プラグインの見直しをしよう。

この後に更に必要になるプラグインも含めて、使用しているプラグインの数は2019年3月12日の時点で25個だ。

プラグインはなるべく少なくしたいが、必要なプラグインは惜しみなく入れよう。

 

具体的なプラグインの名前は以下の通り。

  • AFFINGERタグ管理マネージャー3※
  • AFFINGERタグ管理マネージャー3専用 PVモニタープラグイン※
  • Akismet Anti-Spam (アンチスパム)
  • AmazonJS
  • Async JavaScript
  • Autoptimize
  • BackWPup
  • Broken Link Checker
  • Classic Editor
  • Contact Form 7
  • EWWW Image Optimizer
  • Google XML Sitemaps
  • Imsanity
  • LazyLoad SEO(WING専用)
  • PS Auto Sitemap
  • Rinker
  • SNS Count Cache
  • SUGOI MOKUJI(すごいもくじ)[PRO]※
  • TinyMCE Advanced
  • WP Fastest Cache
  • WP Multibyte Patch
  • WP-Optimize
  • クレジット削除
  • ステ子※
  • ブログカード外部URL対応プラグイン(WING専用)※

 

太字がスピードアップ対策に関係しているプラグインで、※マークが付いているプラグインは有料プラグインだ。

スピードアップ対策に関係しているプラグインで有料なのはLazyLoad SEO(WING専用)だけだが、価格は税込で5,000円する。

持っていない人は、最後に必要かどうか決めても良いかもしれない。

 

関連記事
LazyLoad SEO導入で起こったRinkerの画像表示が出来ない原因を解決!

ブログのテーマをWING(AFFINGER5)に変えた時に、専用プラグイン「LazyLoad SEO ...

続きを見る

 

 

Autoptimize、EWWW Image Optimizer、WP Fastest Cache、WP-Optimizeは、今回の対策前から入れていたプラグインだ。

なので、今回の対策で貢献したというより、元から効いていたと考えている。

 

Imsanityは、今後大きな画像を間違ってアップロードしないように入れた。

保険的な役割だが、一括画像リサイズ機能があるので今までの画像を適切な大きさにリサイズしてしまおう。

俺の場合は、画像のサイズを幅、高さとも全て1536ピクセルに設定してリサイズした。

 

 

アドセンス広告の見直し

そして次は、アドセンス広告を見直そう。

JETを使用すると、アドセンスのインフィード広告をTOPページと関連記事に簡単に表示させることが出来る。

しかし、アドセンスのインフィード広告は、ブログのスピードをかなり遅くさせてしまう。

 

検索を意識してブログを書いている場合は、TOPページを見られる機会は少ない。

更に、最近はスマホからのアクセスが中心となるため、関連記事も下の方にあるので見られることが少ないと思う。

例え見られたとしても、関連記事に関連して無さそうなインフィード広告が出てもクリックされないだろう。

 

俺の場合、1ヶ月でインフィード広告が稼いでくれた金額は、僅か250円だったw

ここで、インフィード広告を外すことによってスピードが改善するなら、月額250円でスピードアップさせるということだと考えた。

これによって今までよりもアクセスが増えれば、他の広告がそれ以上の金額を稼いでくれる可能性もあるしね。

 

更に、アドセンスは非同期に出来るものは全て非同期にして、記事内広告は今までの半分に設定しなおした。

AFFINGER5EXやWING(AFFINGER5)なら、設定でチェックするだけなので簡単だ。

一時的に広告収入が減っても、アクセスが上がればそれ以上になると思っての対策だったが、現状で広告収入は減っていない。

結局、今までクリックされていなかった広告を排除しただけで、むしろユーザビリティの向上になったのではないかと思う。

 

クリックされている広告かどうかをチェックするには、アドセンスの場合は各広告を個別に設定してレポートを見れば分かる。

その他の広告でASPの管理画面でも分からないものは、AFFINGERタグ管理マネージャー3を駆使すれば見えてくるぞ~。

現在は使っていないが、プラグイン「ABテスト」を使えば、どういった広告がクリックされやすいかなども分かる。

 

 

次世代フォーマットでの画像の配信に対応

次世代フォーマットでの画像の配信に対応

さて、ここからが本題の部分だ。

一気に難しくなるぞ~www

まず、画像を「次世代フォーマットでの画像の配信」に対応させていこう。

何も対策していなければ、PageSpeed Insightsで診断するとこの項目はほぼ引っ掛かるだろう。

 

具体的な対策方法は、画像を「次世代フォーマットでの画像の配信」に対応させるためにプラグイン「EWWW Image Optimizer」を使う。

EWWW Image Optimizerで画像を最適化するのだが、画像が多いブログではかなりの時間が掛かる。

当ブログは、画像の最適化に3時間も掛かったwww

 

んで、肝心の「次世代フォーマットでの画像の配信」に対応させる方法だが、下のブログ記事を参考にしよう。

俺もこの通りに実行して、簡単に「次世代フォーマットでの画像の配信」に対応させることが出来た。

お世話になりました!素晴らしい記事をありがとうゴザイマス!

JPG・PNGを一気にWebP画像に置き換えてブログを高速化する簡単な方法 | 瀬戸内ことりの鬼校閲手帖
JPG・PNGを一気にWebP画像に置き換えてブログを高速化する簡単な方法 | 瀬戸内ことりの鬼校閲手帖

2010年9月には公式に発表され、提供も開始された新しい画像ファイルの形式「WebP〔ウェッピー〕」 ...

続きを見る

 

 

JavaScriptを非同期ロードする

JavaScriptを非同期ロードするには、先に上げたプラグイン「Async JavaScript」を使う。

Async JavaScriptの設定方法は、下のブログ記事を参考にいろいろ設定してみよう。

俺の環境では、遅延(defer)では動かなかったり表示されなかったものがあったので、全て非同期(async)での設定にした。

こちらも、お世話になりました!素晴らしい記事をありがとうゴザイマス!

Async JavaScriptで読み込みを非同期化する方法 | ものぐさSEのLifeHackするブログ
Async JavaScriptで読み込みを非同期化する方法 | ものぐさSEのLifeHackするブログ

JavaScriptの読み込みを非同期化することによって、WEBページの表示スピードを改善したい場合 ...

続きを見る

 

 

テキスト圧縮の有効化

テキスト圧縮の有効化はいろいろな方法があると思うが、俺は.htaccessファイルで対策した。

エックスサーバーの場合、サーバーパネルから.htaccessファイルにコードを書き込むことが出来る。

コードなどは、下のブログ記事を参考にしよう。

 

この記事はこの項目だけでなく、全体的に凄く役に立った。

こちらも、大変お世話になりました!素晴らしい記事をありがとうゴザイマス!

WordPressでもGoogle PageSpeed Insightsで満点を取得する方法
WordPressでもGoogle PageSpeed Insightsで満点を取得する方法

今日は、WordPressウェブサイトでGoogle PageSpeed Insightsで満点を取 ...

続きを見る

 

 

サーバーキャッシュを使う

この辺りで80後半の速度スコアとなっていた。

あと一押し欲しいので、サーバーキャッシュを使う。

エックスサーバーのサーバーキャッシュとXアクセラレータをオンにする。

 

 

AFFINGER5EXの細かい設定を見直す

既に出来ることの限界が見えてきたw

あとは細かい設定を見直して、なるべく負荷をかけないようにしよう。

具体的には、記事タイトル・見出し(h2~3)・ウィジェットボタンなどのフォントの種類を、「使わない」にチェックを入れるなどだ。

 

ここでやっと、モバイルとパソコン共に速度スコア90以上で表示スピード2秒を叩き出した!

おめでとうございます!

ありがとうございます!

 

 

まとめ

テーマをWING(AFFINGER5)やグレードアップ版のAFFINGER5EXにして、子テーマにJETを使う。

その後、

  • デザインの見直し
  • プラグインの見直し
  • アドセンス広告の見直し
  • 次世代フォーマットでの画像の配信に対応
  • JavaScriptを非同期ロードする
  • テキスト圧縮の有効化

の6項目を実践するだけでかなり速くなるはずだ。

 

大きくスピードが変わる部分は、デザインの見直し、プラグインの見直し、アドセンス広告の見直しで、特にデザインの見直しとアドセンス広告の見直しは、ユーザビリティの向上にも繋がる。

うざい演出やクリックされていない広告は、排除していった方が良いだろう。

その他は、他力本願的だがw紹介した3記事を実践すれば、速度スコア90以上で表示スピード2秒の爆速ブログが出来上がる。

 

まだ無料テーマを使っている人は、テーマはWING(AFFINGER5)やグレードアップ版のAFFINGER5EXにするだけでかなり速くなるだろう。

俺は、賢威7、TCDのMAG、BLOOM、RUMBLEといろいろな有料テーマを使ってきたが、その中でもWING(AFFINGER5)やAFFINGER5EXはずば抜けて表示スピードが速い。

まずは、テーマをWING(AFFINGER5)に変えてみよう。

それでは、みんなもブログのスピードアップを目指して頑張ってね~!

 

 

関連記事
テーマをWING(AFFINGER5)に変更したら今まで以上にブログが楽しくなった!

2月に入ってから、当ブログを大幅にリニューアルした。 メインはテーマをWING(AFFINGER5) ...

続きを見る

 

よく読まれている記事
  • この記事を書いた人

モリタク

バスフィッシングにお熱です。
スポンサー:GAN CRAFT・ZPI・SIGNAL・CLUB IKEHARA・Ts-on

-メディア運営

Copyright© モリタクブログplus , 2019 All Rights Reserved.