feat: cssを非同期読み込みする

publish.el

@@ -140,12 +140,18 @@
 (setq my-blog-extra-head
       (concat
        ;; ブラウザは、そのサイトのホスト直下に favicon.ico が 設置されていることを期待する。
-       ;; GitHub Pagesにデプロイすると、ベースURLがプロジェクト下になるのでホスト直下にfaviconが配置されていないことになる。
-       ;; なので明示的に指定してやる。
+       ;; GitHub Pagesにデプロイすると、リポジトリ名の下で配信するのでルートパスではfaviconが配置されていないことになる。
+       ;; なのでリポジトリ名をハードコーディングして指定する。
        "<link rel='shortcut icon' type='image/x-icon' href='/roam/favicon.ico' />"
 
-       "<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' />"
-       "<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' />"
+       ;; <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
+
+       ;; サイズが比較的大きいので非同期に読み込ませる
+       ;; PageSpeed Insights で指摘された項目
+       ;; link要素にはasync属性やdefer属性がない
+       ;; 記法の参考: https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657
+       "<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' media='print' onload='this.media=\"all\"' />"
+       "<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' media='print' onload='this.media=\"all\"' />"
 
        ;; ルートディレクトリにないorgファイルをエクスポートした場合、相対パスが変わる。絶対パスにするとGH pagesのルートディレクトリがpublicの一つ上の階層になる(/リポジトリ名/public)ため、ローカル環境で使えなくなる。つまりローカルでは`/`でokなのに、本番では`/roam`としないといけない。仕方ないので両方読み込む
        "<link rel='stylesheet' href='../roam/css/site.css' />"