Akrosブログ

BLOG

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

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タグを使用することで、初期の読み込みではどちらかの画像しか読み込まないようにしましょう。

対策前

pc{
    display:none;
}
sp{
    display:block;
}
@media screen (min-width:481px){
    pc{
        display:block;
    }
    sp{
        display:none;
    }
}

対策後

 <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>

pictureタグ
sourceタグ

loading=”lazy”の利用

imgタグやiframeなどはloading=”lazy”を使用して遅延読み込みさせ、表示されない部分のコンテンツは読み込まないようにしておきましょう。一部のブラウザには非対応ですが、非対応の場合は通常通りに読み込まれるため害はありません。
ブラウザ対応状況

 <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>
<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>

また、Lazysizesなどのjsライブラリなどもあります。
 

WebFontの読み込みはjsで

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

※フォント読み込み時にちらつきが発生する場合は

html {
  visibility: hidden;
}
html.wf-active {
    visibility: visible;
}
Webサイトの表示速度が重要視される時代に、簡単にできる表示速度対策の方法をまとめてご紹介いたしました。一つ一つの意味も分かって使えるようになりたい方は、プロ講座で提供するマンツーマンの受講サービスをご利用ください。講師が1対1のつきっきりで授業を行うので、あなたの悩みに直接お応えいたします。

CONTACT

お問合せ

体験お申込み・資料請求・ご質問・
ご相談はこちらから

受付専用フリーダイヤル

フリーダイヤル 0120-941-071

受付時間:10:00〜18:00 (土日祝定休)

Akrosでは、受講生と一緒に成長したい仲間を募集しています