Luxeritas 3.18.0 リリース（アップデートに関する注意事項あり）

2021年5月17日

Luxeritas Theme 3.18.0 をリリースしました。

Material Icons の導入など、その他、仕様変更、不具合修正、もろもろ多数。

詳しいアップデート内容に関する詳細は開発者ブログの記事にて解説しているので、そちらを参照してください。

アップデートに関する注意事項

デフォルトの設定では Font Awesome は無効化されてます。

Font Awesome を使用してる方は、Luxeritas のカスタマイズメニュー「アイコンフォント」から Font Awesome を有効化してください。

Material Icons と Font Awesome 両方にチェックをつけると、両方読み込まれます。

Luxeritas 内で使用してるアイコンも Font Awesome に戻したい場合は、Material Icons を無効化すると、Font Awesome のアイコンに戻ります。

改訂履歴

機能追加

Material Icons ( Google Fonts ) が使える機能追加

機能拡張

管理画面にログインしたら PWA のキャッシュを削除する機能拡張

仕様変更

Luxeritas 内で使用されてるアイコン類をデフォルトで Material Icons に変更
Font Awesome をデフォルト OFF に変更
Font Awesome をローカルから読み込むことのできる機能廃止（ネットに繋がってない閉じた環境でも使えるようにした機能だけど、需要がないので廃止。CDN からの読み込みのみにした）
上記に伴いテーマ内に包含してる Font Awesome ファイル削除
Web fonts の読み込み方法変更
Web fonts の非同期読み込みをデフォルト OFF に変更
「ディスカッション」の部分に表示されるアイコン変更
細部の CSS を数ヶ所変更

不具合修正

Font Awesome のバージョンを 4 に設定してるとスマホのグローバルメニューを on screen（ハンバーガーメニュー）にした時のメニューアイコンが表示されてなかった不具合修正
Font Awesome のバージョンを 4 に設定してると外観カスタマイズのプレビューでアイコン類が表示されてなかった不具合修正（ver3.7.1 でのレベルダウン？）
サムネイル自動挿入で画像の先読みをしてた場合、画像のアタッチメントページ（添付ファイルのページ）に href が空っぽの link タグがヘッダーに挿入されてた不具合修正
ページ内に <a href="#" onclick="～の記述がある Javascript があった場合、それらが動作しなくなる不具合修正（ver3.13.0 でのレベルダウン）
上記と関連して、画像認証「Securimage PHP CAPTCHA」を選択してた場合に、リフレッシュボタンが動作しなくなってた不具合修正（ver3.13.0 でのレベルダウン）
PWA の Manifest で locale 情報が正しくないらしいので修正（Firefox でアクセスした際に気づいた。Manifest の lang を記述する場合はアンダーバーじゃなくて、ハイフンが正しいらしい。例・誤：ja_JP、正：ja-JP）

その他

高速化 .htaccess に WebP 画像のキャッシュ設定追加
W3C で非推奨の扱いになった CSS の記述を推奨値に書き換え
ver3.17.0 で追加した「サムネイル自動挿入」が外観パックアップの対象になってなかったので、外観バックアップの対象に含めた

子テーマ ver3.0.4

Font Awesome の同梱をやめたので、フォントファイル削除

リリース情報

Posted by るな

Luxeritas 3.19.0 リリース

Luxeritas 3.17.1 リリース

コメント一覧

澤谷より:
2021年5月24日 10:56
ver3.18にてYoutube動画を埋め込んだ際、Lighthouseのパフォーマンスのスコアが下がっているのを確認しました。一時的なものかなと思いましたがver3.19でも同様でした。
直接埋め込み、data-srcによる遅延処理の両方等も下がっていましたのでご確認いただければ幸いです。
【直接埋め込み】
・ver3.15.0.3：62点
・ver3.19.0.0：48点
【data-srcによる遅延処理】
・ver3.15.0.3：100点
・ver3.19.0.0：64点
(カスタマイズのjavascript、Lazy Loadは全く同じ設定で確認しています。)
【当サイトでの遅延のやり方】
ショートコード登録：$contents = ”;
(PHP Code = ON)
(囲み型 = ON)
投稿：[youtube]QODhVO2rftI[/youtube]
返信
- 澤谷より:
  2021年5月24日 11:02
  投稿後、ショートコード登録の部分が消えてしまうみたいですので画像でお送りします。
  https://ff14.playguide2.net/wp-content/uploads/2021/05/454f26b188153f18309314975e5338ff.jpg
  返信
  - るなより:
    2021年5月24日 11:58
    澤谷さん。
    パフォーマンスの悪い外部リソースを埋め込めばパフォーマンスが下がるのは、本来どーしようもないんですけどね ( Youtube の動画ページに対して Lighthouse をやると、めちゃパフォーマス悪いんで )。
    まぁ、次のバージョンで対策しましょう。対策とは言っても Google 先生の「ページエクスペリエンス」への評価にはほとんど影響しないんですけど。
    ちなみに、Intersection Observer より Native Lazyload の方が、多少パフォーマンスは良いです ( Safari が対応してないけど )。
    返信
    - 澤谷より:
      2021年5月24日 12:29
      ありがとうございます！
      あと、Amazonの欲しい物リストを更新していただけるとありがたたいです。
      いつも使わせて頂いているお礼におうどんを。と思いましたが両方とも売切れ。ホワイトボード、電子タバコフィルターもギフト発送不可のようでした。
      返信
      - るなより:
        2021年5月24日 12:46
        澤谷さん。
        あー、そういえばそんなのもありましたねｗ
        一時期、いっぱい届いちゃったもんだから Amazon の例のデカイ箱が処理しきれんで放置してた。
        特にお礼とかはいいんですけど、近日中に必要そうなもの何か更新しときます。
        返信
buruより:
2021年5月24日 09:05
るな様
いつもお世話になっております。
5/18からTHK Analyticsがカウントされなくなりまして
恐らくはver3.18.0を適用して以降だと思われるのですが
解決方法を教えて頂けませんでしょうか。
返信
- るなより:
  2021年5月24日 10:19
  buru さん。
  質問内容が簡潔すぎて情報が全くいただけてないため、こちら側で勝手に察するしかないんですが「子テーマがアップデートされてるから、子テーマもアップデートしよう」とか言って、子テーマの内容を自分で書き換えた部分も含めて丸々上書きしちゃったとかいうオチじゃないですか？
  一応、言っておくと WordPress の子テーマというのは「ユーザーが自分でカスタマイズして使うためのもの」なので、アップデートする必要がないものです。
  返信
  - buruより:
    2021年5月25日 00:20
    るな様
    なるほど、失礼いたしました。
    そういえば、記事を見て
    子テーマも一緒にアップしたのでした。
    有難うございます。
    返信
宇山より:
2021年5月19日 10:30
いつもお世話になりありがとうございます。
今回のリリース内容とは違うのですが、下記の症状を一度ご確認頂けないでしょうか？
カスタマイズ（外観）→ モバイル用ナビボタン → モバイルボタンの外観 → 【アイコンのみ表示】→ アイコンのみ表示にチェックを入れ公開（保存）。
→ プレビューではアイコンのみの表示になります。フロント側で更新をかけると、一度アイコンのみ表示が反映されますが、「再更新」または「ページ遷移」すると【元に戻る（アイコンのみにならない）症状】がございます。
スーパーリロードを掛けても反映されずで、デベロッパーツールで確認すると、文字サイズ等も元に戻っている様に思います。
上記の症状、当方の環境では、Ver.3.7.7～から発生しております。
お手数ですがどうぞよろしくお願い致します。
返信
- るなより:
  2021年5月19日 15:05
  宇山さん。
  ありがとうございます。次バージョンで直します。
  原因は比較的簡単で、当方のケアレスミスです（コメントを読んだだけで、中身を見なくても原因が分かっちゃうレベル）。
  文字サイズの方は元には戻らないです。
  返信
  - 宇山より:
    2021年5月19日 16:08
    るな様
    ご返信ありがとうございます。
    次期バージョンでのご対応助かります！
    ※文字サイズが～の件は、言葉で表すのが難しいので動画にいたしました。
    https://youtu.be/1jVfz71Fork
    既知かと思われますが、当方が表現したかった内容です。
    （こちらのコメはご返信不要でございます）
    返信
にっちより:
2021年5月17日 22:44
アップデートありがとうございます。
アイコンフォントの表示ですが、自分が調べたところ、3.17.1までの『Font Awesome 5 / CSSフォント本体ローカル / 同期』という設定がアイコン表示まで最も早く、CLSにも全然影響しないため、当サイトではずっとこの設定にしていたのですが、どうかまたこの設定をできるように復活してはいただけないでしょうか。
実際にどれくらいの表示速度差があるのか、各設定ごとの動画を撮影してまいりました。(速度に影響が出ないようアドセンスは非表示にしています)　表示速度も記していますので、参考にしていただければと思います。
＜＜＜『シークレットモードです』の画面が消えてから(アドレスバーにURLを入力・エンターしてから)Webフォントが表示されきるまでのフレーム数(1秒60fps)　Disable cacheで測定＞＞＞
＜Luxeritas 3.17.1＞
●Font Awesome 5 CSS・フォント本体ローカル/同期 (★フォント表示までが最速でCLSにも全然影響しない)
40-67
https://www.nichepcgamer.com/wp-content/uploads/2021/05/a_20210517_212627_fa_local_douki.mp4
表示速度: 27 fps (測定範囲40-67 fps)
●Font Awesome 5 CSS・フォント本体ローカル/非同期
https://www.nichepcgamer.com/wp-content/uploads/2021/05/a_20210517_212514_fa_local_hidouki.mp4
表示速度: 74 fps (測定範囲44-118 fps)
●Font Awesome 5 CSS・フォント本体CDN/同期
https://www.nichepcgamer.com/wp-content/uploads/2021/05/a_20210517_213138_fa_cdn_douki.mp4
表示速度: 84 fps (測定範囲62-146 fps)
●Font Awesome 5 CSS・フォント本体CDN/非同期
https://www.nichepcgamer.com/wp-content/uploads/2021/05/a_20210517_213016_fa_cdn_hidouki.mp4
表示速度: 110 fps (測定範囲73-183 fps)
＜Luxeritas 3.18.0＞
●Material 同期
1回目
https://www.nichepcgamer.com/wp-content/uploads/2021/05/a_20210517_214953_material_douki1.mp4
表示速度: 66 fps (測定範囲52-118 fps)
2回目
https://www.nichepcgamer.com/wp-content/uploads/2021/05/a_20210517_215014_material_douki2.mp4
表示速度: 65 fps (測定範囲61-126 fps)
●Material 非同期
1回目
https://www.nichepcgamer.com/wp-content/uploads/2021/05/a_20210517_213351_material_hidouki1.mp4
表示速度: 102 fps (測定範囲64-166 fps)
2回目
https://www.nichepcgamer.com/wp-content/uploads/2021/05/a_20210517_213420_material_hidouki2.mp4
表示速度: 97 fps (測定範囲43-140 fps)
どうか、『Font Awesome 5 / CSSフォント本体ローカル / 同期』の復活をご検討いただけないでしょうかm(_ _)m
現在、当サイトを3.17.1の『Font Awesome 5 / CSSフォント本体ローカル / 同期』設定にしていますので、よろしければフォント表示までの速度を見比べてみてください。
(ふと思ったのですが、Materialのローカルってできないものなのでしょうか？)
返信
- るなより:
  2021年5月18日 06:54
  にっちさん。
  基本的に Font Awesome（CDN、ローカル問わず）でも非同期を推奨しますが（理由は後述）、
  とりあえず、ご所望の子テーマだけで Font Awesome をローカル & 同期で読み込む方法
  ————————————
  1. 子テーマの直下に Font Awesome の /webfonts（フォントファイル本体）を突っ込む
  2. Font Awesome の all.css の中身を以下のとおり書き換える
```
・「../webfonts」と書かれてるところを「./webfonts」に全置換

・「"」を「'」に全置換

・できれば使用してるアイコンだけに絞って、いらない記述は削除するのが好ましい
```
  3. 上記の all.css の中身を子テーマの style.css に追記する
  4. 子テーマの functions.php に以下を記述
```
add_action( 'template_redirect', function() {
	global $awesome;
	$awesome['awesome'] = [ 'ver' => '', 'cdn' => '', 'uri' => '', 'css' => '' ];
}, 110 );
```
  5. Luxeritas の「アイコンフォント」で Material Icons を無効化する
  ————————————
  ここから速度面の話。
  Material Icons はブログには書いてない、もうひとつの利点があって、非同期で読み込んだ際に、
  ・Font Awesome はアイコンが表示されるまで中身が空っぽだから CLS に影響する。
  ・Material Icons はアイコンが表示されなくても、代替テキスト（ Luxeritas の場合、1文字の UTF-8 コードポイント。UTF-8 で未定義なので、ほとんどの場合四角いマークが表示される）が先に表示されるので CLS の影響が少ない。
  という利点があるんです。
  Google 先生が見てるのはアイコンが表示されるまでの速度ではなく、おおよそ以下の5つのトータルで評価してます。
  1. Ready state (サーバーの応答から描画終了までの各段階)
  2. 各 CSS・JS・JSON 等のパース（文法解析時間）
  3. DOMContentLoaded (DOMツリー構築までの時間)
  4. Loaded（画像等も含めて全部読み込まれるまでの時間）
  5. First view (ブラウザの画面に最初に描画される部分の縦横への変化量。主に縦方向)
  とどのつまりは、ページ全体の表示速度なので CLS への影響がない分、アイコンフォントの CSS パース（文法解析）とアイコンフォント本体の読み込みを後回し（非同期）にして Material Icons を読み込むのが現時点で評価値としては最速です。
  さらに同期　/ 非同期の話をすると、
  「アイコンフォントを同期にすると、LCP、TTI、TTB が軒並み悪化する」ので、高速化一括設定でも、推奨値は全部「非同期」にしてます。
  ただ、非同期にした場合、目に見えて遅延してるのが分かるんで、それが気になるなら同期ってことになる。
  だから、管理画面の選択肢も
  ・非同期（レンダリング高速）
  ・同期（アイコンフォントが遅延しない）
  と書いてるわけです。
  ぶっちゃけ動画ファイル見てないけど、にっちさんの言ってる「アイコン表示まで云々」ってのは、非同期にすれば他に優先度の高いものを先にして、アイコンの読み込みとパース（文法解析）を後回しにしてるんだから当たり前って話です。
  > Materialのローカルってできないものなのでしょうか？
  Material はアクセスしてきたブラウザによって返してくる CSS を振り分ける仕組みになってるんです。
  さらに、同じ書き方の link タグで常に最新の font ファイルを返却してきます。
  ↓ ここに Chrome・Firefox・Safari・IE 等でアクセスすると中身が違うってのが分かります。v85 とか v56 とか書かれてるのがフォントファイルのバージョンです。
  https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined&display=swap
  一応、
  ・数日に1回 CSS をダウンロードして、全てのブラウザに対応した CSS を追記する
  という手法を用いればできなくもないです。
  実は、以前のバージョンでは、外観カスタマイズのフォントファミリーで「Web Font & 同期」を選択した場合は、この手法でした。
  でも、たまに CSS のダウンロードに失敗して、管理画面に警告が出ることあるんで、やめました（ver3.18.0 の改訂履歴に書かれてる「Web fonts の読み込み方法変更」ってのはコレのことです）。
  後はですねぇ、
  Luxeritas に内蔵しちゃってるアイコンについては、ver3.18.0 のリリース時には無条件で非同期にしちゃったんだけど、あとあと同期にした方が速いってことが判明してるんで（CSS もフォントファイル本体もめちゃ小さいから）、次のバージョンで同期にする予定です（当サイトでは、すでに同期に変更してる）。
  返信
  - にっちより:
    2021年5月18日 12:04
    るな様
    お世話になります。
    細かなご説明ありがとうございます。
    るな様のおっしゃられている利点、理解いたしました。
    デフォルト設定での運用をしてみようと思います。
    どうもありがとうございましたm(_ _)m
    返信

コメントする