Webフォント、CSSライブラリの読み込みを遅らせて、サイトの表示を高速化する方法です。

備忘録的な書き置きですがコピペOKです。自己責任でご活用ください。

Font AwesomeなどのCSSライブラリ遅延読み込み

以下のコードを</body>の直上に貼り付けます

<!-- Font Awesome遅延読み込み -->
<script>//<![CDATA[
    var add_link = function() {
        var link = document.createElement('link');
        link.rel = 'stylesheet'; 
        link.href = "https://use.fontawesome.com/releases/v5.0.13/css/all.css";
        link.crossorigin = "anonymous";
        document.head.appendChild(link);
    };
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(add_link, 0); });
    else window.addEventListener('load', add_link);
//]]></script>

・本ブログでは「PageSpeed Insights」でスコアが6改善しました
・コピペ利用される際はFont Awesomeのバージョンをチェック、修正してください
・元コードはサイトの表示高速化のためにやった5つのことからお借りしましたm(_ _)m(WordPressの方はこちらをご参照ください)

【高速化】Font AwesomeなどCSSライブラリ遅延読み込み【Blogger】WordPressでも使えます

Webフォント、CSSライブラリの読み込みを遅らせて、サイトの表示を高速化する方法です。

備忘録的な書き置きですがコピペOKです。自己責任でご活用ください。

Font AwesomeなどのCSSライブラリ遅延読み込み

以下のコードを</body>の直上に貼り付けます

<!-- Font Awesome遅延読み込み -->
<script>//<![CDATA[
    var add_link = function() {
        var link = document.createElement('link');
        link.rel = 'stylesheet'; 
        link.href = "https://use.fontawesome.com/releases/v5.0.13/css/all.css";
        link.crossorigin = "anonymous";
        document.head.appendChild(link);
    };
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(add_link, 0); });
    else window.addEventListener('load', add_link);
//]]></script>

・本ブログでは「PageSpeed Insights」でスコアが6改善しました
・コピペ利用される際はFont Awesomeのバージョンをチェック、修正してください
・元コードはサイトの表示高速化のためにやった5つのことからお借りしましたm(_ _)m(WordPressの方はこちらをご参照ください)

次に読まれている記事