LCPとは

LCPは、Largest Contentful Paintの略で、ページの読み込み速度を測定するための指標を意味します。

LCPについては皆様もご存知の通り「いかにページの容量を軽量化し、合理的に読み込ませるか」これに尽きます。そしてLCPに最も影響するのが画像の容量とその読み込み方です。

ただ、「できるだけ軽くしているつもりなんだけどLCPの評価は思うように上がらない」という方や「何にどこまでやれば良いのかわからない」という方が一定数いらっしゃるのかなと思います。

その答えについては、下の【LCP改善】適切な画像サイズとクオリティの考え方と画像軽量化のためにすべきことで書いていますので、順を追って読み進めてください。

CLSとは

CLSは、Cumulative Layout Shiftの略で、視覚的な安定性を測定するための指標を意味します。

もう少し分かりやすく言うならば、ユーザーから見たサイトの表示の安定性や、見やすさを測定するための指標です。

CLSは、数値が低いほどユーザーが快適にサイトを閲覧できる状態であることを示し、逆に数値が高いとユーザーにとって安定性が低いサイトであることを示します。

例えば、調べ物中にページを開いたが、画像の読み込みが遅くなかなか表示されない。なので先にテキストの読めるところを読んでいたら、ガタガタと勝手にスクロールが上に移動してしまった。という経験はありませんか？

この現象は、ユーザーが既に通り過ぎたはずの位置の画像が遅延して読み込まれたため、その分の高さが後から加算されてスクロールが動くことで起こります。

上記のような状態がまさにCLSが高い状態であり、このような状態はどう考えてもユーザーにとって安定性が低い状態です。

要するにCLSは、「レイアウト崩れの指標」と言えます。

FIDとは

FIDは、First Input Delayの略でインタラクティブ性を意味します。つまり、サイトに訪れたユーザーが第一印象で感じる興味深さとそれの反応速度の指標ということです。

最初の操作には、クリック・タップ・キーを押す動作などがあり、スクロールやズームは含まれません。

これは私的な見解なのですが、日々表現は多様化し、様々な形のコンテンツが生まれています。その中で純粋にクリックまでのタイムの計測で評価していくのは困難なはずですから、おそらくFIDの指標の仕様は今後変わってくるのではないかなと思っています。

適切な画像サイズ

先ほど述べたように、ただのアイキャッチ画像に過度なクオリティは必要なく、その画像が持つサイズ以上に拡大さえしなければ多くのユーザーが問題なく閲覧できるはずです。

ではターゲットにしたい層がどのデバイスで最も見ているのか検討をつけましょう。

仮にスマートフォンユーザーがターゲットなのだとしたら、一般的なサイズのiphoneであればx2で750pxですし、大型サイズならx2で824pxになります。

このくらいのサイズがあれば一般的なディスプレイのラップトップやデスクトップでもそのまま使えますね。

高精度のラップトップやデスクトップPCに対してx2ないしはx3対応したいのであればそれだけ大きなサイズを用意することになりますが、そのコンテンツによほど特別なコンセプトがない限りはおすすめはしません。

このようにターゲットを具体的に想像すれば、指標にするべき画像サイズが見えてくるはずです。

画像のクオリティ

重ねてにはなりますが、記事中の単なるアイキャッチが目的なのであれば、過度なクオリティは必要ありません。そのような場合には、画像が本来のサイズ以上に拡大して荒れないように気をつけながらオールインワンで対応すれば良いですね。

しかし、コンテンツの中には絶対的にクオリティを保持しなければならないコンテンツというものが存在します。

広義の意味でインタラクティブなコンテンツがそれに当たるのですが、例えば、フォトグラファーの方のサイトなんかはまさにそれに当たります。

画像と人の感性を主軸にコンテンツを組み立てる場合には、画像素材そのもののクオリティは言わずもがなですが、WEB上に掲載したときに「どれだけそのクオリティを保てるのか」「魅力的に見せれるのか」という部分がそのコンテンツの成否を分かつ鍵になるわけですから、こういった場合にはクオリティがFIDに深く関係してくるわけです。

そういったコンテンツの場合には要求されるクオリティに対して然るべき読み込みができていないと話になりません。そうなってくると、膨大なコストを割いてでも対応する必要がありますよね。

このようにクオリティが必要な部分とそうでない部分を見極められているか否かは、継続的に運用していく上でとても重要なことです。

画像軽量化のためにすべきこと

皆さんが広く知るところではjpg・png・Gifの3つが代表的な画像のフォーマットだと思いますが、画像をより軽量にサイトに掲載するためには次世代フォーマットを含むその他のフォーマットにも目を向ける必要があります。今回は僕が有用だと思う3つのフォーマットをご紹介します。

SVG

SVGはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略でXMLベースの、2次元ベクターイメージ用の画像形式の1つです。

多少の語弊を畏れず解りやすい表現で言うと、SVGはテキストなんですね。だから大きさも自由に操れるし、画像が荒れることもありません。

AdobeのIllustratorをはじめ、何らかのクリエイティブ系の職業の方はなじみが深い拡張子なのではと思います。

ロゴマークなど2次元的なイラストをサイトに掲載したい場合などにSVGを使えばサイズを気にせず軽容量で掲載できるので便利です。

また、SVGは主要ブラウザ全てでサポートされていることから安心して使用が可能です。なので僕もサイト内ではイラストはほぼSVGにしています。

Adobe Illustratorなどのアプリケーションをお持ちでない方は「SVG　変換」で検索すると下記のようなフリーツールサイトがいくつか出ていきます。

https://convertio.co/ja/png-svg/

※　フリーツールなどのご利用は自己責任でお願いします。それらの使用によって被った損害などの責任は一切負いかねます。

webp

webp（ウェッピー）は、米Googleが開発しているオープンな静止画像フォーマットです。

Googleがウェブサイトのトラフィック量軽減と表示速度短縮を目的として開発したものであり、今現在広く使われているjpg・GIF・PNGの代替え的ポジションのフォーマットです。

そのため、上記3つのフォーマットよりもかなり軽量です。非可逆圧縮ですがアルファ（透過）が使えるため、便利です。

また、webpは主要ブラウザ全てでサポートされています。

僕はwebpのサポート状況が良好な部分が好きなので、今のところイラスト以外でまとまった大きさを持った画像はほぼwebpにしています。

AVIF

AVIFは、AV1 Image File Formatの略での略で、ファイルの拡張子は「.avif」になります。

JPEGよりも優れた圧縮効率と自然な描画がを実現したとのことです。それにより、何らかのアプリケーションで合成などを行った場合に、合成箇所のエッジの自然な処理が可能で、テキストなどもよりにじみが少ない描画が可能とのことです。

2022年1月現在でサポートしているブラウザはGoogle Chromeのバージョン85以降と、MozillaのFirefoxの93以降だけですが、今後はその他のブラウザも追随する可能性は高いです。

ブラウザのサポートがまだなので僕はまだAVIFは使用していません。

Can I use

Can I useは、WEBデザイナーやフロントエンドエンジニアがサイト構築の際にこのプロパティどこまで使えるっけ？みたいなときにそれを確認させてくれるサイトです。非常に便利です。

squoosh

squooshは、jpg・png・Gifといった画像フォーマットをwebpや、AVIFに変換できるフリーツールです。

操作は簡単で画像をドロップしてフォーマットを選択してボタンを押すだけです。クオリティも調整できます。元画像と見比べながら調整ができるため、これも非常に便利です。

ワードプレス5.9　lazy-loadingについて

lazy-loadは、画像の読み込みが必要になるまで遅延させることでページ読み込みパフォーマンスを助長してくれるjsですが、まもなくリリースされるWordPress5.9では、ファーストビューに出現する画像とiframeのネイティブlazy-loadが無効になります。

最初に出現する画像やiframeにネイティブLazy-loadを適用すると、かえってLCPを悪化させてしまうことがかねてより分析で明らかになっており、これの改善のためと思われます。

WordPress5.9は2022年1月25日にリリース予定とのことなので、ワードプレスのネイティブlazy-loadingではなく、自前でlazy-loadingをかけている方は使用しているjsプラグインの仕様や設定などを見直した方が良さそうです。