(cache) 目指せ最速！はてなブログで表示を高速化するために行った7つの施策

f:id:tsubasa123:20170612120158j:plain

こんにちは、つばさ（@tsubasa123）です。

ちょっと前に私のブログのデザインを変更したのですが、どうもトップページの表示が遅い（気がする）。右半分ははてなブログの仕様上ちらついちゃうのは仕方ないと許容していましたが、なんか全体的に遅い（気がする）。というわけで、本日のテーマはタイトル通り高速化になります。地味な内容ではございますが、よろしくお付き合いください。

早いは正義？

だと個人的には考えています。SEOとか専門的なことは知りませんし、ブロードバンド以前のインターネットの世界も詳しくありませんが、閲覧したいページがストレスなく表示されるというのは非常に重要なことだと思います。

そんなに生き急いでいるわけではありませんが、無駄な待ち時間は好きではないですし、好きな人も少ないでしょう。やっぱりWEBサイトやWEBサービスにおいては早いは正義なんじゃないかなと。

ベンチマークとったわけじゃないので私の主観になりますが、はてなブログってどちらかというとページの読み込みにかかる時間は長いほうだと思います。「悪」とまでは言いませんが、これはちょっといただけない。なんとかしたいなーって思っているだけじゃ何も改善されないので、私にできることをやってみました。技術的なアプローチが多いので導入が難しいところもありますが、専門知識が不要な施策もありますので、速度でお悩みの方の参考になればこれ幸いです。

大袈裟に言いましたが…

はてなブログでできる高速化の施策はかなり限られています。WordPressや他のブログシステムのようにHTMLの構造を変更できるものであれば様々な施策を行うことができますが、はてなブログでは限定的な対応方法でがんばるしかありません。

今回、私が行った施策は

画像の圧縮
不要な外部リソースの排除
不要なカスタマイズの排除
カスタマイズコードの位置を調整
外部リソースの遅延読み込み
jQueryコードの排除
DNSプリフェッチの導入

この7つ。ものっすごい基本的なことが多いですが、そこそこ効果がありましたので順番にご説明をば。下に進むにつれて技術的かつ効果の薄い対応になっています。jQueryのやつとかマジできつかった。

f:id:tsubasa123:20170611114623j:plain

これは皆さんご存知かもしれませんが、PageSpeed Insightsというサービスでページの読み込み速度を計測することができます。ちなみに施策を始める前の状態はこんな感じでした。んー、これはヒドイ。ここからどれだけポイントアップできるのでしょうか。

各施策ごとにスコアも紹介しますが、こちらは記事を書くのに都合のいいようにベストスコアだったときのものを紹介させていただきますので、参考程度にお楽しみください。同じ施策をしたからといって確実にポイントアップできるというものではありません。嘘はついてないけど、あくまで参考ということで。

画像の圧縮

他にも色々紹介しますが、これがかなり重要。私のブログにおいて大きな効果をあげたのはこの施策でした。これといった専門知識も必要ありませんので、誰にでもできます。が、めんどくさいのが玉に瑕。

www.tsubasa-note.blog

以前にこのような記事を書きましたが、私の場合は自作のツールを利用して圧縮をかけずにアップしてしまった記事を対象に、手作業で地道に画像を再登録しました。

利用するツールによって圧縮の仕組みが違うようで、オンラインサービスから圧縮をかけたもので再登録を行ってもグーグル先生が満足してくれないことが度々ありました。なので、オンラインサービスではなくグーグルが推奨している「jpegoptim」というツールを用いて目視で劣化がわからない、あるいは許容できる程度まで圧縮した画像を用意する方法で対処。

と、地道に圧縮作業を繰り返していたんですが、PageSpeed Insightsの結果ページの下の方に、最適化した画像とCSS、JSをダウンロードできるリンクが用意されています。

f:id:tsubasa123:20170609154724j:plain

なんてこった、これにもっと早く気が付いていれば作業時間を短縮できたはず。これからやってみようという方はぜひこちらを有効活用してください。ただし、画像の品質にこだわりたい人は必ず目視で確認したうえで利用するようにしましょう。圧縮によって画像の品質が劣化していることもありますので。速度と品質と作業コストのトレードオフが発生します、自分にとっての最適解を見つけてください。

画像の圧縮作業に関しては、専用のツールを作れたりレタッチソフトを持っている人は少ないと思いますので個人的におすすめの方法もご紹介。オンラインで画像を圧縮してくれるサービスを利用してみてはいかがでしょうか。もちろん無料です。

オンラインのツールにも色々ありますが

optimizilla.com

最近はこちらを利用する機会が多いかな。ドラッグ＆ドロップで複数の画像を一度にアップロードできるだけでも嬉しいのですが、圧縮時のクオリティ（品質）も指定でき、圧縮率だけでなくプレビューで出来上がりをなんとなく確認できるという点も高評価です。言葉では説明が難しいのでとにかく一度使ってみてください。習うより慣れろでお願いします。

f:id:tsubasa123:20170611114747j:plain

圧縮後のスコアがこちら。34→66にポイントアップ！圧倒的な差ですね。トップページに表示されていた画像の中に圧縮し忘れたものが何枚かあったのでそれに対応しただけでこれだけの差がでました。

私の場合はあまり画像を使う記事を書かないので負担は少ない方（とは言え単純作業なのでめんどくさい）ですが、レビュー記事とかレシピ記事とか書かれている方はなかなか手を付けにくい作業だと思います。

が、それなりに効果が大きい作業でもあると思います。すべての記事とは言いませんが、ご自身のブログで人気の記事や育てたい記事に関しては手間を惜しまず圧縮した画像を利用するようにしましょう。

不要な外部リソースの排除

これも比較的簡単な作業だと思いますが、失敗するとプログラムが動かなくなったりデザインが崩れちゃったりするというリスクがある作業です。作業前には必ずバックアップをとって元に戻せるようにしましょう。

様々な記事で紹介されているはてなブログのカスタマイズの多くは、一般的に「ライブラリ」と呼ばれる発者の手助けをしてくれるコードの利用が前提とされています。JavaScriptなら「jQuery」、CSSなら「font-awesome」なんかが有名どころかな。JSとかCSSとかわからない、ってブロガーさんでも名前くらいは聞いたことがあるのではないでしょうか。

これらライブラリは確かに便利なのですが、ブログを表示する際に提供してくれている外部のサーバに通信を行って取得する必要があるので、多かれ少なかれ表示の遅延に繋がってしまいます。

特に、コピペカスタマイズを多用されている方は「jQuery」のライブラリをカスタマイズごとに読み込んでしまって、無駄な通信を行っていることがあったりします。ライブラリは1度読み込めば他のカスタマイズでも利用可能になりますので、心当たりのある方は見直してみてはいかがでしょうか？

具体的には

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<script>
/* ここにカスタマイズAのコード */
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
/* ここにカスタマイズBのコード */
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<script>
/* ここにカスタマイズCのコード */
</script>

こんな風になっていたら要注意です。一番先頭の

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>

この記述があれば、カスタマイズBでもカスタマイズCでもjQueryを利用することができますので、残りの

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>

この2つの記述は不要であり、無駄な通信を行い遅延に繋がる原因となります。いらなければ消しちゃいましょう。

ただし、カスタマイズによってはバージョンの指定がある場合もありますので、コードを消す前に導入されているカスタマイズ記事を確認してください。ご自身で判断できない場合はこの施策はやらない方がよいかもしれません。

ちなみに、私は「jQuery」の断捨離に成功しました。こちらについては後でもうちょっと説明します。

f:id:tsubasa123:20170611115840j:plain

施策後のスコアはこちら。66→71にポイントアップ！jQueryってそんなに遅延に繋がるものなの？んー、これは運がよかったのかなーというのが本音ですが、確実に改善されてはいるというこで、ポジティブにとらえていきます。さよなら、jQuery。

不要なカスタマイズの排除

今まで当ブログでは様々なカスタマイズを導入してきました。自分でもカスタマイズコードを書いていますので、当然意識はしているのですが、やっぱり処理速度に影響しそうなカスタマイズとかも結構あったりしまして。

今回の作業でブログの運営に本当に必要なカスタマイズだけ残すことにしました。カスタマイズの断捨離、ミニマリストです。減らしたと言ってもまだ多いかもですが…

シェアボタン、フォローボタンの装飾
サイドバーのタブ化
ページのトップへ戻るボタンの配置
パンくずリストの表示
サイドバーで追従する目次
更新日の自動表示

JavaScriptをゴリゴリと利用しているのはこんなところでしょうか。細かい調整も入れるともう少しありますが、私がカスタマイズと認識しているのはこの6つくらいですね。それなりの数のカスタマイズを断捨離しました。いざ見直してみるとまぁこれだけでも結構満足できる仕上がり。コードもスッキリして精神的にも楽になりました。

カスタマイズってその時の気分や周りの影響を受けて衝動的に導入するものとか結構あったりしますが、そーゆーものって時間を置いて見直してみると案外微妙だったりするものです。必要がないものであればそれは一旦外して様子をみてみましょう。やっぱ欲しい、ってなったらもう一度追加すれば良いだけですから。

不要なコードを消すだけなのでそんなに難しくないとは思いますが、消し方間違えると正常に動作しなくなる可能性もありますのでお気を付けください。バックアップはとっておきましょう。

f:id:tsubasa123:20170611120850j:plain

71→75にポイントアップ！よしよし、これはそこそこ狙い通り。やっぱり不要なカスタマイズは外さないとダメですね。ただし、私のアイデンティティが薄れていくという諸刃の剣。ほどほどに楽しみます。

ちなみに、私は利用していませんでしたが、記事に関連するページを表示させるためのサービスに「Milliard」というものがあります。はてなブログ界隈では割と有名なサービスっぽいですが、ちょっと速度に難ありのようで、こちらを利用してる方はこれを見直すだけでも結構ポイントアップするらしいです。精度までは確認できていませんが、はてなブログで関連ページを表示させる方法は他にもいくつかありますのでこちらもご検討いただければと。

カスタマイズコードの位置を調整

これも作業前にはバックアップ推奨です。これは効果があったのか判断が難しい施策なんですが、カスタマイズコードはできるだけ下の方に固めて記述するようにしました。

具体的には

「ヘッダ」に書いていたものの中で、特に理由がないものは「フッタに移動」
「記事上」に書いていたものの中で、特に理由がないものは「ヘッダに移動」

といった感じです。シェアボタンや広告など、任意の位置で表示したいものに対しては適用できませんが、シェア数の取得処理やパンくずの構築処理など、位置と直接関係しないスクリプト処理に関しては適用可です。

上の方でJavaScriptなどのコードが実行されると、その間は次の表示が待たされてしまいうので、ユーザに対して良いことはないだろうという判断です。

冒頭でも述べましたが、速度改善につながったかどうかはよくわかんないんですが、余計なブロックが減ることによるユーザへのストレス軽減には繋がるかも、というか繋がってくれるとうれしいですね。

f:id:tsubasa123:20170611120006j:plain

75→76とわずかながらポイントアップ。カスタマイズの数を減らした後だったのでこれは私のブログにおいてはあまり効果のない施策でしたが、カスタマイズの断捨離とセットでやるとよさげなので紹介しました。

ライブラリの遅延読み込み

この辺から一気に技術的要素高めでお送りします。こちらはWordPressなんかではよく取り入れられている方法ですね。headタグ内で外部のJavaScriptやCSSを読み込むと遅延に繋がるので、ページの下の方でJavaScriptを利用して外部ファイルを読み込むという方法です。

今回の一連の施策で外部ファイルはすべて外すつもりだったのですが、将来的にjQuery等のライブラリが必要になる可能性は高いので試験導入を決意。まぁ、初めてってわけではないので特に困ることもないのですが、ちょっと管理が煩雑になりますね。

<script>
(function() {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
document.head.appendChild(link);
})();
</script>

特に目新しいものでもないですが、コードも紹介しておきます。このようなコードを「記事下」とか「フッタ」に入れることでJavaScriptやCSSの外部ファイルの読み込みを遅らせることができるようになります。ファーストビューに必要ないものやユーザインタラクションがあるまで必要ないものに対しては有効に働くと思います。

f:id:tsubasa123:20170611120159j:plain

76→77とこちらもわずかながらですがポイントアップ。まぁ、この辺からはもう運ゲー見たくなってる気がしなくもないですが。

jQueryコードの排除

最後に上級者向けのカスタマイズ。私、思い切ってjQueryというライブラリの利用を止めました。ですので、全てのカスタマイズコードをJavaScriptで1から書き直すはめになりました。タイポつらい、アニメーションつらい。これは特に説明はいらないですかね、説明できないですし。

ライブラリは便利ですが、簡単な処理ならきっと使わない方が早いだろう、という私の安直な考えです。まぁ、興味のある方はお気軽にご質問ください。DOM操作とか割とjQueryなくてもなんとかなる時代になったんだなーと再認識するとともに、jQueryの偉大さに改めて気づかされました。

ちなみに、これをやるとはてなブログ界に広く普及しているカスタマイズの大半が利用できなくなります。割とコスパの悪い対応だと思いますので、導入はおすすめできません。

f:id:tsubasa123:20170611121523j:plain

80超えきた！77→81にポイントアップ！目標だった80台に最後の最後でなんとかのせることができました。あくまでベストスコアですが笑

DNSプリフェッチの導入

これは効果が確認できなかったので記事に書くか迷ったんですが、~~6つより7つの方がタイトルがキャッチ―になるかなという理由から、~~せっかく調べたし、効果がある人もいるかもしれないのでご紹介します。DNSとかちょっと苦手分野なんですが、高速化について調べる過程で面白そうなものを見つけたので試験導入しました。

詳細はこちらのブログをご覧ください。

www.suzukikenichi.com

MDNのリファレンスも貼っときます。

developer.mozilla.org

本来の使い方としては、

予め名前解決を行っておくことで、例えばユーザーがリンクをクリックした際に、ページが表示されるまでの待ち時間を大きく削減することができ、場合によっては秒単位の効果が現れる場合もあります。

とあるように、外部ドメインへの名前解決をページの読み込みと同時にっておくことで、ユーザがストレスなく別のページへ遷移できるようにすることが目的のようです。ブラウザの実装にもよるみたいですが、これによりページの表示が遅くなることは特にないようです。すげーな、ブラウザ。

私はあまり特定の外部リンクへの設定を行わないタイプですが、Amazonや楽天へのリンクを多用したアフィリエイト記事を書かれる方なんかは設定しておくと良いかもですね。リファレンスでも言われていますが、特にモバイル環境では効果が大きいかもしれません。

ブログってモバイルから閲覧される機会の多いメディアだと思いますので、せっかくリンクがクリックされたのになかなか商品ページが表示されなくて"やっぱ買うのやーめた"ってならないようにするには有効かもしれません。機会損失に対する軽減策ですね。アフィ記事書くのが得意なブロガーさん、どなたか試してみてそっと効果を教えてくださいな。

あと、これは使い方間違ってるかもですが、解決されたドメインはどうやら端末（OSかな？）にキャッシュされるようなので、はてなブログが読み込む外部ドメインやら広告なんかのドメインも登録してみても良いのかもしれません。これは私の勘で、正規の使い方じゃないかもですので自己責任でどうぞ。

<link rel='dns-prefetch' href='//blog.hatena.ne.jp/' />
<link rel='dns-prefetch' href='//pagead2.googlesyndication.com/' />
<link rel='dns-prefetch' href='//cdn7.www.st-hatena.com/' />
<link rel='dns-prefetch' href='//counter.hatena.ne.jp/' />

とりあえず、間違っているかどうかの検証のために4つほど設定してみました。興味のある方はhref属性の値を変更して、「設定 > 詳細設定 > headに要素を追加」に追記してください。

ちなみに、スコアに変化はなかったのでキャプチャは省略します（やっぱ間違ってるのかな…）。先にも言い訳しましたが、使い方間違ってるかもしれないし、速度改善の効果も見られなかったので私流の使い方は自己責任でお願いします。Amazonや楽天など、外部リンクへの設定は有効だと思いますので、そちらはどうぞ試してみてください。

一連の施策を終えて

施策前は34と散々な結果だったものが、81まで改善されました。これも（ちょっとは調べましたが）サンプル数が少ないので私の感覚に近いですが、普通にブログを運営していたら50前後、ある程度気をつかっていたら60前後、結構真面目に対策したら70超え、くらいがはてなブログの相場じゃないかなーと。

ビフォーが酷かったというのもありますが、なかなか満足のいく結果となりました。これって実行するタイミングで結構振れ幅大きいものなんですかね？大体72～77くらいで収まっているのでこの辺が適正値といったところでしょうか。

記事ページのビフォーをとり忘れてしまったのが悔やまれますが、まぁ同じくらい酷かったんじゃないかと予想しています。記事ページはまだほとんど手付かずなのでこちらも地道に施策を適用させていきたいところです。

途中でもスコアは紹介してきましたが、画像の圧縮だけで、62～67くらいまで改善され、その後は記事で紹介したものをはじめとした細かい施策の積み重ねで少しずつ数値も改善されていきました。ちりも積もれば山となる、とはこのことですね。割とダイレクトに数字に反映されていくので結構楽しかったです。

今回はPCサイトのトップをメインに施策を行いましたが、そのうちスマホも対応する予定。こっちも何か共有できる情報がありましたら記事を書こうかなと思っています。

具体的なコードも1つご紹介

以前にリデザした際に全部オリジナルにしてしまったので、汎用的なコピペカスタマイズは少ないのですが、はてぶとFacebookのシェア数をとるコードは皆さん似たようなものを使っていると思うのでこれだけメモもかねて貼っときます。

// sns
(function() {
if (document.body.className.indexOf('page-entry') !== -1) {
    // common
    const u = encodeURIComponent('{Permalink}');

    // for hatena
    let s1 = document.createElement('script');
    s1.src = 'http://api.b.st-hatena.com/entry.count?url=' + u + '&callback=_hatenaCallback';
    window._hatenaCallback = function(res) {
        // ここをカスタマイズに合わせて調整
        document.querySelector('.hatebu-count').innerText = (res || 0);
    };
    document.body.appendChild(s1);

    // for facebook
    let xhr = new XMLHttpRequest();
    let fb = document.querySelector('.facebook-count');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // ここをカスタマイズに合わせて調整
            fb.innerText = (xhr.response.share) ? xhr.response.share.share_count : 0;
        }
    };
    xhr.onerror = function() {
        fb.innerText = 0;
    }
    xhr.open('GET', 'https://graph.facebook.com/?id=' + u, true);
    xhr.responseType = 'json';
    xhr.send();
}
})();

jQueryを使わないバージョンはこんな感じ。これ単体でめちゃくちゃ早くなるわけではありませんが、この手の施策は小さな積み重ねが大切です。気になっている方はお試しくださいな。

今後の展望と課題を

さて、それなりに満足のいく結果となった高速化ですが、もう少しやりたいことと、やるべきか迷っていることがあります。メモメモ。

CSSのインライン化

WordPressのテーマとかでは割と主流なのかもしれませんが、ファーストビュー（スクロールせずに見える範囲）で使用するCSSは、外部ファイルに書かずにインラインで（HTMLに直接）記述しましょう。みたいな風潮のある昨今です。初めて聞いたときは耳を疑いましたが、世に出回っているサイトでもお見かけするのでまぁこれが真実なのでしょう。

はてなブログでもCSSを何も記述しない独自テーマを作成して、非公開でストアに登録してブログに適用、実際のCSSは圧縮してから「設定 > 詳細設定 > headに要素を追加」に記述すれば多分同じようなことができるんじゃないかと。

この方法でやってるかはわかりませんが、ヘッダに圧縮コードを入れて最適化しているのをお見かけしたのは、はてなブログ界では「NO TITLE」さんくらいでした。正直、シロマティさんやりすぎだろ、と思いましたが、運用において問題がないのかとか感想をお聞きかせ願いたいところです。

管理コストとの兼ね合いとスマホサイトの問題があるので今回は見送りましたがこれもいずれ試してみたいですね。