ウェブページの高速化のために読んでおきたいサイトのまとめ
ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。
ページ読込速度の重要性
次の事例にあるように、ユーザーは表示速度に敏感です。
そして、Googleのアルゴリズムにウェブページの読み込み速度が追加されて以降、サイトの高速化への注目度は高まっています。
ユーザーにとって読み込み速度はサイトを評価するうえで重要な要素であるため、Googleも検索結果に影響を与えるようになったということだと思います。
ページ読込速度を確認するには
まず、自分のサイトがどれくらいの時間で読み込むのか知る必要があります。
ゆっくりと… » ウェッブサイトの表示速度を測定するフリーツール集
表示速度の測定法がたくさん紹介されています。
ここで紹介されていないもので3つ追加で紹介します。
WebWait - Benchmark Your Website
対象のページを複数回読み込んで平均値を出してくれます。
Which loads faster?
2つのサイトを同時に読み込んでどちらが速いか比べることができます。
Pingdom Tools
読み込み順のほかに、読み込み時間、ファイルサイズ、ファイルの種類などに並べ替えることもできます。過去のデータも保存できるので便利です。
高速サイトを実現する14のルール
ウェブサイトの高速化には「サーバー環境」「ユーザー環境」「ウェブページの構成要素」の3種類が必要となります。
ここではウェブページの構成要素について紹介していきます。
Webサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳) | 株式会社インターオフィス
「ハイパフォーマンスWebサイト ― 高速サイトを実現する14のルール」についてまとめられています。数年前の定義されたものですが、高速化の基本となる内容ですのでぜひ押さえておきたいです。
- Webサイトの高速化 フロントエンドのパフォーマンスの重要性
- Webサイトの高速化 ルール1 HTTPリクエストの数を減らそう!
- Webサイトの高速化 ルール2 CDNを使おう!
- Webサイトの高速化 ルール3 Expiresヘッダーを追加しよう!
- Webサイトの高速化 ルール4 コンポーネントを圧縮しよう!
- Webサイトの高速化 ルール5 CSSは上に!
- Webサイトの高速化 ルール6 scriptは下に!
- Webサイトの高速化 ルール7 CSSのExpression()は使わない!
- Webサイトの高速化 ルール8 JavaScriptとCSSは外部ファイルに!
- Webサイトの高速化 ルール9 DNS Lookupsを減らそう!
- Webサイトの高速化 ルール10 コードのサイズを圧縮する!
- Webサイトの高速化 ルール11 リダイレクトを避けよう!
- Webサイトの高速化 ルール12 スクリプトの重複に気をつける!
- Webサイトの高速化 ルール13 ETagを正しく設定する!
サイトパフォーマンス計測ツールYSlowの評価項目まとめ
高速サイトを実現する14のルールを守れているか判定してくれるのがYSlowです。そのYSlowのインストールや判定結果について詳しく紹介されています。
【ハウツー】YSlowでWebページを高速化 - リッチさと速さを同時に実現するUIを! | マイコミジャーナル
こちらも同じような内容ですが、各項目でよい評価をもらうにはどうすればよいかなど詳しく紹介されています。
高速化のためにすべきこと
ついに出た！Chrome版「Page Speed」の使い方 :: Stocker.jp / diary
Page Speedのインストールから改善方法など分かりやすく説明されています。
- CSSスプライトに画像をまとめる
- ブラウザのキャッシュを活用する
- JavaScriptを縮小する
- 圧縮を有効にする
Page Speed Online
先ほどのサイトではChrome板のPage Speedの説明でしたが、こちらはオンライン版です。URLを入力するだけで、そのサイトの点数やおこなうべき高速化の手段を教えてくれます。
ちなみにこのブログは100点満点中71点で、「重複するリソースは 1 つの URL から提供する」、「CSS スプライトに画像をまとめる」、「ブラウザのキャッシュを活用する」が優先度が高い読み込み時間の短縮方法だそうです。
どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」 | デザインどや！？
CSS Spriteの説明は非常に分かりやすいです。
- 高速化の重要度
- Webサイトの待ち時間の80％はフロントエンドの処理によるもの
- 【デザイナーにできること1】「CSS Sprite」で画像の表示速度を高速化する
- 【デザイナーにできること2】外部CSS・JavaScriptの読み込み方で表示速度を改善
- まとめ
ASCII.jp：30分でできる！Webサイトを高速化する6大原則
ちょっと古いですが、お手軽にできる高速化が紹介されています。
- 画像は最適化してから使え！
- 画像はサイズを指定せよ！
- HTTPリクエストは最小にせよ！
- CSSセレクターは短く最適化せよ！
- CSSは上に、JavaScriptは下に『まとめて』記述せよ！
- プロファイリングツールを使いこなせ！
JavaScriptやCSSの外部ファイルに手を加えサイトの表示速度を改善する3つの方法｜Webpark
このブログですが、ぜひご覧ください。外部ファイルの圧縮や配置による読み込み速度の違いなど、簡単にできる改善法を載せています。
- JavaScriptやCSSファイルを軽量化する
- JavaScriptやCSSファイルの配置順を変える
- JavaScriptやCSSファイルをまとめる
Yahoo!パフォーマンスチーム、最新高速化ルール20を発表 | エンタープライズ | マイコミジャーナル
高速サイトを実現する14のルールに加えて、20のルールが紹介されています。
画像に関する高速化
CSS Spriteや画像サイズの圧縮など。
「CSS Sprite」で画像の表示速度を高速化する - [ホームページ作成] All About
CSS Spriteの効果や手順が詳しく説明されています。
CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC
CSS Spriteと画像の減色による効果や方法が紹介されています。
PNG画像をいい感じに最適化してくれる『punypng』 | IDEA*IDEA
png画像のサイズを圧縮してくれるサービスが紹介されています。見た目はほぼ一緒なので試す価値ありです。
ヤフーの画像はなぜyimg.jpドメインなのか？ サイト高速化の手法とヤフーの失敗例 | Web担当者Forum
ヤフーの画像が別ドメインである理由などが紹介されています。
CSSやjavascriptの記述に関する高速化
CSSセレクタの高速化の話し - Webtech Walker
CSSセレクタの関する高速化についてまとめられています。知っているようで知らない意外な内容で面白いと思います。
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
「jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。」ということで具体策が分かりやすく紹介されています。
jQueryの高速化に関するまとめ | IDEA*IDEA
元記事は「10 Ways to Instantly Increase Your jQuery Performance | Nettuts+」で、jQueryの高速化についてまとめられています。
JavaScriptを高速化する6つのテクニック | エンタープライズ | マイコミジャーナル
「関数呼び出しを避ける」、「ループを展開する」など6つのテクニックが紹介されています。ブラウザごと実行時間比較があり効果が一目瞭然です。
javascriptの高速化テク:三浦仮想研究所
javascript高速化のテクニックが16個紹介されています。
まとめ
以上サイト高速化に役立ちそうな記事を紹介してみました。はてブやツィッターのボタンなど外部サービスを利用している場合はどうしようもないケースもありますが、できる限りのことはしておいて損はないと思います。
ということでこのブログでも色々試してみましたが、高速化を優先するとどうしても、色々省いてしまってデザインが地味になってしまう。
@webpark2さんのツイート
