【作って比較】「ヘッドレスWordPress」と「普通のWordPress」

同一のウェブサイトを、「ヘッドレスWordPress」と「普通のWordPress」で作って、それぞれのメリット、デメリットを紹介します。

pen-icon2021.07.26rewrite-icon2021.09.17

svg
Profile Pic

Writer:三好アキ

フロントエンド・エンジニア。「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJAMstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。


monoteinの事業について詳しくはこちらをご覧ください。


• ビギナー向け教本『はじめてつくるReactアプリ』など6冊を販売中。

「普通のWordPress」と「ヘッドレスWordPress」

ここ最近、WordPressをヘッドレス化する案件が続いていたのですが、今回はそれを少し拡張して、同じウェブサイトをWordPressとヘッドレスWordPressで作って比較をしてみます。

下記URLがそれぞれのサイトになります。

アクセスして使い心地を比べてみてください。


• 普通のWordPressサイト: monotein-demo-wordpress.site

• ヘッドレスWordPressサイト: monotein-demo.site


両サイトとも、WordPressはAWSのLightsailでホストしています。

「ヘッドレスWordPress」の方は、フロントにGatsbyを使い、ホストとbuildはGatsby Cloudで行っているので、典型的なJAMstackの構成といえます。

ヘッドレスWordPressとはなにか?

これまでにいくつかヘッドレスに関して記事を書いていますが、ここで改めてWordPressを例にとって、ヘッドレスを簡単に紹介します。

WordPressをはじめとする従来型のCMSは、「フロント画面」と「管理画面」からできています。

「フロント画面」とは、ユーザーがアクセスするウェブサイト部分です。

「管理画面」とは、サイト管理人がコンテンツの制作や管理などを行う部分になります。

WordPressではこの2つがワンセットで提供されているので、ビギナーでも簡単にウェブサイトの立ち上げと運営を行っていけます。

しかしその便利さと引き換えのデメリットとして、「スピードが遅い」、「セキュリティが弱い」といった数々の問題もあります。

それらの解決策として出てきたのが「ヘッドレス(CMS)」で、これは「フロント画面」と「管理画面」とを、別々に制作する方式になります。

traditional-headless-cms

これまで一緒に提供されていたものを、わざわざ2つに分けるメリットは何でしょうか?

その筆頭はパフォーマンスの高さになります。

それぞれの部分が独立しているため、相互干渉を受けることなくサイトが動き、アクセスしてきたユーザーに高速でページを表示できるようになります。

またヘッドレスWordPress特有のメリットとして、サイト自体がサクサクと高速で動くにも関わらず、下の画像のように管理画面はWordPressと同じなので、従来のWordPressユーザーでもストレスなく使うことができます。

admin-panel

ヘッドレスに関して、詳しくは次の記事を参考にしてください。

スピードの比較

実際に上の2つのウェブサイトにアクセスして、いくつかページを開いてみればわかりますが、ヘッドレスWordPressの方がサクサクと動きます。

客観的なデータとして、Lighthouseのスコアも次のようになっています。


• 普通のWordPress

lighthouse-normal-wp

• ヘッドレスWordPress

lighthouse-headless-wp

サイトのスピードは「Performance」で表されます。

「普通のWordPress」が「29」なのに対し、「ヘッドレスWordPress」が「97」と、ヘッドレスWordPressの方がスピードは圧倒的に出ています。

「ページ表示に3秒以上かかると50%以上のユーザーが離脱する」といわれるように、スピードはウェブサイトでもっとも重視される要素です。

Googleも、今年(2021年)から導入したコア・ウェブ・バイタルによって、検索ランキングの順位を決める要素として「スピード」を重視する姿勢を明確にしているので、高速スピードはSEOにも関わる重要なファクターとなっています。

使い勝手とセキュリティ

通常WordPressを使う時には、SEOやセキュリティに関してのプラグイン導入がデフォルトになっているので、今回も「普通のWordPress」サイトの方にはプラグインがいくつか入っています。

一方で「ヘッドレスWordPress」の方では、プラグインは不要なので、入っていません。

このプラグインの有無はサイトのスピードにも関わってきますが、特に影響が大きいと感じたのは管理画面での作業時です。

「普通のWordPress」の方は非常に動作が重くもっさりしていたので、ここで長期間コンテンツの制作やサイト管理を行うのは非常にストレスになると容易に想像できました。

またセキュリティに関して、WordPressでは以前からその脆弱性が指摘されています。

これはサイトURLの末尾に/wp-adminと付ければ、簡単にログイン画面に行けてしまうことが大きな理由です。

この点では「ヘッドレスWordPress」の方も、URLに/wp-adminを入れればログイン画面へと行けてしまいますが、「普通のWordPress」との最大の違いは、そのURL自体を隠しておくことができる点です。

つまり「ヘッドレスWordPress」の管理画面は、必ずしもフロント側のURLと同じである必要はないので、仮に上の「ヘッドレスWordPress」サイトのURLの末尾に/wp-adminをつけてアクセスしても、404ページが表示されるだけです。

これは、この「ヘッドレスWordPress」サイトの管理画面が別ドメイン(今回はサブドメイン)に立てられているからで、そのURLがわからない限り、ログイン画面へは行くことができず、高いセキュリティ性が担保されます。

「普通のWordPress」のメリット

ここまで「ヘッドレスWordPress」のメリットを取り上げてきましたが、それでは「普通のWordPress」のメリットは無いのでしょうか?

この比較のために、今回私は数年ぶりにWordPressサイトを作ったのですが、そこで思ったのは「ビギナーフレンドリー」です。

WordPressにはサイトに必要な機能があらかじめ用意してあるので、ダウンロードをすれば、30分もかからずにサイトを立ち上げられます。

「ヘッドレスWordPress」の場合は、さすがにここまでスピーディな立ち上げはできず、つなぎ込みをはじめとする複雑なプロセスが絡んできます。

この複雑さはヘッドレスWordPressのメリットと引き換えですが、今回改めてWordPressサイトの立ち上げにおけるビギナーフレンドリーの点には感心しました。

ヘッドレスと普通のWordPress、どっちがいい?

検索ランキングという「入り口」から、ページ離脱率、CV率、アイテム購入率という「出口」まで、ウェブサイト全体に大きく関係するのが「スピード」です。

上でも少し触れたように、Googleはスピード重視の姿勢を打ち出しており、スピードの遅いウェブサイトは成果をあげるのが難しくなっています。

普通のWordPressは簡単に立ち上げられるので、趣味のサイトを立ち上げたり、個人が小規模サイトを立ち上げるいいでしょう。

しかしアクセスを集めたり、CVをある程度を出す必要のあるビジネス用途のウェブサイトでは、ヘッドレスWordPressの方が適切だろうというのが私の考えです。

WordPressとヘッドレスのよりくわしい比較は、次の記事を参考にしてください。

待ち時間『0秒』を体験arrowデモサイトを見る


ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JAMstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談