自作検索フォームと検索プラグイン「VK Filter Search」導入時の速度を比較してみた
わだっつです。
ここまで、検索フォームを自作する方法を記事にしましたが、今回はサイトスピード比較の第２回目として、自作検索フォーム導入時のサイト速度と検索プラグイン「VK Filter Search」導入時のサイト速度を比較をしてみようかと思います。
サイト速度を測定：検索フォーム
まずは自作検索フォームの速度測定を行ってみました。
検索フォームの機能
現時点の自作した検索フォームは以下の通りです。
追加した機能は以下の通り
入力したキーワードを含む記事タイトルが見つかった場合のみキーワード・タグの絞り込み検索および検索ボタンの押下が出来るようにした ⇒ 検索結果が見つからなかった場合、いちいち前画面に戻って検索しなければならない煩わしさをなくすため。
上記について、キーワードが未入力、検索結果が見つからなかった等のエラーメッセージは見出し下に赤字で表示させるようにした ⇒ 理由は項番１と同じ
全件検索をできなくした ⇒ 記事数が少ないうちはまだあってもよいが、投稿記事数が多ければ多いほどデータベースへの負荷が高くなり、またそれに伴い結果の表示に時間が掛かってしまうのを懸念したため。
自作検索フォームの過去記事はこちら
サイト速度を測定
この状態でPageSpeed Insightsでサイト速度を測定してみました。
結果は以下の通り
モバイルが９９点、パソコンが１００点と高いスコアを叩き出しました。
サイト速度を測定：VK Filter Search
続いて、検索フォームのプラグイン「VK Filter Search」の無料版導入後のサイト速度を測定してみました。
VK Filter Search とは？
カテゴリ、タグ、カスタム投稿タイプやキーワードなどで投稿を絞り込み検索できるプラグインで、無料の「VK Filter Search」と有料の「VK Filter Search Pro」の２タイプがあります。
ブロックエディターに対応しているので、記事本文内の任意の場所やウィジェットへの設置など様々な使い方が出来ます。
今回は、この無料版である「VK Filter Search」を使っていくつか比較をしてみようかと思います。
「VK Filter Search」プラグインの導入
「VK Filter Search」の導入はプラグインの新規追加から行います。
検索フォームに「VK Filter Search」と入力すると、「VK Filter Search」が画面左上に出るので、「インストール」をクリック。インストール後、「有効化」をクリックして完了です。
インストール完了後、ダッシュボード画面の左メニューに「VK Filter Search」が追加されます。
VK Filter Searchをページ内へ埋め込む
インストールが終わったら、「ブログパーツ」の機能を使って検索フォームを作成します。
作成後、パーツを公開します。公開後、ブログパーツ一覧に作成した検索フォームが追加されます。
ブログパーツを埋め込む
次に先ほど作成した検索フォームをページ内に埋め込みます。今回は「記事下部」に埋め込みます。
ウィジェット画面を開いたら、「カスタムHTML」⇒「記事下部」⇒「ウィジェットを追加」の順に選択します。
先ほど作成した検索フォームの呼び出しコード（[blog_parts id="xx"]）を入力して「保存」をクリック。これで完了。
以下が検索フォームです。追加しただけでキーワード入力欄と検索ボタンの余白以外は特に何も設定は変えていません。
サイト速度を測定
記事への埋め込みが終わったので、サイト速度を測定してみました。
結果は以下の通り
モバイルが９６点、パソコンが１００点と高いスコアを叩き出しましたが、自作検索フォームと比べて若干モバイルでスコアが落ちておりました。
自作検索フォームとVK Filter Searchのメリット・デメリット
自作検索フォームと「VK Filter Search」のメリット・デメリットを少しまとめてみました。
自作検索フォームのメリット・デメリット
まずは自作検索フォームのメリット・デメリットから。メリットはやはり自分のやりたいようにカスタマイズが出来るといった所。
カスタマイズするにはHTML/CSS/JavaScript/PHPの知識や経験が必須ですが、現在はChatGPTなどのAIの普及もあり、知識や経験が無くても正しく指示を出していけば理想形に近い所まで作成してくれます。
また、各種プログラミングやAIの利用方の勉強にもなるので、将来的にサイト作成に携わる仕事がしたいという方は勉強もかねてやってみるのもいいかもしれません。
ただし、実際やるには別途テスト用サイトを作ってやりましょう。そこでしっかり経験を積んだ上で、本番サイトへの導入に臨んだ方が良いです。
続いてデメリット。デメリットはHTML/CSS/JavaScript/PHPといったプログラミング言語を使って自分でコーディングをしなければならない所。筆者もここまでくるのに作業スピードがそもそも遅いとはいえ、ここまで来るのに２週間程度かかっています。
手っ取り早く絞り込み検索機能を導入したい、手間が掛かることはやりたくないという人には向かないでしょう。
VK Filter Searchのメリット・デメリット
続いてVK Filter Searchのメリット・デメリットです。
メリットは導入が非常に簡単であるという事。プログラミングに知識が無くてもプラグインのインストールからサイト内での導入まで数分で出来ます。
また、カテゴリーおよびタグ選択・カスタムタクソノミーでの絞り込み検索といった必要最低限の機能を無料でも利用できるのも大きなポイント。
デメリットは検索フォームのデザインが自由に出来ない所。そして、サイトスピードのスコアが微妙に落ちる所。さらに、無料版の場合はキーワード入力欄の幅の変更が出来ず、PC版だと少し不自然な感じとなりました。
サイトスピードのスコアが落ちるというのは、こちらはプラグインであるため、導入した際にサイトの速度に少なからず影響は出ているのかと思われます。
使ってみた感じ、それほど遅いとは感じませんでしたが、この影響を許容できるかどうかかなと使ってみて感じました。また、記事数が多くなった時にどうなるかといった所。
最後に
以上が、自作検索フォームと検索プラグイン「VK Filter Search」導入時のサイト速度の比較です。
最終的にどうするのかは各サイトの運営の判断になりますが、自身としては最初は「VK Filter Search」をしばらく使って、並行して自身で検索フォームを自作していくのが良いかなと感じました。（実際プログラミングやAIの使い方の勉強にもなりますので。。。）
今回は以上です。また、最後まで読んでいただきありがとうございました。
現在、関東エリアを中心とした各駅ホームの階段やエスカレーター・エレベーターに近い停車位置情報（号車とドアの位置）を各鉄道会社別・路線別にまとめたサイトを運用しています。
サイトURLはプロフィールに載せていますので、よろしければそちらも一度ご覧ください。
それではまた。
いいなと思ったら応援しよう！
