ブログの表示速度改善を図ってみました。

ソードアート・オンライン-オルタナティブ-ガンゲイル・オンラインのレンがやる気になっている画像

やっぱりスピード至上主義だよね!?

ブログの表示速度の改善に挑戦!!

先月テンプレートのバージョンアップも終わったことですし、今回ブログの表示速度を改善してみることにしました。

まずは相互リンク先のぼっちんさんも愛用しているGTmetrixというサイトで、改善前のブログ表示速度を計測してみました。

トップページを計測した結果としては以下のような感じで、時間帯によっても違ったりするみたいなんですけど、だいたい5秒台後半は掛かってしまっているようです。

変更前GTmetrix-20180411
変更前GTmetrix内訳-20180411

lazyloadを使って画像表示を遅延させたりしているので、基本的な画面が構築されるOnloadまではそこそこの早さではあるように思います。


今回はOnloadまでの処理時間を短縮するためにいくつかの小細工を施してみました。

難しいことは後回しにして、先に結果だけ報告しておきますね。

変更後GTmetrix-20180411
変更後GTmetrix内訳-20180411

約1.5秒程度高速化することができています。
トップページからゴチャゴチャとプラグインが表示されていることを考えれば、まずまずの結果だと思います。

そんでコレ。設定から1週間経ってないんでまだ広告が表示されちゃってますが、画像高速表示の設定を「高速表示しない&広告なし」にしてみてあるんですよね。
前から気になってたんですけど、FC2広告表示のスクリプトで読み込みが結構止まっていることがあったりするんで、今回試しに広告なしにしてみました。
来週にはもう少し早くなってるんじゃないかと期待しています。

それでは実際にやってみた小細工について紹介していきます。

注意!!

下にあるような小細工をやると元に戻すことはほぼ不可能になりますので、テンプレートを変更する際には複製をして、元のテンプレートは必ず残すようにしてくださいね。

小細工1:JS/CSSの圧縮とインライン化

まずは次のサイトを利用して基本中の基本であるテンプレートのJavaScriptやCSSの圧縮を行いました。

外部JavaScirptはほとんど圧縮されているので、ここでやったのはCSS圧縮ぐらいなんですけどね。

んで。
ブログ表示を遅くしている一番の要因は外部へのアクセスの多さだったりするわけで、CDNなどを介して高速アクセスしているものを除き、外部JSファイルとCSSファイルの中身をテンプレートHTMLに直接書き込んじゃいました。

テンプレートインライン化1

更にはスタイルシートを読み込んでいる部分も削除して、圧縮したスタイルシートも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()の中に入れて表示させることができます。

ただ画像データに比べてデータサイズが大きくなってしまったり、ブラウザに画像としてキャッシュされなかったりするので大きな画像には不向きです。

例えば僕の右カラムにあるコメントとトラックバックを切り替え表示できるプラグインなんだけど、これ表示スペースがコンパクトでなかなかの優れものだと個人的には思っているんですが、下の赤丸つけてある部分は全てそれぞれの画像ファイルにアクセスしてるんですよね。
まぁ。ファーストビューでは表示されないところに配置されているんで、人によってはどうでもいいことなのかもしれないんですけどね。

コメントトラックバック20180411

当然一回読み込んじゃえば、使いまわす分にはアクセスが発生することがないんですけど、最初だけとはいえこんなチッコイものに時間を取られているとか考えちゃうとねぇ。
こういった部分にはData URIがとっても有効だと思います。

詰めていくとキリがないのだけれど…

僕のブログの、マウスオーバーでアイキャッチ画像がクルリと回るサークルギャラリーも元サイズ画像から持ってきているので、ホントはそれに合った画像サイズの方が微妙に早くなったりするんですよね。

FC2ブログテンプレート変数で取得した画像ファイル名をJavascriptで書き換えて、画像アップロード時に自動保存しているサムネイル画像から表示できるようにしてみたりしたんですけど。

保存されるサムネイルがしょぼくて…ブラウザで元サイズから縮小表示されたものに比べると見た目が全然悪いんですよね。
80pxとかもっと小さければ気になりませんが、180pxとかだと霞んで見えたりシャギーが目立ったり。

そこに表示するために適度に縮小した画像を別途にアップロードしておけば良いのですが…う~ん。そこまで手間をかけるだけの効果があるような気もしませんし。

まぁ表示速度に関しては、それ以上にlivedoor相互RSSやランキング表示をはじめとするプラグインの方がネックになってくるんですけどね。ほとんど弄れないですし。

なんかこんな事やってると昔のDOS時代のAUTOEXEC.BATとCONFIG.SYSを弄るのが流行った時代を想い出します。
メインメモリをできるだけ消費しないために、いろんなドライバーをEMSに移動させたりとか・・・・

でも今回トップページだけでなく、個別記事の表示速度にも影響するベース部分を改善できたんで、検索からブログ訪問してくれる方にも効果があると考えてます。

今日のアイキャッチ画像は。

「ソードアート・オンライン オルタナティブ ガンゲイル・オンライン」から、レンちゃんです。

TVアニメ ソードアート・オンライン オルタナティブ ガンゲイル・オンライン

VRゲーム《ガンゲイル・オンライン》。このゲームでは、戦争により荒廃した未来世界にダイブしたプレイヤーが、銃火器を武器にモンスターやほかのプレイヤーと戦っていく。 主人公は、そんな殺伐としたゲームとは無縁の生活を送っていた女子大生・小比類巻香蓮。 長身がコンプレックスの彼女はかわいくて小柄なアバターを手に入れたことから、もう1人の自分「レン」として、ゲームの世界での生活を楽しむようになる。 そして、いつしかチーム対抗のバトルロイヤル戦《スクワット・ジャム》に参加することになり……!?

第1話視聴しました。
人の動きでありえない速度って…また最速属性の主人公かよ。
と思ったんですが、この作品原作はSAO原作者じゃなくて、「キノの旅」の作者だったんですね。

レンちゃん可愛いしコミカルだし。想像より良かったです。

ただもう少し明るいシーンの絵が欲しいかな。
線は見えるものの、資料が少ないので色合い補正がムズかったです。

ブログ運営SAOOガンゲイル・オンラインレン

2 Comments

mochi

mochi  

(*ノ▽ノ)イヤン 見ちゃダメ❤

こんばんは。ぼっちんさん。

> mochiさん、おはようございます~ 他所のブログのHTMLコードを見るのを楽しみにしているオジサンで~す (≧ω≦。)プププ

さっそく反応していただけて、とっても嬉しいです。ヽ(^◇^*)/ ワーイ

> FC2運営側がGzipを解放してくれたら、何もこんな面倒なことをやらなくてももっと効率よく表示速度は快適になるのに (^^ゞポリポリ
> FC2リクエストで「せめて有料会員にはGzip利用を解放してちょ!」的にリクエストも出してるんですけど(笑)


GTmetrixのWaterFall分析を見ると、僕としてはGzip圧縮の効果に少々疑問を感じ始めています。
確かに何の改善もしていなければ、手間暇に対する速度改善のパフォーマンスは高いと思いますが、
データサイズ云々よりもCONNECT時間の方が速度に大きく影響している印象を持っています。
今回JS/CSSのインライン化を進めたのも、如何にして外部データへのアクセス回数を減らすか?
といった事に挑戦するための一つの手法だったわけで。

そういうこともあって、FC2ブログ設定にある画像高速表示を利用することよりも、
広告へのアクセスを無くした方が速度改善効果があるんじゃないか?と考えた次第です。


> そうそう「livedoor相互RSS」は負荷は大きいとは以前から予想はしてたんですけど、実際面のデータ見たら \(><)/ギョッ ってなっちゃいました (^_^; アハハ…
>

「livedoor相互RSS」のJS呼び出しを試しにdeferとか入れてみたんですけど表示されなくなっちゃって。
このまま何もしないで諦めるのも癪なんで、JSファイルを圧縮してFC2ブログ内にアップロードしたものを呼び出すようにしています。全然効果ありませんでしたけど。(ノω・、) ウゥ・・・
「livedoor相互RSS」に関してはいずれ再挑戦したいと思ってます。

> mochiさんも、テンプレートを私のような「要約タイプ」にしたら、きっとたぶん私のトップページと同じようなGTmetrixスコアになるんでしょうね ^^
> 私のはもう「これ以上やることはない」ってところまでやった気になってます(笑)


はい。この前のぼっちんさんのGTmetrixの記事を見てつくづく感じました。ニャハハ(*^▽^*)
それでも検索流入の場合はトップページではなく直接個別記事に飛んできますんで、
プラグインの速度改善も無視できないなぁと思ってます。

> そうそう、CSSスプライトを実際にテストしてみましたけど、私のトップページの「カテゴリ」枠内の表紙画像19枚を処理するとなんと7M程の画像になってしまって、FC2ブログの通常のアップロードでは送信出来ないサイズになってしまって(笑)FTPでアップしてテストしたんですけど、こっちのファイルサーバーがどんくさくて結局はDスコアまで下がってしまってムダな抵抗でした(爆)


画像があまり大きすぎるとかえってパフォーマンスが悪くなってしまうのかもしれませんね。
ファイルサーバーの速度については僕もちょっと気になっていることがありまして。
GTmetrixのWaterFall分析では、先日ファイルアップロード先になったblog-imgs-119.fc2.comのサーバーよりも、
以前保存先となっていたblog-imgs-120.fc2.comの方がアクセスが早いみたいなんですよ。
最新のファイルサーバーの方がアクセスが多い分、遅延が発生してしまっているのかな?と想像しています。

コメントありがとうございました。(^ー゚)ノ

2018/04/13 (Fri) 21:35 |  REPLY |   

ぼっちん  

それは私です(笑)

mochiさん、おはようございます~ 他所のブログのHTMLコードを見るのを楽しみにしているオジサンで~す (≧ω≦。)プププ

GTmetrix分析でのmochiさんのこの対処は私のパターンと殆ど同じですよ(笑)
要は、突き詰めるとこの方法に辿り着いちゃうんですよね、いまのFC2ブログの利用環境だけで対策すると。
FC2運営側がGzipを解放してくれたら、何もこんな面倒なことをやらなくてももっと効率よく表示速度は快適になるのに (^^ゞポリポリ
FC2リクエストで「せめて有料会員にはGzip利用を解放してちょ!」的にリクエストも出してるんですけど(笑)

そうそう「livedoor相互RSS」は負荷は大きいとは以前から予想はしてたんですけど、実際面のデータ見たら \(><)/ギョッ ってなっちゃいました (^_^; アハハ…
かと言って使い始めたらもう外せないアイテムにもなっちゃいましたから「まっ いいかぁ(笑)」って感じで気にしないことにしましたけど (^^ゞポリポリ

mochiさんも、テンプレートを私のような「要約タイプ」にしたら、きっとたぶん私のトップページと同じようなGTmetrixスコアになるんでしょうね ^^
私のはもう「これ以上やることはない」ってところまでやった気になってます(笑)

そうそう、CSSスプライトを実際にテストしてみましたけど、私のトップページの「カテゴリ」枠内の表紙画像19枚を処理するとなんと7M程の画像になってしまって、FC2ブログの通常のアップロードでは送信出来ないサイズになってしまって(笑)FTPでアップしてテストしたんですけど、こっちのファイルサーバーがどんくさくて結局はDスコアまで下がってしまってムダな抵抗でした(爆)

2018/04/13 (Fri) 08:23 | EDIT |  REPLY |   

Post a comment