Webサイトの読み込み速度上げる・・・

らら
らら

はじめに

サイトロード時間が1～3秒延びるだけで直帰率が32％も上昇し、さらに5秒まで延びると90%のサイト訪問者が離脱する・・・

順位にも、影響するとか・・しないとか・・・

まずは、画像の対応で、LazysizeはGoogleのボットが巡回して来た時に、遅延読み込みを行わないため、正しい情報がGoogleに認識されるようです。

WordPressでもLazy Load系pluginがありますよね・・って。。こないだ。WP使いの子に、教えてもらいました。。w

Lighthouseでチェックしても、おこられちゃいますよね・・・。。

設定方法

今回は、Lazy Loadではなく、Lazysizeってプラグインを使用します。

Lazy Loadは、ブラウザーの表示領域から外れているものは読み込みせず...スクロールしたら、読み込みされるものです。Lazysizeは、GoogleBotにも認識されるLazy Loadです。

ダウンロード下記からlazysizes-umd.min.jsを持ってきて・・・

https://github.com/aFarkas/lazysizes


<script src="あなたのお好きな・・場所で/lazysizes-umd.min.js" async=""></script>

class="lazyload"を追加

src属性に画像を設定せず、data-src属性で画像パスを指定する

srcを空にしてはいけないので、1x1pxの透明な画像 data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

昔のスペンサーGIFですね。。ふるぅ・・


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="画像のパス/xxxx.png" alt="画像の説明" width="250" height="100" class="lazyload" loading="lazy">
ファーストビューで使っちゃうと・・・ちかちか。。するので、ファーストビューは使用しないようにするとか・・

おまけ・・

Webフォントなど使っていると。。3-4秒かかってしまうので・・Lighthouse、 Page Speedのときは、はずす・・やつ・・

いつまで使えるか・・・海外のブログにあったやつです・・・

まぁ。SEOとか意識しているサイトは、使用しないとか・・、部分的に使用するとか・・


if(!(navigator.userAgent.indexOf("Google Page Speed") >=0 || navigator.userAgent.indexOf("Lighthouse") >=0 || navigator.userAgent.indexOf("Speed Insights") >=0)) {
	window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"><\/script>');
	WebFont.load({google: {api: 'https://fonts.googleapis.com/css2',families: ['Noto+Sans+JP:wght@400;700&display=swap']}});
}

レスポンシブ対応だと、2倍画像をスマホ、PCで1枚で作ってしまうと・・・画像が重い・・・よって。。Lighthouseいう場合・・

SEO用に下記のようにするとか・・width、alt、heightも指定してねって。。。言われるよね...・・Lighthouse


<img class="pc" src="../common/img/pc.png" alt="PC用の画像" width="400" height="200">
<img class="smt" src="../common/img/smt.png" alt="スマフォ用の画像" width="250" height="100">

さいごに・・

知り合いのページ見てたら..検索順位下がってたので・・Lighthouseでチェックしまくりで検証中です・・

ライバルはいろいろ。。施策してますね・・・・

では。。

関連記事