スポンサーサイト

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

ウェブページの高速化のために読んでおきたいサイトのまとめ

ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。

speed-title.png

ページ読込速度の重要性

次の事例にあるように、ユーザーは表示速度に敏感です。

  • Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する
  • Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する
  • そして、Googleのアルゴリズムにウェブページの読み込み速度が追加されて以降、サイトの高速化への注目度は高まっています。

    ユーザーにとって読み込み速度はサイトを評価するうえで重要な要素であるため、Googleも検索結果に影響を与えるようになったということだと思います。

    ページ読込速度を確認するには

    まず、自分のサイトがどれくらいの時間で読み込むのか知る必要があります。

    ゆっくりと… » ウェッブサイトの表示速度を測定するフリーツール集

    speed-yukkuri.png

    表示速度の測定法がたくさん紹介されています。

    ここで紹介されていないもので3つ追加で紹介します。

    WebWait - Benchmark Your Website

    speed-webwait.png

    対象のページを複数回読み込んで平均値を出してくれます。

    Which loads faster?

    speed-which-loads.png

    2つのサイトを同時に読み込んでどちらが速いか比べることができます。

    Pingdom Tools

    読み込み順のほかに、読み込み時間、ファイルサイズ、ファイルの種類などに並べ替えることもできます。過去のデータも保存できるので便利です。

    高速サイトを実現する14のルール

    ウェブサイトの高速化には「サーバー環境」「ユーザー環境」「ウェブページの構成要素」の3種類が必要となります。

    ここではウェブページの構成要素について紹介していきます。

    Webサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳) | 株式会社インターオフィス

    speed-interoffice.png

    「ハイパフォーマンスWebサイト ― 高速サイトを実現する14のルール」についてまとめられています。数年前の定義されたものですが、高速化の基本となる内容ですのでぜひ押さえておきたいです。

    サイトパフォーマンス計測ツールYSlowの評価項目まとめ

    高速サイトを実現する14のルールを守れているか判定してくれるのがYSlowです。そのYSlowのインストールや判定結果について詳しく紹介されています。

    【ハウツー】YSlowでWebページを高速化 - リッチさと速さを同時に実現するUIを! | マイコミジャーナル

    こちらも同じような内容ですが、各項目でよい評価をもらうにはどうすればよいかなど詳しく紹介されています。

    高速化のためにすべきこと

    ついに出た!Chrome版「Page Speed」の使い方 :: Stocker.jp / diary

    speed-stockerjp.png

    Page Speedのインストールから改善方法など分かりやすく説明されています。

    • CSSスプライトに画像をまとめる
    • ブラウザのキャッシュを活用する
    • JavaScriptを縮小する
    • 圧縮を有効にする

    Page Speed Online

    speed-pagespeed.png

    先ほどのサイトではChrome板のPage Speedの説明でしたが、こちらはオンライン版です。URLを入力するだけで、そのサイトの点数やおこなうべき高速化の手段を教えてくれます。

    ちなみにこのブログは100点満点中71点で、「重複するリソースは 1 つの URL から提供する」、「CSS スプライトに画像をまとめる」、「ブラウザのキャッシュを活用する」が優先度が高い読み込み時間の短縮方法だそうです。

    どや!?ひよっこデザイナーにもできるWebページ高速化!鍵は「HTTPリクエストの数を減らすこと」 | デザインどや!?

    speed-doya.png

    CSS Spriteの説明は非常に分かりやすいです。

    • 高速化の重要度
    • Webサイトの待ち時間の80%はフロントエンドの処理によるもの
    • 【デザイナーにできること1】「CSS Sprite」で画像の表示速度を高速化する
    • 【デザイナーにできること2】外部CSS・JavaScriptの読み込み方で表示速度を改善
    • まとめ

    ASCII.jp:30分でできる!Webサイトを高速化する6大原則

    speed-ascii.png

    ちょっと古いですが、お手軽にできる高速化が紹介されています。

    • 画像は最適化してから使え!
    • 画像はサイズを指定せよ!
    • HTTPリクエストは最小にせよ!
    • CSSセレクターは短く最適化せよ!
    • CSSは上に、JavaScriptは下に『まとめて』記述せよ!
    • プロファイリングツールを使いこなせ!

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

    このブログですが、ぜひご覧ください。外部ファイルの圧縮や配置による読み込み速度の違いなど、簡単にできる改善法を載せています。

    • JavaScriptやCSSファイルを軽量化する
    • JavaScriptやCSSファイルの配置順を変える
    • JavaScriptやCSSファイルをまとめる

    Yahoo!パフォーマンスチーム、最新高速化ルール20を発表 | エンタープライズ | マイコミジャーナル

    高速サイトを実現する14のルールに加えて、20のルールが紹介されています。

    画像に関する高速化

    CSS Spriteや画像サイズの圧縮など。

    「CSS Sprite」で画像の表示速度を高速化する - [ホームページ作成] All About

    speed-allabout.png

    CSS Spriteの効果や手順が詳しく説明されています。

    CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC

    speed-escafrace.png

    CSS Spriteと画像の減色による効果や方法が紹介されています。

    PNG画像をいい感じに最適化してくれる『punypng』 | IDEA*IDEA

    speed-punypng.png

    png画像のサイズを圧縮してくれるサービスが紹介されています。見た目はほぼ一緒なので試す価値ありです。

    ヤフーの画像はなぜyimg.jpドメインなのか? サイト高速化の手法とヤフーの失敗例 | Web担当者Forum

    ヤフーの画像が別ドメインである理由などが紹介されています。

    CSSやjavascriptの記述に関する高速化

    CSSセレクタの高速化の話し - Webtech Walker

    speed-webtech.png

    CSSセレクタの関する高速化についてまとめられています。知っているようで知らない意外な内容で面白いと思います。

    jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ

    speed-techni.png

    「jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。」ということで具体策が分かりやすく紹介されています。

    jQueryの高速化に関するまとめ | IDEA*IDEA

    元記事は「10 Ways to Instantly Increase Your jQuery Performance | Nettuts+」で、jQueryの高速化についてまとめられています。

    JavaScriptを高速化する6つのテクニック | エンタープライズ | マイコミジャーナル

    「関数呼び出しを避ける」、「ループを展開する」など6つのテクニックが紹介されています。ブラウザごと実行時間比較があり効果が一目瞭然です。

    javascriptの高速化テク:三浦仮想研究所

    javascript高速化のテクニックが16個紹介されています。

    まとめ

    以上サイト高速化に役立ちそうな記事を紹介してみました。はてブやツィッターのボタンなど外部サービスを利用している場合はどうしようもないケースもありますが、できる限りのことはしておいて損はないと思います。

    ということでこのブログでも色々試してみましたが、高速化を優先するとどうしても、色々省いてしまってデザインが地味になってしまう。

    フィードやTwitterで最新情報をチェック
    follow us in feedly
    この記事に付いているタグの最新記事一覧
    loading...
    コメント
    はじめまして。こちらの記事を見てPNG画像の軽量化をしてみました。PunyPngの有料版を利用していますが、調子?がいいと80%近く軽くできました。画像の多いページだったので表示速度にも顕著に反映しました。ありがとうございました!
    【2012/09/04 01:59】 | civa #- | [edit]
    はじめまして。
    コメントありがとうございます。
    80%とはすごいですね〜。
    画像の多いサイトだとかなり効果は高そうですね。
    またお立ち寄りください!
    【2012/09/04 06:09】 | 管理人 #E2ywrYdA | [edit]









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

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