espar では、対象となるWordPressサイトが 静的化にどれだけ向いているか を示す指標「静的化準備指標」で、初期費用・月額費用が変動します。
静的化準備指標は、最低の0から最高の5まで6段階あります。
対象となるWordPressサイトで、以下の各項目を自己診断頂くと YES の数がそのまま静的化準備指標の目安となります。例えば、○が3つの場合は静的化準備指標は3であることが推測されます。
- (A) レスポンシブ対応である
- (B) サイト内のリダイレクトが存在しない
- (C) URLパスの末尾にパラメタが存在しない
- (D) JavaScriptレンダリングは不要である
- (E) フォームや検索などの動的要素が存在しない
本ページでは、これら静的化準備指標を決定づける条件について詳細を記します。静的化準備指標の目安と、実際の弊社診断による指標との差がなくなるよう、あらかじめご確認下さい。
(A) レスポンシブ対応である
対象となるWebサイトが レスポンシブ対応している と静的化準備指標を1加算致します。
旧来型の UserAgent によるPC/モバイル表示を切り替えているサイトでは、静的化の際にも UserAgent を切り替えて2度/3度と全体を静的化を行う必要があります。
逆にレスポンシブ対応は1ソースなので静的化は一回でよくなります。静的化が一回で済むサイトが静的化に優しいサイトとなります。
本項目が ○ にならない例
- レスポンシブ非対応サイト
- UserAgent ごとに html/css/js が変わることがあるサイト
本項目を ◯ にするには…
- UserAgent ごとに html/css/js が変わらないようにする
- UserAgent に関わらず html/css/js が常に同じである
(B) サイト内のリダイレクトが存在しない
対象となるWebサイト内で リダイレクトが存在しなければ 静的化準備指標を1加算致します。
.htaccess や、WordPress の Redirection プラグイン等で同一ホスト内でリダイレクト設定が存在する場合が該当します。リニューアルや引っ越しを繰り返しているサイトほどサイト内リダイレクトが多い傾向にあります。
本項目が ○ にならない例
- サイト内のリダイレクトが存在するサイト
- 以下のようなサイト内リダイレクトが多数存在するサイト
(例) https://example.com/cat/company/ → https://example.com/company/
本項目を ◯ にするには…
- 不要なリダイレクトを除外する
(C) URLパスの末尾にパラメタが存在しない
対象となるWebサイト内の URL末尾にGETパラメタ表記が存在しなければ 静的化準備指標を1加算致します。
URLに ? & = の全てまたは幾つかが含まれていると静的化を行いにくくなります。これらをクエリストリングと言います。通常、URL設計を正しく行っていればクエリストリングが存在するサイトにはなりません。
なお、アンカーリンク # は静的化の向き不向きには関係ありません。またサイト外へのリンクにクエリストリングが使われている場合も対象サイトの静的化の向き不向きには影響しません。
本項目が ○ にならない例
- サイト内リンクのURLに ? & = などを含むクエリストリングが存在するサイト
(例) https://www.example.com/page?category=product&id=1
本項目を ◯ にするには…
- URL設計を見直す
(D) JavaScriptレンダリングは不要である
対象となるWebサイト内で DOMの構築にJavaScriptのレンダリングが必要なければ 静的化準備レベルを1加算致します。
静的化では、必要な画像やcss/js等のリソースのURLをhtmlの中から抽出しますが、それらURLがJavaScriptが実行されなければ明らかにならない場合、静的化する為にJavaScriptを解析する必要があります。
JavaScriptを使ったらNGということではありません のでご留意下さい。JavaScriptや各種フロントエンド用ライブラリ(jQueryなど)を使用していて、それらが実行されなければリンク先URLや参照先URLが確定しない場合に限られます。
本項目が ○ にならない例
- JavaScriptで <img>タグのsrc属性に指定する画像ファイルパスをランダム指定しているサイト
- <a>タグのhref属性にリンク先URLが含まれておらず、onClick イベントで発動する JavaScript でリンク先URLを生成し location.href に代入することでページ遷移するサイト
本項目を ◯ にするには…
- JavaScript を解釈できない Google BOT をイメージしてサイトをつくる
- Google BOT にクロールされ易い・クロール漏れの発生しにくい html にする
(E) フォームや検索などの動的要素が存在しない
対象となるWebサイト内の 動的要素が存在しなければ 静的化準備指標を1加算致します。
動的要素とは、WordPress上のプラグインやPHPプログラムが閲覧者のアクセスの度に動かなければならない要素です。主に、問い合わせフォームや検索フォームが該当します。
動画やJavaScriptによるアニメーション効果などは動的要素ではありません。PHPなどのサーバサイドスクリプト言語が動作する環境が必要なものは動的要素です。
本項目が ○ にならない例
- ContactForm7 などのプラグインで問い合わせフォームを実装しているサイト
- WordPress標準の検索機能を使ってサイト内検索を実装しているサイト
- PopularPostsプラグインなど、アクセスの度にWP側のデータベースに書き込みが発生するサイト
- ECサイトで在庫数を表示する為にアクセスの度にデータベース参照が発生するサイト
- 広告表示プラグインなど、アクセスの度にWP側のデータベースに登録している広告情報を取得して広告をランダム表示するサイト
本項目を ◯ にするには…
- 問い合わせフォームにプラグインを使わない。以下のような代替策をとる
- 他ドメインのフォームサービス
- JavaScript だけで動作する静的ページ用問い合わせフォームツール (espar form など)
- 検索フォームにWordPressの標準機能を使わない。以下のような代替策をとる
- Google カスタム検索エンジン
- Algolia などの JavaScript だけで動作する静的ページ用サイト検索エンジン
- WordPress特有の shorlLink を使用しない
- 以下のプラグインを使用しない
- popular posts
- Ultimate FAQ
- ads by datafeedr
- (注) 上記に対応できなければサイト全体を静的化できないという訳ではありません。静的化指標の(E)が◯にならないというだけです。