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

つばさのーと

つばさの日常を綴るのーと

CDNの速度比較サービス発見 「CDNPerf」 がキレイで見やすくていい感じ

f:id:tsubasa123:20170123173920j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

ちょっと便利なサービスを見つけたのでご紹介。どちらかというとカスタマイズを作る人向けのサービスです。プログラムとかちょっと…という人にはつまらない内容になりますがご容赦ください。

 

はてなブログは確かに遅いかもしれない

 

はてなブログ、デザインもキレイだしダッシュボードのUIも悪くないし、ドメインとかこだわらなければ基本的には無料で使えるしと、とてもよいブログサービスだと思います。

 

ただ、よく言われている通り、ちょっと読み込みに時間がかかる時があるんですよね。通信環境や閲覧端末にもよるので一概には言えませんが、お世辞にも高速とは言えません。スターとかブログカードとかシェアボタンだとか、外部との通信が多いのでしょうがないとは思いますが、最近は検索エンジンの評価基準に読み込み速度が含まれていますので気にする人は多いのではないでしょうか。

 

あとまぁ、スマホで見られるときにはダメージが大きい気がします。特に最近利用者が増えてきた、格安SIMを使われている方は比較的に昼間は混みあうことが多いかと思います。そうなると通信に時間が掛かるのは致命的。お昼は割と多くの方にブログを見てもらうチャンスだと思いますし。

 

カスタマイズするとさらに遅くなる

 

これは私も気をつけようとは思っているのですが、むやみやたらにJavaScriptを利用してはてなブログをカスタマイズするとさらに読み込みが遅くなる可能性があります。余計なことしてるんだから当然ですね。

 

www.tairakenji.com

 

ケンヂさんの記事にもありますが、ブログのカスタマイズは楽しいけどやり過ぎ注意、だと思います。

 

見栄えと速度のトレードオフ。わかってはいるんですけど、ついつい見栄えをとってしまうんですよね。できるだけユーザビリティを上げるようなカスタマイズを心がけてはいるんですが、まぁ見栄えも気になるんですよ。第一印象には見栄えも重要なので。あとまぁパフォーマンスチューニングよりやってて楽しいし。

 

JavaScriptを使った処理についてはそれなりに気を付けて書いてはいるんですが、避けられないのは外部ファイルの読み込み。外部との通信はコストが高い、それはわかっているつもり。でも便利なライブラリは使いたい。特にjQueryは使いたい。まぁピュアJSでもいいけどjQuery使えたほうが安全だし楽だし。

 

利用するCDNによって速度差がある

 

shiromatakumi.hatenablog.com

 

シロマティさんの記事ではCDNを変えることで通信速度を改善し、利用するバージョンを切り替えることでjQueryファイルの読み込み速度を改善されていました。これは賢い。個人的には3系にしちゃってもいい気がしますが、まだ古いブラウザを考慮するなら上記の記事のやり方がベストだと思います。

 

最近、といってももう半年以上前ですが、2016年の6月初旬にjQueryの3系が正式リリースされました。IE9以降が対象となります。スリムビルド(Slim build)という非推奨となっている機能を除外した軽量版も提供されているのでこちらを利用すればさらなる高速化が見込めます。(ただし、Ajax関連の処理も除外されているので注意が必要です)

 

さて、利用するCDNによって速度に差が出るようですが、どうせならベストのCDNを使いたいところです。まぁ、通信時の環境に左右される部分が大きいので、どれがベストか見極めるのは難しいですが、なにか指標があればうれしいなと思います。

 

じゃあどうやって調べるか

 

自分で調べるのめんどくさいなーと思っていたら、通信速度を比較できるサービスを発見。なんだこれ、便利じゃないか。長い前フリとなりましたが、このサービスを紹介したくて記事を書きました。

 

www.cdnperf.com

 

主要なCDNサービスの通信速度を7日間、30日間、90日間単位でグラフ化してくれるサービスです。プロトコルの指定も可能。トータルのダウンタイムも確認できるようになっています。

 

各CDNサービスのリンクをクリックするとそのままサイトに移動できますのですぐにCDNのリンクを取得することができます。

 

当記事の投稿時点では、Cloudflare CDNというサービスが一番高速に利用できるようです。タグにすると、

 

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--<![endif]-->

 

こんな感じかな。とりあえず、IE8も考慮した形で最新のものにしました。ただし、これを導入することで一部のカスタマイズが動作しなくなる可能性もあります。私もちょっと前に失敗した経験があります。

 

ですので、導入されているカスタマイズと相談しつつ読み込み先を変更し、しっかりと動作の確認をするようにしましょう。バックアップの取得もお忘れなく

 

さいごに

 

ふわふわとした記事になりましたが、優れたサービスを見つけた勢いで書きました。

 

今まで速度的なところはあまりこだわることはありませんでしたが、はてなブログをカスタマイズする際にはできるだけ気を付けていくつもりです。JavaScriptに詳しい方、色々とご指摘いただけるとうれしく思います。

 

ではでは、最後までお付き合いいただきありがとうございました。