サイトの表示速度を改善する3つの方法
Webサイトを作成した際にページの表示速度が遅く気になりました。
今回紹介する3つの方法で簡単にサイトの表示速度を改善できますので、是非お試しください。
(実際に42%改善できました。)
imgやiframeの遅延読み込み
画像やYouTubeなどをサイトに埋め込む場合、loading=”lazy”を指定します。
初めからは読み込まず、必要な時に読み込むようにすることで表示速度を速くすることができます。
<!-- img -->
<img loading="lazy" src="画像のURL" alt="">
<!-- iframe -->
<iframe loading="lazy" src="埋め込むページのURL"></iframe>画像の圧縮
高画質な画像を読み込むのは時間がかかります。
必要なサイズかどうかを見直し適当なサイズに圧縮しましょう。
画像圧縮ツール
https://www.iloveimg.com/ja/compress-image
動画圧縮ツール
https://www.free-videoconverter.net/ja/free-video-compressor/
フォントの指定方法
Google Fontsを使用している場合、CSSで@importするのではなく、
HTMLのheadで指定した方が表示速度を速くすることができます。
OK：HTMLのheadで指定
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">NG：CSSの@importで指定
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
コメント