コミット単位でWebサイトのパフォーマンスを計測出来るLighthouse CIを使ってみた - SMARTCAMP Engineer Blog
こんにちは、スマートキャンプのエンジニア中川です。 本記事は「スマートキャンプ Advent Calendar 2019 - Qiita」の2日目の記事になります。 突然ですがみなさん、Webサイトのパフォーマンス計測はお好きですか？ 好き嫌いはさておき、私は以下のような課題感を前々から持っていました。 顕在化してきたタイミングで問題となる いつパフォーマンスが悪化したのか、継続して悪化し続けているのかなど、情報量がすくない状態から対応をはじめなければならない 調査が長くつらいものになる なぜパフォーマンスが悪いのかわからない ある特定のコミットで著しく悪化したのか？どういう変更をするとスコアが遅くなりがちなのか？など知見が貯まらない どれもあるあるな悩みかと思いますが、タイムラインをチェックしていたところたまたまLighthouse CIの存在を知り、これらの課題を解決出来そうだったので
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
