ブログ運営

Affinger5(WING)の高速化メモ



当サイトはWordPressテーマ「Affinger5(WING)」を使用しています。

本来、Affinger5はサイトの表示速度が速いテーマのはずなのに、当サイトは明らかに表示にもたつくことがあります。

ウェブサイトの高速化は小さな改善の積み重ねだと思うので、今回試した2つの方法を書き留めておきます。

なお、今回の方法はSHIROMA氏が運営されているSHIROMAG(https://www.notitle-weblog.com)の記事を参考にさせていただきました。ありがとうございました。

スポンサーリンク

WEBフォント(Google font)を読み込ませない

WING(Affinger5)ではWEBフォント(Google Fonts)の使用を選択できますが、使っていなくても裏で読み込みが行われています。
使っていないWEBフォントが読み込まれると、サイトの表示速度が遅くなるだけです。
今回はこれを削除する方法を紹介します。
親テーマには手を加えず、子テーマのカスタマイズだけでOKです。

WING(Affinger5)で不要なWEBフォントを読み込ませないようにする方法

まず、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なのでまだまだですね。コツコツやっていきます。

  • この記事を書いた人

pieceke

東京都荒川区在住 / 41歳男 / IoTデバイスメーカーのフリーランス役員 / 家族構成:妻、長女、長男の4人暮らし / 好きなもの:よく晴れた日に昼間から飲むビールとおつまみ作り、家族や友人が楽しそうにしている様子を写真に撮ること(SONY α7ⅲ)、子どもたちと一緒に時間を過ごすこと。

-ブログ運営
-,

© 2021 It's a piece of cake Powered by AFFINGER5