Google製サイト高速化Firefoxアドオン「Page Speed」を試してみました
2009年06月08日-
Page Speed Home
Google製サイト高速化Firefoxアドオン「Page Speed」というのがリリースされたようで試してみました。
同様のFirefoxアドオンである、Yahoo!製のYSlowがあったりますが、後から出ただけあってYSlowにない便利機能なんかもあるみたいなので併用してもいいかも。
インストールすると、「Page Speed」、「Page Speed Activity」がタブに追加されました。
Analyze ボタンでページの検証が始まります。
検証結果画面。アイコン付きでYSlowより見やすいかも。
ここに表示される警告を直していけばページの高速化が簡単にできますね。
見出しをクリックすると解説ページに移動できます。
ブラウザベースのキャッシュをもうちょっと使うように、ということでメッセージが表示されました。
ブラウザキャッシュに対応するには、apacheでは具体的に mod_expires モジュール利用で対応できますね。
「YSlowでウェブサイトのパフォーマンスを改善: Expiresプロパティを設定する」が参考にできます。
といった感じで、gzip圧縮、外部JSの結合・Minify、DNS参照の可能な限りの最小化、画像のwidth/heightを定義指定などのアドバイスとチェックが受けられて非常に便利。
使っていないCSSを消しましょうというアドバイスも参考になります。
これはYSlowにもない機能だったと思うので、YSlow利用者も入れてみるとよいかも。
効果的なCSSセレクタの使い方についてもアドバイスしてくれます。
非効率なCSSセレクタについての指摘が一覧で見れます。これもYSlowにはないですね。
静的コンテンツに対するリクエストは、クッキーを送信しないドメインにしましょう、というアドバイスも。
たしかに、全コンテンツに対してクッキーを送信すると遅くなりますね。
「Page Record Activity」タブでは、ページの表示速度をダイアグラムをもって視覚的に見ることもできます。
すべてのアドバイスを直せば、ボトルネックがフロントエンド側だった場合にかなり劇的に体感速度は向上するケースもあるので試してみるとよさそうです。
パフォーマンス改善関連エントリ
最新のブログ記事(新着順)
- 2000個近いフリーのピクトグラムアイコン「tabler-icons」
- ページスクロールで背景ムービーが動くページが作れる「ScrollMovie」
- テキストがシャッフルされてかっこいいMENU実装
- 手書き風ピクトグラムアイコン400種「Doodle Icons」
- 色のカスタマイズやブレンドをできるオンラインツール「hue.tools」
- JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」
- ダークモードにも対応したシンプルなページ作成に使える「Simple.css」
- Three.jsで画像をピクセルっぽくゆがめるサンプル
- スクロールに応じて3Dオブジェクトが動作するThree.jsを使ったデモ
- 丸文字が可愛いフリーフォント「ZEN丸ゴシックN」
- 過去のエントリ