スポンサーサイト

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

JavaScriptやCSSの外部ファイルに手を加えサイトの表示速度を改善する3つの方法

色々スクリプトを設置してヘッダーがJavaScriptやCSSの外部ファイルでいっぱいになっていることはありませんか?外部ファイルが多くなればもちろん表示速度への影響も大きくなります。

サイトの表示速度はGoogleの検索順位にも反映されますし、そもそも訪問者のことを考えると少しでも表示速度は速い方がいいですね。

JavaScriptやCSSファイルを軽量化する

空白や改行をなくしてJavaScriptやCSSファイルを軽量化します。簡単に圧縮してくれるオンラインツールがたくさんありますが個人的なおすすめはこちら。

Compress javascript and css

conmpressor.png

シンプルで使いやすいと思います。「basic compress」は空白のみ、「powerful compress」は改行も圧縮してくれます。

dean.edwards.name

dean.edwards.name

こちらも、同じように圧縮してくれます。軽量化とは関係ないですが難読化もできます。

CSS Formatter and Optimiser

CSS Formatter and Optimiser

こちらはCSSの軽量化をしてくれるサイトです。JapaScriptと一緒で改行や空白の削除をしてくれます。

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 10px;

さらに、このようなCSSもClean CSSを使うと

padding:10px 20px 10px 10px;

このようにしっかり短縮してくれます。

CSSは問題ないと思いますがJavaScriptの場合圧縮したらうまく動かない場合もありますのでご注意ください。あと。圧縮した後で再編集する場合、見にくくて困ることもあるので、圧縮前のファイルはちゃんと保存しておいた方がいいと思います。

JavaScriptやCSSファイルの配置順を変える

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つずつ読み込むので、並べ方によってページの読み込み速度に違いが生まれるのです。

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

JavaScriptやCSSファイルをまとめる

このブログのソースの表示にSyntaxHighlighterを使っているわけですが、そのままだと表示する言語の数だけ外部ファイルが必要なので、読み込む外部JavaScriptの数もかなり多くなります。

<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushBash.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>

このような場合、中身をまとめて1つのファイルにした方がいいといえます。

<script type="text/javascript" src="scripts/shCore-css-js-xml.js"></script>

1つにまとめてもファイルの容量が減るわけではありませんが、オーバーヘッドがあるために1つにまとめた方が表示が速くなるといえます。

オーバーヘッド : ある目的で処理を実行する際に,目的とは直接関係ない処理。通信プロトコルの場合,データを送受信することが本来の目的だが,アドレス処理や転送処理のためにヘッダーが必要。これがオーバーヘッドである。データに対してヘッダーの比率が大きくなった状態を「オーバーヘッドが大きい」と言う。 [出典:ITpro]

もちろん、CSSも同じ考えになります。

JavaScriptに関してはまとめるとうまく動かない場合もありますのでお気をつけください。


今回紹介した3つはそんなに手間はかからないと思います。検索エンジン対策とユーザビリティの一石二鳥ですのでぜひお試しください。

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









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

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