javascript  defer 属性の追加

Test how mobile-friendly your site is

最近、上記のGoogleの新しいモバイルサポートテストツールが発表になったりして、モバイル回りがざわめいています。

あんまり、低い点数だと妙に恥ずかしく感じる今日この頃、重い腰を上げて、script要素にdefer属性を付け始めました。

CSSと違って、script要素には、ハンドル名を示すid要素が降られていないので、まずは handle名を取得します。

functions.php

このフィルターを使うと、ページの最上部にhandle 一覧が表示されますので、それらのハンドル名をつかって、script要素に defer属性を追加していきます。

functions.php (handleは、自身のサイトのscript handle名に置き換えてください)

関連:スタイルシート <link rel=”stylesheet” id=”style-css” … />を操作したい時

以下は、スタイルシートの属性値がシングルクウォートで囲まれているものを、ダブルクウォートに変更するフィルターです。

'シングルクォーテーションを"ダブルクォーテーションで出力

一時的にスタイルを無効にする

わざわざフィルターを使うまでもなく、検証ツールで、disabledを追加すればいいだけですが、仮のurlを指定したり、ちょっとしたカスタマイズの計画を立てる時とか、利用シーンがあるかもしれません。


コメントは受け付けていません。