サイトを立ち上げる時のチェックポイントまとめ

サイトをゼロから立ち上げる時に実装すべきものをざっくりまとめる。

自分が新しくサイトを作る時の備忘録用に。

画像関連

decoding=”async”

imgタグの非同期読み込みで使用

WebP、AVIF

WebPは当然として、AVIFも取り入れたいとこ。

現在はWebPはかなり浸透してきたけど、AVIFはまだ対応していないブラウザも多い。

WebPとAVIFはpictureタグで実装する。

pictureタグの遅延読み込み

imgタグの遅延読み込みは当然として、pictureタグの遅延読み込みも実装したい。

これは、lazy sizes.jsで実装する。

参考：https://web-niar.com/blog/lazysizes-js/

Youtubeの埋め込み

もし、サイトにYoutubeの埋め込みをするケースがあるなら、非同期の読み込みをぜひ利用したい。

そのままで埋め込むとサイトがかなり遅くなってしまうので。

Lite Youtube Embedというライブラリを使うと、読み込み速度がかなり改善される。

参考：https://mimimopu.com/youtube_optimization/

SEO関連

metaタグ

言わずもがなのmetaタグ。

JSON-LD

metaタグばかりに頭がいって忘れがちなのがJSON-LDによる構造化マークアップ。

パンくずやパブリッシャー、著者情報などを適切にGoogleに認識してもらうことができる。

公開日、更新日

構造化マークアップでも使うが、メディアを作る場合は公開日、更新日をしっかりモデルに組み込むこと。

ユーザービリティ

スマホサイトでリンクが2回押さないと反応しない問題

ふとスマホで公開したサイトをチェックしていたら、リンクを2回押さないとページ遷移しないことに気づいた。

これ、iOSやスマホで既知の問題なようでcssにhoverを組み込んでいると再現するらしい。

こんなの気付かないでしょ…

解決方法は意外と簡単で、bodyタグにtouchstartを記述するだけでOK。

参考：https://nldot.info/if-you-dont-touch-the-iphone-twice-and-the-link-doesnt-fly-how-do-you-handle-it/