2019.06.08Hacksスポンサーリンクちょっと久々にWordPressネタ。)化しようじゃないかというお話です。いわゆるレンダリングブロックの原因であるjavascriptの読み込みを遅延させて、体感速度を上げていきます。属性を使おうasync属性をざっくり説明すると、script要素に指定することで実効タイミングを指定することができる論理属性です。asyncを付与すると、利用可能になった時点でスクリプトを実行します。src="...記述としては上の通り。javascriptの実行時にレンダリングブロックせず、非同期で実行されます。属性を使うそんなasync属性をWordPressで使うには、ちょっとゴニョっといじらないといけません。このゴニョっといじるのがイヤだという人は、同種の働きをしてくれるプラグインを使えばいいと思います。思いますが、プラグインによっては思い通りの実行ができなかったり、依存関係にあるスクリプト全てにasyncが付与されて動かなくなったりするケースもあるので、個人的にはプラグインレスがオススメ。functions.phpの中にadd_filter()関数を使ってゴニョります。1);}基本、これをまるっとコピペしてしまえばいいだけです。$url;の部分はasyncを付与しないスクリプトを指定しています。上記をコピペしてみて、スクリプトの実行がおかしい、あるいは実行されないという状態になった場合は、原因と思われるスクリプトを指定して除外するようにしてください。大概は問題ないかと思いますが、Syntaxhighlighter系のプラグインが引っかかるかもしれませんね。自分のサイトに応じて変えてくださいませ。属性にする非同期化するにあたって、async属性ではなくdefer属性を利用したいというケースがあるかもしれません。defer属性はHTMLの読み込みが完了、正確にはDOMContentLoaderイベントの前に、スクリプトを実行するよう指定する属性です。1);}asyncをdeferに書き換えただけですが、defer属性を利用したいという場合は、こちらをペロッとコピペしてください。当ブログではasync属性を付与するようにしましたが、やっぱり体感的な速度は上ったかなぁという印象。そもそもサーバーの応答速度が遅いので、本気で改善するならサーバーを乗り換えるべきなんですけどね。カズキフリーランスのウェブディレクター。