Tweet

連載インデックスへ

Webページを速く見せるための5つのちょっとした工夫

【4】JavaScriptを圧縮して読み込みを速くする

　開発時には有用なコメントやインデントも、JavaScriptの実行自体には必要ありません。それら不要な文字を削ったり、変数名・関数名を短いものに置き換えたりしてファイルサイズを圧縮してくれるツールをいくつかご紹介します。

　ファイルサイズが小さければそれだけ転送時間も少なくなり、描画速度の向上につながります。

• YUI Compressor
  
  
  

  Yahoo! UI Library: YUI Compressor via kwout

• JSMin
  
  
  

  JSMIN, The JavaScript Minifier via kwout

• packer
  
  
  

  /packer/ via kwout

　詳しい使用方法については、今回の連載では割愛します。jQueryなどの有名なライブラリには、最初からツールで圧縮を行ったものを配布している場合もあるので、それらを使用するのもよいでしょう。

　また、一度圧縮したファイルを編集することは不可能に近いので、JavaScriptファイルを開発版と製品版を分けて、製品版にデプロイするタイミングで圧縮・結合を行うように工夫するのも良い方法です。

【5】読み込みが遅いブログパーツには要注意

　世に出ているさまざまなブログを見ていると、ブログパーツの読み込みが遅れて本文が表示されない状況に遭遇することがあります。ひどい場合には、「ブログパーツ部分の読み込みがタイムアウトするまで本文が表示されない」ということまであります。これでは、良い記事を書いても台無しです。

□ iframe版があれば使おう

　これもブログパーツで使用しているJavaScriptの速度が原因である場合が多くあります。この速度を自分の手で改善できない場合は、iframe版のブログパーツが提供されていないか確認してみましょう。iframe版のブログパーツを使用できれば、この現象は阻止できます。iframeは、JavaScriptと違って、処理をブロックしないためです。

□ メインカラムを最初の方に持ってくることによる効果

　また、HTMLの書き方を工夫することで体感速度を速めることができます。それはソースコード上でメインカラムを最初の方に持ってくるという方法です。

　ソースコードの順番が左カラム→メインカラム→右カラムとなっている場合、左カラムに重いブログパーツがあると、その部分が表示されるまで本文を読むことができなくなってしまいます。

　メインカラム→左カラム→右カラムという順番に記述しておいて、左右カラムの振り分けはCSSで対応すれば、ブログパーツの部分に時間がかかったとしても最低限の本文を読むことができるので、ユーザーのストレスを軽減可能です。

ちょっとした工夫でWebの速度は改善できる

　いかがでしたでしょうか。今回ご紹介した内容はソースコードの編集で対応可能なものが多いので、制作が完了したサイトでも比較的手を付けやすいものが多いのではないでしょうか。

　ちょっとした工夫で速度を改善できるので、思い当たる節があったらソースコードをチェックしてみるとよいでしょう。

　今回のサンプルのソースコードはこちらからダウンロードできます。

■ ＠IT関連記事

デザイナーのためのWeb学習帳 Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう！ 「デザインハック」コーナー

D89 Web標準HTMLタグリファレンス Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします 「デザインハック」コーナー

どこまでできる？ 無料ツールでWebサイト作成 無料のWebサイト作成は業務レベルでどの程度使えるのか？ 本連載では、さまざまな無料ツールを使用したサイト開発を掘り下げていく

Webブラウザ非互換性の温床となったのは何か？ AcidテストとWebブラウザの仕組み（前編）　IE8.0やFirefox3.0の出現で、注目されるWebブラウザ。いまこそ、復習しよう。Webブラウザの非互換性の発生源を探ろう 「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/3

Webブラウザ標準適合性のわなとAcidテストの正体 AcidテストとWebブラウザの仕組み（後編）　1つのWebページを開くだけで100項目のWebブラウザの標準適合性が検証できるAcidテスト。Acidテストの正体に踏み込む 「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/31

株式会社ライブドア マークアップエンジニア 浜俊太朗（hamashun） livedoor labs EDGE・livedoor blog・livedoor プロフィールなどを担当。 主な活動に、CSS Niteでの講演やコーディング大会の審査員などがある。趣味はインテリアとおいしいものを食べること Webサイト：hamashun.com 著書：「一週間でマスターするXHTML & CSS for Windows」毎日コミュニケーションズ

3/3

INDEX
WebデザイナのためのHTMLチューニング入門（2）　 Webページを速く見せるための5つのちょっとした工夫
	Page1 【1】CSSはソースコードの上部に記述する
	Page2 【2】JavaScriptはソースコードの下部に記述する 【3】CSSとJavaScriptを書く順番
	Page3 【4】JavaScriptを圧縮して読み込みを速くする 【5】読み込みが遅いブログパーツには要注意 ちょっとした工夫でWebの速度は改善できる

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード