ブログの表示速度改善を図ってみました。
やっぱりスピード至上主義だよね!?
ブログの表示速度の改善に挑戦!!
先月テンプレートのバージョンアップも終わったことですし、今回ブログの表示速度を改善してみることにしました。
まずは相互リンク先のぼっちんさんも愛用しているGTmetrixというサイトで、改善前のブログ表示速度を計測してみました。
トップページを計測した結果としては以下のような感じで、時間帯によっても違ったりするみたいなんですけど、だいたい5秒台後半は掛かってしまっているようです。
lazyloadを使って画像表示を遅延させたりしているので、基本的な画面が構築されるOnloadまではそこそこの早さではあるように思います。
今回はOnloadまでの処理時間を短縮するためにいくつかの小細工を施してみました。
難しいことは後回しにして、先に結果だけ報告しておきますね。
約1.5秒程度高速化することができています。
トップページからゴチャゴチャとプラグインが表示されていることを考えれば、まずまずの結果だと思います。
そんでコレ。設定から1週間経ってないんでまだ広告が表示されちゃってますが、画像高速表示の設定を「高速表示しない&広告なし」にしてみてあるんですよね。
前から気になってたんですけど、FC2広告表示のスクリプトで読み込みが結構止まっていることがあったりするんで、今回試しに広告なしにしてみました。
来週にはもう少し早くなってるんじゃないかと期待しています。
それでは実際にやってみた小細工について紹介していきます。
下にあるような小細工をやると元に戻すことはほぼ不可能になりますので、テンプレートを変更する際には複製をして、元のテンプレートは必ず残すようにしてくださいね。
小細工1:JS/CSSの圧縮とインライン化
まずは次のサイトを利用して基本中の基本であるテンプレートのJavaScriptやCSSの圧縮を行いました。
Online code convert tools and utilities - Beautify Converters beautifyconverter.com
Beautifier And Minifier tools
外部JavaScirptはほとんど圧縮されているので、ここでやったのはCSS圧縮ぐらいなんですけどね。
んで。
ブログ表示を遅くしている一番の要因は外部へのアクセスの多さだったりするわけで、CDNなどを介して高速アクセスしているものを除き、外部JSファイルとCSSファイルの中身をテンプレートHTMLに直接書き込んじゃいました。
更にはスタイルシートを読み込んでいる部分も削除して、圧縮したスタイルシートもHTML編集の中に書きこんじゃいました。 ギャァァァー
↓スタイルシートを読み込んでいる部分
<link rel="stylesheet" href="<%css_link>" media="all">
テンプレートHTMLがとんでもない状態で、他所のブログのHTMLコードを見るのを楽しみにしているオジサンに怒られてしまいそうです。
またグーグル先生的にも、CSSを大量にインラインで書いている状況はいかがなものだろうかと思わなくもありませんが、これが良くないとハッキリ分かるほど検索流入もないですし、ひとまずこのままで様子を見てみたいと思ってます。
でもね。これが一番効果が高かったように思えるんですよね。
小細工2:ちっちゃい画像のData URI化
僕のブログカードのピン画像とかアイコンみたいにちっちゃい画像とかもブログではよく使われていたりするんですが、これも画像サイズに比べてアクセス時間の方がよっぽど時間が掛かっちゃたりしてブログ表示が遅くなる要因になったりします。
本来はスプライトといって、一つの画像の中にちっちゃな画像をいくつもまとめておいて、CSSで必要部位を切り出していく手法が理想的なのだろうと思いますが、めちゃ大変そうじゃないですか?
だもんで。そのような画像データを以下のサイトでData URIに変換してインライン化しました。
画像をData URI schemeでテキストに変換するツール - PEKO STEP
読み込んだ画像をData URI schemeでbase64のテキストに変換するツール。画像をテキストに変換することでHTMLやCSSの内部に画像データを直接埋め込むことができます。
Data URIは画像データをテキストデータに変換したもので、HTMLのimg src=""の中や、CSSのbackground:url()の中に入れて表示させることができます。
ただ画像データに比べてデータサイズが大きくなってしまったり、ブラウザに画像としてキャッシュされなかったりするので大きな画像には不向きです。
例えば僕の右カラムにあるコメントとトラックバックを切り替え表示できるプラグインなんだけど、これ表示スペースがコンパクトでなかなかの優れものだと個人的には思っているんですが、下の赤丸つけてある部分は全てそれぞれの画像ファイルにアクセスしてるんですよね。
まぁ。ファーストビューでは表示されないところに配置されているんで、人によってはどうでもいいことなのかもしれないんですけどね。
当然一回読み込んじゃえば、使いまわす分にはアクセスが発生することがないんですけど、最初だけとはいえこんなチッコイものに時間を取られているとか考えちゃうとねぇ。
こういった部分にはData URIがとっても有効だと思います。
詰めていくとキリがないのだけれど…
僕のブログの、マウスオーバーでアイキャッチ画像がクルリと回るサークルギャラリーも元サイズ画像から持ってきているので、ホントはそれに合った画像サイズの方が微妙に早くなったりするんですよね。
FC2ブログテンプレート変数で取得した画像ファイル名をJavascriptで書き換えて、画像アップロード時に自動保存しているサムネイル画像から表示できるようにしてみたりしたんですけど。
保存されるサムネイルがしょぼくて…ブラウザで元サイズから縮小表示されたものに比べると見た目が全然悪いんですよね。
80pxとかもっと小さければ気になりませんが、180pxとかだと霞んで見えたりシャギーが目立ったり。
そこに表示するために適度に縮小した画像を別途にアップロードしておけば良いのですが…う~ん。そこまで手間をかけるだけの効果があるような気もしませんし。
まぁ表示速度に関しては、それ以上にlivedoor相互RSSやランキング表示をはじめとするプラグインの方がネックになってくるんですけどね。ほとんど弄れないですし。
なんかこんな事やってると昔のDOS時代のAUTOEXEC.BATとCONFIG.SYSを弄るのが流行った時代を想い出します。
メインメモリをできるだけ消費しないために、いろんなドライバーをEMSに移動させたりとか・・・・
でも今回トップページだけでなく、個別記事の表示速度にも影響するベース部分を改善できたんで、検索からブログ訪問してくれる方にも効果があると考えてます。
今日のアイキャッチ画像は。
「ソードアート・オンライン オルタナティブ ガンゲイル・オンライン」から、レンちゃんです。
TVアニメ ソードアート・オンライン オルタナティブ ガンゲイル・オンライン
VRゲーム《ガンゲイル・オンライン》。このゲームでは、戦争により荒廃した未来世界にダイブしたプレイヤーが、銃火器を武器にモンスターやほかのプレイヤーと戦っていく。 主人公は、そんな殺伐としたゲームとは無縁の生活を送っていた女子大生・小比類巻香蓮。 長身がコンプレックスの彼女はかわいくて小柄なアバターを手に入れたことから、もう1人の自分「レン」として、ゲームの世界での生活を楽しむようになる。 そして、いつしかチーム対抗のバトルロイヤル戦《スクワット・ジャム》に参加することになり……!?
第1話視聴しました。
人の動きでありえない速度って…また最速属性の主人公かよ。
と思ったんですが、この作品原作はSAO原作者じゃなくて、「キノの旅」の作者だったんですね。
レンちゃん可愛いしコミカルだし。想像より良かったです。
ただもう少し明るいシーンの絵が欲しいかな。
線は見えるものの、資料が少ないので色合い補正がムズかったです。
- 2018年4月のブログ運営の状況 ~ 表示速度向上という名目で遊び尽くした感じです。 ~2018/05/15
- 初回訪問者と常連さんのどちらを優先するのか?2018/04/17
- ブログの表示速度改善を図ってみました。【現在閲覧中】2018/04/12
- 2018年3月のブログ運営の状況 ~ IEでレイアウト崩れが起きていたのを最近気づきました ~2018/04/07
- エクセル株価取得VBAでグーグルファイナンスから米国株・米国ETFの取得が出来なくなってました。2018/03/24