はてなブログ高速化に努めた施策

はじめに

はてなブログの高速化の記事。

はてなブログは遅いらしい

多くのブロガーさんが言及してますが、はてなブログは処理が遅いらしいです。
パソコンでは問題ありませんが、スマホからのアクセスが急増した近年に於いては、SEOの観点からも放置できない課題になっています。

と言っても、ユーザーにどうこう出来る部分って少ないんですよね。
効果が期待できるのは、画像の圧縮くらいでしょうか。
有名なgoogleのページスピードで計測すると、画像圧縮前後で大きく改善する事が報告されています。
PageSpeed Insights

僕らが出来ることは少ないけれど、それでももがいてみました。
その施策を纏めます。
尚、施行前後でスピードを計測してはいません。
なんとなく早くなったな～と体感してる位です。
効果のほどは不明ですので、その点ご了承下さい。

画像の圧縮とアップロード時の画質の調整

最も効果が大きいのが、画像の圧縮です。
optimizilla.com
僕はいつもここで圧縮を掛けて、100k以下にまで落としています。

だけれど、これじゃまだまだ不十分だと知りました。
はてなブログでは、はてなフォトライフにアップされた画像を使用しています。
ここが曲者でした。
初期設定のままだと、なんとアップロードすると、元サイズの3～4倍になってしまうのです。
これはビックリでした。

アップロード設定の画質項目が100%なのが原因のようです。
[はてなフォトライフ]⇒[設定]の順に進み、画質の数値を落としましょう。
75～85%程度ならば、元の画質を維持したままアップされるそうです。

余分なjqueryを読み込ませない

画像の次に効果が期待できるのが、Javascriptの見直しです。
コードが長ければ長い程、処理に時間を要するので、その分ページの読み込みも遅くなります。
全体を見直して、無駄なコードを消してみると、気持ち早くなります。

また、スクリプトの順番も多少影響してきます。
WEBページは、上から順番に解釈されて処理されます。
ページの上部に関係しているスクリプトから順番に読み込ませて、下部で必要なスクリプトは最後に回す。
これだけで多少違う…気がしますよ?
具体的に言うならば、メイン部分⇒サイドバー部分の順番で読み込まれているので、メイン部分で実行されるスクリプトを先に持ってきましょう。
尚、読み込みの順番については、WEBページのソースを見るのが手っ取り早いです。

この辺は効果薄ですが、jqueryの見直しはそれなりに効果あるっぽいです。
これまた知らなかったのですが、はてなブログでは標準でjqueryが読み込まれているそうです。
実装されているjqueryを使用すれば、無駄なやりとりを無くせます。
やり方はSTDIOさんの記事に書かれています。
www.stdio.jp

尚、現在のバージョンは
https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3
です。

jqueryはどんどん軽量・高速化しています。
最新のver.3が、一番早くて軽いのは間違いないです。
しかし、はてなブログ標準のバージョンと2重に読み込まれている為、結果的に「無駄な処理」になっています。
スクリプトによってはVer2以降でしか動作しないものもありますので、変更する場合は慎重に作業して下さい。

ただ、「そんなの分からないよ」って方はやらない方が賢明です。
動かなくなってしまう可能性がありますので。

Font Awesomeを使わない

処理が遅くなる要員の1つに、外部とのデータの送受信があります。
はてなブログでは、外部と多くのやり取りがある為、遅いのです。
そこで、無駄なやり取りを無くしましょうというのが僕らの取れる1つの手段。
とはいえ、殆どは手の施しようがないので、効果的には薄いのですが。

僕はFont Awesomeの使用を控えることにしました。
2～3個しかアイコンを使ってないのに、ここで無駄な遅延が発生しちゃ馬鹿らしいので。
（重ねて言いますが、効果は殆どありません）
[設定]⇒[詳細設定]⇒[headに要素を追加]に記載している

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

を削除しました。

それでもアイコンは使いたいですよね。
便利ですからね。
代替案は身近にありました。

はてなブログでは、はてなの用意したアイコンが実装されています。
問答無用でリンクされちゃってるので、これを使っていきましょう。
www.foxism.jp
使用法は、毎度お馴染みFOXISMさんの記事がオススメです。

はてなアイコンに無いものは、画像で用意しました(笑
逆に重くしてる気がしないでも無い。

意味ないらしいこと

以上が僕がやったことです。
なんだか感覚的に早くなった気がします。

さて、調べていて知ったことで「意味ないらしいこと」もありました。
その中でも驚いたのが、はてなスターに関して。

多くのブロガーさんが重い理由の1つに挙げているはてなスター。
実際はほぼ影響ないらしいです。
takehora.hatenadiary.jp
Webパフォーマンスについてさんが詳細に分析されています。

皆さんが、遅延を懸念されていた「はてなスター」ですが、入れても入れなくても、基本的にはパフォーマンスには影響ないです。

たまに遅延の原因にもなってるようですが、影響的には軽微なのでしょう。

終わりに

ちゃんと計測すれば、施行前後での変化はほぼ無いと思います。
ただ、調べて初めて知ったことも多かったので、無駄では無かったかな。