96という数字が画面に出たとき、少しガッツポーズをしかけました。前に82点まで上げた話を書きましたが、その続きで有料版に手を出して、細かく設定を詰めていった結果です。
そのまま内訳の欄に目を落として、手が止まりました。5つ並んでいる数字のうち、動いていたのはひとつだけだったからです。残りは、82点だったときとまったく同じ数字が並んでいました。
先に断っておくと、ここで使っている Prime Cache は私が開発しているプラグインです。自分の作ったもので自分のブログを速くした記録なので、そのつもりで読んでください。プラグイン自体の紹介と、60点から82点まで上がったところまでは前の記事に書いたので、ここでは繰り返しません。この記事は、その先で行き止まりに当たった話です。
無料版に自動設定を当てただけの状態。
有料版で手動チューニングしたあと。上と見比べてみてください。
サーバーはエックスサーバーの共用プラン、テーマはCocoonです。計測はどちらも同じ条件で、スマホの中でも非力な機種と遅い4G回線を想定した設定にしてあります。
82から先は、お金で買えると思っていました
無料版の自動設定だけで82点まで来たので、有料版に切り替えれば90台の後半、うまくいけば100も見えるだろうと考えていました。差額を払えば、その分だけ点が上がる。そういう単純な話だと思っていたわけです。
実際に入れたのは、無料版にはない踏み込んだ機能でした。表示に必要なCSSだけを先に読ませる、使っていないCSSを消す、データベースへの問い合わせ結果も保存しておく。どれも本番のサイトで効くと言われているものです。ひとつ入れては計測し、また入れては計測し、を夜中に何度も繰り返しました。
そうして 96点 になりました。82から14点分です。数字としては、期待どおりでした。
96点。でも動いたのは1つだけでした
問題は内訳です。
上がったのはLCPという数字だけでした。ページの主役になる部分が表示されるまでの時間で、4.4秒が2.4秒になっています。14点分は、ほぼ全部これが稼いでいました。
残りはこうです。操作をブロックする時間は、無料版の自動設定の時点ですでに0ミリ秒でした。ゼロより下はないので、有料版で何をしても変わりようがありません。ここは、私が手を出す前にもう終わっていた項目でした。
そしてもうひとつ、表示の埋まる速さを見るSpeed Indexという数字。これが82点のときも96点のときも、まったく同じ3.9秒でした。設定を変えて何度か測り直しましたが、小数点の1桁目すら動きません。5つある指標のうち、最後までオレンジの「要改善」で残ったのもここでした。
お金を払って手動で詰めた結果として動いたのが5つ中1つというのは、正直、思っていたのとだいぶ違いました。
ちなみに、この記事を書きながら100点に届かなかった理由を計算し直したら、思っていたのと違いました。残っていた4点分は、オレンジのSpeed Indexだけが持っていったのではなく、緑になっていたLCPと半分ずつだったんです。緑だから満点、ではない。目立つ色に気を取られていました。
同じ3.9秒は、何を意味していたのか
しばらく考えて、腑に落ちた説明があります。
Speed Indexは、画面が上から下までどれくらい速く埋まっていくかを見ています。キャッシュプラグインが担当しているのは、サーバーからページのデータを速く返すところまでです。返したあと、ブラウザが実際に絵を描いていく速さは、テーマの構造や、読み込んでいるフォントや、記事に貼ってある画像の大きさで決まります。そこはキャッシュの手の届かない場所にあります。
つまり、82点から96点までの区間でキャッシュが仕事をしていたのは、届けるまでの速さの部分だけだった。描くほうの速さは、最初から最後まで一度も変わっていなかったわけです。
そして、緑のLCPが残していた分もたどると同じ場所に行き着きます。LCPはページで一番大きく表示される要素が出るまでの時間で、多くのブログではアイキャッチ画像がそれにあたるからです。
言い方を変えると、点数の天井を決めていたのはプラグインではなく、私自身のブログの作り方でした。
天井を決めていたのは、自分の記事でした
これは少し痛い発見でした。設定でどうにかなる部分は無料の自動設定でだいたい片づいていて、そこから先に残っていたのは、アイキャッチのサイズだとか、読み込んでいるフォントの本数だとか、記事の中に画像を何枚貼っているかとか、自分が何年もかけて積み上げてきたもののほうだったからです。
プラグインを別の有名なものに乗り換えても、たぶんここは動きません。作り手として言うのも変ですが、キャッシュプラグインにできることには、はっきりした境界線があります。
同じように点数で伸び悩んでいる人がいたら、計測結果の内訳を見てみてください。ただし色だけで決めないほうがいいです。私はオレンジがひとつ残っているのを見て、そこが原因だと思い込みました。赤やオレンジがどこかを見たうえで、それがサーバーやキャッシュの話なのか、自分のブログの中身の話なのかで、次にやることが変わります。前者ならプラグインで解決しますし、後者ならいくらプラグインを足しても動きません。私はそれを知るのに、有料版を入れて夜中に何度も測り直すところまで行きました。
96で止めることにしました
ここから先を詰めるなら、テーマに手を入れて、フォントを絞って、過去の記事に貼った画像を全部見直すことになります。やれば98くらいには届くと思います。でもそれは、記事を1本も書かない週末が何度か必要だという意味でもあります。
やめました。ブログは記事を書く場所であって、点数を上げるための場所ではないので。
読者を14秒待たせていたのは直さなければいけない問題でしたが、3.9秒を3.5秒にすることは、たぶん誰の役にも立ちません。無料の自動設定で82まで来て、そこで止めるのも、私はまったくありだと思っています。費用対効果でいえば、むしろそこがいちばん良い場所です。
96点の画面を保存して、ブラウザのタブを閉じました。時計は3時を回っていました。
その日から、記事に画像を貼るときの手が少しだけ変わりました。この1枚は本当に必要か、と一度考えるようになったからです。あなたのブログの点数を決めているのは、プラグインの側でしょうか。それとも、いま書いているその記事のほうでしょうか。
