過去に、WordPressとDrupal、Joomla、さらにはSquarespaceといった他の人気のコンテンツ管理システムとの比較についてお話ししました。
基本的なレベルでは、これは、データベース駆動型のコンテンツ管理システム(WordPress など)を使用するか、すべての HTML/CSS を自分で記述し、場合によってはフレームワークを使用するかの一般的な議論になります。
- Difference Between WordPress and Static HTML
- Pros and Cons of Static HTML Website
- Use WordPress as a Static Website Generator
- Difference Between WordPress and Static HTML
- では、コンテンツ管理システムとは何でしょうか?
- Pros and Cons of WordPress
- サイトの外観を簡単に変更できる
- 新しい機能を簡単に追加できる
- 迅速な開発と変更
- Are There There Any Cons to Using WordPress?
- Without Cache
- Sign Up For the Newsletter
- WordPress でトラフィックを 1,187% 増加させた方法を紹介します。
- キャッシュあり
- 静的な HTML ウェブサイトの長所と短所
- 基盤となるソフトウェアのメンテナンスが不要
- 基礎となるコードへの容易なアクセス
- Use WordPress as a Static Website Generator
- Cloudflare Full Page Cache
- We Provide the Best of Both Worlds
- WordPress or Static?
Difference Between WordPress and Static HTML
結局、すべてはフロントエンドで HTML として出てくるものなのです。 つまり、WordPress を使用していても、静的な HTML ウェブサイトを使用していても、サイトのコードは次のようになります。
どの方法を選択しても、コードは次のようになります
重要な違いは、その HTML がどのように存在するかにあります。 あなた、またはあなたの開発者がコード (コンテンツを含む) を記述します。 そして、いったんそれがサーバーに置かれると、常にその状態になります。
一方、WordPress は PHP とデータベースを使用するコンテンツ管理システムです。
- PHP コードを実行してサイトの HTML バージョンを作成する
- データベースに照会して HTML に挿入するコンテンツを取得する
では、コンテンツ管理システムとは何でしょうか?
上記で、WordPressはコンテンツ管理システムであることをお伝えしましたが、その意味するところはあまり説明されていませんでした。 コンテンツ管理システムとは、しばしば CMS と略され、コードを直接操作することなく Web サイトのコンテンツを作成、管理、および修正できるようにするソフトウェアのことです。
たとえば、静的な HTML ウェブサイトのように HTML でフォーマットしてコンテンツを手動で追加する必要がなく、WordPress エディタを使用してコンテンツを入力するだけで、WordPress がサイトへの表示を担当します。
WordPress エディターのインターフェイス
同様に、後日そのコンテンツを編集したい場合、サーバー上の静的 HTML ファイルを直接編集する必要はなく、同じエディターを使用して編集することができます。
Pros and Cons of WordPress
静的 HTML ウェブサイトの長所と短所については後ほど説明しますが、インターネット全体の 39.5% 以上が現在 WordPress を使用している理由のいくつかを説明しましょう。 その代わりに、あなたが取りたいアクションのほとんどは、グラフィック インターフェイスを使用して実行することができます。
このグラフィック インターフェイスを使用すると、次のことが可能になります。
- 新しいコンテンツを作成する
- サイトの外観を変更する
- サイトの機能を変更する
- SEO の設定を行う
- その他の多くの重要な操作を行う
HTML/CSS を駆使しなければ(そしておそらく駆使しても)このアプローチによって、ウェブサイトのあらゆる側面をより容易に管理することが可能になります。
サイトの外観を簡単に変更できる
WordPress サイトには、テーマと呼ばれるものが必要です。 テーマは、フロントエンドでサイトがどのように見えるかを決定します。 新しい WordPress テーマをインストールするには、基本的にボタンをクリックするか、ファイルを 1 つアップロードするだけで、あなたのサイトにそのスタイルが即座に適用されます:
How you add a new WordPress theme
一方、静的 HTML サイトでは、独自の CSS でサイトの外観を制御します。 これは、最初に設定するのに時間がかかるだけでなく、将来的に静的 HTML サイトの外観を根本的に変えたいと思ったときにも、同様に時間がかかるでしょう。
私たちは、Kinsta Web サイトの大部分が Github コミットで作成されたという事実により、このことを直接知っています (参考文献: git vs Github)。 確かに、私たちはWordPressのテーマとフレームワークを利用し、私たちのコードはWordPressの関数でラップされていますが、あなたが私たちのサイトで見ることのほとんどは私たちのチームによって作成されたものです。 そのため、より柔軟な対応が可能な場合もありますが、開発者が常駐している必要があります。 また、CSSのレスポンシブ化(モバイルでの見栄え)も気にする必要がありますが、最近では、ほぼすべてのWordPressテーマがデフォルトでレスポンシブ化されています。
新しい機能を簡単に追加できる
WordPress にはプラグインというものがあり、サイトの機能を簡単に拡張することができます。 あなたのサイトにコンタクトフォームを追加したいですか? 静的な HTML では、ユーザーが送信したデータをどのように処理するか、検証する必要があります。 WordPress では、プラグインをインストールするだけ…
How you add a new WordPress plugin
大きな機能では、難易度の差はさらに大きくなる。 あなたのサイトにフォーラムを追加したいですか? 自力でそれを行うのは幸運なことです。 しかしWordPressなら、フォーラム・プラグインをインストールするだけです。
eコマースやソーシャルネットワークの機能もすぐに追加できます。
迅速な開発と変更
テーマとプラグインの組み合わせ、およびコンテンツ管理システムとしてのWordPressの一般的な機能により、複雑なウェブサイトも素早く構築することが可能です。
数ページの非常に基本的なサイトであれば、静的な HTML ですばやく構築できます。
Are There There Any Cons to Using WordPress?
“static HTML websites load faster” とか “static HTML websites rank better in Google” などと言う人がいますね。 しかし、このうちのいくつかは、塩の粒で取られるべきである。 PHP とデータベースが追加のロード時間と遅延をもたらすことは事実ですが、WordPress のロード時間を 1 秒未満にすることはそれほど難しくありませんし、これは十分に速いことです。 また、PHP のパフォーマンスは過去 5 年間で劇的に向上しています。 最近の PHP のベンチマーク テストでは、PHP 7.3 は PHP 5.6 の 1 秒あたりの 3 倍のリクエスト (トランザクション) を処理できると結論づけています。 🚀
WordPress 5.0 PHP benchmarks
また、キャッシュを使ってページの静的 HTML バージョンを提供することにより、簡単に PHP やデータベース遅延を否定できる方法があります。 これは、静的な HTML サイトと同様に、すべてのページのロードが本質的に高速に読み込まれることを意味します。
キャッシュは WordPress サイトにどの程度影響を与えるのでしょうか。
Without Cache
WordPress ブログでキャッシュを無効にして、最初にテストを実行しました。
Sign Up For the Newsletter
WordPress でトラフィックを 1,187% 増加させた方法を紹介します。
WordPress のインサイダー情報をお届けする週刊ニュースレターを受け取る 20,000 人以上の仲間に加わりましょう!
キャッシュ遅延なし
キャッシュあり
次に、WordPress ブログでキャッシュを有効にしてテストを実行しました。 他には何も変更していません。
WordPress サイトのキャッシュあり (Pingdom test)
ご覧のように、大幅に改善されています。 実際、サーバー上のキャッシュから最初のページを提供するだけで、ロード時間が32.2%減少しました。
キャッシュあり
Kinsta はすべての WordPress ホスティング クライアントに対してサーバー レベルで自動的にキャッシュを処理します。 これは、サードパーティのキャッシュプラグインに煩わされる必要がないことを意味します。
あなたが聞くかもしれないランキングの噂に関して言えば、あなたのサイトの技術的およびページ上のSEOのあらゆる側面を制御することにより、WordPressのSEOを最適化できる素晴らしいWordPress SEOプラグインが存在します。 もし、WordPress サイトが本当に静的な HTML サイトよりも検索順位が悪いのであれば、The Wirecutter や TechCrunch のような大規模なプラットフォームで使用されているのを見ることはないでしょう。 このような場合、「ディアボロス」は、「ディアボロス」を「ディアボロス」と呼びます。 これは今日ではかなり簡単ですが、静的な HTML ウェブサイトで行う必要のないことです。
2 番目の欠点は、おそらく品質でしょう。 WordPress が非常に普及しているため、悪質なプラグインやテーマがたくさん出回っています。 そして、無料のソリューションは、時々、完全に地図から落ちる。
静的な HTML ウェブサイトの長所と短所
WordPress の話は聞きましたが、今度は静的な HTML ウェブサイトの長所と短所をいくつか掘り下げていきましょう。
基盤となるソフトウェアのメンテナンスが不要
WordPress とテーマ/プラグインを使用する場合、基盤となるコードをすべて更新し、互換性の問題がないことを確認する責任があります。 これは非常に簡単ですが (通常はボタンをクリックするだけです)、Web サイトのセキュリティと機能を維持するために行う必要があります。
一方、きれいな静的 HTML を記述した場合は、ほとんど放っておいて、更新について心配することはありません。
基礎となるコードへの容易なアクセス
WordPress では、サイトの基礎となるすべてのコードにアクセスできますが、静的な HTML ウェブサイトでは、特定の種類のマークアップを入力するのが少し簡単になります。 テーマ テンプレート ファイルと WordPress ループに対処する代わりに、すべてが目の前にあるのです。 Kinstaは、あなたの時間を節約するために設計されたホスティングソリューションです!
例えば、WordPressのスキーマプラグインがありますが、静的なHTMLウェブサイトではより簡単にスキーママークアップを制御することができます。
静的な HTML Web サイトは、基本的な Web サイトとしては確かに問題ありませんが、コンテンツの量や機能の面で規模を拡大しようとすると、主な問題が発生します。
- コンテンツの追加や編集は、コードを掘り下げる必要があるため、ユーザーフレンドリーではありません。
- 新しい機能を追加するには、自分でコーディングする必要があります。
Use WordPress as a Static Website Generator
Static Website Generator は、上記の 2 つのオプションとは少し異なり、WordPress などのコンテンツ管理システムのコンテンツを取得し、テーマと組み合わせて、静的 HTML ページを生成するものです。 Jekyll は最も人気のあるもののひとつで、ウェブサイトやブログ全体を GitHub Pages でホストし、コマンドひとつで新しいコンテンツをプッシュするために使用することができます。 欠点は?
Jekyll についてもっと知りたいという方は、Mike Neumegen によるこの記事をご覧ください。
技術的な知識があれば、両方の世界の長所を手に入れ、静的な HTML ウェブサイト ジェネレーターとして WordPress を使用することも可能でしょう。 しかし、この方法で WordPress を使用する場合、次のような犠牲を払わなければならないことを覚えておく必要があります:
- あなたのサイトに「リアルタイム」の動的コンテンツはまったく存在しないでしょう。
- 訪問者ごとに変わるおすすめの記事やウィジェットはありません。
- WordPress の組み込みコメント システムを使用できません。
基本的に、サーバー側 (PHP) で生成したものはすべて静的で手動更新になります。 静的な Web サイト ジェネレーターは、あなたのコンテンツに基づいて完全な HTML ページを作成し、一度それが完了すると、何人があなたのサイトを訪問しようとも、再生成されることはありません。
開発者は、コメントをまったく使用しないか、JavaScript ベースのソリューションに切り替えることにより、コメントの「問題」を解決しています。
投稿やページの静的 HTML ファイルを作成するために使用できる WordPress キャッシュ プラグインがいくつかありますが、Web サーバーとして Nginx を使用している場合 (使用していない場合は、本当にそうすべきですが、それは別の記事の話題にします)、フル ページ キャッシュ スイッチをオンに切り替え、一日か一週間で失効するように設定するだけでよいのです。
次に起こることは、最初の訪問者がサーバーに完全なキャッシュされた HTML ファイルを生成させ、あらかじめ定義された有効期限内の連続した訪問者にはそれらのファイルが提供されるということです。 ここKinstaでは、当社のサーバーはページキャッシングに
nginx fastcgi cache module
を使用しています。 どうやって設定するのかって?Kinstaのクライアントである場合、これはすべてのWordPressサイトに対して自動的に行われ、デフォルトで1時間ごとにキャッシュが失効されるようになっています。 しかし、MyKinstaダッシュボードで当社のサポートチームにチケットを開き、キャッシュの有効期間を延長するように要求することができます。
Cloudflare Full Page Cache
WordPress で Cloudflare のページルールを利用し、キャッシュからサイト全体を提供することも可能です。 WordPress の投稿とページに Cloudflare キャッシュを設定する方法について、ここで詳細を説明します。
これは、イベントを立ち上げたり、大量のトラフィックが予想されるサイトにとって非常に有益です。 しかし、完全にキャッシュから提供する場合、WooCommerce チェックアウト、WordPress 管理ツールバー、およびその他のさまざまな問題に遭遇する可能性が高く、修正するか回避策を見つける必要があることに留意してください。
We Provide the Best of Both Worlds
We generally recommend not your entire site from cache unless you time to properly test everything.私たちは通常、すべてを適切にテストする時間がない限り、サイト全体をキャッシュから提供することをお勧めしません。 たとえば、WooCommerce に関して言えば、「静的な」フロント ページ、カテゴリ、製品ページ (それらをあまり頻繁に変更しない場合) をキャッシュすると、ほぼ瞬時にロードされます。 しかし、誰かが「カートに入れる」をクリックするとすぐに、非キャッシュ バージョンに切り替える必要があり、そうしないとカートが常に空であることがわかります。
Kinsta では、e コマース ソリューションとブログに対してサーバー レベルのルールを設けて、キャッシュされるべきものとそうでないものを保証しています。 また、
woocommerce_items_in_cart
Cookie またはedd_items_in_cart
Cookie が検出されると、ユーザーは自動的にキャッシュをバイパスして、スムーズで同期したチェックアウト処理を保証します。これにより、高速な読み込みの WordPress サイトを提供しますが、物事の破損を心配する必要はありません。
Cache component stack
Kinsta でサイト全体をホストしたくないが、WordPress ブログの動的機能を利用したいですか。 リバースプロキシ上でサイトをロードすることを検討することをお勧めします。
WordPress or Static?
さて、100万ドルの質問です… もし、変更したり新しいコンテンツを必要としない小さなウェブサイトを構築するだけなら、静的HTMLは良い方法です。 しかし、それ以外の場合は、ほぼ間違いなく WordPress の方が良い選択となるでしょう。 これは、開発者にアクセスできない場合に特に当てはまります。
その使いやすさと拡張性が、インターネット上のすべての Web サイトの 39.5% 以上を動かしている主な理由です。 それでは、WordPress よりも静的な HTML でサイトを構築することはありますか?
この記事を楽しんでいただけたなら、KinstaのWordPressホスティングプラットフォームを気に入っていただけると思います。 あなたのウェブサイトをターボチャージし、当社のベテランWordPressチームから24時間365日サポートを受けることができます。 当社のGoogle Cloudを利用したインフラは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。 Kinstaの違いをお見せしましょう。 プランをチェックする