scriptタグを工夫してサイトのスピードを上げる方法

Pocket

script要素、scriptタグがhtml上にあると、そこでhtmlの読み込みは止まってしまいます
しかしheadに記述する以上、何らかの方法で早くする事が出来るのでは思い、調べました
一見単純に見えますが、非常に危険なコードが含まれています
また、ブラウザによっても実装・非実装が分かれます
内容をよく読んでご利用下さい

以下、試行錯誤の結果です

元ファイル

通常は以下のようなタグがheadにあると思います
当方の環境では、lighthouseは50点でした。ここから高速化を目指します

※lighthouseとは、googleが提供しているオープンソースのweb検査ツールです。PageSpeed Insightsはこのツールを利用しています
https://developers.google.com/web/tools/lighthouse/?hl=ja

async属性を付与する

順序を考えない同期読込となります。
実質、一行のテキストと変わりません
lighthouseでは驚異の97点です。すごい。

何も考えずに導入してしまうとエラーが大量に発生しますので、大変危険です
jQueryなどに依存したscriptがあっても駄目です。順序がおかしくなります

jQueryにも依存せず、単体で完結するSNSボタンなどのscriptになら例外的に利用できます
もちろん、SNSボタンを置く要素の後に記述しないとエラーになります

もしくは、ビットコインのマイニングなどもありかも知れませんね

何となくですが、cssのfloatのような感じがするのは筆者だけでしょうか

defer

順序を指定できる同期読込となります。
asyncに似ていますが、こちらは順序を指定できます。
htmlの記述通りの順になります。
記述する順序以外で順序を指定することは出来ません
lighthouseでは60点です。asyncに比べると控えめな数値ですね

一見使えそうなのですが、firefoxではasyncと同じ挙動、もしくは不安定になるようです
SNSボタン専用、というよりどうせ順序を考えないならasyncで良いでしょう

筆者の環境ではエラーになりませんでしたが、
使わない方が良いと感じました

また、以下のような方法も不可です

jquery自体がいつ読み終わるか分からないため、
順序は不定になります

また、googlemap用のjsに付与すると挙動がおかしくなりました
理由は不明です

script自体をDOMとして生成する

これ自体はもちろんjsファイルとして分離できません。
headにべた書きになります
ここまでするならhtmlの最後に直接書くのと変わらないという事実に、
書いてから気づきました
点数は見ていませんでしたが、恐らく次と同じです

bodyタグの最後に記述

document.readyが浸透していなかった頃に流行った手法ですね。
lighthouseでは65点です。
バグ取りに疲れましたのでこれで行きます

小さいサイトなら記述はテクニカルにせず、
おとなしくhtmlにべた書きするのが一番だと思います

管理を楽にするなら、
phpでfooter_script等のfunctionを作ってしまうのも良いでしょう

wordpressならwp_footerで出力するのがスマートですね
wp_footer()はbodyの終了直前に書いておいて下さい

add_action( ‘init’… :initは一番最初と思って下さい。一番最初に処理を追加する
foo:なんでも良いです、任意の名前
get_template_directory_uri().’/js/script.js’:jsファイルのディレクトリ
array():この前に読みたいハンドルの配列…initより前には無いと思うので、初期値のarray()にしておきます。nullでも良いかも
null:バージョン番号。なんでも良いですが特に無ければnull
true:footerの場合はtrue。falseだとheadになります

結論

爆速のasyncは使い物にならず、期待のdeferも中途半端
結果として、bodyの終了直前に置くという古風なやり方が一番良いという事になりました

非常に残念な結果となりました

ページの読み込みはユーザビリティに大きく関わるところなので、
うまくdefer辺りが進化してくれればと思います