読者です 読者をやめる 読者になる 読者になる

funclur

東京の片隅で社畜を謳う

はてなブロガーのための表示速度を改善する8つの方法

スポンサードリンク

f:id:funclur:20160907004310j:plain

表示速度の重要性

今もこれからもWebサイト制作において大事なものはアクセシビリティ、マルチデバイス対応、そして表示速度です。
スマホでのWeb閲覧は上昇する一方ですし、通信速度の遅いスマホでも快適に閲覧できる表示速度はより求められると考えられます。
また、表示速度は2012年より検索結果の決定要因の一つとなっています。SEOの観点からも重要なものになります。
今日は、本気出して考えてみるとはいえ完璧なことは言えませんが、自分なりに表示速度改善策についてまとめました。

表示速度測定方法

まずは現状の表示速度を認識することが初めの一歩です。

速度の計測の仕方は様々ですが、自分はブックマークレットを入れています。

javascript:(function(){ var d=document; var s=d.createElement('scr'+'ipt'); s.charset='UTF-8'; s.language='javascr'+'ipt'; s.type='text/javascr'+'ipt'; s.src='//web-tan.forum.impressrd.jp/tools/pagespeedtiming/pagesppedtiming.js?t='+(new Date()).getTime(); d.getElementsByTagName('head')[0].appendChild(s); })();

下記サイトより頂いております。
参考:編集記事一覧 2013年1月 | Web担当者Forum

ブックマークの登録の仕方は、下記記事にしています。
frontendmemo.hatenablog.com

ページを表示している状態でボタンクリックするだけです。

表示速度を改善する方法

1.画像

ブログでは、画像の読み込みが多くなることがあるでしょう。
画像を軽くすことで、画像の容量によっては改善がわかるほど早くなります。

「jpg 圧縮」などで検索すると圧縮やリサイズしてくれるサービスが見つかります。
参考:画像を縮小する!

2.css

リクエストを減らすことは表示速度に貢献します。
リクエストとは下記のような読み込みです。

<link rel="stylesheet" type="text/css" href="//cdn.blog.st-hatena.com/css/blog.css?version=5d0c84533a7ebfbd9965b705f0e746d6"/>

cssファイルは1つにまとめましょう。header内に直書きが理論的にもリクエスト0ですから一番早いのですが、自分はソース管理上やっていません。

3.余計なJSを減らす

気づいたらJSで様々な機能を入れてしまい、容量が肥大化していくというのはありがちです。
今まで入れているもので本当に必要か、必要ないものは思い切って削除しましょう。

また、jqueryは1つ読み込めば十分ですが、複数設置しているブログも少なくないようです。
恐らく機能を足したときにコピー&ペーストで、解説記事に書いてるまま持ってきているのかもしれません。
一度見返してみましょう。また新しいバージョンの方が比較的に読み込みが早いとされています。
1系を使ってる方は、最新の3系もしくは2系を使うべきでしょう(2系からはIE8以下のブラウザはサポートされてません。)
1~3系のjqueryを下記にまとめておきます。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

4.css3を積極的に使おう

jsではなくcssでできることも増えてきました。cssの方が圧倒的にスピードは速いです。css3でできることは下記です。

  • アニメーション
  • リンクのフェードホバー

5.圧縮する

js等は圧縮することで容量を落とすことができます。jqueryライブラリやプラグインは基本的に「min」とファイル名についてるのが圧縮ファイルになります。そちらを使いましょう。

圧縮するサービスは、検索すると下記など多々あります。
syncer.jp

6.lazyload.jsで画像の読み込みを遅らせる

画像を多用するブログでは使わない手はありません。
jsは読み込みスピードを遅くすると書きましたがこちらのプラグインは、スクロールして対象の画像に来たときに読み込むため、ページ自体を早く読み込むことができます。

自分のブログでも使用しています。
参考:http://www.webdesignleaves.com/wp/jquery/1335/

ちなみにこのlazyload.jsはjquery3系で動きませんでした。3系を使うときは十分注意しましょう。

7.余計な機能を取り外そう

サイドバーのウィジェット外しました。

twitterはリンクでもいれておけばいいし、自分のつぶやきとか需要ないのにblog上でも載せる必要ないので消しました。
記事の下に関連記事が来るようにしているので(これも重いのですが)サイドバーからは消しました。

  • TOPページ

TOPページについて考えた結果レイアウトを一新しました。結果スピードも上がったと思います。
本当はもっとはてなブログオフィシャルのTOPみたいにしたいので、テーマ作ってしまった方が早いかもですが。。
funclur.hatenablog.com

8.広告をはずす

収益がないんだから広告なんて取っ払ってやりたいです。
いっそはてなproになって広告を一切貼らないというのも粋なやり方ですね。

まとめ

ブログの多彩な機能は回遊率を上げたり、UI、UXも生み出すことができますが、同時に表示速度の低下を招いてしまっているかもしれません。

バランスを見て機能を上げて行き、表示速度は常に気にしたいものです。

まだまだ自分も出てきていないところがあるので今後の課題にしたいと思います。