Webページを速く見せるための5つのちょっとした工夫
株式会社ライブドアマークアップエンジニア 浜 俊太朗
2009/4/30
【4】JavaScriptを圧縮して読み込みを速くする
開発時には有用なコメントやインデントも、JavaScriptの実行自体には必要ありません。それら不要な文字を削ったり、変数名・関数名を短いものに置き換えたりしてファイルサイズを圧縮してくれるツールをいくつかご紹介します。
ファイルサイズが小さければそれだけ転送時間も少なくなり、描画速度の向上につながります。
詳しい使用方法については、今回の連載では割愛します。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の速度は改善できる |
|
[an error occurred while processing this directive]
 |
「デザインハック」コーナーへ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
