続・激重はてなブログを快適ブログに改善するまでの道のり【GTMetrix D → C / Google PageSpeed Insight 51 → 81】
ドリリウムは移転しました。
約5秒後に自動的にリダイレクトします。
当サイトはGoogle PageSpeed Insightで30点以下をマークした激重クソブログですが、Google PageSpeed Insightの指摘事項をもとに改善を施し、最終的に37点をマークしました。
前回の記事はこちら：激重ブログを快適ブログに改善するまでの道のり【Google PageSpeed Insights：31点】 - ドリリウム
今回は、同様にページの表示速度を評価してくれる「GTMetrix」を使って、更なる改善を図りたいと思います。
GTMetrixによる計測と対策
Google PageSpeed Insightに次いで有名と思われるGTMetrixを使ってページの表示速度を評価しました。
結果は以下の通り、既に回前後であるにも関わらず「D」という低評価です。
Google PageSpeed Insightに比べると、かなり詳細にチェックされていることがわかります。
改善ポイントも詳細に示してくれるので、ページの表示速度を改善したい場合にはGoogle PageSpeed Insight以上にオススメできます。
それでは早速すべての項目に対して改善策を施していきたいと思います。
- GTMetrixによる計測と対策
- Javascriptの読み込みタイミングの最適化（Defer parsing of JavaScript）
- 同じ画像は1つのリソースにまとめる（Serve resources from a consistent URL）
- ブラウザキャッシュの有効化（Specify a cache validator）
- 画像の最適化（Serve scaled images）
- ブラウザキャッシュの活用（Leverage browser caching）
- Webページのgzip圧縮（Enable gzip compression）
- Javascriptのコンパクト化（Minify JavaScript）
- リダイレクトを減らす（Minimize redirects）
- 途中経過
- GTMetrixでスマホページを評価する
- Javascriptの読み込みタイミングの最適化（Defer parsing of JavaScript）
- 画像の最適化（Serve scaled images）
- リダイレクトを減らす（Minimize redirects）
- はてなブログのスマホ版って激重なんじゃない？
Javascriptの読み込みタイミングの最適化（Defer parsing of JavaScript）
前回、既にasync属性やdefer属性を付与して最適化したものと思っていたJavascriptのコードですが、GTMetrixによるとまだまだF評価となっています。
具体的な結果は以下の通りです。
ほぼすべてがはてなブログを使う以上避けられないものですが、緑はjQuery、青は広告関係、黄色でマークした自サイトのURLはデザイン設定などから追加した独自のコードです。
jQueryは他のコードが処理される前に読み込まれる必要があるためasyncもdefer属性も付与していませんでした。
しかし、今回の結果からasync属性を付与して非同期で読み込みを行うように設定を変更しました。
更に、これにあわせてその他のJavascriptコードはすべてdefer属性を付与しました。
広告や独自コードはすべて、ページ読み込み後の処理でも全く困らないからです。
方法は、前回の記事でも紹介していますが、すべてのscriptタグに「async」または「defer」を付与するだけです。
付与前の例
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script> 何かの処理 </script>
付与後の例
<script async type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script defer> 何かの処理 </script>
asyncとdeferの使い分け
asyncとdeferには、それぞれ以下のような違いがあります。
async：ページを表示しながら並行してコードを読み込む
defer：ページの表示がすべて終わってからコードを読み込む
同じ画像は1つのリソースにまとめる（Serve resources from a consistent URL）
何の事だろうと思ったのですが・・・・。
サムネイル画像に同じ画像を使っているのですが、別々にアップロードした別の画像なんです。
これは単純なミスで、そもそも別の画像をサムネイルに使おうとしていたので、サムネイルを正しいものに差し替えました。
▼こういうことでした。
これって非常にありがちなパターンです。
今回はGTMetrixで当サイトのトップページを評価しました。
そのため偶然サムネイルの誤りからこの問題が発覚しました。
しかし、企画ものの記事で長編になると、同じ画像を使うシーンも増えてきます。そうした時に、過去にアップロードしたものを使うのではなく改めてアップロードしなおすことって、よくやってしまいますよね。
これは今後注意しようと思います。
ブラウザキャッシュの有効化（Specify a cache validator）
有効化、というかキャッシュを活用しやすくするための機能です。
EtagあるいはLast-modifiedを明示することで、積極的にブラウザキャッシュを使ってページの読み込み速度を向上させることができます。
GTMetrixはEtagとLast-modifiedが指定されていない要素を指摘してくれるのですが、はてなブログを使う以上はどうにも手出しできそうにありません。
画像の最適化（Serve scaled images）
大きな画像をそのままアップロードし、HTMLやCSSで表示サイズを指定して表示する。
よくあるパターンですが、ページを開いた人は表示サイズ以上の大きな画像を読み込む必要があるため、ページの表示速度を改善するためには絶対に対策が必要なポイントです。
既に対策を終えていたつもりですが、見落としがありました。
GTMetrixでは、このように実際に対象となる画像URLを提示してくれます。
クリックすれば問題の画像が開けるため確認が容易です。GTMetrix最高。
さて、今回指摘された画像はパソコン版でサイドバーに表示されているプロフィール画像（下図）です。
大きめの画像をサイドバーに合わせて縮小表示していました。
これを、表示サイズに合わせて縮小した画像に差し替えました。
ちなみに、過去にアップロードしたすべての画像を差し替えるのは気が遠くなる話です。
ですから、私の場合には今後アップロードするすべての画像を表示サイズにあわせて小さくしていく予定です。
そのために、画像にウォーターマークを追加するソフトを自作し、ウォーターマークを付与する際にあわせて画像サイズも縮小できるように仕様変更しました。
【WaterMarker】ウォーターマークを一括処理する超シンプルなソフトを作りました【Windows】 - ドリリウム
ソフトはVectorで公開していますが、当記事が掲載された時点ではサイズの自動縮小まで反映されていないかもしれません。
Vectorでは新しいバージョンのソフトをアップロードしても、反映まで1～2週間かかってしまうためです。
ブラウザキャッシュの活用（Leverage browser caching）
GTMetrixの指摘によると、サイトの基幹デザインやそれに使用される画像は1年、それ以外は1週間を目安として示しています。
しかし残念ながら、はてなブログでは（僕のわかる範囲では）独自にキャッシュ期間を指定できるような設定項目はありません。
Webページのgzip圧縮（Enable gzip compression）
Webページをgzip圧縮することで、サイズが小さくなり表示速度の向上に寄与します。
今回指摘されているURLを見ると、Amazonアソシエイトのモバイルポップオーバーという種類の広告です。
残念ながら打つ手なしです。
Javascriptのコンパクト化（Minify JavaScript）
Javascriptのコードは開発時点では、主に見やすさを優先して多くの改行やコメントが存在します。
こうした無駄を切り詰めて、コードを小さくするというのは常套手段です。
GTMetrixでは、無駄を切り詰めたコンパクト版まで用意して提示してくれるのですが、残念ながらはてなブログユーザーがいじることが出来る領域ではありません。
はてなブログの開発チームがよりコンパクトなコードを作ってくれることを祈るしかありません。
リダイレクトを減らす（Minimize redirects）
広告を表示した場合には大抵表示されるでしょうが、広告を表示するのであれば避けては通れません。
広告か表示速度、どちらかを取るしかありません。
途中経過
ここまでで、評価の低かった8項目を対処しました。（打つ手なしの項目もありましたが）
一度これで途中経過を見てみましょう。
- PageSpeed ScoreはD（66%）からC（71%）へ向上。
- Fully Loaded Timeは5.6秒から4.2秒へ向上して75%に。
- Total Page Sizeも0.06MB減少しました。
なかなかいい具合です。
一端、ここでGoogle PageSpeed Insightの評価もチェックしてみます。
スマートフォン版はとんでもないクソスコアです。相変わらず。GTMetrixではパソコン版を評価していましたから、仕方がないです。
パソコン版は劇的に向上しています！
前回は51点でしたが、81点というなかなかの評価です。あと一歩で優秀と言って差し支えない90点台へたどり着けそうです。
GTMetrixでスマホページを評価する
続いてGTMetrixでスマホ版の表示速度を評価及び改善していきます。
GTMetrixでスマホ版の表示速度を評価するためには、サインアップ（アカウント登録）が必要です。
サインアップができると、ダッシュボードが表示されます。
オプションから、Androidを選択することでスマホ版のページを評価することができるというわけです。
Google PageSpeed Insightの散々な結果から予想はできていましたが、Fという恐ろしく低いスコアです。
改善しましょう。
Javascriptの読み込みタイミングの最適化（Defer parsing of JavaScript）
先ほどパソコン版で行ったものと全く同じです。
しかし、問題があります。
はてなブログを構成するベースとなっていると思われるJavascriptがなぜか3回も読みだされています。パソコン版ではもちろん1回でした。
これに伴い、jQueryやその他の外部リソースも3回読みだされており、劇的に悪い評価につながっています。
原因がわからず、対処しようもないため、あまり期待はせずはてなブログのサポートに問い合わせてみました。
進展があれば追記します。
画像の最適化（Serve scaled images）
パソコン版でも対応した、表示サイズとかけ離れた画像の実サイズを適正化するものです。
しかし、はてなブログではスマホ版だけ画像を変更することは難しく、運用を考えても現実的ではなさそうです。
この項目については諦めるしかないかもしれません。
今後、パソコン版で画像のサイズを適正にしていくにしたがって、やや改善するとは思いますが、抜本的な改善にはならないでしょう。
リダイレクトを減らす（Minimize redirects）
パソコン版でも広告を表示しているためにいくつかのリダイレクトがありましたが、スマホ版では大量のリダイレクトが見つかりました。
スマホ版、特に今回表示しているトップページともなれば広告はほとんどありません。
こちらも原因不明です。
面倒くさがって使っているGoogle自動広告のせいかもしれませんが、実際にソースコードをチェックしてもどこにも広告はありません。
何度か評価を繰り返すと、全くリダイレクトが見当たらず、Minimize redirectsの項目がAの時もあります。最高評価のAだったり、最低評価のFだったりして、謎です。
試しにGoogle自動広告やAmazonアソシエイトのモバイルポップオーバーを除去しても、結果は変わりませんでした。
はてなブログのスマホ版って激重なんじゃない？
パソコン版でもはてなブログを使っている限り対処不可能な項目が多かったですが、スマホ版ではもはや打つ手がありません。
「もしや」と思って調べてみると、どうにもはてなブログはスマホ表示がすごく遅いみたいです。
スマホでのはてなブログの表示が重い・遅いのでできること - ブラットサンダー
表示速度が遅いはてなブログを軽くする方法 - Random Life Blog
はてなブログのページ読み込みがスマホのみ遅すぎる問題について・・・ - Future Nova
これははてなブログの宿命みたい。
広告関係は遅延表示する、画像は出来るだけ小さくする。
これくらいしか対処方法がありません。
表示速度にこだわるなら、現時点のはてなブログは論外ということです。
