WING(Affinger5)には、トップページにスライドショーを表示させる機能があります。
しかし、この機能を使っていなくても、スライドショー用のCSSとJavaScriptファイルが読み込まれてしまいます。
もしスライドショーを使っていないのであれば、このCSSとJavaScriptを読み込まないように設定するのがおすすめです。
バージョン・注意事項
WING(Affinger5)のバージョン: 20181120
テストは行なっていますが、何か問題が起きても責任は負いかねます。
自己責任でお願いいたします。
読み込まれているファイル
Affinger5では、スライドショー機能を実装するためにjQueryのプラグイン「slick.js」が使用されています。
slick.jsを利用するには、「slick.css」も一緒に使う必要があるので2つのファイルが読み込まれていることになります。
トップページに読み込まれているならまだしも、スライドショーがない記事ページにも読み込まれているのがちょっとアレですね…。
設定を確認する
「AFFINGER 5管理」→「ヘッダー」で設定を見てください。
上の画像のように、スライドショー機能を使っていない人はこのカスタマイズが有効です。
スライドショーを表示させている人は、このカスタマイズを行わないでください。
functions.phpにコードを追加
子テーマの「functions.php」に以下のコードを追加します。
念のために、functions.phpのバックアップは取っておきましょう。
// スライダーのCSSを読み込まない設定
function deregister_styles_slick() {
wp_deregister_style( 'slick' );
wp_register_style( 'slick', '' );
wp_deregister_style( 'slick-theme' );
wp_register_style( 'slick-theme', '' );
}
add_action( 'wp_print_styles', 'deregister_styles_slick' );
// スライダーのJavaScriptを読み込まない設定
function deregister_script_slick() {
wp_deregister_script( 'slick' );
wp_register_script( 'slick', '' );
}
add_action( 'wp_print_scripts', 'deregister_script_slick' );
PageSpeed Insightsの点数
PageSpeed Insightsの点数はどれくらい改善されたのかを確認してみましょう。
こちらがBefore
お次がAfter
お、4点も上がりました。
逆に言うと、スライドショーを表示させるために4点犠牲にするということです。
それが多いのか少ないのかは、ご自身で判断してください。
他にもこんなカスタマイズ記事があります。
最近のコメント