https://idea-hack.com/brandia/docs/33545

その他

[その他]では大きなセクションにまとめる規模ではない細かいカスタマイズに関する項目をまとめています。とはいえ軽視して良いものではありません。

次の項目が用意されています。

  • RTL モード : アラビア語など右から左に読み進める言語向けの設定項目
  • フェードイン : ページ読み込み時にフェードインをつけることでサイトの動きを少しリッチに(ただし、その分余計なファイルの読み込みが発生するのでファイル最適化を目指すならオフにしましょう)
  • パフォーマンス : 後述
  • YouTube : 後述
  • Vimeo : 後述

いくつか詳細な説明が必要な項目がありますので説明していきます。

パフォーマンス

[パフォーマンス]の項目ではサイトの高速化、そしてGoogleのページ評価テストの点数を上げるために必要な最適化処理に関するオプションが用意されています。

注意

実際にこれらの処理でGoogleのページ評価が上がることを保証するものではありません。これから紹介する物は私たちのサービスにホストされているデータに対する物です。

Google Ad senceなどの広告モジュールやGoogle Analyticsなどの計測モジュールは、私たちが制御できるものではなく、その結果これら外部ファイルの影響を受け、ページ評価がどうしても上げることができないケースも多いです。

HTMLを圧縮

この機能は全てのテーマ・プラグインの処理が完了し、ページがレンダリングされる直前の状態のHTMLを取得して、データ表示に不必要な空白や改行を削除し、ページのByte数を減らします。(get_headerフックを使用)

可能な限り不具合が内容に構築を試みていますが、全ての環境でうまくいく物ではありません。

現在は未ログインユーザーに対してのみ適用されます。

HTML圧縮が行われている場合はソースコードの下部に下記のように圧縮率と削除されたByte数が表示されます。

HTML
<!--HTML compressed, size saved 1.12%. From 254148 bytes, now 251290 bytes-->

CSSに非同期処理を追加

WordPressの弱点の1つは[プラグインを使えば使うほど、読み込むファイル数が多くなる]ことです。自社管理のアプリケーションの場合、CSSの読み込み数は10に満たないこともありますが、WordPressの場合、不必要な機能を削除したとしても簡単に数十を超えます。

CSSは標準の書き方では遅延読み込みをさせることが不可能です。しかし、Googleは結構冷たい姿勢を取っており、遅延読み込みができないファイルが多いほどページ評価を低く採点する傾向があります。

そのため、BrandiaはCSSの遅延読み込みをJavaScriptで行う方法を用意しています。通常、遅延読み込みすべきでないCSSファイルが存在しますが、それらはBrandiaの方で調整済みなので有効化するだけで全てのCSSファイルの遅延読み込が可能です。

補足

技術的な説明を参考にしたい場合は下記記事をご覧ください。

注意

仕様上、JavaScriptが無効にして運用されているブラウザをご利用のユーザーに対してはページを適切に表示することができません。

しかし、JavaScriptを無効にしている場合、商品購入など日常的な動作の多くが動かなくなる点も踏まえこれらのユーザーは一般の想定ユーザーではない(要するに変な人)ため気にする必要はないでしょう。

JavaScriptにDefer属性を追加

CSSと違いJavaScriptのファイルに対しては以下2つの読み込みタイミングの最適化オプションが用意されています。

Defer属性

defer属性を記載したJavaScriptのファイルはHTMLレンダリング時(ページ読み込み)時には実行せず、ページの表示が完了した後にソースの上に記載された順番で実行される。defer属性が記載された場合、ユーザーに対するページ読み込み後に実行されるため、ページ表示の高速化に繋がり、Googleからのページ評価も上がる

async属性

async属性を記載したJavaScriptのファイルは非同期処理になる。そのため、ユーザーに対するページの表示を優先にしてJavaScriptの実行タイミング調整されるので、ページ表示の高速化に繋がり、Googleからのページ評価も上がる。ただし、ソース上で上から書いてある順にJavaScriptファイルが実行されるわけではないため、不具合を起こしやすい。

これら2つの方式に大差はなく、いずれも同様の結果を得られるため、Brandiaではより不具合を起こしにくいdefer属性を付与するオプションを用意しています。

jQueryに対してもDefer属性を追加する

jQueryに対してもDefer属性を追加します。これを有効にした上で不具合が発生していないようでしたら、そのまま有効にしてください。この項目を有効にしている場合、jQueryの読み込みを前提としているインラインスクリプトがある場合は不具合を起こします。

jQueryに対してDefer属性を付与した場合

[jQueryの読み込みを前提としたインラインスクリプト] [jQueryファイル]の順番で読み込みが行われるため、不具合の原因になります。

jQueryに対してDefer属性を付与しない場合

[jQueryファイル] [jQueryの読み込みを前提としたインラインスクリプト]の順番で読み込みが行われるため、不具合はおきません。

補足

なお、jQueryにDefer属性をつけたときに、同時にインラインスクリプトに対しても遅延読み込みを実行する機能を検証中です。(振興技術のため、まだ導入にまでは至っておりません。)

レガシー環境向けのjQueryを削除

かなり古くかつ更新されていないプラグインの一部は非常に古いjQueryのみで動作するケースがあります。WordPressはこれらのプラグインをサポートするために、デフォルトでレガシー版jQueryをサポートするファイルを読み込みます。

ほとんどの場合、このファイルは必要ないので削除してしまいましょう。

Youtube (API)

Brandiaは記事サムネイルの部分に任意のYoutube動画を埋め込む機能をサポートしています。Youtube APIを使うことでこの動画に対してGoogle構造化マークアップ データを付与することが可能となり、SEO効果の向上を見込めます。

ただし、下記注意点をご一読ください。

注意

Youtube APIには、1日に可能なリクエスト回数に制限があります。そのため、記事の読み込みごとにYoutube APIを実行した場合、リクエスト制限を簡単に超過してしまいます。

そのため、Brandiaは「記事詳細ページの「更新・公開」ボタンを押した時にYoutube APIを実行して、結果をカスタムフィールドに保存する」ことでこのリクエスト制限を回避しています。

これにより、Youtube動画のサムネイル等を更新してもWordPressの該当データが更新されるわけではなく、Google構造化データを更新するには、埋め込み記事の「更新」ボタンを押してデータを再度フェッチする必要があります。

Vimeo

Brandiaは記事サムネイルの部分に任意のVimeo動画を埋め込む機能をサポートしています。Vimeo APIを使うことでこの動画に対してGoogle構造化マークアップ データを付与することが可能となり、SEO効果の向上を見込めます。

Vimeo APIにはYoutube APIに設定されている「リクエスト制限は存在しない」ので、Vimeo上でデータの更新を行った場合、WordPresの記事に記載されるデータも瞬時に更新されます。