Google のスピードテスト(PageSpeed Insights)で「12」→「83」に改善した方法

ABOUTこの記事をかいた人

兵庫県加古川市在住の3児の父親です。
・ブログのサポート(月額会員制スポット
・某コミュニティの技術サポート
オルゴナイトのネットショップ店長
・職業訓練校のグラフィック/Web制作コースの講師3期目

アニメやマンガ好きで、子供の影響か?ギターの練習を再開しましたw

※当サイトのリンクは、Amazonを含めアフィリエイトリンクを利用しています。

口座やカードの自動取り込みが優秀すぎて、隙間時間に仕訳ができておすすめです^^

 

フリーランスの支払いトラブルを未然に防止


どうも、ブログサポーターがみたか(@gamitaka02)です。

SEO(検索エンジン最適化)において、ページの表示速度は大事な要素だと言われています。

キーワードのように直接的な影響ではなく、サクサク表示されることで直帰率や滞在時間が改善することでGoogleの評価が上がり、順位が上がるという流れです。

ページの表示速度を数値化してくれるのが「PageSpeed Insights(ページスピードインサイト)」です。

調べたいURLを「ウェブページのURLを入力」に入れるだけで、ページの表示速度がわかります。

Google PageSpeed Insights

ただし、ページの表示速度は数値と体感が合わないこともあるのでお気をつけください(^_^;)

さて、この記事ではそんな「PageSpeed Insights」の数値を大きく改善できた事例として、月額サポート保険『Blog-Relief(ブログリリーフ)』に加入されている木城さんのケースをご紹介します。

偉大な冒険家
お前がサポートの事例記事を書くなんて珍しいな!
がみたか
「ぜひ使ってください!」と言ってもらえたからね^^ありがたいことですm(_ _)m

「青山筋膜整体 理学BODY」 木城 拓也さんの場合

今回、ページスピードの数値改善を依頼していただいた木城さん。

事前にZoomでブログ相談をしてからの作業となったわけですが、このようなWordpress環境となっています。

・使用サーバー
エックスサーバー X10プラン

・使用テーマ
Elephant-Business(Elephant2の子テーマ)

・使用しているプラグイン
→25個

・プラグイン「WP-Optimize」でデータベースの最適化をその都度行う

そして、作業前に計測したものがこちらです。

・PCの数値=「12」

・スマホの数値=「69」

がみたか
スマホはそこそこやけど…
偉大な冒険家
PCが絶望的だなw

以前に一度相談は受けていたのですが、PageSpeed Insight をかなり軽視していたので様子見をしていただいていたのですが、この記事を読んで改めて改善したくなったそうです。

「PageSpeed Insights(スピードテスト)」の数値を改善するためにやった6つの作業

Wordpressは一人一人環境が違うため、必ず同じように改善できるという保証はありませんm(_ _)m

PageSpeed Insightの数値を改善してみた

ここからは改善作業と、その都度計測した数値と合わせて書いていこうと思います。

数値の改善作業その1:下準備

  • プラグインアップデート&整理
  • プラグイン「wp-optimize」インストール&データベースの最適化
  • プラグイン「wp-fastest cache」のインストール&設定
  • プラグイン「リビジョンコントロール」(直接効果は無いが、リビジョン保存数3
リビジョンコントロール」は検索で見つからないので直接インストールしました。

・PCの数値=「13」

・スマホの数値=「68」

偉大な冒険家
これといった改善は見られないな…
がみたか
まあ、ここからやね^^

数値の改善作業その2:プラグイン「BJ Lazy Load」「Autoptimize」インストール&設定

BJ Lazy Load」は、画像の読み込みをスクロールに合わせる(読み込み遅延)させることで、表示速度を上げるプラグインです。

Autoptimize」は、「HTML」「CSS」「JavaScript」のコードを最適化してくれるプラグインですが、Elephant2系のテーマで使う場合「JavaScript」の最適化をすると不具合を起こします。(スマホのメニューが開きっぱなしになる

そのため「HTML」と「CSS」のみ最適化しました。

・PCの数値=「29」

・スマホの数値=「71」

偉大な冒険家
おおっ!少し良くなったぞ!
がみたか
それでも前回のスタート時と同じ数値なのでうまくできるか不安だなぁ(^_^;)

数値の改善作業その3:トップページに使われている画像を圧縮する

EWWW Image Optimizer」は有名な割に全然画像を圧縮してくれないので、

  1. トップページに使われている画像(新着記事のアイキャッチ画像含む)をダウンロード
  2. 画像圧縮サイト「Optimizilla」にて画像を圧縮

具体的には、こんな感じで圧縮することができました^^

  • ヘッダー1.5MB67KB
  • ウィジェット(ギャラリー)平均1MB平均300KB
  • トップページ画像(カテゴリー一覧)→平均70%削減
  • アイキャッチ画像直近10記事
がみたか
たしかに1MB以上あるとめちゃくちゃ重いよね(^_^;)

あとはそれをアップロードして貼り直しをして完了。

・PCの数値=「82

・スマホの数値=「67

偉大な冒険家
PCがスマホを抜いてめっちゃ改善したぞ!
がみたか
ここで体感レベルでスピードが上がったような気がします(^_^;)

数値の改善作業その4:コンテンツのアニメーションを廃止

ページのスクロールに合わせて「ふわっ」「ふわっ」とコンテンツが表示されるとカッコいいですよね!

ですが、そのためのJavaScriptを読み込む必要があるため、ページスピードはどうしても遅くなってしまいます。

この木城さんのサイトでも「Shortcode Ultimate」というプラグインを使ってアニメーションを多用していたのですが、思い切ってやめてみました。

・PCの数値=「83

・スマホの数値=「73

偉大な冒険家
もうやり切った感があるなw
がみたか
PC・スマホ共に目標の70%超えは達成したのでここまでにしておこうw

速度表示の改善作業:まとめ

今回の見所はやはり「PCの数値改善」で、そのポイントとして「画像の容量」がキーポイントだったみたいですね^^

もし、数値がなかなか改善されなくて困っているのであれば、まずは画像を徹底的に圧縮してみることをオススメします!

では、今回のビフォーアフターを載せておきますね^^

・ビフォー「12

・アフター=「83

最後に協力していただいた木城さんありがとうございました!

そんな木城さんは、東京・表参道で、ランナーに特化した筋膜整体を提供しています。

東京にお住いの方で「なんか足の痛みがなかなか引かないな」「走っている最中に怪我をした」という方がいらっしゃれば、ぜひ木城さんのサロンで相談してみてください^^

https://kishiropt.com/

前回の検証記事も合わせて読んでみてください^^

「PageSpeed Insights(スピードテスト)」の数値を改善するためにやった6つの作業

では、今回はこの辺で!また次の記事でお会いしましょう^^

ブログ運営者のためのサポート保険!

ブログのトラブルや困ったことに時間を取られて

自分のやるべきことが出来ていない人のためサービスです!


無料メールマガジン

WordPressに関するお役立ち情報や、

『WordPressに詳しくなるメール講座』を配信しています!


知識・経験ゼロから、

Webクリエイターを目指すためのメール講座を配信しています!


『ちょっと困った』時のスポットサポート!

WordpressやWebに関する「ちょっと困った」を、

30分 4,400円〜で解決するサービスです!


Wordpressのお引越し!

安心・安全・快適で、ブログサポーターがおすすめする、

Xサーバーへのお引越しを代行します!


ブログサポーターがみたかでは、
アフィリエイター様を募集しています!

記事が気に入ったらシェアをお願いします^^