はてなブログのページスピードにあいた鼻がふさがらないのでもがいた結果→速度が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を付加することはできるけれど…そこまでする？