[web]レンダリングを妨げるリソースの除外（CSS）の話

CDN対策

どういうアレか
解決策
ダメだったパターン
WordPressの場合

どういうアレか

PageSpeedInsightsで「レンダリングを妨げるリソースの除外」の警告を受けた。

原因はfontawesomeのcssファイルで、これはCDNを使用してる。

要するに今回は、めっちゃ重い上に中身に手を入れられないCSSファイルと共存するための方法。

解決策

preloadで解決した。

<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" rel="preload" as="style" />

よかったですね。

ダメだったパターン

onloadでやっていくタイプはダメだった。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" media="print" onload="this.media='all'"/>

高速化でよくある手法だけど、お呼びじゃなかった。

WordPressの場合

これで一括反映できる。

add_action('after_setup_theme', function(){
    if(is_admin()) return;
    ob_start(function ($buffer_html) {
        $buffer_html = str_replace('<link', '<link media="print" onload="this.media=\'all\'"', $buffer_html);
        return $buffer_html;
    });
}, 10000);

ただし、目に見えてCSSの適用が遅くなるのでHTMLだけの表示が一瞬入る。超ダサい。

なのでやらない方がいい。やっちゃった場合、ファーストビューのデザインが壊れてんだけどっていう指摘が新たに飛んでくることになる。踏んだり蹴ったり。