prettyPhotoをfooterで読み込みする様に変更
prettyPhotoと言うJavaScriptを使って、画像をクリックしたらズームする仕掛けを作っています。
- 画像をクリックしたらズームする仕掛け(改訂版) : プラスα空間 (2015年6月25日)
最初は、次のスクリプトで読んでました。
add_action( 'wp_enqueue_scripts', 'theme_prettyPhoto_js' );
function theme_prettyPhoto_js() {
wp_enqueue_script(
'theme_prettyPhoto_js',
network_home_url('/js/').'jquery.prettyPhoto.min.js',
array( 'jquery' ),
'3.1.6'
);
}
WordPressでJavaScriptを読み込むときは、wp_enqueue_scripts()を使うのが定石です。このままだと、PageSpeed Insightsに怒られちゃいます。
wp_enqueue_scripts()に、スクリプトをfooterで読み込むためのオプション($in_footer)があるということを知りました。
上記のスクリプトに、8行目の"true"オプションを設定しました。
add_action( 'wp_enqueue_scripts', 'theme_prettyPhoto_js' );
function theme_prettyPhoto_js() {
wp_enqueue_script(
'theme_prettyPhoto_js',
network_home_url('/js/').'jquery.prettyPhoto.min.js',
array( 'jquery' ),
'3.1.6',
true
);
}
この結果、prettyPhotoがfooterで読み込まれる様になりました。動作にも問題ありません。PageSpeed Insightsのスコアは若干改善されました。
ブログ | モバイル | パソコン |
---|---|---|
通常読み込み | 64 | 77 |
in_footer読み込み | 65 | 77 |
ディスカッション
コメント一覧
まだ、コメントがありません