経験が浅い人でも簡単にできるサイト表示速度改善方法

Web制作においてサイトの表示速度が重要と言われていますが、参考書に書いてあるような一般的な記述方法やルールで作成するだけでは対応が難しくなってきました。
サイトの表示速度はSEOやサイト表示順位にも影響する恐れがあり、当然ながらアクセスしたユーザーへのUXにも悪影響を及ぼし、直帰率上昇につながってしまいます。
ここでは初心者の方でも勉強中の方でも導入しやすい表示速度改善策をいくつか掲載します。

まずは画像ファイル、CSS、JSの圧縮

こちらは言うまでもないですが、PhotoshopやXDなどで書き出した画像などをそのまま使用するのではなく、さらに圧縮をかける必要が必要です。
また、CSSもJSもminify化は必須です。
gulpなどのタスクランナーを導入できれば一括で実行もできますが、簡単に実施するのであれば、

画像圧縮
CSSminify化
JSminify化
あとHTML圧縮も

という感じでオンラインツールを利用して圧縮することも可能です。

画像ファイルを次世代フォーマットに

imgやpngなどのファイルを次世代フォーマットのファイルに変換します。以前の記事でWebPについてご紹介しましたので、WebP画像を導入しましょう。WebPはjpgやpngより30%圧縮できるといわれています。
以前の記事

画像を読み込むimgタグはpictureタグを使用

スマホとPCの画像の切り替えとして、メディアクエリと併せてdisplay:none,display:blockを切り替える方法がありますが、こちらはサイトを読み込むときに両方の画像を読み込んでしまうのでよくありません。pictureタグを使用することで、初期の読み込みではどちらかの画像しか読み込まないようにしましょう。

対策前
[css] pc{
display:none;
}
sp{
display:block;
}
@media screen (min-width:481px){
pc{
display:block;
}
sp{
display:none;
}
}
[/css]

対策後
[html] 　<picture>
<source media=”(min-width: 481px)” srcset=”img/sp.jpg”>
<source media=”(min-width: 769px)” srcset=”img/pc.jpg”>
<img src=”img/common.jpg” alt=”画像”>
</picture>
[/html]

pictureタグ
sourceタグ

loading=”lazy”の利用

imgタグやiframeなどはloading=”lazy”を使用して遅延読み込みさせ、表示されない部分のコンテンツは読み込まないようにしておきましょう。一部のブラウザには非対応ですが、非対応の場合は通常通りに読み込まれるため害はありません。
ブラウザ対応状況
[html] 　<picture>
<source media=”(min-width: 481px)” srcset=”img/sp.jpg”>
<source media=”(min-width: 769px)” srcset=”img/pc.jpg”>
<img src=”common.jpg” alt=”画像” loading=”lazy”>
</picture>
[/html] [html] <iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.601995925307!2d139.77885481502304!3d35.711410635924075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188e98679e6093%3A0xf465030813e0e424!2zQWtyb3MgV2ViICYgQnVzaW5lc3MgRGVzaWduIEFjYWRlbXkg5p2x5Lqs5qCh!5e0!3m2!1sja!2sjp!4v1604393501529!5m2!1sja!2sjp” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=”” aria-hidden=”false” tabindex=”0″ loading=”lazy”></iframe>
[/html] また、Lazysizesなどのjsライブラリなどもあります。
　

WebFontの読み込みはjsで

webfontを読み込む際にはimportやlink relを使用すると思いますが(例えばGoogleFont)、この場合レンダリングブロックが発生してしまいます。
レンダリングブロックによる読み込み遅延を回避するためにも、webfont loaderで読み込むようにしましょう。

※フォント読み込み時にちらつきが発生する場合は
[css] html {
visibility: hidden;
}
html.wf-active {
visibility: visible;
}
[/css]