[js]レンダリングを妨げるリソースの除外の手っ取り早い対策

完璧じゃないと思うけど。

ライブラリとかは重い

jQuery.jsとかを始め、重い。CDNだろうが自鯖だろうが重い。

PageSpeed Insights上では「レンダリングを妨げるリソースの除外」で突っ込まれる。

CDNやminは本体をいじるわけにもいかないし、どうにかならんかねという話。

非同期で解決

deferとかasytncで解消するらしい。

ここに書いてるのを参考にしたら良くなった。

jQuery.jsの読み込みにDeferやAsyncを使ったらエラーでスクリプトが動かないとき | QWERTY.WORK

jQueryの読込にDeferやAsync使ったら動かなくなった サイトの高速...

qwerty.work

自分がやった方法

deferを貼りまくる。

自鯖だろうがCDNだろうが全部貼る。

    <script defer src="./js/jquery-3.6.4.min.js"></script>
    <script defer src="./js/scripts.js"></script>

ベタ打ちの<script>も同様。ついでに入れ子を一つ増やす。

    <script defer>
        window.addEventListener( 'load', function(){
            ︙
            中身
            ︙
        }, false);
    </script>

普段書いてる「$(function() {…});」をまるっと囲う。

修正するならするで全部に書かないと、中途半端に書き込むとぶっ壊れるので注意。

そんな感じで。

deferとasytncの択

中途半端にするとダメなのは上記の通りで、加えて非同期だと処理がアレして動かないということもあり、deferはいいけどasytncだとダメだったというケースもある。何をどう組んだか、環境によるところがあるのだろうから、手を入れるサイトがどうなのかをチェックした方がいい。決め打ちは危険。

自分の場合はdeferだった。