Google が推奨する画像遅延読み込みの方法として、loading属性を用いたネイティブ Lazy-load という方法があります。 画像を遅延読み込みさせることで、ページの表示が軽くなったり、操作可能になるまでの時間が短縮されたりとパフォーマンスの改善が期待でき、画像が多いページほど効果が実感できます。 従来であれば lazyload.js といったライブラリを用いて遅延読み込みの実装していましたが、主要ブラウザのネイティブ Lazy-load のサポートがほぼ完了したことで、JavaScript に依存しない遅延読み込みを実装できるようになりました。 ネイティブ Lazy-load は画像タグにloading="lazy"を指定するだけと非常にシンプルで、非対応のブラウザでは属性が無視されるなどデメリットなしで使うことが出来ます。 また、最近では遅延読み込みのloading="laz
GoogleがCore Web Vitals（コア ウェブ バイタル）という指標を検索ランキング要因に組み込むと発表した事から、GoogleのPage Speed Insightsを活用し、ページの改善に取り組まれている方も多いのではないでしょうか。 Core Web Vitalsとは、「ページの表示速度（LCP）」「ユーザー操作への反応性（FID）」「視覚要素の安定性（CLS）」の3点を評価していましたが、2024年3月よりINPという指標がFIDと替わり加わります。 Core Web Vitalsは、今後もSEO対策をする上で無視できない指標となっています。 LCP ページの表示速度 FID ユーザー操作への反応性 INP(Interaction to Next Paint) ページの応答性※2024年3月よりFIDと替わり評価指標に CLS 視覚要素の安定性 さて、Page Spee
こんにちは、Webサイト分析ツール「アナトミー」開発チームの宇都宮です。 Googleのサーチコンソール内のCore Web Vitalsレポートでは、ユーザーエクスペリエンスの測定状況を確認することができます。問題があると、低速であり改善が必要とされるページが指摘されることがあります。当記事では、Core Web Vitals の中の指標の一つ、LCP（Largest Contentful Paint）に着目して、指標の概要と確認方法、改善方法を実際のページを計測した結果を例にしながら解説していきます。 SEOの基本知識についてはオンラインセミナーで解説しています。セミナーではGoogle公式のSEOガイドであるGoogle検索セントラルの「Google検索の仕組み」と「スターターガイド」の内容を分かり易く解説します。これからSEOを始めようと考えている方は是非ご参加ください。 LCP（
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. 要は「ページが最初に
はじめに この記事では「コーダーが対応できるサイトの表示速度向上」についての具体的な手法を紹介していきます。 サイトの表示速度はユーザー体験を大きく左右し、サイトの種類によってはUI（サイトの見た目）より重要視される場合もあります。 2017年にはGoogleが「ページの読み込み速度によって離脱率が変わる」と発表しました。 ・1〜3秒の離脱率：32% ・1〜5秒の離脱率：90% ・1〜6秒の離脱率：106% ・1〜10秒の離脱率：123% 引用：https://www.thinkwithgoogle.com/ このようにサイトの表示速度はとても重要な指標になります。 サイトの表示速度向上には様々な手法が存在して、効果が出やすいものもあれば出にくいものもあり、実際に本番反映してみないと結果が分からないものもあります。また、難易度や実務上で許可を貰いやすいかなども考えなくてはいけません。 これ
1. このページの目的 YouTube Lite Embed を使って YouTube 動画を埋め込む (facade という手法である)。 このライブラリを使うと、YouTube動画のサムネイルだけ表示して、動画のデータは取得しない。そのためページ読み込みのパフォーマンスが高い。 2. デモ YouTube Lite Embed を使った場合（カスタム要素） YouTube の標準埋め込みコードを使った場合 (iframe) loading="lazy" がある場合とない場合とでも比較する。 3. コード YouTube Lite Embed を使った場合（カスタム要素） HTML <link rel="stylesheet" href="./lite-yt-embed.css" /> <script defer src="./lite-yt-embed.js"></script> <l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
