難易度 ★★★大変 概要 Webページをブラウザで表示するためには、サーバーに置いてあるhtmlソースや画像といった情報を、閲覧しているPCに一度ダウンロードする必要があります。普通にページを見ているだけでは意識しませんが、htmlの構成は、CSSファイルや画…

難易度 ★★★大変 概要 公開プロキシーサーバーのキャッシュを利用すると、サイトを訪問したことのないユーザーにもキャッシュを利用することができます。プロキシーはキャッシュ機能を実装しているので、過去にサーバから受信したコンテンツを一定期間保持し…

難易度 ★★★大変 概要 キャッシュ（ブラウザがローカルに保存したファイルを使用して、WEBページを表示すること）を友好的に活用することで、ネットワーク経由でのファイルのダウンロード処理が省略され、サイトの高速化、サーバの負荷軽減に繋がります。 静…

難易度 ★★★大変 概要 Webサーバがファイルを圧縮処理（gzip、deflate圧縮）をして送ることで、送信するデータ量が削減され、ファイルのダウンロード時間の短縮につながります。圧縮したファイルはブラウザが勝手に解凍して表示してくれます。最近のブラウザ…

難易度 ★すごく簡単 概要 サイト内でリンク切れとなっているページ、画像、CSS、JSを無くしましょう。といった施策です。JSやCSSファイルのようなリソースをリクエストするファイルのリンク切れは、処理をブロックすることになり、サイトをクラッシュさせて…

難易度 ★すごく簡単 概要 画像を最適化して、ファイル容量をできるだけ小さくしましょう。といった施策です。 カメラで撮影した画像には、カメラの製品名や撮影日時などのメタ情報がデータとして入っていたり、表示には影響しないような不要なスペースがあっ…

難易度 ★すごく簡単 概要 ブラウザがページをレイアウトをするとき、画像のような置換要素（hr、isindex、applet、button、embed、iframe、ilayer、img、input、layer、object、select、spacer、textarea など）の周りではフロー（要素の大きさ、位置などの…

難易度 ★すごく簡単 概要 すべての画像の幅と高さを指定することで、不要なリフロー（要素の大きさ、位置などの再計算）やリペイント（描画）が減り、レンダリング（画面への表示）をより速く行うことができます。 ページを表示するときには、少なくとも1回…

難易度 ★★★大変 概要 複数の画像を一つの画像にまとめて、ブラウザの読み込みの処理を少なくする手法です。 外部ファイルを読み込む際には、「TCP接続設定」「HTTP要求」「DNS名前解決」の3つのレスポンスが発生します。複数の画像をまとめることで、このレ…

難易度 ★★まぁ簡単 概要 JavaScriptファイルの改行やコメントアウトを消して、ファイルサイズを減らすことで、ファイルの読み込み時間がちょっと短くなるよ。っていう施策です。 [js]var url = window.location.href; alert(url);[/js] ↓ [js]var url=window…

難易度 ★★★★すごく大変 概要 ブラウザがJavascriptをパース（プログラムで扱えるようなデータに変換すること）している間は、そのJavascript以降に書かれているHTMLのレンダリング処理（画面に表示する内容を描画する処理）が止まり、ページの表示に待ちが発…

難易度 ★★★★すごく大変 概要 ブラウザは、Javascriptで書かれているコードをパース（プログラムで扱えるようなデータに変換すること）します。Javascriptの実行が必要とされるまでパースを遅らせることで、ページ表示には必要のないレンダリング（画面に表示…

難易度 ★すごく簡単 概要 対応方法は大きく3つあります。 htmlに直接インラインで記述する 小さなJavascriptは他のJavascriptと合わせる WordPressプラグイン – Head Cleanerの「CSS と JavaScript を、サーバ上にキャッシュする → 複数の JavaScript を結合…

難易度 ★すごく簡単 概要 CSSファイルの改行やコメントアウトを消して、ファイルサイズを減らすことで、CSSの読み込み時間がちょっと短くなるよ。っていう試作です。 [css].menu{ font-size:1em; width:100%; } .sub{ font-size:0.8em; width:80%; }[/css] ↓…

難易度 ★すごく簡単 概要 CSSを最初に読み込み、Javascriptは後から読み込む。ブラウザは一つのホストに対し、複数の同時接続が可能だが、Javascript同士の並列ダウンロードは行えないみたい。CSSとJavascriptの読み込みがあべこべだと、CSSの並列ダウンロー…

難易度 ★すごく簡単 概要 CSS（外部CSS、インラインスタイル両方とも）はheadの中で読み込んでね。ということです。CSSが一番最初に読み込まれることで、ブラウザのプログレッシブレンダリング（Javascritpの処理の実行より、デザインなど、視覚的な部分をな…

難易度 ★すごく簡単 概要 対応方法は大きく3つあります。 htmlのhead領域に直接インラインで記述する 小さなCSSは他のCSSと合わせる WordPressプラグイン - Head Cleanerの「CSS と JavaScript を、サーバ上にキャッシュする → 複数の CSS を結合する」を使…

難易度 ★すごく簡単 概要 ブラウザにはパラレルロードという、並行してコンテンツを読み込む仕組みがあります。一つのファイルの読み込みが完了してから、次のファイルの読み込みに移るのではなく、複数のファイルを同時に読み込み、解析の速度を向上される…

難易度 ★すごく簡単 概要 html内の改行やスペースを削除して、htmlドキュメントの容量を小さくすることです。 [html]<div> <p>aaa</p> </div>[/html] ↓ [html]<div><p>aaa</p></div>[/html] 元のソースを縮小してしまうと今後の運用に多大なダメージになってしまうので、WordPressプラグインHead …

難易度 ★★まぁ簡単 概要 URL に「?」が含まれている場合、一部のプロキシ キャッシュ サーバーでキャッシュされない為、クエリをつける必要のないファイルはクエリを削除しなさいということです。 [html]<script type="text/javascript" src="">http://asobicocoro.com/tips/wp-includes/js/jquery/…

難易度 ★★まぁ簡単 概要 同じ内容のファイルだが、クエリで分けている、異なる場所から同一ファイルを読み込んでいる場合、一つにまとめましょう。ということです。WordPressの場合は、自動でJqueryのファイルが読み込まれたりもするので、必要のないJavascr…

難易度 ★すごく簡単 ★★まぁ簡単 ★★★大変 ★★★★すごく大変 ★★★★★世の中金次第 難易度 ★すごく簡単 対応 HTMLヘッダーにcharset(文字セット)を指定しましょう。といった内容です。 指定がないと、ブラウザが文字コードの自動判定処理をするので、指定をして必要…

htmlのコーディングルールやキャッシュの設定など、サイトを作成するときに、毎回気をつけるポイントなので、覚えておいて損はないですね。「塵も積もれば山となる」です。 2012年9月4日現在のPage Speedでピックアップされる項目は全部で26個。各々の具体的…

最近、MovabletypeからWordPressにサイトを移設しました。 Movabletypeでは、記事の管理にデータベースを使用するものの、Webサイトに公開する際には、静的ページを生成して公開する形なので、特にパフォーマンスを意識することはありませんでしたが、WordPr…