lazysizesで画像を遅延読み込みさせる

公開日時

Lighthouseでパフォーマンス計測を行った際に画像の遅延読み込みが推奨されていたのでlazysizesを使って遅延読み込みを行うことにした。

対応したサイトではimgタグではなく、css background-imageで画像表示を行っていたので、↓のプラグインを使って遅延読み込みするように対応した。

参考


Related #js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

AWS SESの受信メールを暗号化してs3に保存しLambdaで読み込む

jsの場合、複合処理を独自実装する必要がある

jsでSlack Webhookを送信する

公式のWebhook SDKを使うと手軽

jsの正規表現で拡張子を除いたファイル名を抽出する

キャプチャしてreplaceで置き換えた

Prismを使ってOpenAPI仕様書からモックAPIを生成する

Prismを使うことでサーバのAPI実装と並行してフロント開発も進められる