頭の上にミカンをのせる

マンガアニメ大好き兼業投資家の日記です

とりあえずこのブログがどのくらい遅いかを「Page Speed Insights」というページで確認してみた

developers.google.com
測定してみたら、PC版は71点なのに対してモバイル版が29点という致命的な状況になっていました。

といってもこれほんまどうすればいいんや……。

とりあえずこちらのサイトなどを参考にして改善しようとしたんだけど……
https://www.iiie.nagoya/entry/2018/12/04/101844

結論としては、「無理」です。

ぜんぜんわかんない。こっちの方向の改善はあきらめます。

Googleはページの画像読み込みやレンダリングブロックの除去などの小手先の施策よりも、Webページ自体の軽量化(省HTML/CSS, 省JavaScript)を推奨しているように感じました。

https://blog.right-apps.com/develop/2018/page-speed-insights-renewal-diagnosis/

せめて、今後意識しようと思った点があるのでそれを記述しておきます。

画像の使用はできるだけ控えたり、使うときはちゃんと圧縮しようと思った

一番わかりやすい原因は「オフスクリーン画像の読み込み」

①オフスクリーン画像 

オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。

https://blog.rokuzeudon.com/entry/lazy_loading
https://www.viaggiolog.com/entry/hatenablog-lazyload
なるほど、わからん。無理。

ただ、一つだけ改善できるところがあって、それは「そもそもアイコンの画像が重たすぎる」という点です。
というわけで、悲しいけどアイコンに使用していたヌヌハラちゃんとはいったんお別れだよ……。あと、数記事前で利用していた「蒙古タンメン中本」の画像が無駄に重たかったですw

というわけで、今後アイキャッチに使う画像は容量を小さくする、ということで妥協します。
 
こちらのサイトが便利。

imagecompressor.com


②次世代フォーマットでの画像の配信  0.66 s
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます

これも画像がらみですね。とにかく画像を考えなしにペタペタ貼らなければ大丈夫みたい。
というか、しばらく必要がなければAmazonリンク以外の画像は使用しないことにします。
どうしても画像を使用したい場合は、アクセス数が少ないサブブログを犠牲にします。

はてなスターとか、もう外したほうがいいですかね?

JavaScript の最小化 0.57 s
JavaScript ファイルを最小化すると、ペイロード サイズとスクリプトの解析時間を抑えることができます。

「Javaスクリプトの最小化」はよーするにはてなスターとかはてなブックマークボタン外せってことらしいです。

この項目に列挙されてたのはほとんどはてなスターとはてなブックマークボタン、読者登録ボタンがらみです。
いつもはてなスターしてくれてる人、良かったら今回はコメント下さい。誰も反対しないならはてなスター外すかもです。

本当にヤバイのはアプリケーションのパフォーマンスの方なんだけど……ぜんぜんわからん

ウェブフォント読み込み中のテキストの表示

フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください

メインスレッド処理の最小化 14.1 秒

JS の解析、コンパイル、実行にかかる時間の短縮をご検討ください。配信する JS ペイロードのサイズを抑えると効果が見込めます

https://terukosan.com/pagespeedinsights/about_pagespeedinsights/mainsled/

PageSpeed Insightsでサイトをチェックすると、Googleが親切にも縮小したコードを作成してくれます。これらをダウンロードして使うものあり。その際、もともとのファイルは残しておきましょう。今後、変更があった時はオリジナルを変更して、反映させる際に縮小させて使います。
google

CSS MinifyというWebサービスを使えば、CSSを貼り付けるだけで縮小したCSSを作成してくれます。これを使ってもOK

https://iritec.jp/web_service/12067/

残念ながらこの機能はいまはもうないのかな?


静的なアセットと効率的なキャッシュ ポリシーの配信 60 件のリソースが見つかりました

キャッシュの有効期間を長くすると、再訪問したユーザーへのページの読み込み速度を向上できます


JavaScript の実行にかかる時間の低減  9.9 秒

JS の解析、コンパイル、実行にかかる時間の短縮をご検討ください。配信する JS ペイロードのサイズを抑えると効果が見込めます



過大なネットワーク ペイロードの回避 合計サイズは 3,185 KB でした

ネットワーク ペイロードのサイズが大きいと、ユーザーの金銭的負担が大きくなり、多くの場合、読み込み時間が長くなります


クリティカルなリクエストの深さの最小化 12 件のチェーンが見つかりました

下のクリティカル リクエスト チェーンでは、高い優先度で読み込まれたリソースを確認できます。チェーンの長さを縮小する、リソースのダウンロード サイズを抑える、不要なリソースのダウンロードを遅らせるなどしてページの読み込み速度を改善することをご検討ください。 クリティカル パスの最大待ち時間: 5,020 ms



あまり成果は得られませんでした!

というわけで、アドセンス外しただけですが、一応スコアが29→34になりました(それだけかーい!)


・アドセンスの広告は控えめに

・せめてこれからは、圧縮した画像を使うことと、画像や動画はあまり記事中で使わないこと

・いろんなところから引用するのはいいが、リンクはあまりペタペタ貼らないこと

の3つだけは実行しようと思います。

多分もうちょっとしたらこの効果で改善されてくると思います。



それよりも、今後はよりテキストで勝負していかないといけないということを肝に銘じておこう。