"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

GoogleのWEBパフォーマンス計測ツールで自分のはてなブログの計測と対策をやってみた

f:id:arakan_no_boku:20190301193447j:plain

目次

GoogleのWEBパフォーマンス計測ツール

GoogleのWEBパフォーマンス計測ツールが新しくなりました。 

ツールはここから使えます。

developers.google.com

 

画面イメージと使い方

画面はこんな感じ。

f:id:arakan_no_boku:20220407233558p:plain



使い方は、テキストボックスにURLを貼り付けて「分析」ボタンを押すだけです。

試しに、Googleのブログページで分析してみます。

結果は、「パソコン」と「モバイル」の2通りの結果がでます。

まずパソコンは。

f:id:arakan_no_boku:20181122202720j:plain

100%!

速い!

さすが、Googleのやってるブログです。

自分ところのツールで下手な成績はだせないですものね(笑)

では、今度はモバイル。

f:id:arakan_no_boku:20181122202805j:plain

52%・・。

まあ、ぎりぎり普通ですが、49以下が「遅い」であることを考えると、けっこう厳しめですよね。

なるほどなあ。

このツールは「ガチ」なんだなということですね。

 

僕のブログをパフォーマンス計測

上記を参考値として、今度は自分のブログ(はてなブログ)をやってみます。

https://arakan-pgm-ai.hatenablog.com/

まずはデスクトップから。

f:id:arakan_no_boku:20220407234013p:plain



55%か。

ぎりぎり、踏みとどまってる「中の下」ですか・・。。

で・・、モバイル(携帯電話)は。

f:id:arakan_no_boku:20220407234159p:plain

OUTです。

超遅いです。

とはいえ。

ツール「PageSpeed Insights」は実態と原因を知って、改善するためのツールです。

分析結果の詳細と改善すべき項目のアドバイスを見て、対応できるかやってみます。

 

改善できる項目でやれることをやってみる

結果に対して改善できる項目を教えてくれてます。

f:id:arakan_no_boku:20220407234733p:plain

ざっくりした一覧に見えますけど、各行をクリックすると明細が表示されます。

改善すべき具体的な画像ファイル名とか、スクリプト名などと、対応することで改善できる秒数などの見積もりとか、なかなかの情報です。

使用していない JavaScript の削減が圧倒的ですので、ここを対処すればよさげです。

しかし、内容を確認してみましたが・・。

ほぼ、はてなブログが内部で使っているとしか思えないJavaScriptのオンパレードです。

手のだせる部分はありません。

そのほかの項目も同じです。

「オフスクリーン画像の遅延読み込み」とか、「JavaScriptの最小化」・・などの対策もはてなブログ側で頑張ってもらわないと、こちらでやれる部分はほぼありません。

画像で「次世代フォーマットにする」も試してみましたが、だめでした。

次世代フォーマットと言われているのは以下の3種類の画像ファイル形式のことです。

JPEG 2000(拡張子 jp2、j2kなど)

JPEG XR(拡張子 jxr など)

WebP(拡張子 webpなど)

恥ずかしながら、自分はどれも使ったことがありません。

でも、JPEG2000JPEG XR、WEBP すべて、はてなブログで写真を投稿しようとすると「未対応のファイル形式です」と表示されて終わりでした。

 

サイドバーに表示する情報を減らすのは効果ありです

打つ手がないのも悔しいので、はてなブログのサイドバーに表示している画像とかの情報をへらしてみることにしました。

サイドバーの最近のアクセスを消してみました。

ここに、アクセス数の多い順に10個、アイコン画像付きでならべていたのですが、その画像が「オフスクリーン画像の遅延読み込み」にのっていたので、ひょっとしたら、これを減らすことでスピードがあがるかも・・と思ったからです。

結果は、デスクトップが。

f:id:arakan_no_boku:20220408000348p:plain

モバイル(携帯電話)が。

f:id:arakan_no_boku:20220408000607p:plain

上がりましたね( ^)o(^ )

しかも、改善できる項目が、一気にへっています。

f:id:arakan_no_boku:20220408000715p:plain

はてなブログのサイドバーに、情報を表示させるってパフォーマンスに影響があったんですねえ。

いやいや・・勉強になりました。

今後、ちょくちょくチェックしていく必要がありますね。

ではでは。