LCP (Largest Contentful Paint) について
LCPとは(最大コンテンツの描画とは) PageSpeed Insights に出てくる Largest Contentful Paint 解説ページである Web Vitals を見てみると Largest Contentful Paint は同じページの下に日本語訳が表示されているが，「最大コンテンツの描画」のこと． 字面通りに解釈して，「最も大きなコンテンツ(画像など)を表示する」までにどれくらいの時間がかかったのかを表す． Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading. 要は「ページが最初に
コーダーができるサイトの高速化10選
はじめに この記事では「コーダーが対応できるサイトの表示速度向上」についての具体的な手法を紹介していきます。 サイトの表示速度はユーザー体験を大きく左右し、サイトの種類によってはUI（サイトの見た目）より重要視される場合もあります。 2017年にはGoogleが「ページの読み込み速度によって離脱率が変わる」と発表しました。 ・1〜3秒の離脱率：32% ・1〜5秒の離脱率：90% ・1〜6秒の離脱率：106% ・1〜10秒の離脱率：123% 引用：https://www.thinkwithgoogle.com/ このようにサイトの表示速度はとても重要な指標になります。 サイトの表示速度向上には様々な手法が存在して、効果が出やすいものもあれば出にくいものもあり、実際に本番反映してみないと結果が分からないものもあります。また、難易度や実務上で許可を貰いやすいかなども考えなくてはいけません。 これ
Layout Instability API を使ってレイアウト・シフトを検出する
プログラミング Layout Instability API を使ってレイアウト・シフトを検出する※当サイトにはプロモーションが含まれています。 1. Layout Instability API についてLayout Instability API を使うと、レイアウト・シフトを検出することができます。 このAPIを使ったサンプルコードを紹介します。 ※ この API を実装していないメジャーなブラウザもあるため、Chrome か Edge の利用をお勧めします（参考：LayoutShift API | Can I use…）。 2. サンプルコードindex.html 内の <script> タグに以下を記述します。 JavaScript new PerformanceObserver((list) => { for (const entry of list.getEntries())
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
