「はてな最速化」PageSpeed Insightsを使ってサイトの読み込みスピードを改善してみた

今まであまり意識したことのなかったサイトの読み込みスピードですが、いっちょ改善してやりますかというキブンに珍しくなったので、このやる気が失せないうちにやってしまいましょう。

僕の場合は30分くらいで終わりました。簡単なので皆さんもやってみて下さい。

使う解析ツールはPageSpeed Insights

ページスピードインサイツで読み方間違えてないんかな?

おそらくあってると思います。

ちなみになぜこの解析ツールを使うのかと言うと、、、

f:id:oyomiyo:20181023134556p:plain

ここにいたからです。(特に理由はない)

謙遜にも広告の次におられたのです。

PageSpeed Insights

今の説明いる!?と全員が感じたところで説明に入ります。

ついてきなはれ。

読み込みスピードを計測しよう

PageSpeed Insightsのトップページはこのようになっています。

f:id:oyomiyo:20181023140902p:plain

この赤枠で囲ってあるところに皆さんの遅っそーーーいサイトのURL(失礼)をぶち込んであげればいいのです。

私のサイトは優秀なので良い参考にならないのが残念ですが……。(黙れ)

f:id:oyomiyo:20181023153002p:plain

URLをコピーして。はっつけて。

f:id:oyomiyo:20181023141232p:plain

墓地っっぅぅぅいいいい!!!

とやってくださいな。

そしてこっちも

墓地っっぅぅぅいいいい!!!

とやってくださいな。(=゚ω゚)ノ(調子に乗るな)

後は勝手に解析が始まります。

PageSpeed Insightsのスコアの基準

一応スコアの基準について説明しときますね。

このように説明されてました。

PageSpeed Insights では、ページがパフォーマンスに関する一般的なおすすめの方法にどの程度準拠しているかを評価し、ページのパフォーマンス改善の余地を推定したスコアを 0~100 の値として算出します。次の2つの項目について、ページのパフォーマンスが改善できるかどうかを評価します。

  • スクロールせずに見える範囲のコンテンツの読み込み時間: ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間。
  • ページ全体の読み込み時間: ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間。

※PageSpeed Insightsのガイドページからの引用

要はページ読み込み時に表示されるべき部分がどれだけ早く表示されるかと、ページ全体が表示されるまでにかかる時間の両方を考慮に入れていますよということで間違いないでしょう。

ではさっそく解析していきます。

解析結果1

まずは一回目です。

f:id:oyomiyo:20181023141752p:plain

めんどくさいのでモバイルの場合とPCの場合両方ドン。

モバイル表示が78点。PCが76点という結果でした。

……。

まあどう感じるかは人それぞれでしょう。でも自分的にはもっと高い評価を期待していましたが、、、。

ちなみに評価の基準は以下の通り。

スコアは「Good」、「Medium」、「Low」のいずれかに分類されます。この計算は、デベロッパーがページの外観と機能の変更を検討していないという前提で行われます。

  • Good: ページには、パフォーマンスに関するおすすめの方法が最大限適用されており、最適化の余地がほとんどありません。ページのスコアは 80 以上になります。
  • Medium: ページには、パフォーマンスに関する一般的なおすすめの方法の一部が実装されておらず、ある程度最適化の余地があります。ページのスコアは 60~79 の範囲になります。
  • Low: ページは最適化されておらず、最適化すべき点がかなり多くあります。ページのスコアは 0~59 の範囲になります。

※PageSpeed Insightsのガイドページからの引用

私のサイトはmediumだったので最適化の余地があることが分かります。

何はともあれ改善しないといけないのは確かですので、伸びしろがあるということでポジティブに行きましょう。

改善できることを説明してくれているのでそれを参考に読み込みスピードを改善していきます。

最適化についての提案のところにいろいろと書いてあります。

まずは赤枠の部分から改善していきます。

f:id:oyomiyo:20181023142513p:plain

あー、なるほどなるほど、、、スクロールせずに使えるコンテンツのレンダリングをブロックしているJavaScriptを排除、、、、

はっきりしゃべれ!!!!!

(理解できないのは私たちの責任です。)

f:id:oyomiyo:20181023152540p:plain

日本語に変換してみましたが効果なし。

詰んだ。

完全に詰んだ、、、、、、なんて言っている場合ではありません。

こんな時はあきらめるのではなくめんどくさがらずに調べましょう、、、。

 

50時間後。(体感時間)

 

なんとなくわかりました。

まあようは、スクロールせずに見えるコンテンツ(ヘッダーやスライドメニュー)のレンダリング(表示)をブロックしているスクリプトを消しなさいと怒られているワケですね。

スクロールせずに見えるコンテンツは初めの段階ですぐに表示しないといけない訳ですから、ここでもたついていると表示が遅れてしまうのは納得できます。スクロールして見える部分は後からゆっくり読み込んでも問題ないですからね。

そういえばヘッダーの部分で2つのスクリプトを読み込んでいました。

ひとつはgoogleフォント。もうひとつはFont Awesomeです。

私のサイトのタイトルフォントにはgoogleフォントを使用しています。

ただ有難いことに、PageSpeed Insightsを使ったおかげでありがたいことが発覚してくれました。

使ってもいないgoogleフォントをヘッダーで読み込んでしまっていたのです。

f:id:oyomiyo:20181023154510p:plain

これははてなブログの設定画面の中にあるヘッダーにコードを書き込める部分です。

赤で囲っている部分が使っていないウェブフォントです。googleフォントの日本語は比較的重いので、読み込むのはせいぜいひとつが限度だと思いますが、それを3つも読み込んでいたということです。

そもそもタイトル4文字のためだけにgoogleフォント読み込む人間もアホなのではないこと言う意見はスルーするとして、、、。

これは生贄。生贄。

ということで削除。

残るはgoogleフォント1つとアイコンフォント(Font Awesome)です。

タイトルで使用しているgoogleフォントは今のところ代用できるものが決まっていない(てかそもそも変えようとあんまり思ってない)のでそのままにしておきます。

あともうひとつのアイコンフォントについては皆さんの為にしぶしぶ改善してあげようと思さっそく改善していきます!!!

そもそもFont Awesome自体そんなに遅くなる原因にはならないとは思いますが、別のもので代用できるのであれば代用しましょう。

それで今回目を付けたのがはてなの純正アイコンです。

以前にも記事で取り上げたことがあります。

これは便利!はてなブログで手っ取り早くサイドバータイトルにアイコンを表示する方法

これを使ってあげればわざわざ別のアイコンフォントを読み込む必要性は無くなります。アイコンのバリエーションに関していえばFont Awesomeの方がいいのですが、スライドメニューで表示する分には問題ないでしょう。

イージーイージーノープロブレム。

てことで。

ビフォー。

f:id:oyomiyo:20181025001247p:plain

そしてアバター。アフター。

f:id:oyomiyo:20181025001346p:plain

アイコンの部分が若干変わっています。あとメニューの文字も書き換えていますが、ここら辺も一度整理しておきたかったので丁度良かったです。

ひとつ言えることとしては、Font Awesomeの方がデザイン的には良かったということくらいでしょうか。(今更笑)

まあほとんど人がアイコンフォントが変わったことにすら気付かないと思いますが、なんかちゃちいんですよね、はてなの純正アイコンは。

まあこのわずかな違いの為だけにわざわざヘッダーでスクリプトを読み込むかどうかは各自の判断ではありますが、今回はデザインの方を妥協しましょう。

これで速度改善されなかったら戻すけどな、、、、。

解析結果2

それでは気を取り直して2回目。

f:id:oyomiyo:20181023155359p:plain

結果はモバイル表示が85点。PC表示が77点。

 モバイル表示が大幅に改善されたのに対してPC表示ではそれほどの改善はみられていませんね。

……。(思考停止)

どういうことだ???あれだけ頑張ったのに、、、。

とりあえず静かに言い分を聞こうじゃないか。

f:id:oyomiyo:20181025004327p:plain

まずはモバイル表示の方から。

ここに読み込みを遅くする原因になっているソースが表示されます。

一回目の時はここに7つくらい表示されていたのでこれでもまだマシになったほうです。

いちばん番上が、cdn.image.st-hatena.comです。

これは、はてなブログは画像の配信に使われているホスト名なので問題ありません。

2番目が、blog.hatena.ne.jpです。

私が任意で追加したものではないので、はてな側がここから何かを引っ張て来ているようです。いずれにしても私たちが手を出せる部分ではないのでスルー。

3つ目が、fonts.googleapis.comです。

これは、さっきも言った通り私がタイトル4文字の為にわざわざ読み込んでいるgoogleフォントです。

そう考えると、、、

できる手は全て尽くしましたね。

優秀。優秀。

JavaScriptを縮小しろだのなんだのは後から考えるとして、問題はPC表示です。

ここをまず改善せねば。

f:id:oyomiyo:20181025010715p:plain

でPCの方どん。

画像を最適化しなさいだってさ。

一回目そんなこと言ってたっけ?

写真撮り忘れたので何とも言えませんね。汗

それはいいとして、モバイル表示では怒られないのにPC表示の場合怒られていることを考えると、PC表示の場合にのみ表示されている何らかの画像が読み込みを遅くしてしまっていると考えていいでしょう。

親切にもURLを全部載せてくださっていますが、特にここで調べなくてもどの画像かは大体予想がつきます。

だってPC表示の時だけトップページに表示されている画像でしょ?

f:id:oyomiyo:20181023160452p:plain

PC表示の時だけトップページに表示されている画像でしょ?

f:id:oyomiyo:20181023160659p:plain

PC表示の時だけ、、、

f:id:oyomiyo:20181023161002p:plain

オマエや!!!!

f:id:oyomiyo:20181023161202p:plain

オマエやーーー!!!!!

遊びすぎた。申し訳ない。

拡張子がpngになっているので、先程の一番上のURLの画像で間違いありません。

こいつを改善してあげるだけでもかなりの向上が期待できるはずです。

早速圧縮。

使ったのはこれ

https://www.iloveimg.com/ja/compress-image

で元通り貼り付け。

f:id:oyomiyo:20181025114625p:plain

画像が荒くなった感は全くないです。

そもそも「はてなブログ」のデフォルトのプロフィール写真は画像が荒いです。それが嫌だったので自分でプロフィールを作ってここで表示しています。

おそらく標示速度への配慮だとは思うのですが、もうちょいマシな圧縮方法あるだろって思ってます。

ドキドキの解析3回目に入りましょう。

解析結果3

f:id:oyomiyo:20181025115352p:plain

しゃきたーーーー!!!!

ページの速度に関してはUnavailableなんで遅いっすよと言われているワケではありますが、最適化することが目的ですから、この条件下では最速化できているといっていいでしょう。

これで一安心です。

更に速くするために

更に速く、更に最適化するために他に改善できるところはないか見ていきましょう。

f:id:oyomiyo:20181025121239p:plain

通知表を見せられているキブン。

それはいいとして、、、

一番上のスクロールせずに見えるコンテンツの……は先程も言った通りできる手はすべて尽くしておりますので良しとします。

2つ目の画像の最適化に関しても、更に画質を落とすことはできますが現状が限界でしょう。

3つ目のJavaScriptの縮小に関しては、おそらくはてなブログのソーシャルボタンに使われているJavaScriptのことだと思われます。自分ではJava使ってないので、、、。

4つ目のサーバーの応答時間を短縮するですが、これははてな側が設定することであって、我々がどうこうできる問題ではないのでいいでしょう。

5つ目と6つ目はCSSとHTMLの縮小です。これについても改善しようと思えばできるのですがめんどくさいのでしません。

ほとんどの人は、はてなの公式テンプレートか、はてなブログのテーマストアから何らかのテーマを選択して使っていると思います。それを新たにカスタマイズした場合CSSが重複したりでもっと短縮できますよと怒られる可能性がありますが、このシステム上仕方のないことでしょう。

私の場合、今使っているテンプレート「PLAIN」は自分で作ったものなので、CSSの最適化もやろうと思えばできるのですが、、、、。

でもカスタマイズの度にいちいち長ったらしいコードを見るのは疲れるので、テーマストアからダウンロードした後、カスタマイズしたいところだけ後からカスタマイズする方法の方がよっぽどシンプルです。

ちなみに私も自分のテーマをテーマストアからダウンロードして使っているのですよ。(笑)

てことで、

自分なりには最善を尽くした。

ということを分かってもらえればと思います。

最後に

やっぱりやってみないと分からないことが多いですね。

皆さんも最適化するかどうかは別として一度計測してみてはどうでしょうか?自分では気付いていなかった落とし穴が見つかるかもしれません。

私もカスタマイズするときにはなるべく速度を意識してするようにしていたものの、かなり凝ったカスタマイズをしているせいで、じぶんが思っていたほど速くはなかったようです。

逆に言うとこれだけカスタマイズして遊んでも、ある程度抑えるべきところを抑えておけば、速度に関してはあまり気にする必要はないとも言えます。(結果改善できたし)

とりあえず今日はここまで、また更に改善したら更新します。

よろしければブクマの方よろしゅうございますでしょうか、、、。(恐縮です)

ではまた。