Lazy Loadで画像を遅延ロードする方法 | ページスピード改善 | テクニカルSEO BLOG
大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。 imgタグを使って、普通に実装すると次のような現象が起きてしまいます。 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る ネットワークやサーバーの負荷が瞬間的にひっ迫する PageSpeed Insightsで低スコアになる これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。 対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるJavaScriptライブラリ「Lazy Load」の導入です。 今回は、Lazy Load で画像を遅延ロードする方法を解説します。 遅延ロードとは？ 画像の遅延ロードとは、ブラウザの画面領域内に存在する画像のみをロードし、画面
HTML<head>の中をちゃんと理解する - Qiita
これまでなんとなくになっていたHTMLのheadの中身をちゃんと理解して正しい記述ができるようになる目的での学習録です。 <head> <meta charset="utf-8"> <meta name="viewport" content="=device-width, initial-scale=1"> <meta http-equiv="Content-Security-Policy" content=""> <meta name="application-name" content=""> <meta name="theme-color" content=""> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="robots" content=""> <meta na
h1タグとは？正しい使い方とSEOに理想的な設定方法を解説
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. h1タグとは、ページの見出しを表す「hタグ」の中で最も上位のタグである。ページの最初に一番大きな文字で配置され、ページのタイトルを意味することも多い。 h1は最上位の見出しであり、ユーザーと検索エンジンが「ページに何が書かれているか」を把握するために最も重要なテキストと言える。 <h1>ページのタイトル</h1> <h2>1. 最初の大見出し</h2> <h3>1-1. 中見出し</h3> <h3>1-2. 中見出し</h3> <h3>1-3. 中見出し</h3> <h2>2. 二番目の大見出し</h2> <h3>2-1. 中見出し</h3> <h3>2-2. 中見出し</h3> <h2>3. 三番目の大見出し</h2> <h2>まとめ<
【HTML】現場における「良いコード」とは？制作会社のプロが解説 | 東京のWeb制作会社 株式会社クーシー
【HTML】現場における「良いコード」とは？制作会社のプロが解説 Web制作ハウツー フロントエンド(HTML/CSS) HTMLなどのコードを書いていて「良いコードとは何か？」と思ったことはありませんか？ 良いコードは高いスキルがなくても書けます。逆に言うと、「難しいコード＝良いコード」ではありません。 ポイントは「どれだけ見る人のことを考えられるか」。誰にとっても見やすいコードにするには、押さえるべきポイントがいくつかあります。そのポイントをまとめて知りたくありませんか？ 今回はHTMLコードをベースに良いコードの書き方について解説します。エンジニア目線で「お、いいコード！」と思わせるポイントをまとめたので、ぜひ最後までお読みください。 ちなみに筆者は、クーシーでコーディングチームのリーダーをしています。私の紹介記事がありますので、興味ある方はこちらもどうぞ。 個人でもチームでも、ビジ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
