サイトの表示速度を改善する3つの方法
Webサイトを作成した際にページの表示速度が遅く気になりました。
今回紹介する3つの方法で簡単にサイトの表示速度を改善できますので、是非お試しください。
(実際に42%改善できました。)
imgやiframeの遅延読み込み
画像やYouTubeなどをサイトに埋め込む場合、loading=”lazy”を指定します。
初めからは読み込まず、必要な時に読み込むようにすることで表示速度を速くすることができます。
<!-- img -->
<img loading="lazy" src="画像のURL" alt="">
<!-- iframe -->
<iframe loading="lazy" src="埋め込むページのURL"></iframe>画像の圧縮
高画質な画像を読み込むのは時間がかかります。
必要なサイズかどうかを見直し適当なサイズに圧縮しましょう。
画像圧縮ツール
オンラインで画像を圧縮。最高の画質および圧縮方式
複数のJPG、PNG、GIF画像を選んで瞬時に圧縮。オンラインで画像を無料で簡単に圧縮できます。
www.iloveimg.com
動画圧縮ツール
FVC無料ビデオコンプレッサー–大きな4K / HDビデオサイズを縮小
FVC Free Video Compressorは、MP4、MOV、AVI、MKVなどの大きなHD / SDビデオを透かしのない小さなファイルに自由に圧縮できる最高のオンラインビデオサイズリデューサーです。
www.free-videoconverter.net
フォントの指定方法
Google Fontsを使用している場合、CSSで@importするのではなく、
HTMLのheadで指定した方が表示速度を速くすることができます。
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
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');
コメント