Speed Update目前、jQueryは「v3」を適用せよ!!

SEO

表示速度に敏感なブロガー諸氏であれば、2018年6月現在、PageSpeed Insightsに「Google Speed Update(2018 年 7 月)をご確認ください」というアナウンスが表示されているのをご存知かと思われます。

が…例によってリンク先は英語版オフィシャルであり、しかも、和訳したところで大雑把な方針しか書いていない「結局、どーすりゃいいの??」的な内容です。

当ブログは6月現在で既に、

・モバイルページ…100点
・PCページ…97点

で安定していますし、他のBloggerブログも(時間帯にも依りますが)80点台は出ているので、「今回は特に何もする事は無さそうだなぁ…」などと、高を括っていたのですが…

本日14日に発表されたWordPress用テーマ「Luxeritas」のアップデートの告知に於いて、制作者である「るな」氏がテーマ自体の仕様変更点に関連した、jQueryについての「とても気になる説明」をしておられました。

引用 jQueryのデフォルト変更

Google先生がjQueryを使う場合は 3 を使えと言いだし始めたので、jQueryのデフォルトをバージョン 3 に変更、且つ「おすすめ」にした。

なんですとぉぉぉぉ!?

 

いやはや、恐るべきは「本職」ですね!
そういった詳細な情報を、一体、何処でキャッチしているのでしょうかww

 

速ければ何だっていいんじゃないの??

しかし、前出の公式アナウンスでは、

・スピードアップデートはユーザー(訪問者)に極端に遅い体験をさせる、わずかな割合のクエリにしか影響しないページにのみ影響します。

・ページを構築するために使用された技術に関係なく、すべてのページに同じ標準を適用します。

としか書かれていません。

これを言葉通りに受け取るのであれば、適用しているjQueryがv1系であろうとv2系であろうと、あるいは、WordPressであればデフォルトの「内臓jQuery」であろうと、PageSpeed Insightsでの計測結果さえ良ければ減点を免れる(もしくは加点要素となる)筈です。

そう思い、Twitterで率直な印象を吐露したところ…

「るな」氏ご本人からの返信がっ!!

なんと、v1系では(既に?)品質監査アプリ(Lighthouseの事か?)でマイナス評価が出てしまうとは…

おそらく、前出の「Google先生がjQueryを使う場合は 3 を使えと言いだし始めたので」という記述は、その品質監査アプリで実際に指摘を受けた上での事なのでしょう。

jQuery バージョン3系の適用方法

さて、7月まで残り二週間ほどしか猶予期間がありませんので、取り急ぎ、jQuery v3系を呼び出して適用したいと思います。

Luxeritasの場合

Luxeritas カスタマイザー

まぁ、Luxeritasの場合は簡単…と言いますか、前出の通り、親テーマのバージョンアップ(3.1.3)に伴ってデフォルトでv3系を読み込む設定に変更されていますので、

カスタマイズ > Javascript > jQuery > jQueryの読み込み方法

の項目をチェックして、上の図のように

「Google CDN – jQuery v3(おすすめ/高速/IE8以下未対応)」

が表示されていればO.Kです。もしも、親テーマをアップデートしないでjQueryのみv3系を読み込みたい場合には、同じ項目のプルダウンメニューからv3を選択して、忘れずに保存して下さい。

他のWordPress用テーマの場合

えーと、大変申し訳ありませんが…
ワタクシはLuxeritas以外のテーマを使っていた期間が殆ど無いので、他のテーマではjQueryの読み込み方法がどうなっているのか(任意に選択できるようになっているのか、否か)分かりませんので、これは割愛させて頂きます。

もちろん、「子テーマの編集」を利用して「add-header.php」に直接書き込むという手段もありますが、それだとデフォルトで読み込んでいる他のバージョンのjQueryと競合してしまい、誤作動の原因にもなりかねません。

なので、現在適用されているテーマの公式サポート等で、jQueryの読み込み方法を選択できるのか否か、お尋ねになって下さい。

Bloggerの場合

Bloggerを利用されている方で、デフォルトのテーマ(新旧、共に)を適用されている方はjQueryの読み込みは特に必要ありません。

旧テーマには、jQuery等のJavascriptライブラリを必要とするような機能は最初から実装されていませんし、新テーマの場合はjQueryではなく、(何故か)他の第三者製ライブラリを利用している様子です。

なので、ここではサードパーティー製のテーマを適用している事を前提とします。

大抵の場合、</head>タグの手前でjQueryを呼び出していると思いますので、まずは

テーマ > HTMLの編集

で編集画面を呼び出します。

次に(編集画面内をシングルクリックしてから)お馴染みの「Ctrl+F」で検索窓を呼び出し、

「ajax.googleapis.com」
「jquery.min.js」

等の文字列を検索します。

すると、</head>タグの数行手前あたりに

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

等の記述があると思いますので、その行を以下のように書き換えます。

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

補足

①Blogger(と言うか現在のHTML5)では、ライブラリ読み込み時の「type=’text/javascript’」は省略しても問題なく動作します。ただし、それはあくまでもライブラリ読み込み時のみで、

<![CDATA[ ~ ]]>

でスクリプトを直接定義する場合は省略すると動作しませんので、ご注意ください。

②同様の理由で、閉じ側のタグである「</script>」を省略して自己完結型で表記していますが、保存してページをリロードすれば、ソースリスト上では閉じ側タグがちゃんと出力されています。

保存したら、ページをリロードして動作チェック(グローバルメニューのプルダウン表示やページトップへ戻るボタン等)をして下さい。

Posted by 安井真守