インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった

11
months
28
配信元サイト
Web担当者Forum

どれぐらいスゴいかというと、「サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、かなり高速化できちゃう」というぐらいスゴいのです。しかも、どんなサイトでも、どんなCMSを使っていても「インストールするだけ」。

  • このエントリーをはてなブックマークに追加
  • いいね!
  • google+
  • evernote

COMMENT

  • CSSやJavaScriptの最適化
    • HTML内のCSS記述をJavaScriptより前に移動する(move_css_above_scripts)
    • HTMLの<body>内のCSS記述を<head>に移動する(move_css_to_head)
    • HTMLから呼び出す外部CSSや外部JavaScriptが複数ある場合は、それぞれ1つのファイルにまとめてHTTPリクエスト数を削減する(combine_css、combine_javascript)
    • 外部CSSファイルや外部JavaScriptファイルから不要なスペースや改行を取り除いて軽くする。CSSでは画像ファイルのURLを軽量化したファイルのURLに差し替える(rewrite_css、rewrite_javascript)
    • HTML内のstyle属性で書かれているCSSを最適化する(rewrite_style_attributes、rewrite_style_attributes_with_url)
    • HTML内の<style>の@importで参照されているものを1つにまとめる(flatten_css_imports)
    • 小さなサイズの外部CSSファイルや外部JavaScriptファイルをHTML内の<style>や<script>にインライン化する(inline_css、inline_javascript)
    • HTML5のローカルストレージにインライン要素をキャッシュする(local_storage_cache)
    • JavaScriptをロード完了後に実行するdefer指定に変える(defer_javascript)
    • HTML内のCSSが<style>@import ~</style>の場合、それを<link rel=”stylesheets”~>形式に変える(inline_import_to_link)
    • HTML内のCSS記述やJavaScript記述のうち分量が多いものを外部ファイル化してブラウザがキャッシュしやすくする(outline_css、outline_javascript)
    • 画像ファイル、外部CSSファイル、外部JavaScriptファイルの、ブラウザ側でのキャッシュ期間を長くする。内容が変わったときに適切に更新されるように内容のハッシュをURLに含む(extend_cache)
  • 画像ファイルの最適化
    • 画像ファイルを最適化する(rewrite_images)
      • 画像ファイルからメタデータや色プロファイルを削除してファイルサイズを削減する
      • ファイルフォーマットを適切なものに変換する
      • サイズの小さな画像をdata:uriでHTML内にインライン化してHTTPリクエスト数を削減する
      • <img>タグで指定された表示サイズと違っている場合に表示サイズに縮小した画像を作成する
    • <img>タグにwidthとheightの指定がない場合に適切なサイズ情報を追加してレンダリング時のリフローをなくす(insert_image_dimensions)
    • HTML上では粗い(つまり軽い)画像ファイルを参照しておいて、実際にブラウザ上でページの表示が完了してから元の画像に差し替える(inline_preview_images)
    • スプライト画像を自動的に作成する。CSSで背景画像に指定されているものを結合して作り、CSSにbackground-positionを自動的に指定する(sprite_images)
    • HTML上では画像ファイルをナシにしておいて、実際にブラウザ上でその画像が表示されるタイミングで元の画像を読み込むようにする(lazyload_images)
  • HTML文書の最適化
    • HTML内のコメントを削除する(remove_comments)
    • HTML内の空白や改行を削除する。ただし<pre>、<script>、<style>、<textarea>を除く(collapse_whitespace)
    • HTML内にある、HTML仕様で重要ではない属性値を削除する(elide_attributes)
    • HTML内のURLを相対パスに書き換える(trim_urls)
    • HTML内の属性値から仕様で不要とされている引用符(”")を削除する(remove_quotes)
    • HTML内のmeta http-equivの内容をHTTPヘッダーに変える(convert_meta_tags)
  • Googleアナリティクスコード関連
    • Googleアナリティクスのトラッキングコードを非同期に変える(make_google_analytics_async)
    • Googleアナリティクスのコードを自動的に各ページに追加する(insert_ga)