スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

外部JavaScriptやCSSの記述順によってページの読み込み速度が違う

Googleはページの読み込み速度をアルゴリズムに取り入れたらしいので、これを機に勉強しようということで調べてみました。そこで、へぇ~と思ったことがあったので紹介します。
それは、JavaScriptとCSSの外部ファイルは記述順によって読み込みスピードが違うということです。具体的には
<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>
と記述した場合は以下のような読み込み順序となります。
1. stylesheet1.css
2. scriptfile1.js
3. scriptfile2.js
4. stylesheet2.css + stylesheet3.css (同時に読み込み)

このように4段階で読み込むことになります。

しかし、以下のように記述すると

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
</head>

次のように3段階で読み込みます。

1. stylesheet1.css + stylesheet2.css + stylesheet3.css
    (同時に読み込み)
2. scriptfile1.js
3. scriptfile2.js

どういうことかというとCSSファイルは複数同時に読み込むがJavaScriptは1つずつ読み込むので、並べ方によってページの読み込み速度に違いが生まれるのです。

外部ファイルを並べ替えるだけでできるのでぜひチェックしておきましょう。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。