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

アフィリエイト広告を利用しています

投稿日：2018-12-11

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ファイルがなかったのでインラインにしました。