• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

ひよっこエンジニアの自分が、今後数多のWeb制作を通して成長していく過程を綴っていきます。ひよこのサイト航海日誌

2021年7月10日(土曜日)  (田中 紀輔)

画像を遅延読み込みして、ページの表示速度を上げよう

こんにちは、福岡のホームページ制作会社AliveCastの田中です。

前回に引き続き、今回もSEO対策の一つとして、ページの表示速度を上げる施策を紹介していきます。


大量の画像を含むWebページは、一般的に表示速度が遅くなりがちです。

普通にimgタグを使って実装すると、画像の読み込みが終わるまでブラウザが重くったり、サーバーの負荷が大きくなります。これは、ユーザーやサーバー側にとって良くない状況です。

前回もお話しましたが、Googleの調査によるとページの表示速度が遅くなるにつれユーザーが離脱します。コンテンツがどんなに良くても関係ありません。


この問題を解決する施策の一つとして、「Lazy Load」を紹介します!


「Lazy Load」とは、画像の遅延ロードを行うためのJavaScriptライブラリです。

何者かというと、ユーザーに見えている部分だけ画像を読み込んで、それ以外の画像はスクロールして表示されるタイミングで読み込むのです。一般的にページ内の画像をすべて読み込むのと比較すると、かなりページの表示速度を早めることができます。

(よく分からん、って方は、詳しい人に「Lazy Loadよろしく!」とお願いすれば全て解決します。)


Lazy Loadで表示速度を高速化すると、検索エンジンの評価アップにもつながるので、まだ実装してなかった場合はすぐやりましょう。

「lazyload 実装方法」で検索するとたくさん出てきますので、ここでは具体的な実装方法は述べませんが、ちなみにChromeブラウザの場合ですと、「Lazy Load」を実装しなくてもimgタグにloading属性を以下のように追加すれば、遅延読み込みしてくれます。







この記事を読んでいただいた方は、今すぐ隣の人に「Lazy Loadよろしく!」とお願いしましょう。

今回はここまでになります。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン