attention admin about comments trackbacks you may also like

Googleの「PageSpeed Insights」に最近Lighthouseが組み込まれてとても使いやすくなった

2018年11月27日
Topics
0
モバイルフレンドリー Google PageSpeed Insight Lighthouse GTmetrix レスポンシブテンプレート

自身のブログをGoogleの「 PageSpeed InsightsPSI) 」で、表示速度分析とその改善利用しているブロガーさんはけっこう多いですよね、アフィリエイトブログでしたら必須ツールと言っても過言ではないくらいです。

えっ? PageSpeed Insights なんて知らない? では、とりあえずでも下記ブログカードをクリックして表示されるページの [ ウェプページのURLを入力 ] 欄に、あなたのブログのURLをコピペして「分析」をクリックしてみて下さい。


PageSpeed Insights

あらゆる端末でウェブページの読み込み時間を短くしましょう


そして、ちょっとの時間待つと、あなたのブログをスマートフォンやタブレットと言ったモバイル端末で閲覧した時の表示速度評価と、その改善を必要とする内容を表示してくれる、とても便利なツール それがこの PSI なんです。

さて、あなたのブログ表示速度評価はどうでしたか? 筆者ブログの場合には下図のようになりました。

PSI評価結果 速い

良い結果ですよね~(笑) 「速い」「平均」「遅い」の3段階評価で一番良い結果が出ました ホッ♪ (笑)
スコアで 98 と言う数値が表示されましたが、この数値はこの PSI を利用する時間帯によっては、インターネット回線(正確には、モバイル回線の3Gを想定した回線速度でテストしている )が混雑していたりすると、-2 ~ -3 と言う程度にバラつくことがありますから、時間をおいて複数回測定するとよいでしょう。
とりあえずはパソコン側も参照しておくと良いと思います。


ブログのスマホ表示速度改善には PageSpeed Insights が更に使いやすくなった

実は、このGoogleの PageSpeed Insights の分析エンジンに、最近 Lighthouse が改良組み込みされて、それにより、普段から GTmetrix で自身のブログ分析と表示速度改善を努力している人には、ますます有利な結果が出るようになったように感じられます。

この Lighthouse は、以前より単体ツールとしてChromeの拡張機能として存在しておりましたから、既に利用している皆さんもおられることでしょう。

Lighthouse

そして PSI と融合して、より素晴らしいツールとなった次第です。
いまや、Googleのサイト検索順位評価は、モバイルファーストインデックス = MFI(Mobile First Index)が始まって、パソコンでの閲覧からモバイル端末(スマホやタブレット)での閲覧評価にシフトした時代になった訳でして「ブログ表示速度が遅い(重い)と、それが検索順位を下げる評価になったことをGoogleも公式発表しました。

SEO対策だけではもうあなたのブログは出し抜かれてしまう

もう過ぎたちょっと前の時代に「SEO対策はこうやる!」的ハウツー記事がたくさん書かれましたが、今の時代はそれだけで安穏としていたのでは「同種・同カテゴリ」のブログやサイトには負けてしまうようになったんです (^_^; アハハ…
そうなんです! 今の時代(笑)にはもう「何が何でもSEO~SEO~SEO~!」だけでは遅れを取ってしまうようになり、それと平行して「ブログ表示の高速化は必須な時代に移った」と言うことなんです、それは当然でして、パソコンのインターネット回線に比べると、モバイル回線速度はまだまだ遅い訳でして、より速く表示される(表示ストレスとなる要因を取り除く)ように努力することは、ブロガーとして必須と言うWEB潮流になったと言うことなんです。

ところで、ブログ表示速度を速くする主な目的とは、、、

  • モバイル端末の普及でその低速度回線でも、ブログ等が余分な負荷なく表示されることが求められるようになった
  • モバイル閲覧ユーザーの「全部表示されるのを待たされるストレス」を軽減してブログからの離脱を未然に防ぐ

このような自己努力を、ブロガーさん自身が実施することを求められるようになった訳です。
某統計では、ページが完全表示されるまでに3秒待たされると、約50%の閲覧者が即離脱(直帰)すると言われておりますから、自身のブログ表示速度には関心を持つ必要があるのです。
この辺りは、ブログにアクセス解析を設置してあると、掴めるデータではあります。

念力で「私のブログ表示よ、速くなれ~!」なんて念じても、まったくムダな抵抗なんです(爆) 速くする為の物理的努力が必要で、その為のツールとして、PageSpeed Insights 等を駆使出来るように、自身のスキルアップが必要と言う訳です。

私のブログは単なる自己満足ブログだから、Googleの評価なんて関係ないわ~♪

「私のブログは単なる自己満足ブログだから、Googleの評価なんて関係ないわ~♪」ってブロガーさんは、このような知識からソッポを向いてしまう(難しそうに感じるから最初から逃げてしまう)人が多いんでしょうけど、では同じカテゴリのブログでなら、Google検索で自身のブログが他人より上に表示されたら、気分が良いでしょ~!要はそういうことなんです(笑)

アクセスランキングに登録して、ブログにそのバナーも貼っているって、要はそう言うことでしょ~ ( ̄ー ̄)ニヤ
ほら、やっぱり関係なくなんてないでしょ!(爆)
ほんとに関係ないんでしたら、ランキングバナー貼るのやめなさいってば! ああ、言っちゃった ( ̄∀ ̄*)イヒッ
それがほんの小さなバナーでも、その分表示時間にはプラスされているんですから、関係なければ、外したらその分だけブログ表示は速くなるんですからね(爆)

あなたがブログに貼り付けている画像は「軽量化」してありますか?

ブログには、様々な画像を記事に貼ったりしますよね、それらの画像って、あなたはしっかり「軽量化(圧縮軽量化)」してから貼っておりますか? それでないとブログ表示に余分な負荷が掛かって、表示速度が遅くなってしまうんですよ、不本意でしょうけど (^_^; アハハ…

弊ブログの前々記事で、、、


これは凄いぞ! Googleのブラウザ画像圧縮WEBアプリ【Squoosh】

以前に、弊ブログで 『 GIFアニメーションや画像を劇的に軽量化する無料サービス 』 として、取り上げた Compressor.io GIFアニメーションや画像を劇的に軽量化する無料サービス弊ブログでは記事中にGIFアニメーションや画像をよく載せておりますが...


画像を圧縮軽量化するGoogleの優秀なWebアプリ 【Squoosh】 の紹介を致しましたが、このようなツール(他にもたくさんあります)を使って軽量化した画像をブログに貼ることで、ブログの表示速度は未対策なブログより格段に速くなります。
もうパソコンでの表示速度はあなたの頭から除外して、モバイル回線での表示具合にあなたの常識を切り替えましょう。

PageSpeed Insights での表示速度改善分析内容のサンプル

弊ブログでは、おかげさまでPSIで高評価を得られているものですから「改善できる項目」が少なくて、あまりサンプルにはなりませんが、とりあえず現状の、まだもう少し改善が必要と指摘されている項目部分のスクショを貼ってみます。

上図の「オフスクリーン画像の遅延読み込み」をクリックした開いた下部に、その対象となる画像とURLと、その右側に「サイズ 減らせるデータ量」が見えますが、弊ブログでは、ブログに載せる画像は全てに於いて「圧縮軽量化した画像」で載せている(これはブロガーの最低レベルでの常識)結果、これ以上軽量化する必要がないと言う表示になっております。
それにも関わらず「改善できる項目」として表示されているのは「これらの画像の読み込みを遅延させなさい!」と指摘されているんです。

画像の読み込みを遅延させるって何のこと?」と、キョトンとしてしまう人が多いと思いますが、そういうWebテクニック(LazyLoad)があって、今の時代ではブログ表示に取り入れることはもう常識なくらいで、筆者が、我がWeb知識の師と常日頃から敬愛しておりますAkiraさん(弊ブログでいま現在利用させて戴いております、優秀なレスポンシブテンプレートの作者さん)がとても詳しく解説して下さっているので、下記ブログカードをクリックして是非にご参照下さい、そのWebテクニックにきっと目から鱗になることでしょう。


Lazyloadを使ってみる【初級編】

画像の遅延読み込み、一般的に Lazyload といわれるものですが、こちらを実際に使ってみようの巻 (´・ω・`) 手順及び説明など全て、私が制作したテンプレート上での作業であることが前提で、他製作者様テンプレートに関する言及は一切ありません。 ..


同記事には 【初級編】【中級編】【上級編】 がありますからから順に読み進めるとよいでしょう。

GTmetrix と 新しくなった PageSpeed Insights は評価分析結果が似ている

これは筆者の私感ではありますが、この記事のメインな内容になります(笑)

実は、筆者が今まで弊ブログの表示速度分析は GTmetrix で行って来て、それについての記事も複数書いて来ておりました。
そして、つい最近気がついたんですが、どうやら GTmetrix での分析結果と、新しくなった PageSpeed Insights での分析結果が、ほんとによく重なっている(似ている)ことに気がついたんです(笑)

ぶっちゃけた話、今の弊ブログでの GTmetrix 分析のパソコンでの表示速度分析(GTmetrixはパソコン表示分析がメイン)結果は下図のようになっております。

嬉しいことに、今まで GTmetrix を利用してブログ表示速度の改善努力を進めて来た結果として PageSpeed Score A(100%) のように高評価を得られるようになったんですが、この数値結果が似ていることを言っているのではなく(笑)、その改善項目の1つ1つの詳細内容が似るようになったのです。

PSIの分析エンジンに Lighthouse が組み込まれる以前は、GTmetrix と PSI 両ツールの分析項目はまったくちぐはぐな内容で、GTmetrix側で改善努力をするとPSI 側の評価が下がってしまうと言うことが多々起きており、筆者も「どうすりゃいいのよ!」と、とても困惑されられたものでしたが、いま新しくなった PSI は大歓迎(笑)な結果を得られるようになって、とても喜んでいる次第です ホッ♪

ブログ表示速度改善の強力なツールは、やはり GTmetrix ですね

新しくなった PSI は歓迎しているのですが、筆者的にはちょっと物足りないんです。
それは何かと言うと、表示速度改善項目が少なく大雑把な内容で GTmetrix よりもツールとしてのパワー不足を感じるんです (^_^; アハハ…

ということで、やはり GTmetrix をメインツールとして活用して、その改善努力の結果は、モバイル表示評価として PSI で確認する! と言う方法が一番ベターであるように解釈しております。

そして、GTmetrix での分析での改善項目の中で、下記の4項目で該当するものがありましたら、それらを徹底的に改善努力をすることで、弊ブログのような PageSpeed Score A(○○%) の結果を得られやすくなると思います(筆者もこれを徹底的に改善しました)

  1. Serve scaled images(スケーリングされた画像を配信する)
  2. Optimize images(画像の最適化)
  3. Defer parsing of JavaScript(JavaScriptの解析を延期する)
  4. Minimize redirects(リダイレクトを最小限に抑える)

上記4項目での具体的改善方法は、Google検索で 『GTmetrix Serve scaled imagesとは』のように検索すると、先人の皆さんの素晴らしく分かり易い多彩な解説記事が得られますので、それらを参考にしてみて下さい。
とは」の文言を付記することで、より具体的な検索結果が得られるようになります。

ブログ表示の高速化の要点は、レスポンシブテンプレートを採用することにある

さて、この記事では「モバイル機器でのブログ高速表示分析と改善についてのツール利用」のようなニュアンスになりましたが、筆者が結論付ける一番のメインは、実は「幾らそれらの素晴らしいツールを駆使して表示速度改善努力を行っても、最高の結果が反映されないブログテンプレートもある!」と言う、恐怖的な結論付けを行うことにあります(爆)

そうなんです、あるんです、そういう恐怖いっぱいのブログテンプレート利用が (^_^; アハハ…
そう、改善努力が思った以上に反映されないテンプレートとは 「 PC版固定幅テンプレート + スマホ版テンプレート」 の2部構成でブログ運営している場合なんです。

良いですか? 「PC版固定幅テンプレート」 と 「スマホ版テンプレート」は、まったくHTML構造が別物なんです。
従って、GTmetrixで幾らパソコン表示速度分析の改善努力を行っても、スマホ版テンプレートには殆ど反映されないのです。  いや、正しく言えば「個別記事」等の部分には反映はされますが「テンプレート構造に関わる改善をする」ことには「PC版固定幅テンプレート」 と 「スマホ版テンプレート」それぞれに2重の改善努力をしなければならないのです。

「え゛~? そんなぁ (´ヘ`;)ハァ」っと気が遠くなってしまうと思います (^_^; アハハ…

では、スマホ版テンプレートの利用をやめてしまいましょう(笑) そしたら、パソコン版テンプレート1つに対する改善努力だけで済みますから、とっても楽ですよね。(笑)
それを可能にするものが レスポンシブテンプレート なんです! そう、レスポンシブテンプレートを利用すれば、パソコン表示速度改善をGTmetrixで努力したら、スマホ(モバイル)表示速度改善へもそのまま直接反映されるようになる次第なんです、そう、1つのレスポンシブテンプレートでパソコンでもスマホでもタブレットでも、どんな画面幅でも適正にフィットして表示されるようになるからです。 従って、今までのスマホ版テンプレートは「利用しない」設定が出来るようになるんです。

高速表示可能なハイパフォーマンスで良質なレスポンシブテンプレート をあなたが導入することが、GTmetrix分析とその表示速度改善努力も的確に反映出来るようになるのです。
もう、あなたのブログの旧来の古~いテンプレートから、最新のレスポンシブテンプレートへと切り替えることが、スマホ表示やタブレット表示速度の改善にも直結すると言うことなんです。

レスポンシブテンプレートでも「要約表示」タイプが、ブログ表示の高速化に最適解です

そのレスポンシブテンプレートにも様々なタイプがありますが「ブログ表示の高速化」努力をするのに、一番楽な努力で済むタイプは、ブログのトップページを表示した時に、各記事欄が「要約抜粋」されて表示されるタイプ(グリッドタイプとも言う)のものが、一番負荷が少なく表示されるので有利になります。
弊ブログで利用させて戴いておりますレスポンシブテンプレートもその1つでして、スクショを貼ります。

テンプレートの要約抜粋表示タイプ

上図は、弊ブログのトップページで表示される部分の一部ですが、これがその「要約抜粋」表示になります。
各記事全文がズラズラ~っと表示されるタイプと違って、これが「トップページ表示で表示負荷を軽減させる構造」になっている次第なんです。

さぁ、皆さんも是非、ご自身のブログのモバイル表示の高速化にチャレンジしてみて下さい、それは一挙には高速化は実現出来ませんので、気長にコツコツと努力する「根性」が必要になりますからね~(笑)


Target is 100%.

[ 100% を目指そうね♪ ]

ブログのスマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

ブログのPC表示速度分析は GTmetrix が強力です!
GTmetrix

検索からの方はトップページへもどうぞ


関連する記事
ぼっちん
Author: ぼっちん
坊ちゃんじゃありません、ぼっちんです(笑)
PC弄くりは35年ほどのキャリア(ただ長いだけかも)のFC2ブロガーです。
そんな私が、初心者さんにも楽しめるWebテクを専門用語を極力省いて、体験的見地からその時のスクリーンショットやGIFアニメーションを用いて分かり易く解説致します。
対話好きですから記事に関わらないコメントでも遠慮なくしてくださいね~♪

コメント(0)

There are no comments yet.