Brian'z Imagination

ブライアンねこの、頭の中。

Brian'z Imagination

はてなブログのページスピードにあいた鼻がふさがらないのでもがいた結果→速度が3倍になった話

f:id:x93mg:20160612173502j:plain

はてなって基本的に遅い。Wordpressでブログを書いていた頃は「.htaccess」を書き換えたりプラグインを読み込んで高速化できたけれど、そういうことも出来なさそうだ。

いつも楽しく読ませて頂いているひろあきさんのブログで、Googleの「Mobile Website Speed Testing Tool」が紹介されていて、ぼくも気になって使ってみた。自分のサイトのモバイルフレンドリー(スマホで見やすいかどうか)度、モバイルでの表示スピード、パソコンでの表示スピードを測定するサイトだ。

その記事がこちら。

今回測定して、驚くべき(そして悲しむべき)結果が出てきた。自分がアメリカ人なら絶対「F■■K!」「ジー■ス!」「サノバ■ッチ!」と思わず叫んでしまうとんでもない結果だ。さらには改善ポイントもまとめてみたので、ぜひ一緒にチェックしてみよう。

Googleの「Mobile Website Speed Testing Tool」を使ってみたよ

まずはURLを入力

f:id:x93mg:20160611151149j:plain

Googleの「Mobile Website Speed Testing Tool」でページスピードを測定してみよう。アクセスして早速自分のブログのURLを入力すると、詳細結果と「最近はね…」というGoogle先生のありがたいお言葉が表示される。

驚きの結果が…!

f:id:x93mg:20160611151658j:plain

が健全、黄色は注意、は警告…のようだ。

まず、一番ひだりの「MOBILE FRINDRINESS」はどれくらいモバイルフレンドリーかを示してくれている。99/100でGOOD(イイネ!)なスコア!なかなかだ!ここは、はてな民はみんな高いみたい。ありがとう、はてな。

真ん中は「MOBILE SPEED」で、モバイル端末でのページの表示速度を表している。このブログの結果は65/100でFAIR(可もなく不可もなく)とのこと。ここはJava Scriptを削るとかして、なんとかページ速度を挙げていきたい。

で、問題はこれですね。一番右の「DESKTOP SPEED」。PCでのスピードは、0/100。




0/100…(^ω^)…?



前述のひろあきさんのブログでも「DESKTOP SPEED」は77/100だったので、「これは何かの間違いでは…(^ω^)?」と思った。しかし、何度やっても同じ。

こいつは参った。ページスピードが遅くて離脱するということは、ブログが読まれていないのと同じ。そして、ブログが読まれていないということは、そのブログは存在しないのと同じだ。そういうわけで、なんとか改善できないか考えてみた。

ちなみに詳細結果も出ているようなので、ちょっと見てみよう。

MOBILE FRIENDLINESS

f:id:x93mg:20160611155318j:plain

Google先生のありがたいお言葉
People are five times more likely to leave a mobile site that isn't mobile friendly. (みんな、モバイルフレンドリーじゃないサイトを訪問するときって5倍も離脱するんだぜ)

概ねよろし。DETAILを確認すると、残りの1は「タップするリンクの大きさを適切にしてください」とのこと。どれくらいが適切なサイズなのか一切検討がつかない。

MOBILE SPEED

f:id:x93mg:20160611160108j:plain

Google先生のありがたいお言葉
Nearly half of all visitors will leave a mobile site if the pages don't load within 3 seconds. (お前んとこのサイトに来てるうちの半分は、3秒以内に表示されないとどっか行っちゃうんだぜ)

ぼくも3秒ってことはないけれど、10秒くらい待って出てこないと諦めてしまうな。

基本遅いってことだろうけれど、表示速度が何秒かまではこのサイトでは分からなかった。

DESKTOP SPEED

f:id:x93mg:20160611160634j:plain

Google先生のありがたいお言葉
9 out of 10 people say they use multiple screens for such tasks as booking a flight online or managing their personal finances. (10人中9人は飛行機をオンラインで予約したり家計簿をつけたりしてマルチスクリーンを使ってるんだぜ)

…ちょっとGoogle先生の言わんとすることがよく分からない。

とりあえず遅いと。先生の補足情報では、モバイルと違ってパソコンでは、文字通り「すぐに」Webページが表示されないと別のサイトに行ってしまうよと。

もはやDETAILが見られないほど遅いらしく、どう改善すればいいのか分からなかった。まるで末期のガン宣告だ。

もう少し詳細を知りたければ「GT metrix」がオススメ

f:id:x93mg:20160611161557j:plain

正直なところ先ほどのGoogle先生のありがたいサービスでは何をどう直せばいいかわかりあぐねてしまったので、そこを補足する形で「GTmetrix」というサービスを使ってみた。結論から申し上げると、すごくいい。URLを入力するだけで、具体的な改善ポイントを詳細に教えてくれるのだ

まずは、サイトにアクセスして、早速URLを入力してみることにしよう。

案の定、ページスピードは遅かった…

f:id:x93mg:20160611162123j:plain

URLを入力すると、結果を表示してくれる。カナダのバンクーバーから、Firefoxでの表示スピードを測定してくれているようだ。結論から言うと、やっぱり遅い…(笑)

左側のPerformance Scoresを確認してみよう。GoogleのPageSpeed ScoreはD(62%)、Yahoo!のYSlow ScoreはC(71%)。YSlowスコアを見ると若干希望が持ててきた…!

右側はPage Details。Page Load Time(ページの読み込み速度)は9.7秒か、これは遅い…。Total Page Sizeはページのデータ量で、その後ろのRequestsはページを表示させるのに発生したサーバーへのリクエスト数だ。

Requestsの平均は「69」とのことなので、124というこのサイトのリクエスト数を半分にしなければいけないことになるが…基本的にはてなってのはスターだったりはてブだったりでリクエストしまくるので、改善策を練る必要がありそうだ。

※ 翌日もう一度やったら、なにもしていないのにPage Load Timeが5.0秒になっていた。実はあんまりアテにならない…?

じゃあ、何をどうすればいいのか。その詳細がページ下部でタブ切り替えで確認できるので、チェックしてみよう。

PageSpeedの詳細

f:id:x93mg:20160611163959j:plain

Google先生のPageSpeedでの詳細結果がこちら。Fだけで5つあるのは結構やばいのかな?しかもFの次はEとDを飛び越してCになってる。

ただひとつ言えるのは、Fのところって同じはてなのプラットフォームを使っているはてなブロガーさんはもしかしたら同じような結果になっているかもしれないので、ここではFの項目5つをピックアップして改善ポイントを確認してみよう。

1. JavaScriptの読み込みが遅せぇ (Defer parsing of JavaScript)

先生のご指摘によると、「お前んとこのJavaScript遅すぎや、だから0点やで」とのことで、実際の読み込みの実体が暴かれた。JavaScriptが遅いとページの読み込み(page rendering)が妨害されるので、よろしくないとのこと。

その実体がこちら。

f:id:x93mg:20160612154817j:plain

あー、確かにこうやって見るとJavaScriptこんなに読み込んでるんだとしみじみしてしまう。御覧頂いて分かる通り、わざわざ2回も読み込んでいる超ムダな設計になっている

上から容量の重い順になっているのだけれど、「hatenablog.js」625.7KB…1回読み込むだけでええんやけど。どうやらほとんどのjsはコチラでは触ることができないようだ。

唯一できたのは、5行目の「jquery-latest.js」。これはjQueryの最新版で、常に最新版をロードするようにぼくがフッダーに自分で入れたのだけれど、はてなブログのほうでjQueryはデフォルトで読み込んでいるようだったので削除。それでも137KBしか節約できてない…

2. リサイズした画像を寄越しやがれ (Serve scaled images)

これはずいぶん心当たりがあるのだけれど、確かにぼくのブログでは画像が多くて、リサイズせずにばんばんアップしている…そりゃ遅くなる。HTMLやCSSでのリサイズを極力減らし、.pngではなく.jpgにして軽量化することで改善することはできそうだ

3. 画像サイズを事前に言いやがれ (Specify image dimensions)

どうやら画像は横幅(width)や縦幅(height)を指定しないと遅くなるらしい。

f:id:x93mg:20160612161348j:plain

結果の一部。あまりにも長すぎて、一部だけ抜粋した。

結果をみていただければお分かりのとおり、「http://b.st-hatena.com/entry/image/〜」から始まるURLが大量にあるのだが、これははてブ数の画像→「」だ。なんか別に高さとか指定しなくてもいいように思うけれど(むしろ余分なコードになるんじゃ?)、それでGoogleの評価が微塵にも下がると嫌なので、jQueryでattributeを付加することはできるけれど…そこまでする?

あとは、モバイルサイト用の100x100のサムネイル画像、はてなスターをつけた時の64x64のユーザーのプロフィール画像、さらにはてなスター本体の画像11x10も縦横の指定がないとのこと。このあたりはてな運営側で一気に改善してくれませんかね?

というわけで、これはブロガーの技量ではあんまりどうにもならない問題だった

4. リダイレクトを少なくしたまえ (Minimize Redirection)

ここは評価ゼロではなく、なんとか11/100になっているけれど、厳しい。

理由としては、はてブ数がリダイレクトチェーンが多いということでご指摘を受けている。

例えば、先ほどの「」の画像でいうと

http://b.st-hatena.com/entry/image/http://brian.hatenablog.jp/entry/25-levelup-design-tips
 ↓
http://b.hatena.ne.jp/entry/image/http://brian.hatenablog.jp/entry/25-levelup-design-tips
 ↓
http://cdn.b.st-hatena.com/images/users/gif/normal/00582.gif

という形で、はてブ数の画像を取得しに行っている(リダイレクトが行われている)。

このサイトではこんな感じにサイドバーにはてブ数を表示している。

f:id:x93mg:20160612163231j:plain

はてブ数の表示をなくせば、リダイレクトも行われないし、attributeのない画像もつかないので一件落着に思えるけれど、はてブ数を入れることで他の記事も読んでもらえることが多いように思うので、はてブ数を消すところまで決断が及ばなかった

もしかしたら、jQueryとかでスクリプトを書けばもっとシンプルにいくのかもしれないけれど…ここは保留になった。

5. CSSスプライトを使わずに画像を合成したまえ (Combining images using CSS sprites)

ここもはてブ数画像まわりとはてなスターをつける時のユーザー画像の問題。もう無理…

PageSpeedのまとめ

というわけで、Fランは基本的にはてなブログ側の使用の問題がほとんどで、ぼくにできることは画像のサイズをリサイズすることと、思い切ってはてなスターやはてブ数画像を非表示にする決断をすることくらいしかなかった

Y!Slowのほうはというと…

f:id:x93mg:20160612165011j:plain

こちらもFが7つと辛口評価。結論からいうと、「Expiresヘッダーを加えてくれぃ」「HTTPリクエストを減らしてくれぃ」など、はてなブログの仕様上変更するのが難しいのが分かった。逆にいうと「どうにもできない」ので詰んだ…。

ところが、思い切って決断してみるものだ。

f:id:x93mg:20160612171831j:plain

結論、「スター非表示」「サイドバーのはてブ数非表示」にするだけでページスピードが3.7秒までアップ…! 遅い原因は圧倒的にこの2つだった!

サイドバーのはてブ数はあったほうがいいなと思っているので、jQueryを使ってリダイレクトせずにはてブ数を付け加える方法を考えてみよう。

まとめ

「スター非表示」「サイドバーのはてブ数非表示」はページ速度を落とす。これがまとめになる。

最終的な話をすると、はてなスターはやっぱりあったほうがいいなぁと思ったので加えて、サイドバーのはてブ数は別の形で表示するようにしようと思う。今回紆余曲折あったけれど、はてなの仕様を詳しく垣間見ることができたので、良しとしよう。

まだ自分のサイトのスピードを見ていない人は、以下の2つのサイトで速度をぜひチェックしてみよう。面白い結果が見られるかもしれない。

今日のひとりごと
そうだ!読者になろう!
ブックマークもお忘れなく!

Recommend!