"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

Googleツールでパフォーマンス計測。自分のはてなブログはモバイルで超遅い!トホホ。

GoogleのWEBパフォーマンス計測ツールで自分のブログの時間計測をして、改善できる点がないかを確認してみた・・という話です。

f:id:arakan_no_boku:20190301193447j:plain

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

 

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

webmaster-ja.googleblog.com

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

PageSpeed Insights

画面はこんな感じ。

f:id:arakan_no_boku:20181122202211j: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:20181122222204j:plain

75%か。

まあ、平均の真ん中くらいですね。

ちょっと安心。

で・・、モバイルは。

f:id:arakan_no_boku:20181122222438j:plain

27%かあ((´;ω;`)ウゥゥ。

超遅いですねえ。

とはいえ。

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

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

 

改善項目を確認する

 

さて。

さっそく確認してみます。

このブログにおける改善できる項目を教えてくれてますから。

f:id:arakan_no_boku:20181122223906j:plain

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

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

まず。

自分が追加したJavaScript(数式表示など)などが遅くて、この結果になっているかどうかを見てみます。

それなら、自分で対策もうてますので。

でも、診断をみると。

圧倒的に時間がかかっていたScriptはこれでした。

/js/hatenablog.js?version=27681eb…&env=production(cdn.blog.st-hatena.com)

ああ。

自分の追加したものではなさそうです。

ちなみに、時間でいうと、このスクリプトが約4200ミリ秒で、自分の追加したスクリプトはどれも大体約150ミリ秒くらい。

うーーん。

手のだせる部分ではないですね。

それ以外の部分も、なんせ「はてなブログ」なので、「オフスクリーン画像の遅延読み込み」とか、「JavaScriptの最小化」・・などの対策も自分でできる部分はほぼありません。

できるとしたら。

貼り付ける画像を「次世代フォーマットにする」くらいですかね?

なので、それだけでも試してみます。

 

はてなブログで、次世代フォーマットは使えるのか

 

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

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

JPEG XR(拡張子 jxr など)

WebP(拡張子 webpなど)

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

でも、25%くらいサイズが小さくなるらしいので、確かにモバイルでは効果があるかもしれません。

ということで。

これらの次世代フォーマット画像を作って、はてなブログにアップロードが可能かを試してみました。

次世代フォーマットへの変換は「XnConvert」を使いました。

freesoft-100.com

ひとつで、すべての次世代フォーマットに変換することができますから。

ただ。

結果はとても残念なものでした。

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

あれあれ。

じゃあ、打つ手ないじゃん・・。

ということで。

今のところ、モバイルだと多少遅いかもしれませんが、ご容赦くださいね。

これしか言えません(笑)

まあ、すぐに「はてな」の方たちが高速化対策をとっていただけるでしょうし、あくまで現時点だけの話でしょうし。

とりあえず、Googleのパフォーマンス計測ツールは「ガチ」で、自分の管理しているサイトとかだと有益な情報がえられるのは間違いない。

それを確認できたことで良しとします。

ではでは。