GTmetrixスピードスコア D66%からA100%にするために行ったこと

要約テンプレートがスコアを落とす理由

画像の原寸と表示寸が著しく異なるため です。
「著しく」というのは原寸が表示寸の2倍以上だと思ってください。
私が制作した既存要約タイプテンプレートでは、トップページのサムネイル表示に 原寸の画像 を出力する変数を利用しています。
理由は以下の通り。

• サムネイル専用変数を利用するとバリデートエラーが発生するため
• サムネイル専用変数では高dpi対策ができないため

トップページサムネイルになる画像はイコール OGPで利用される画像 です。
現在の推奨は 横1200px以上 ですから1200あるいはそれ以上のサイズの画像を対象サムネイル用に指定している方が多いと思います。

要約タイプテンプレのトップページは大抵以下のようなスタイルです。 テンプレートによって様々ですが、各アイテムが300px〜500pxといったところでしょうか。
仮に画像原寸が1200px、トップサムネイルが300px表示だとすれば約4倍ですよね。
GTmetrixのPageSpeed Scoreはこの点を大きく減点しています。

対策を始める前に

詳細説明の前に以下の点を熟考してください。

メリット(pros)

スコアが高くなるYO

デメリット(cons)

とにかくめんどくさい(サイズ違いの画像を複数作成します)

メンテナンス性が落ちる(htmlが増えます)

継続必須(一度始めたらテンプレ変更するまで継続の必要あり)

新記事のみならず過去記事全て対象

画像サーバーの番号が変更されることがある

クッソめんどくさいです (´・ω・｀)
また、無料会員の方にはおすすめできません。
これから行う作業のメインは 画像の作成(追加) です。
サムネイル1点につき運が良ければサイズ違いを2枚、運が悪ければそれ以上の枚数を作成します。
作成した画像はFC2サーバーにアップロードすることになりますので、仮に各5枚を要すれば単純に5倍の早さでストレージを使い切ることになります。
といってもFC2ブログは無料でも10GBなので余裕があるっちゃあるのですが。

一番の問題点というか懸念材料なのですが、画像サーバーの番号が変わることがある んですね。
負荷分散の意味でランダムに行われるのか、アカウントの無料・有料切り替えで生じるのかちょっとサンプルが少なくてはっきり言えません。
サーバー番号が変更されるとこの方法は効力を失います ので、もし途中で気づくようなことがありましたら作業を中断というか断念してください。
まぁよっぽど無いとは思いますが絶対とは言えません。それも踏まえ 自己責任 でお願いします。

これから行う作業内容の説明

対策の主旨

高スコア達成のための方法は レスポンシブイメージの使い倒し です。
レスポンシブイメージの「デバイスサイズ振り分け」と「dpi別振り分け」を同時に行います。

作業内容

1200pxを既存オリジナル画像と想定し、同画像の

• パソコン低dpi用 1点
• スマホ高dpi用 1点
• スマホ低dpi用 1点

最低でも3種作成します。
もしかしたらパソコン低dpi用とスマホ高dpi用を共通化できるかもしれません。その場合には2枚で済みますね。
本対策は画像作成がメインです。

画像作成手順

この手段についてはテンプレート製作者任せというわけにはいきません。
テンプレ製作者がユーザーの使用する画像URLを把握する手段はFC2独自変数の利用しかありませんが、現状では仕様的にそれが叶いません。
簡単に言えば「対応する変数が存在しない」んですね。
私の方でできる対策であればもうとっくにやってます(笑) 叶わぬがゆえの個人カスタマイズです。

製作者サイドによる対策は以下のリクエストが通れば実現できます。テンプレートユーザーさんがこれから行う作業の一切をやらずに済むわけです。
なので是非一票投じてください。お願いします （￣∀￣；）

結局これらの変数があればどうにでもなるんですね。マジで実装して欲しい

で、いろいろ考えたんですが、ここはやはりアナログな方法を取るしかないのかなぁ、と。
ともかく記事を書いてアップロードさえ済ませれば後は自動で該当画像URLを適用する、という方法を取るにはやはりFC2の独自変数を利用するしかないんですね。
各記事毎に必ず与えられ、かつ固有であり(重複しないという意味)、かつ英数字の羅列であり、かつユーザーが事前に把握可能な文字列であるもの。
消去法で残るのは <%topentry_no> のみです。
この変数は 記事番号 を取得するものです。
サムネイルは各記事につき1点のみなので、この変数を ファイル名として活用 すれば重複が起こりません。
作成する画像のファイル名称は規則に則り正確に作成します。基本は記事番号です。

例えば記事番号200のサムネイル用画像を作成する場合
https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/200.jpg
という画像を作成します。x は不特定文字列でユーザー毎に異なります。
基本URLは上記の通りですが、ただ今回は1枚だけ作れば良いわけではありませんので、さらに文字列の追加が必要です。

ここからは具体的作業を順序立てて説明します。

トップページを開きサムネイル画像を全てダウンロード

トップページに表示されているサムネイルを ドラッグ&ドロップ でデスクトップに保存します。
これでオリジナル画像をGETできます。
アップローダーから探し出すのは非常に困難なのでそういう下手は打たない。

ダウンロードした画像に対応している記事番号を把握(各記事を別タブで開いて照らし合わせ)、記事番号が111ならばその画像のファイル名を 111.jpg とする。

画像拡張子は必ず jpg に揃えてください。

オリジナルがpngやgifだったとしても jpg にします。
アニメーションGIFなどは動きが止まってしまいますし、透過PNGなどは背景色(通常は白)が付いてしまいますが、ここはどうにもできませんので割り切ってjpgに。
このファイル名修正作業をダウンロードした画像全てに行います。
1ページ単位でされると良いですね。大量のページをまとめてやろうと思うと逆に苦労します。

必要な画像サイズの選定

ファイル名修正が終わりましたら、必要なサイズの選定です。
ブラウザ画面をなるべく大きくし、その状態で各サムネイルの表示サイズがいくつなのかを確認。 小さくて見辛いですが横サイズは413.33pxということなので、420px とします。
まずこの横420pxが パソコン低dpi用 として必要です。

スマホ用についてはまず利用テンプレートがスマホでどんなロウスタイル(横並び状態)になっているかを確認します。

左は1列表示 です。スマホ最大機種の横幅は414pxで実際には左右にpaddingもありますので画像の専有横幅はもっと小さくなりますが、ここでも少し余裕を持たせて 420px とします。
右は2列表示 です。単純に420pxを2で割って 210px とします。

スマホで1列表示の場合は横420pxが スマホ低dpi用 として必要。
スマホで2列表示の場合は横210pxが スマホ低dpi用 としてそれぞれ必要です。

そしてその2倍の横幅、つまり1列ならば 820px、2列ならば 420px の画像が スマホ高dpi用 として必要となります。

スマホはこんな感じの考え方で大抵いけます。
1列の場合の「スマホ用で800px超え」はちょっと… と思われる方はスマホ最小機種の320pxを目安に640でも良いのかなぁ、と思います。私はそうしています。
ここまででかなり混乱するかもしれませんがともかく、低dpi用として 見た目とほぼ同等のサイズ を、高dpi用として低dpi用の2倍のサイズを、と考えればOKです。
ただしもともとのオリジナルは最初に1200pxと仮定しましたので、これはこれで流用します。つまりパソコン高dpiは既に保持しているので作成の必要は無い、と。

必要な画像

• パソコン低dpi --- 要素検証などを利用して実寸を掴む
• パソコン高dpi --- 作成不要
• スマホ低dpi --- 1列は420px, 2列は210px
• スマホ高dpi --- 1列は840px(or 640px), 2列は420px

画像縮小ソフト

オリジナルの画像(ページからDLしたもの)は 記事番号.jpg になっています。
ここから前章で把握した必要サイズの画像を作成します。オリジナルの複製&縮小処理ですね。
縮小画像のファイル名提案ですが、画像のファイル名というのはほとんどがが数字の羅列です。
特に画像の共有サイトからDLした画像は 掲載順 = ファイル名 になっていることもあります。
なので単純に「記事番号」+「拡張子」という名称にしてしまうと、既に持っている他の画像とファイル名がかぶってしまうかもしれません。今回の場合
ファイル名重複は絶対に起こしてはいけません。

というわけで重複しないように末尾に何かくっつけた方が良いですね。
推奨は 記事番号--420.jpg この形。
ハイフン2連に続き 420 は画像の横サイズです。
横320なら --320 ですね。
画像ファイル名称でハイフン2連はまず無いですし、横サイズを書いておくとすぐに参照できて便利かと思います。
あくまでも私個人の推奨なので従う必要はありませんが、ともかく既存ファイルとの「重複」に気をつけて自身の法則を作ってください。

さて、オリジナルを基にしてサイズ違い画像を作っていきますが、ファイル名を手打ちしていたのでは気が遠くなります。
画像作成については単純な反復作業なので、便利ツールを準備できるかどうかが鍵ですね。

Mac専用おすすめソフト「Th-MakerX」

これ画像一括縮小の神ツールです。ただしMac専用。 Winソフトについてはわからないです。ごめんなさい。

デスクトップで作業しますのでフォルダも上手に使うとワヤクチャなことにならなくて済むと思います。
一日仕事を覚悟していましたが、このソフトのおかげで休憩を挟みながらの2時間弱で済みました。マジ神。

オリジナル画像をアップロードする必要はありませんので、作業が終わりましたら削除してください。

テンプレートhtml修正

<!--body_img--> で検索すると、<!--/body_img--> までの間に img要素 があるはずです。クラス名に lazyload が付いているのも確認してください。
そのimg要素を以下の通り修正します。

サムネイル専用として以下のサイズを用意、推奨のファイル名ルールを利用した場合のサンプルです。

• パソコン低dpi用 --- 360px
• スマホ低dpi用 --- 420px
• スマホ高dpi用 --- 640px

<picture>
  <source media="(max-width: 414px)" srcset="" data-srcset="画像サーバーのアドレス<%topentry_no>--640.jpg 2x, 画像サーバーのアドレス<%topentry_no>--420.jpg 1x">
  <source media="(max-width: 900px)" srcset="" data-srcset="<%topentry_image_url> 2x, 画像サーバーのアドレス<%topentry_no>--360.jpg 1x">
  <img class="lazyload" src="<%topentry_image_url>" srcset="" data-srcset="<%topentry_image_url> 2x, 画像サーバーのアドレス<%topentry_no>--420.jpg 1x" alt="<%topentry_title>">
</picture>

デフォルトhtmlのimg要素にlazyload以外のクラス名が付いていた場合はそのクラス名も必ず入れるようにしてください。

2行目がスマホ用の指定です。srcset="" の部位はバリデートを意識する方はdataURIを、そうでない方は属性を削除。
URLの後ろに 2x のついているものが高dpi用、1x の付いているものが低dpi用画像です。
画像サーバーのアドレス<%topentry_no>--640.jpg の緑部分は手打ちしてください。ユーザー毎に異なる内容です。私の場合なら以下の通り。

https://blog-imgs-115.fc2.com/v/a/n/vanillaice000/<%topentry_no>--640.jpg

3行目がパソコン用指定。dataURI利用の有無についてはスマホ指定と同様です。
高dpiはこれまでサムネイルとして利用していた画像をそのまま使っています。

対策前スコア・対策後スコアのスクリーンショットです。
注) Google Analyticsを入れると99%に落ちます。

スピードスコアテストのからくり

「テスト系ツールはスクロールという動作を行わないのでJSファイル読み込みをスクロール発火にするとスコアが上がりますよ。」というのは既に他の記事で書きました。
それに加え 高dpiを想定していない んですね。
していないというよりもテストツールは条件の「悪い方」を想定しますので当たり前っちゃ当たり前。
今回の対策を一言で言うと、低dpiのサポート です。
テストは低dpiの方で判定しますので、そこをちゃんと処理することで結果スコアが上がります。

「表示スピード(fully loaded time)が速ければスコアが高くなる」わけではない というのも既に書きました。
例えば1000pxの画像をトップページサムネイルにしていて、サムネイル表示部位が450pxの場合と800pxの場合。
全く同じ画像が表示されますけども、スコアは800px表示の方が高くなります。
ダウンロードの容量などが全く同じでも表示面積が違うとスコアが変わる、これはテスト系ツールが「既存レイアウトを保持する」を前提としているからです。
提案数が増えるとスコアは下がる、というのはこういうことです。ここで対策した「提案」が「画像そんな大きくなくて良いんじゃね？ (´・ω・｀)」なんですね。

ところで私のマシンはスマホもパソコンも高dpiです。
試しに高dpi用画像を無くしてみましたが、まー見れたもんじゃなかった((((笑)
画像がぼやけてるだけでこうも野暮ったくなるとは。
ですから「高dpiを無視する」というのはやっぱナシだな、と思いましたよね (´・ω・｀)

まとめ

ここまでやる必要が有るかと問われたら「無い」と答えます(笑)
スコアは上がってますが速度自体はコンマ3秒しか変わってないですし。
一般ユーザーさんで画像にここまで時間かけられる人って居るのかしらという疑問も ^^;

で、Googleがスピードアップデートを行ったわけなんですが、Googleのスピード評価はSpeed Insightsの方なんですね。GTmetrixは関係ないです。
Speed insightsはもちろん画像のサイズについても減点はしているのですが、GTに見られるほどの重要事項にはなっていません。
もっと総合的な判断というか、テクニカルな部分の指摘を行っています。
ラウンドトリップだとかブロッキングリソースだとか。
今私が個人的に利用しているテンプレートはそのあたりの対策もしていますのでSpeed insightsでも90点を超えています。
ただそれを共有化できるかというと、ちょっと難しいんじゃないかと思っています。
カスタマイズは完全自己責任・相談不可という条件をつけざるを得ません。
一般ユーザーさんだとまずカスタマイズできないんじゃないだろうか。たぶん…。
そして今回の対策を行ってもSpeed insightsの評価はほとんど変わりません。何故ならhtml量が増えているから(笑)
プラマイゼロ、という結果となりました。

おまけ(Lazysizes追加設定)

定型文だとしても複雑なhtmlを「難しい」と感じさせる原因の一つは 書き換える箇所をパっと見ただけで判断できない ことだと思うんです。
picture要素というのはただでさえ冗長ですし、media="(max-width: 900px)" とか言われても「はい？ (´・ω・｀)」って感じかも。
max-widthとなってますがこれ min-widthの場合もあるわけなんですよ。maxとminが入れ替わったらもう全く内容違ってしまいますし、見た目に直感的じゃないですよね。
「どっちをどっちに入れるんでしたっけ？あれ？」とかなったことないですか (´・ω・｀)

Lazysizesに customMedia というのがあるんですね。
どこにあるかというと、LazysizesのJSファイルを開いて検索すると1箇所あります。
デフォルトでは
customMedia:{} こうして無指定になってますので、以下のように書き足します。

customMedia:{'--small':'(max-width:414px)','--large':'(max-width:900px)',}

414がスマホサイズのブレイクポイントです。420でも良いかもしれない。
これを追加しておくと、この形だったものが…

<picture>
  <source media="(max-width: 414px)" srcset="" data-srcset="1">
  <source media="(max-width: 900px)" srcset="" data-srcset="2">
  <img src="" data-src="2" alt="" class="lazyload">
</picture>

こう書けるようになります。

<picture>
  <source media="--small" srcset="" data-srcset="1">
  <source media="--large" srcset="" data-srcset="2">
  <img src="" data-src="2" alt="" class="lazyload">
</picture>

--small と --large。
これならすぐわかりますよね。もっとわかりやすいものがあれば自分で決められます。例えば --sp と --pc とか。
これ何気に便利なのでファイルの修正が可能であればやっておくと良いと思います。
これはvariables(変数)なのでハイフン2連の書式を守ってください。その後ろは任意文字列でOKです。

CDNを利用している方はファイル修正できませんので、Lazysizes関連ファイルの下に以下の内容を追加します。

<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.customMedia = {
  '--small': '(max-width: 414px)',
  '--large': '(max-width: 900px)',
};
</script>