【ハウツー】

YSlowでWebページを高速化 - リッチさと速さを同時に実現するUIを!

3 YSlowの評価内容

    後藤大地  [2008/01/29]

    YSlowの評価結果はA(最良)からFまでの6段階評価で、評価できなかった項目についてはn/aで表示される。それぞれの項目をクリックするとヘルプページにジャンプするので、このままでもそれなりに扱える。YSlowのメニューからHelp→YSlow Helpを選択するとヘルプサイトに飛ぶので、本格的に使う場合には同ページを一度全部読んでおきたい。ここでは各項目がそれぞれ何を意味しているかを簡単にまとめておく。

    1 Make fewer HTTP requests HTTPリクエストの数をもっと減らせるのではないか
    2 Uses CDN CDNを使っているかどうか 予算との兼ね合いだが、CDNが使えるならそちらのほうが高速になる
    3 Add an Expires header Expiresを使っているかどうか Expires期限をだいぶ先に設定して長いことキャッシュが効くようにする
    4 Gzip components 圧縮機能を有効にしているかどうか HTTPの圧縮通信機能を有効にしてテキストデータは圧縮して通信した方が高速になる。指定するのはGzip
    5 Put CSS at the top CSSを上部に配置しているかどうか 上部に配置しておけばコンテンツが逐次表示されるようになる
    6 Put JS at the bottom JavaScriptを下部に CSSを上に配置した場合はJavaScriptは下に配置した方がいいことが多いとか
    7 Avoid CSS expressions CSS expressionを使ってしまっているかどうか expression関数は何度も実行されるので処理速度の遅延を招く
    8 Make JS and CSS external JavaScript/CSSを外部ファイルにできるのではないか ファイルサイズが大きい場合は外部ファイルに分離した方がキャッシュが効くため高速になる。サイズによってはケースバイケース
    9 Reduce DNS lookup DNSルックアップをもっと削減できるのではないか あまりたくさんホスト名を指定しないほうがいいのではないか、という指針
    10 Minify JS JavaScriptの縮小化を実施していないのではないか YUI Compressorを使うなどしてJavaScriptを縮小化した方が高速になる
    11 Avoid redirects リダイレクトしていないか リダイレクトするとその分遅くなる。URLの最後にちゃんと"/"をつけるなど細かい調整も大切
    12 Remove duplicate scripts スクリプトの重複があるのではないか
    13 Configure ETags ETagsの設定が誤っていないか ETagsを正しく指定するか、指定方法がよくわからないなら無効にしてしまった方が効果的とされている

    もっとも、2のCDNでA評価を得るには、CDNを使っている必要があるので、ほとんどの場合は難しいだろう。ほかにも評価結果がBやCになっているからといって、パフォーマンス上は問題がないこともある。細かい調整はケースバイケースだ。すべてA評価とかありえるのかという話になるわけだが、Googleのトップページはさすがにいい評価を実現している。

    Googleトップページを分析した結果、きわめて良好なエリート - 総合評価98点

    関連したタグ

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン