読者です 読者をやめる 読者になる 読者になる

炊きたてのご飯が食べたい

定時に帰れるっていいね。自宅勤務できるっていいね。子どもと炊きたてのご飯が食べられる。アクトインディでは積極的にエンジニアを募集中です。

WordPress - Page Speedを参考にフロントエンドのパフォーマンスチューニング

パフォーマンスチューニング

GoogleのPage Speed

htmlのコーディングルールやキャッシュの設定など、サイトを作成するときに、毎回気をつけるポイントなので、覚えておいて損はないですね。「塵も積もれば山となる」です。

2012年9月4日現在のPage Speedでピックアップされる項目は全部で26個。各々の具体的な対応内容はタイトルをクリックすると確認できます。

  • 難易度
  • 概要
  • 注意点
  • 確認方法

について記述しています。

対応前の注意点

●外部サイトのAPIを利用している場合、Scoreを100点は無理

FacebookのいいねボタンやLikebox。Twitterのタイムライン表示など、外部サイトのAPI等を利用している場合は、全ての項目をクリアすることができませんので、無理なものは無理と割り切ってできるだけ対応していきましょう。

●HTMLの構文チェック

HTMLソースやCSSをいじり倒すので、対応が全て終わったら、HTMLの構文をチェックしましょう。

対応に必要なプラグイン

Page Speedのいくつかの対応を効率的に行うのに、Head Cleanerが役に立ちます。

Head Cleanerの説明

Google Chrome ExtensionsのPage Speedをダウンロード

Page SpeedのアドオンをChromeに組み込むことができます。何度もチェックするツールなので、入れておくと便利です。

https://chrome.google.com/webstore/detail/gplegfbjlmmehdoakndmohflojccocli

Page Speedの具体的な対応内容リスト

HTML

CSS

Javascript

image

Apache