WING(Affinger5)でFont Awesomeアイコンを遅延読み込みさせて高速化

WING(Affinger5)でFont Awesomeアイコンを遅延読み込みさせて高速化のアイキャッチ画像

Affinger5では、Font Awesomeのアイコンがが利用されていますが、読み込みを遅らせることでサイトの表示速度を改善することができます。

バージョン・注意事項

WING(Affinger5)のバージョン: 20181120

テストは行なっていますが、何か問題が起きても責任は負いかねます。

自己責任でお願いいたします。

読み込まれているファイル

headで、「font-awesome.min.css」と「font-awesome-animation.min.css」というCSSファイルが読み込まれています。

このファイルはレイアウトには関係ないので、多少読み込みを遅らせても問題ないでしょう。

ただ、通常の読み込みよりアイコンの表示が一瞬だけ遅くなります。

functions.phpにコードを追加

子テーマの「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');

wp_footerにインラインでJavaScriptのコードが読み込まれるようになっています。

script.jsを作成してその中に書いてもいいのですが、Affinger5の子テーマにjsファイルがなかったのでインラインにしました。

PageSpeed Insightsの点数

PageSpeed Insightsの点数はどれくらい改善されたのかを確認してみましょう。

点数はモバイルです。

こちらがBefore

以下はAfter

2点改善しました。

FontAwesomeアイコンくらいなら、後で読み込んでも問題ないでしょう。

他にもこんな記事があります。

WING(Affinger5)でスライドショーのCSSとJavaScriptを削除する方法 | NO TITLE

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