WordPressの処理速度について、<head>内か外か？

WordPressでタームIDリストをローカルストレージに保存したいのですが、そのコードを書くべき位置がわかりません。

現状では下記のようにheader.phpの、<body>の上に書いています。

これについて、<head>内に書いた方が処理速度が速いなど、より適切な位置はございますでしょうか？

↓header.php

PHP
1<!DOCTYPE html>
2<html>
3
4<head>
5
6// ここに書いた方がいい？
7
8<?php wp_head(); ?>
9	
10</head>
11
12<!-- 現状では下記に書いている -->
13
14<?php
15$parent = term_exists( 'ja', 'noun' );
16$args = array(
17	'field'    => 'id',
18	'child_of' => $parent["term_id"],
19); 
20$nouns = get_terms( 'noun', $args );
21$nouns = json_encode( $nouns);	
22?>
23
24<script>
25localStorage.setItem( 'nouns', <?= $nouns; ?> );
26</script>
27
28<body>
29
30</body>
31
32</html>

ちなみにこのタームIDリストは、読み込み直後にJSのoloadで使うデータになります。

適切な位置とその理由について教えていただけませんでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

<html>要素以下には<head>か<body>以外のものを入れていはいけないので、その位置だと文法違反になります。ブラウザはこのくらいの間違いは補正して表示してくれますが、避けるべきです。

この手のコードであれば、head要素内に置くのがセオリーです。
head要素内か、bodyの末尾に置くかどちらかですね。

bodyの末尾に置くのは少し古い手法で、実行のタイミングを少しだけ遅らせる効果があります。

投稿2019/06/26 21:12

otolab

総合スコア765

miyabi_pudding

2019/06/27 01:25 編集

横槍失礼します。 > bodyの末尾に置くのは少し古い手法で、これに関して、後学のために、今のトレンド教えていただけないでしょうか・・・？もし、ソースがあればどうかお願いします・・・！調査しても、答えが見つからずでした　汗 async属性をつけて、head要素内に配置、とかですかね？

otolab

2019/06/27 01:52

古いというのはちょっと悪い言い方だったかもしれないですね。。いまでも便利に使われている仕様です。ただ、scriptタグの位置で処理実行のタイミングが変わるのは、スクリプト内でdocument.writeなどを使う場合を想定しているためで、あまり良い仕様だとはみなされていません。 https://qiita.com/aya_taka/items/1255909b3db622272cee https://dev.w3.org/html5/spec-LC/apis-in-html-documents.html#document.write おっしゃるとおりscriptタグのasync属性もそうですし、DOMConetentLoadedやreadystatechangeを理解して、ちょうどいい実行タイミングを取る方法を知っておいたほうが良いと思います。 https://developer.mozilla.org/ja/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/API/Document/readystatechange_event

KazuhiroHatano

2019/06/27 02:40

メインコンテンツに絡まないならdeferという手も

miyabi_pudding

2019/06/27 03:50

> DOMConetentLoadedやreadystatechangeを理解してなるほどですね。 DOMConetentLoadedはよく使いますが、readystatechangeは、仕様も含めて勉強してみます。ソースもありがとうございます！ KazuhiroHatanoさんもありがとうございます！勉強していきます。