タイトルの通り、外部ドメインのCSS（Font Awesomeなど）をjsで遅延読み込みさせたいと考えております。
目的としては、ページスピード（スコア）の向上です。

実現したいこと

現状、head内で読み込んでいるCSSを削除
</body>直前にjsを設置し、そこでheadで読み込んでいたCSSを読み込む

困っていること

下記ページを参考に素人ながらjsを書いてみましたが、うまく読み込めておりません。
※読み込めていないというのは、jsで遅延読み込みさせた場合にCSSのレンダリングがされないとう意味です。
通常通りhead内のlinkタグではCSSのレンダリングができております。

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
https://www.notitle-weblog.com/entry/2016/11/10/184826

現状のコード

js
1<script async>
2  var fontawesome45 = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
3  var fontawesome47 = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
4  var fontawesome50 = "https://use.fontawesome.com/releases/v5.3.1/css/all.css";
5  var fontawesome_animation = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.1.0/font-awesome-animation.min.css";
6  var jquery = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css";
7  function cb(href) {
8    var link = document.createElement('link'); link.rel = 'stylesheet';
9    link.href = href;
10    document.head.appendChild(link);
11  };
12  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
13      webkitRequestAnimationFrame || msRequestAnimationFrame;
14  if (raf) {
15    raf(function (){
16      cb(fontawesome45);cb(fontawesome47);cb(fontawesome50);cb(fontawesome_animation);cb(jquery);
17    });
18  } else {
19    window.addEventListener('load', function(){
20      cb(fontawesome45);cb(fontawesome47);cb(fontawesome50);cb(fontawesome_animation);cb(jquery);
21    });
22  }
23</script>

　　
全体html

html
1<!DOCTYPE html>
2<html>
3<head>
4<link rel="preload" href="css/hoge.css" type="text/css" as="style" onload="this.onload=null;this.rel='stylesheet'">
5
6<script type="text/javascript" async>
7  /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */ ! function(t) {
8    "use strict";
9    t.loadCSS || (t.loadCSS = function() {});
10    var e = loadCSS.relpreload = {};
11    if (e.support = function() {
12        var e;
13        try {
14          e = t.document.createElement("link").relList.supports("preload")
15        } catch (a) {
16          e = !1
17        }
18        return function() {
19          return e
20        }
21      }(), e.bindMediaToggle = function(t) {
22        function e() {
23          t.addEventListener ? t.removeEventListener("load", e) : t.attachEvent && t.detachEvent("onload", e), t.setAttribute("onload", null), t.media = a
24        }
25        var a = t.media || "all";
26        t.addEventListener ? t.addEventListener("load", e) : t.attachEvent && t.attachEvent("onload", e), setTimeout(function() {
27          t.rel = "stylesheet", t.media = "only x"
28        }), setTimeout(e, 3e3)
29      }, e.poly = function() {
30        if (!e.support())
31          for (var a = t.document.getElementsByTagName("link"), n = 0; n < a.length; n++) {
32            var o = a[n];
33            "preload" !== o.rel || "style" !== o.getAttribute("as") || o.getAttribute("data-loadcss") || (o.setAttribute("data-loadcss", !0), e.bindMediaToggle(o))
34          }
35      }, !e.support()) {
36      e.poly();
37      var a = t.setInterval(e.poly, 500);
38      t.addEventListener ? t.addEventListener("load", function() {
39        e.poly(), t.clearInterval(a)
40      }) : t.attachEvent && t.attachEvent("onload", function() {
41        e.poly(), t.clearInterval(a)
42      })
43    }
44    "undefined" != typeof exports ? exports.loadCSS = loadCSS : t.loadCSS = loadCSS
45  }("undefined" != typeof global ? global : this);
46</script>
47</head>
48
49<body>
50  テキストテキストテキストテキスト
51  <script>
52    ここに上部のjs
53  </script>
54</body>
55</html>

　　
自分が書いたjsが間違っているのか、それとも他のjsとの兼ね合いなのか、
何が原因で上手くいかないのかをご教授頂けますと幸いです。

よろしくお願い致します。

miyabi_pudding

2019/01/10 03:39

うまく読み込めていない、というのは、CSSが読み込まれず、CSSルール通りのレンダリングがされない、ということでよろしいですか？Chromeの要素検証などで、linkタグ自体が意図した通り挿入されているかどうかも確認し、質問に記載したほうが、問題解決につながるかと思います。

yokoyamax

2019/01/10 04:27

＞うまく読み込めていない、というのは、CSSが読み込まれず、CSSルール通りのレンダリングがされない、ということでよろしいですか？ →そのとおりでございます。 linkタグ単体では通常どおり問題なく読み込まれレンダリングされております。

行動規範の内容に同意します

回答1件

ベストアンサー

cssが一つならこんな感じ？

javascript
1<head>
2<link rel='stylesheet' type='text/css' href='hoge.css'></link>
3<script>
4window.addEventListener('DOMContentLoaded', function(e){
5  if(org=document.querySelector('head link[href]')){
6    cln=org.cloneNode(true);
7    document.querySelector('head').removeChild(org);
8  }
9  setTimeout(function(){
10    document.querySelector('head').appendChild(cln);
11  },3000);
12});
13</script>
14</head>
15<body>
16test
17</body>

複数を想定

javascript
1<head>
2<link rel='stylesheet' type='text/css' href='hoge1.css'></link>
3<link rel='stylesheet' type='text/css' href='hoge2.css'></link>
4<link rel='stylesheet' type='text/css' href='hoge3.css'></link>
5<script>
6window.addEventListener('DOMContentLoaded', function(e){
7  if(i=document.querySelectorAll('head link[href]')){
8     var cln=[].map.call(i,function(x){
9       var y=x.cloneNode(true);
10       document.querySelector('head').removeChild(x);
11       return y;
12     });
13    setTimeout(function(){
14      cln.forEach(function(x){
15        document.querySelector('head').appendChild(x);
16      });
17    },3000);
18  };
19});
20</script>
21</head>
22<body>
23test
24</body>

解説付き

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2/*
3 * windowがロードされて画面がレンダリングされる前の処理
4 */
5  if(i=document.querySelectorAll('head link[href]')){
6
7/* ここからクローン・削除処理 */
8
9 /*
10 * i=document.querySelectorAll('head link[href]')
11 * head内にhref属性を持つlinkがあることを確認し
12 * あればiに代入、一つもなければif節から抜ける
13 */
14    var cln=[].map.call(i,function(x){
15/*
16 * iはHTMLCollectionなのでループするメソッドを持たないため
17 * Arrayが持つmapコマンドを借りる
18 * mapメソッドはiから受け取った要素を順番にxに渡す
19 */
20      var y=x.cloneNode(true);
21/*
22 * xはHTMLElement、それを一度yという変数にクローンしておいておく
23 */
24       document.querySelector('head').removeChild(x);
25/*
26 * headタグからxを削除する
27 */
28       return y;
29/*
30 * y(=クローンしたlink)を戻す
31 */
32     });
33/*
34 * mapでリターンすると戻り値で構成された配列ができあがる
35 * したがってclnはhead内のlinkをクローンしたものをリスト化した配列
36 */
37/* ここまでクローン・削除処理 */
38
39/*
40 * 一連の削除が終わると追加処理まで一時的にcssが適用されていない状態になる
41 */
42
43/* ここから追加処理 */
44
45    setTimeout(function(){
46/*
47 * nミリ秒後にコマンドを実行する
48 */
49      cln.forEach(function(x){
50/*
51 * cln配列から要素を1つ1つ取り出してxに渡す
52 */
53        document.querySelector('head').appendChild(x);
54/*
55 * headにxを追加していく
56 */
57      });
58    },3000);
59/*
60 * setTimeoutの待ち時間を3秒とする
61 */
62
63/* ここまで追加処理 */
64
65  }
66/* if節の終わり */
67
68});