webサイトの表示速度によってユーザーへのストレスだったり満足度も変わってくるといわれています。
とくにECサイトでは売り上げにも影響を与えることがわかっています。
以前に読み込みの速度が0.1秒速くなると売上もそれに比例して1%増加するということを聞いたことがあります。
それぐらいページ速度によって与える影響があるということを知っておく必要があります。
表示速度はWEBサイトにとても重要なことだといえます。
インターネットの速度もどんどん向上しており速くなっていますがそれでもまだまだ読み込みが遅いサイトもあります。
jsファイルやcssファイルを遅延させる方法
jsファイルの遅延方法
jsファイルを遅延させる方法としてdefer属性やasync属性を付与させる方法があります。
このdefer属性やasync属性はjsファイルの読み込みに使うことができます。cssファイルの読み込みには使うことはできません。
defer属性やasync属性はどちらも遅延になりますが読み込み時の順番がかわってきます。
async属性
async属性を指定するとリロードするたびに外部jsファイルの読み込みの順番がバラバラになります。
async属性の指定方法は下記になります。
<script src="〇〇〇.js" async></script>defer属性
async属性と違いdefer属性だと何回リロードしたとしてもhtmlで記載されている順番でjsファイルが実行されていきます。
defer属性の指定方法は下記になります。
<script src="〇〇〇.js" defer></script>async属性を使うことで読み込み速度が速くなる場合もあるかもしれませんが個人的にはdefer属性の方がhtmlに記載された通りに順番にjsファイルが読み込まれていくので思わぬ不具合が起こらず安定しているのかなと思います。
cssファイルの遅延方法
jsファイルのようにcssファイルではdefer属性やasync属性が指定できないので別方法を使うことで遅延させることができます。
cssの読み込みも下記のような書き方をすることで遅延させることが可能です。
<link rel="preload" href="〇〇〇〇.css" as="style">通常はlinkタグに「rel=”stylesheet”」と書く「rel=”preload”」と書きます。
このようにすることでファイルを非同期に読み込ませることができます。
ですがpreloadを使うときに気をつけなければいけない点として対応ブラウザがあります。
対応していないブラウザもあるためいろいろな環境で対応したい場合には検討する必要があります。
そのため次のような書き方が一番良いと思います。
<link rel="stylesheet" href="〇〇〇〇.css" media="print" onload="this.media='all'">
コメント