Page Speedの傾向と対策

1 文字セットを指定する/Specify a character set
2 JavaScript の解析を遅延する/Defer parsing of JavaScript

文字セットを指定する/Specify a character set

公式詳細
HTMLヘッダーにcharset(文字セット)がないという注意です。
文字セットがないと、HTML読み込み後、ブラウザーが文字コードの自動判定処理をするので、表示が遅くなるという理屈です。

HTMLでの対策

HTMLのHeadにcontent-typeでcharsetも指定してしましょう。

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

ただし、今のPage Speedは、HTML側でのContent-typeは無視して注意を出し続けます。

Webサーバーでの対策

Webサーバー側の設定で変更できます。
ApacheのConfや.htaccessにて、HTMLはSJISだと指定すれば、

AddType "text/html; charset=Shift_JIS" .html

ただ、必ずしもすべてのHTMLファイルが同じCharsetとは限らない。(UTF-8とShift_JISはよく混在している。)
指定する時は、よく十分気をつけましょう。ブラウザーによっては、こちらを優先してHeadのcontent-typeを無視して文字化け起きることが多々あります。

Webアプリケーションでの対策

あるいは、GAEなどのServletですとcontentTypeにtext/htmlとだけでなく、charsetも指定しましょう。

response.setContentType("text/html;charset=UTF-8");

JavaScript の解析を遅延する/Defer parsing of JavaScript

twitterのwidgetとか手をだしにくくて、解決できないことが多いですが

Google Analyticsでの対策

もしGoogleのアクセスログ解析ツールのAnalyticsを使っていたら、古いバージョンのタグを挿入していないか確認してみましょう。
そしてHeadに追加する方式の最新のAnalyticsのタグを使いましょう。
Google Analytics 非同期トラッキングコードとは

HTMLでの対策

一部、ChromeやFirefoxですとscriptにasync属性を指定すると、非同期でScriptを読み込むので表示が速くなります。HTML5の仕様として策定中です。

<script async></script>

対応していないブラウザーですと、Googleが推奨しているような、後でScriptタグを挿入するというやり方になります。

<script>
var node = document.createElement('script');
node.type = 'text/javascript';
node.async = true;
node.src = 'example.js';
// Now insert the node into the DOM, perhaps using insertBefore()
</script>

Google Plus Oneボタンなど、非同期対応しているものも増えています。
ただ、<head>の中が非同期コードであふれそうですが

defer属性とは別の問題です。

IE系ブラウザーが対応している、Scriptタグのdefer属性ですが

<script defer></script>

あくまで、Scriptの実行を非同期で行うだけで、asyncとは違って読み込み時には従来通りブロックし時間がかかります。
それに、通常実行は、たいして時間かからないか、あるいは時間がかかる処理は非同期で行うので、効果は薄いと思います。

Comments