当サイトはWordPressテーマ「Affinger5（WING）」を使用しています。
本来、Affinger5はサイトの表示速度が速いテーマのはずなのに、当サイトは明らかに表示にもたつくことがあります。
ウェブサイトの高速化は小さな改善の積み重ねだと思うので、今回試した2つの方法を書き留めておきます。
なお、今回の方法はSHIROMA氏が運営されているSHIROMAG（https://www.notitle-weblog.com）の記事を参考にさせていただきました。ありがとうございました。
WEBフォント（Google font）を読み込ませない
WING（Affinger5）ではWEBフォント（Google Fonts）の使用を選択できますが、使っていなくても裏で読み込みが行われています。
WING（Affinger5）で不要なWEBフォントを読み込ませないようにする方法
使っていないWEBフォントが読み込まれると、サイトの表示速度が遅くなるだけです。
今回はこれを削除する方法を紹介します。
親テーマには手を加えず、子テーマのカスタマイズだけでOKです。
まず、Affinger5管理→デザイン→フォントの管理で、「全体」を「デフォルト」、「記事タイトル・見出し（h2～3）・ウィジェットボタンなど」を「使用しない」に設定。
あとはfunctions.phpに下記のコードを追加するだけ。
functions.php
// Google Fontsを読み込まない設定
function deregister_styles_google_fonts() {
wp_deregister_style( 'fonts-googleapis-roundedmplus1c' );
wp_register_style( 'fonts-googleapis-roundedmplus1c', '' );
wp_deregister_style( 'fonts-googleapis-notosansjp' );
wp_register_style( 'fonts-googleapis-notosansjp', '' );
wp_deregister_style( 'fonts-googleapis-lato700' );
wp_register_style( 'fonts-googleapis-lato700', '' );
wp_deregister_style( 'fonts-googleapis-montserrat' );
wp_register_style( 'fonts-googleapis-montserrat', '' );
}
add_action( 'wp_print_styles', 'deregister_styles_google_fonts' );
Font Awesomeアイコンの読み込みを遅延させる
Affinger5では、Font Awesomeのアイコンがが利用されていますが、読み込みを遅らせることでサイトの表示速度を改善することができます。
headで、「font-awesome.min.css」と「font-awesome-animation.min.css」というCSSファイルが読み込まれています。このファイルはレイアウトには関係ないので、多少読み込みを遅らせても問題ないでしょう。ただ、通常の読み込みよりアイコンの表示が一瞬だけ遅くなります。
WING（Affinger5）でFont Awesomeアイコンを遅延読み込みさせて高速化
こちらも下記のコードをfunctions.phpに追記するだけ。
functions.php
// font awesome アイコンを読み込まない（JavaScriptで遅延読み込みさせるため）
function deregister_styles_font_awesome() {
wp_deregister_style( 'font-awesome' );
wp_register_style( 'font-awesome', '' );
wp_deregister_style( 'font-awesome-animation' );
wp_register_style( 'font-awesome-animation', '' );
}
add_action( 'wp_print_styles', 'deregister_styles_font_awesome' );
// 遅延読み込みのJavaScriptをインラインで挿入
function lazy_load_css() {
echo '<script>
function lazyLoadCSS() {
var fontawesome = "' . get_template_directory_uri() . '/css/fontawesome/css/font-awesome.min.css";
var fontawesomeAnimation = "' . get_template_directory_uri() . '/css/fontawesome/css/font-awesome-animation.min.css";
function addStyleHead(href) {
var link = document.createElement("link"); link.rel = "stylesheet";
link.href = href;
document.head.appendChild(link);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) {
raf(function (){
addStyleHead(fontawesome);
addStyleHead(fontawesomeAnimation);
});
} else {
window.addEventListener("load", function(){
addStyleHead(fontawesome);
addStyleHead(fontawesomeAnimation);
});
}
}
lazyLoadCSS();
</script>';
}
add_action('wp_footer', 'lazy_load_css');
高速化の結果
PageSpeed Insightsで計測してみたところ、モバイルが42→59、パソコンが67→89でした（画像が少ないテキストベースのページで計測）。
体感的に、Googleフォントの読み込み制御の方は効果が大きかった感じがします。
スライダーを使っていたり、画像が多いTOPページだとモバイルが47、パソコンが67なのでまだまだですね。コツコツやっていきます。