ホームページのパフォーマンスを測定

1. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScriptを修正

これはjavascriptの読み込みを非同期にしてあげる処理を追加することで回避しました。
functions.phpで下記のコードを追加しました。
[code]if ( ! function_exists( ‘myfunc’ ) ) :
function myfunc ( $tag ) {
if ( strpos( $tag, ‘shCore.js’ ) ){
return $tag;
}else{
return str_replace( ‘ src’, ‘ async src’, $tag );
}
}
add_filter( ‘script_loader_tag’, ‘ myfunc ‘, 10, 2 );
endif;[/code]
これはscript tagにasync(非同期)を追加するだけのコードです。
asyncをdeferとすることができるみたいです。お好みで使い分けましょう。
これでjavascriptの読み込みが非同期になりました。
注意としてはプラグインによっては影響を受けるものがあるります。
現にsyntaxhilighterのプラグインのJSに影響が出ました。
なので、ここではif ( strpos( $tag, ‘shCore.js’ ) ){で逃がしてあげてます。

2. CSS・JavaScript を縮小する

これは比較的簡単で、PageSpeed Insightsが圧縮されたファイルを用意してくれます。
「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」
のリンクをクリックすると、ZIPファイルをダウンロードできるので、
中身を確認し、サーバのファイルと入れ替えましょう。

3. 圧縮を有効にする

これは.htaccessにリクエストされるファイルの容量を圧縮するコードを書いてあげるだけです。
今回自分が設定したのは、html,xml,css,javascriptの圧縮です。
[code]AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript[/code]
こんな感じ。
注意したいのは「DEFLATE」はサーバによって対応していないものもあるようです。
事前に確かめられてください。

4. 画像を最適化する

これは画像圧縮ツールを使用して対応しました。
今回使用したのはtinypng.com。
png,jpgの画像圧縮に対応しています。
PageSpeed Insightsから注意を受けた画像に対して圧縮をかけ、
サーバにアップします。

以上で今回の分は終了です。
モバイルはまだスコアが76/100なのでこれから引き続き頑張ります。
では。