FC2ブログでGTmetrixスコアをダブルAにしてみた考察

弊ブログでは以前より GTmetrix を利用してブログ表示速度の高速化を図ってきておりましたが、なんとかその評価スコアをダブルAにまで乗せることが出来るようになりました。

ブログのGTmetrixスコア

GTmetrixでのダブルA評価(%数値については拘らず)を目標にその必要なブログ表示速度改善を続けて来たんですが、やっとなんとか目標達成となりました。

ただ、GTmetrixでスコア取得する時間帯によっては、テストサーバーからのインターネット下り回線の混雑状況によってその結果表示に若干のバラツキが起きる(特にYSlow Score や Fully Loaded Time の値)ことも解りましたので、1回のGTmetrix分析の結果をそのまま鵜呑みにせず、時間をおいて数回の結果の中から一番良い結果で認識なさると良いでしょう。


GTmetrixスコアをダブルAにする為の努力

それではGTmetrixの分析結果を基に、各項目に対してどんな具体的な改善作業を行ったらダブルA評価が得られるようになるのかは、実は利用しているテンプレートや記事の書き方や利用しているプラグインやらと、ブログを構成している環境によって千差万別でして、ですから「GTmetrixでダブルA評価を出すにはこうやる」のような具体的指南記事はネット上に殆ど見当たらないんです(爆) つまりはブログ個々によって方法も異なると言う次第です。

まぁ、それでも筆者の実施した経験値として「こんなことを行いました」のようなことでしたら書けるんですが、筆者の方法にはWeb知識の常識外な方法も含みます(笑)から「そんなアホなこと書かないで!」と思われる識者さんもおられることでしょうが「論理通りにならない場合もあると言うことが確認出来た」と言うことでご理解戴けたら幸いです (^^ゞポリポリ

① 良質な「レスポンシブテンプレート」を採用する(旧式の固定幅テンプレート利用は論外)

GTmetrixにて高スコアを得るには、ブログテンプレートの選択が大きく影響することが理解出来ました。

後の項目で説明致しますが、ブログには少なからず「画像」の表示を行うことがありますが、その画像を表示するのに「LazyLoad=画像遅延読み込み」と言うテクニックが絶対的に必要になり、そのLazyLoadをテンプレートに初期的に導入されているものを選ぶのがGTmetrixでの高スコアを得る出発点と言っても過言ではないですから、そのようなテンプレートを選ぶことが近道となります。

その条件で筆者がお勧めするテンプレートは、FC2ブロガーさんでしたら、ブログ管理ページにログインしている状態で vanillaice(Akiraさん) にアクセスすると、 vanillaice(Akiraさん)の素晴らしいレスポンシブテンプレート一覧が表示されますが、それらの中の「画像遅延読み込み」という語句のあるものにはそのLazyLoadが組み込まれているので、好みのデザインのものを選択なさるとよいでしょう。
ただテンプレート説明欄の文字数制限で「画像遅延読み込み」が記されていないものもあるようですから、細かく調べてみるとよいでしょう、因みに弊ブログで利用させて戴いております「Axis」の説明欄には「画像遅延読み込み」と記されておりませんが、実際には組み込まれております。

固定幅テンプレートは論外 な意味は、レスポンシブテンプレートであればそのテンプレート1つへのGTmetrixスコアアップへの作業努力をするだけで済みますが、旧式の固定幅テンプレートの場合には、パソコン用とスマートフォン用の2つのテンプレートにその作業努力をしなければならず2倍の作業量が必要となります。 それはそれぞれが別々のテンプレートであって連動はしていないからです。

一生懸命にパソコン用テンプレートのみをGTmetrixでのスコアアップ努力をしても、スマートフォン用テンプレートが何もされないのでは、あなたのブログのスマートフォン版にはGTmetrixスコアはなんらの変化も起こらないので、GoogleのMFI(モバイルファーストインデックス)的にも損失になってしまいます。

② ブログで表示する画像は確実にファイル容量を圧縮軽量化する(横縦サイズを縮小する意味ではありません)

これはブログ運営の基本中の基本知識ですから、それを怠っているブロガーさんは、いま即時に「画像の圧縮軽量化の方法」と検索して知識吸収して、せめて次の記事で載せる画像からその実施をスタートさせることは必須と理解して下さい。

筆者のお勧めツールは、無料の画像圧縮軽量化のWebサービスである Compressor.io  と TinyPNG  で、とても綺麗にかつ軽量化率が高くて素晴らしいサービスでして、利用登録なしでいくらでも自由に簡単操作で利用出来ますし、圧縮後の画像にウォーターマークや広告など一切入りません d(-_^)good!!

[ 両無料サービスの初期画面はそれぞれ下図のように表示されます ]

Compressor.io

TinyPNG

③ 表示画像は可能な限り全てにLazyLoad遅延読み込みを設定する

①の項目と関連しておりますが、筆者がお勧めしているレスポンシブテンプレートクリエーターさんのAkiraさんのサポートブログ The other way round にあります、そのLazyLoadの利用の仕方の「Lazyloadを使ってみる【初級編】 【中級編】 【上級編】」の各記事はとても詳細に解説されておりますから参考にされると良いでしょう。 筆者も全幅の信頼の中で知識習得させて戴きました。

Lazyloadを使ってみる【初級編】 - カスタマイズ

画像の遅延読み込み、一般的に Lazyload といわれるものですが、こちらを実際に使ってみようの巻 (´・ω・`) 手順及び説明など全て、私が制作したテンプレート上での作業であることが前提で、他製作者様テンプレートに関する言及は一切ありません。...

④ FC2ブログのコメント欄で色文字や絵文字等の装飾を利用しない場合にはその装飾スクリプト部分をテンプレートから削除する

FC2ブログのコメント欄には、大抵は下図のような「コメント装飾ツールバー(コメントツールバー)」が初期的にブログテンプレートに組み込まれておりますが、これにはけっこうブログ表示速度を遅らせる要因が潜んでいて、テンプレート作者さんによってはこの装飾部分を導入していない場合もあります。(実際にはこのコメントツールバーがなくても色文字や絵文字は入力出来る)

コメント装飾ツールバー

弊ブログでは既にこの「コメント装飾ツールバー」はテンプレートから削除してありますが、利用したままでもブログの表示速度を遅らせてしまう要因を取り除く(遅延ローディング)方法もありますので、下記のブログカードをクリックしてその弊記事をご参照下さい。

FC2ブログのコメント投稿欄の装飾ツールバーが重たいので遅延ローディングしました - 初級パソコン術

FC2ブロガーさんでしたら、記事ページ下部のコメント投稿欄にある「コメント装飾ツールバー」をご存知ですよね、それが正式な名称なのかは筆者はよくは知りませんが(これの正式名称ってあるんでしょうか? ご存知の方はお知らせ下さいまし(笑))...

⑤ jQueryプラグインやFontAwesome5等でもCDNサーバー読み込みに拘らない方がよい場合もある

この部分は、Web知識の識者さん達から「それは誤った考え方である!」と叱られる部分でしょう(笑)

何を言っているかと言いますと、いまの時代のブログではよくjQueryと言う技術を使うことが多く、ブログテンプレート作者さん達も、初期的にテンプレートに組み込んでいることが殆どと言っても過言ではありません。

FC2ブログ管理ページで「テンプレートの設定」→「テンプレート管理 (PC用)」ページの下の方に「[ ○○○○○ ] のHTML編集」欄に表示されているものが、現在あなたが利用中のブログテンプレートのHTML内容なんですが、その中に


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider-min.js"></script>

このような記述箇所が見つかると思います(内容はバージョン等の違いはあります)が、この部分の記述方法のことをいま述べておりますが、上の列がそのjQuery本体で、下の青文字列部分のものが、そのプラグイン機能の1つです。(単に1つの例として表示しております)

これらは、大手配信元( ajax.googleapis.com や cdnjs.cloudflare.com )によってCDNサーバーから安定的にかつ高速に一般利用者に向けて提供されていて、世界中に数多くのコピーサーバー(キャッシュサーバー)にも分散配置されており、一般利用者はそれを考えることなく自動的に一番身近なそのコピーサーバーからブログ表示時に読み込まれるシステムなんです。

さて、jQuery本体はそのままとしても、下のプラグイン機能部分は、そのファイル容量によっては、わざわざその記述通りにCDNサーバーから読み込むのではなくて、FC2ブログのサーバー内に自身でアップロードして、そこから読み込む方がGTmetrixスコアがよくなる場合もあることが体験的に解りました。 GTmetrixスコア的には PageSpeed Score 1% / YSlow Score 2% 程度がアップしました。(あくまでも筆者経験値です)

⑥ 外部JavaScriptが複数ある場合には出来るだけ1つにまとめる

GTmetrix分析結果の「YSlow」の中にある Make fewer HTTP requests を開いてみますと
This page has ○ external Javascript scripts. Try combining them into one.
と表示されますが、つまりは「あなたのページには複数の外部Javascriptがあるから、それらを1つに組み合わせなさい」と言われます(笑)

例えば、テンプレートにこのように外部JavaScriptが書かれているとしたら


<script src="https://blog-imgs-82.fc2.com/o/o/p/oops0011/lity.js"></script>

<script src="https://blog-imgs-118.fc2.com/o/o/p/oops0011/prismkai-9brzc.js"></script>

<script src="https://blog-imgs-116.fc2.com/o/o/p/oops0011/jquery-event-move.js"></script>

<script src="https://blog-imgs-116.fc2.com/o/o/p/oops0011/g-twentytwenty.js"></script>

これらを「1つにまとめなさいね~」と言う意味なんです (^_^; アハハ…

何もビビることはありません 「複数のJavaScriptを1つにまとめる方法」 と検索すれば、いくらでもその方法は見つかりますから、複数の情報を読んでみて「これなら出来そう」と言う方法で試してみることです。

このような複数の外部JavaScriptを1つにまとめるその意味は https://~~~ と言うHTTPリクエストでの読み込み回数を減らすと言うことなんです。

実は、ブログ表示にはこの HTTPリクエスト の数が多ければ多いほど、ブログ表示に負担を掛ける(表示が遅くなる)ことを意味するんです、このHTTPリクエストは「ブログ内の画像表示」の時でも使われているんです。 ですから先の③の項目でも表現したように「表示画像は可能な限り全てにLazyLoad遅延読み込みを設定する」のようになるのです。

これを実行出来れば、あなたのGTmetrixスコアはかなりド~ンとアップします(笑)(1% 2% の比ではありません)

ただ、これには気をつけなければならないことがありまして、1つにまとめるとJavaScript同士が干渉しあって一部が正常動作出来なくなることがあり、今まで問題なく動作していたものが機能しなくなってしまうことが起きる場合もありますので、その辺りは動作検証しつつ作業をするようにして下さい。

また、外部JavaScriptを展開してプログラムを圧縮したものを、そのまま直接にHTML欄に記述してしまう方法もあります。

この方法だとHTTPリクエストも発生しませんから少しはブログ表示の速度アップに繋がりますが、この方法を多くのJavaScriptに利用してしまうと、HTMLソースの容量が増大してしまって逆にブログ表示に負荷を与えることにもなりますから、その辺りを考慮しつつ利用するとよいでしょう。

後書き

記事本編では書きませんでしたが、ブログ内で利用しているJavaScriptやCSSは「圧縮」したものをテンプレートに組み込むと、ブログ表示を速める効果があります。

そのようなツールには

等がありますから、活用してみると良いでしょう。

さてさて、読み直してみると記事をかなり端折って書いております(笑)が、解りにくいものがありましたらコメントでも戴ければと思いますが、あくまでも筆者経験値から表現しました記事ですので、論理にはそぐわない部分も多々あることでしょうけど、とにかく今の弊ブログで得ておりますGTmetrixスコアがその実証ですが、記載忘れをしている部分を思い出しましたら(笑)随時追記をして行くつもりです (^^ゞポリポリ

この今のGTmetrixスコアをずっと維持出来ないと意味がありませんね(笑)


あなたのブログはモバイルフレンドリーですか?
Google モバイルフレンドリーテスト

あなたのブログ内分析はGTmetrixが強力です!
GTmetrix


検索からの方はトップページへもどうぞ

関連記事

Comments 6

There are no comments yet.

mochi  

ダブルAスコアおめでとうございます!!

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

なんかスゴイ頑張られたみたいですね。
「Web知識の常識外な方法も」なんてことを書かれていますが、5以外はいたって正攻法の取り組みだと思いますし、その地道な努力の結果としてのダブルAスコアです。

5についての意見が分かれるのは、技術的なことよりもキャッシュに対する考え方だったり倫理感のようなものも含んでくるからだと思います。

技術的にはおそらくぼっちんさんがやられたように、外部ファイルのドメインを統一化した方が良いと考えています。YSlow Scoreにそんなチェック項目があったような気がします。
最近FC2ブログがHTTP/2対応されたことで、実質的な速度としてもJSライブラリで推奨されているCDN経由と遜色ないことが想定できますし。

一方でブラウザのデータキャッシュを踏まえると、共用性の高いJSライブラリなどのデータは共用性のある場所(JSライブラリで推奨されているCDN経由)から読み込むようにした方が、他サイトから回遊してきた場合でもキャッシュが働きやすくなるという考え方もできます。
ただこれは効果も含めて数値化できない項目なので人それぞれといったところかもしれません。

倫理的な要素としては、上記キャッシュに関係することなんですが、共用性の高いデータを固有場所(FC2サーバー等)から読み込むと、観閲者のパソコンの中に全く同じデータキャッシュがいくつも保存されることになり、ユーザーリソースの観点から好ましくないのでは?といったあたりです。

このあたりは正直僕も考えあぐねていて、未だに自分の中で答えを見つけることができないでいます。(^▽^;)

2018/06/15 (Fri) 00:46 | EDIT | REPLY |   
ぼっちん

ぼっちん  

To mochiさん

mochiさん、おはようございます ^^

なんかスゴイ頑張られたみたいですね。
いやいや(笑) 全然がんばってなんかいなくて、クロスワードパズルを解く感じで「ああやったら? こうやったら?(笑)」なんて楽しみながらやってたんですよ~(笑)
還暦年代ですから、脳みそを活性化させなくちゃね (≧ω≦。)プププ
でも、ありがたいお言葉で嬉しいです m(_ _)m

最近FC2ブログがHTTP/2対応されたことで、実質的な速度としてもJSライブラリで推奨されているCDN経由と遜色ないことが想定できますし。
さすがはmochiさん、私もせっかくのHTTP/2をフル活用しなくちゃ勿体ない気がしてのことだったんですが、結果としてGTmetrixスコアのアップにはなる場合もあることは確認出来たんですけど、mochiさんが危惧なさっている
観閲者のパソコンの中に全く同じデータキャッシュがいくつも保存されることになり
この辺りの検証方法を見つけられずにいるんです (^^ゞポリポリ
mochiさん、この辺り、何か方法論をご存知でしたら、ご教示戴けたら嬉しいです (^^ゞポリポリ
都合の良いツールなんかあったら良いんですけどね~ (^_^; アハハ…

まぁ、とにかく「これで良いだろう♪」と納得出来るところまでは検証してみたいものです(笑)
ああ、スコア的にはもうこれ以上はどうでも良い気持ちなんですけど、方法論は確定させたいものです (^^ゞポリポリ

2018/06/15 (Fri) 07:56 | EDIT | REPLY |   

mochi  

ブラウザキャッシュを見るツール

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

ブラウザのキャッシュを見るツールを探してみました。

GoogleChromeのキャッシュの中を覗くことができるツールが下記サイトにあります。
ChromeCacheView v1.77 - Cache viewer for Google Chrome Web browser
http://www.nirsoft.net/utils/chrome_cache_view.html

ページのずっと下の方に【Download ChromeCacheView】というリンクからダウンロードできます。

全く同じデータを異なるURLから読み込んだ時に、最初に読み込んだ方だけがキャッシュされるのか?それとも両方キャッシュされるのか?を検証することができると思います。

ちょっと使ってみました。
FontAwesomeで検索かけるとV4のCSSのものを含めて結構多くのバージョンのものがキャッシュされてました。
FontAwesomeV5はもうv5.0.13までバージョンアップされているんですね。
なんか週1ペースでバージョンアップしてるんじゃなかろうか?

こういう状況は予想してはいましたが、「共用性の高いデータを固有場所(FC2サーバー等)から読み込むと…」というくだりに対する拘りがアホらしく思えてきます。
故にどういう方向性で行くべきか考えあぐねているんですけどね。(^▽^;)

2018/06/15 (Fri) 21:05 | EDIT | REPLY |   
ぼっちん

ぼっちん  

To mochiさん

mochiさん、おはようございます ^^

昨夜はわざわざ「ChromeCacheView v1.77」を見つけてくださって、ありがとうございました。
「もし、mochiさんが既にご存知のツールでもあれば」というつもりでお聞きしたつもりだったもんですから、お手を煩わせてしまって申し訳ありませんでした m(_ _)m

で、早速ゆうべW杯・エジプトVSウルグアイ戦の合間に(笑)ツール使って見た結果
https://blog-imgs-117.fc2.com/o/o/p/oops0011/2018-06-15-Font-Awesome-Cache-comp.png
私が検証したかったキャッシュがピックアップ出来たんですけど、スクショの横長を途中カットして下に一覧出来るように加工してみたんですけど、これはFontAwesome5と他の複数JSをひとまとめにした塊でして、やっぱり「FC2サーバー内でGZip圧縮がされている(笑)」ことは確認出来て、ですけどHTTP/1.1であったり(笑)等が確認出来て、有意義でした(爆)

そうそう、そして、mochiさんが仰っておられますようにいろいろなCDNサーバーの経路からいろいろなバージョンのFontAwesomeが、山のように読み込まれていることに笑ってしまいました (^_^; アハハ…
これでは、「共用性の高いデータを固有場所(FC2サーバー等)から読み込むと…」と危惧しても「なんだぁ、こんなじゃ意味ないじゃん」って気持ちになってしまいますよね(笑)

私ってけっこうあっけらかんとした単純気質な人間ですから「細かいことなんか気にしない~♪」ってことで、やっぱり「固有場所(FC2サーバー等)から読み込む」のも1つの手だよね~♪って気持ちが更に強くなってしまいました(笑)
まぁ、シーンによって使い分ければ良いじゃんって感じです (^_^)ニコニコ 

2018/06/16 (Sat) 07:55 | EDIT | REPLY |   

mochi  

HTTP/2の表示に対応していないみたいです

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

ChromeCacheViewはスグに見つかりましたんで、そんなに手間はかかってませんよ。
逆に僕としても「へぇ~こんなになってんだ」といういろいろな発見が楽しかったです。(^_^)ニコニコ

ChromeCacheViewでHTTP/1.1と表示されるのは、たぶんこのソフトがHTTP/2に対応していないんじゃないかと思います。GoogleChromeではちゃんとh2表示されているんで。(^▽^;)

FontAwesomeは種類も多くキャシュ有効期限が1年と長めに設定されているので、もっと有効期限が短いFC2サーバーの方から読み出した方がユーザーリソース的に良心的という考え方もできますね。

ぼっちんさんのおっしゃるように、ここらへんについては僕も柔軟に考えていこうと思っています。(*^-^)ニコ

2018/06/16 (Sat) 12:04 | EDIT | REPLY |   
ぼっちん

ぼっちん  

To mochiさん

mochiさん、またまたのコメントをありがとうございます ^^

「へぇ~こんなになってんだ」といういろいろな発見が楽しかったです。(^_^)ニコニコ
そうなんです~(笑) 私も「これ、面白いねぇ」って笑ってしまいましたよ(爆)
マジで使えるツールですよね(笑)

ChromeCacheViewでHTTP/1.1と表示されるのは、たぶんこのソフトがHTTP/2に対応していないんじゃないかと思います。GoogleChromeではちゃんとh2表示されているんで。(^▽^;)
あっ なるほどですねぇ、納得です~(笑)

もっと有効期限が短いFC2サーバーの方から読み出した方がユーザーリソース的に良心的という考え方もできますね。
(笑) mochiさんがそう言って下さると私も(^。^;)ホッとしてしまいます(笑)
実際にはキャッシュの有効期限のことなんて考えにまったく入ってなかった(笑)ですけど、偏屈的に「これでも良いよね~」って自己認識って感じだったんですけどね (^_^; アハハ…

2018/06/16 (Sat) 12:44 | EDIT | REPLY |   

Leave a reply