レスポンシブサイトでlazysizesを使い画像遅延読み込みをした時のCore Web Vitals CLS対策
Core Web Vitalsの値、気にしてますか？ レスポンシブでCLS対策をする時の対応を書きます。
CLSとは？
Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。
画像の読み込みや、コンテンツの遅延読み込みなどでサイトの要素がズレる量のことです。 基本的には画像サイズを指定してあげることでズレはなくなります。
Tip: Set width & height on your <img> elements. This now allows modern browsers to infer their intrinsic size pre-download, reducing layout shifts. pic.twitter.com/yhsIftiJzR
— Addy Osmani (@addyosmani) 2020年6月27日
画像遅延読み込みとの兼ね合い
lazysizesというプラグインを使い画像遅延読み込みをしていますが、読み込まれるまで1x1pxの透過画像を置いておくのがスタンダードです。
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="本来の画像URL" class="lazyload" width="200" height="100">
レスポンシブで1x1px透過画像を先読みする場合の不具合
レスポンシブにしたいと、画像を width: 100%; height: auto; にすると
読込中 1x1px 画像のアスペクト比を保持して横100%になってしまいます。
読み込まれるまで高さがwidthと同じになってしまう <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="本来の画像URL" class="lazyload" width="200" height="100"> <style> img { width: 100%; height: auto; } </style>
サンプル レスポンシブサイトでlazysizesを使い画像遅延読み込みをした時のCore Web Vitals CLS対策 サンプル
このサンプルでは1枚目の画像も 1:1 の高さを保持してしまっているため画像読み込み後にズレが生じてCLSが0.095になっています。
※サンプルなのでそこまで悪い数字ではないですが
対策
- imgタグのwidth, heightは幅320pxの時のアスペクト比で入れる
height: auto;はlazyloadが完了してから設定する
下記のようになります。
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="本来の画像URL" class="lazyload" width="320" height="160"> <style> img { width: 100%; } /* lazyload完了後に付与されるクラス */ img.lazyloaded { height: auto; } </style>
サンプル レスポンシブサイトでlazysizesを使い画像遅延読み込みをした時のCore Web Vitals CLS対策 サンプル
CLSが0.009になりました。
注意
imgタグのwidth, heightは幅320pxの時のアスペクト比で入れる
というのはLighthouseのmobileで計測する時のブラウザ幅です。
違うブラウザ幅だとCLSのガタつきが発生するためユーザーにとって最適とは言えません。
事前にアスペクト比が分かっているならpadding-topを%で指定して先にサイズを確保しておくなどありますが、運用面でコストが高くなってしまいます。
ケースに合った対応を心がけましょう。
WSLでChromedriverを使えるようにする
chromedriverのDL
公式サイトから必要なバージョンをDLします。
DL後、zipを解凍したらWindowsTerminalでWSLの /bin/ に移動
# CドライブのDownloadsにchromedriverがある sudo mv chromedriver /bin/cromedriver # 実行権限の付与 sudo chown 755 /bin/chromedriver
chromedriver のバージョンを確認
$ chromedriver -v ChromeDriver 86.0.4240.22 (398b0743353ff36fb1b82468f63a3a93b4e2e89e-refs/branch-heads/4240@{#378})
参考
WindowsのLocal by Flywheelで作ったWordPressにシンボリックリンクを貼り別ディレクトリのthemesデータを同期させる
新規でWP環境を作るだけならLocalをインストールするだけなのですがすでにあるプロジェクトのthemesだけを同期させたいため特殊な対応をしました。
まずは公式ドキュメント通りLocalのインストール、WPの作成をします。 localwp.com
themesを同期させる
昔のLocalだとvolumesという設定でファイル同期ができましたが今はシンボリックリンクを貼る必要があるよう
[WordPress] ”Local by Flywheel”でシンボリックリンクを作成する方法
Windows PowerShellを管理者で起動しシンボリックリンクを貼ります
# ローカルにある参照したいthemes # "C:\Users\user_name\workspace\wordpress\wp-content\themes\" # LocalでインストールしたWPのディレクトリ # "C:\Users\user_name\Local Sites\nisso\app\public" New-Item -Value "C:\Users\user_name\workspace\wordpress\wp-content\themes\" -Path "C:\Users\user_name\Local Sites\site_name\app\public\themes" -ItemType SymbolicLink
※既にインストールしたWPのthemesがある場合は削除しておく必要があります。
WSL Elasticsearchの起動ができない java.lang.IllegalArgumentException: Plugin [analysis-kuromoji] was built for Elasticsearch version 7.8.0 but version 7.10.0 is running
こんなエラーが出た
java.lang.IllegalArgumentException: Plugin [analysis-kuromoji] was built for Elasticsearch version 7.8.0 but version 7.10.0 is running
$ sudo service elasticsearch restart
* Starting Elasticsearch Server uncaught exception in thread [main]
java.lang.IllegalArgumentException: Plugin [analysis-kuromoji] was built for Elasticsearch version 7.8.0 but version 7.10.0 is running
at org.elasticsearch.plugins.PluginsService.verifyCompatibility(PluginsService.java:352)
at org.elasticsearch.plugins.PluginsService.loadBundle(PluginsService.java:622)
at org.elasticsearch.plugins.PluginsService.loadBundles(PluginsService.java:479)
at org.elasticsearch.plugins.PluginsService.<init>(PluginsService.java:168)
at org.elasticsearch.node.Node.<init>(Node.java:346)
at org.elasticsearch.node.Node.<init>(Node.java:289)
at org.elasticsearch.bootstrap.Bootstrap$5.<init>(Bootstrap.java:227)
at org.elasticsearch.bootstrap.Bootstrap.setup(Bootstrap.java:227)
at org.elasticsearch.bootstrap.Bootstrap.init(Bootstrap.java:393)
at org.elasticsearch.bootstrap.Elasticsearch.init(Elasticsearch.java:170)
at org.elasticsearch.bootstrap.Elasticsearch.execute(Elasticsearch.java:161)
at org.elasticsearch.cli.EnvironmentAwareCommand.execute(EnvironmentAwareCommand.java:86)
at org.elasticsearch.cli.Command.mainWithoutErrorHandling(Command.java:127)
at org.elasticsearch.cli.Command.main(Command.java:90)
at org.elasticsearch.bootstrap.Elasticsearch.main(Elasticsearch.java:126)
at org.elasticsearch.bootstrap.Elasticsearch.main(Elasticsearch.java:92)
For complete error details, refer to the log at /var/log/elasticsearch/elasticsearch.log
[fail]
プラグインの対応バージョンが違うらしい
Elasticsearchをアップデートだけしてプラグインが古いままのよう
一旦removeしてインストールし直す
sudo /usr/share/elasticsearch/bin/plugin remove analysis-kuromoji sudo /usr/share/elasticsearch/bin/plugin install analysis-kuromoji
起動成功
$ sudo service elasticsearch restart * Starting Elasticsearch Server [ OK ]
WSLでelasticsearch-pluginをinstallする
pathが通っていないのかインストールできず
sudo elasticsearch-plugin install analysis-kuromoji sudo: elasticsearch-plugin: コマンドが見つかりません
/usr/share/elasticsearch/bin に入っていた
sudo /usr/share/elasticsearch/bin/elasticsearch-plugin install analysis-kuromoji
