ウェブと食べ物と趣味のこと

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

ウェブと食べ物と趣味のこと

格安SIMのこと、windows10、迷惑メールネタ、写真ネタなど。困った方の参考になる記事を心掛けます。

はてなブログ高速化にもう一度チャレンジしてみた

はてな 雑記

スポンサードリンク

f:id:photoblg:20160927230753j:plain

はてなブログ、重くないですか?前から重かったんですが、最近特に読み込みが遅く、コンテンツが最後まで表示されるに時間がかかっている気がします。

今回は、はてなブログ(Pro)ユーザー向けの記事になりますが、改めて高速化にチャレンジしてみた内容を書いていきます。

現状どれぐらい遅いのか計測

サイトが遅いときによくお世話になっている調査サービスのGtmetrixで計測、改善したかどうかを見ます。

gtmetrix.com

トップページの流入は少ないのですが、トップページと記事ページをまず計測してみます。

トップページ

f:id:photoblg:20160927164720p:plain

記事ページ

f:id:photoblg:20160927164615p:plain

Page Speed Score もYSlow Scoreも評価はF。20秒は遅すぎですよね。

そして読み込みで遅いのは、やっぱりはてなスター。

f:id:photoblg:20160927165132p:plain

改善してみます

はてなスター

定番ですが、はてなスターを取って再計測。全然変わらない・・・。

f:id:photoblg:20160927205812p:plain

iframe

次にiframeの読み込みは重いので外していきます。iframeは、デフォルトの「読者になる」ボタンやURLを埋め込んだ際のブログカードで使われています。

ここでは詳しく説明しませんが、読者になるボタンはカスタマイズ(リンクで対応)可能ですのでもし利用中で動作を軽くしたい方は変更してみてください。

取り急ぎ計測対象のURLのブログカードは外してみます。

f:id:photoblg:20160927205944p:plain

f:id:photoblg:20160927231632p:plain

ページロード時間は最初に比べると半分くらいになりましたがリクエスト数が何故か増えてます・・・。

f:id:photoblg:20160927211020p:plain

javascript

次にスクリプト類で改善できるところを調整していきます。

まずお問い合わせ用に使用しているサービスで、右下に出てくるスクリプトを一旦外します。

f:id:photoblg:20160927212623p:plain

次にjqueryです。はてなブログでは複数のスクリプトが読み込まれていますが、その中にjqueryもあります。以前、以下の記事を見かけたのを思い出して試しにはてなが提供しているjQueryに変更してみました。

<script src="//cdn.blog.st-hatena.com/js/vendor/jquery/jquery.min.js?version=1.9.1">

www.stdio.jp

画像の最適化

次に画像の圧縮です。何も考えずアップしていたので画像サイズが結構大きかったのでロスレス圧縮をしてみたところサイズが1/10近くまで圧縮されました。これは期待できそう

f:id:photoblg:20160927214311p:plain

Compressor.io - optimize and compress your images and photos

圧縮方法はとても簡単で画面の「TRY IT」をクリック

f:id:photoblg:20160928001021p:plain

画像をドラッグ&ドロップするか「SELECT FILE」から画像を選択

f:id:photoblg:20160928001157p:plain

f:id:photoblg:20160928001526p:plain

あと、Youtubeの埋め込みがあったのでようつべタグぽんを利用させていただきました。

blog.kaerucloud.com

結果は・・・あいかわらずScoreはFですがページロード時間は10秒切りました。

f:id:photoblg:20160927220401p:plain

ぱんくずリストを公式に変更

今までスクリプトを利用したカスタマイズのパンくずリストを使用していたのですが、それを辞めて公式のぱんくずリストに変更。

広告も全部はずしてみる

試しにAdsenseを全部はずしてみたところ・・・YSlow Scoreは若干上がったもののあんまり変わらない印象・・・でも時間は短縮されリクエスト数は100ぐらい減っている。

f:id:photoblg:20160927223039p:plain

とは言え広告をはずすわけにもいかないので戻しますが、残りの原因をみてみると読み込み遅いのははてなのサーバー上のスクリプトなんですよね。。これはどうにもならない。しかも気になるのが2回ずつ読み込んでいるものがたくさんある。

f:id:photoblg:20160927224725p:plain

こちらもはてな。はてなブックマーク数の疑似画像ファイルなのでこちらでは何もできず。

f:id:photoblg:20160927224945p:plain

広告は元にもどす。

最終的に広告は元に戻しましたが、使ってないのに読み込んでいたスクリプトを削除したり、遅延可能なスクリプト(今回はFacebook)をフッターに移動したりしてみたところ10秒は切ったので、はてなスターを戻して今回は終了

f:id:photoblg:20160927225736p:plain

最後に

GtmetrixでAスコアの取得は広告を複数入れている場合は現実的では無さそうです。

ただ、画像の最適化やスクリプトの読み込み順、iframeの読み込みを無くすなど、ある程度ページ表示時間を短縮することはできそうです。やっぱりはてなスターは重いな・・・。

スポンサードリンク