WordPressを静的化するShifterを試してみた
May 16, 2021 16:20 · 3236 words · 7 minute read
WordPressで作られたWebサイトの運用をすることになりました。
これまで検証目的でWordPressを構築したことはありましたが、長期で運用するのは初めての経験です。
「WordPressを静的化したら各種運用コストが下がるのでは？」と思ったので、Shifterというサービスを試してみました。
目次
WordPressサイトの運用コスト
WordPressは「世界で一番使われているCMS」と言われており、世界中のWebサイトの40%がWordPressで作られているそうです。
そのため、便利なプラグインも数多く公開されており、大抵の機能はプラグインを追加することで対応できます。
その反面、攻撃者のターゲットにもなりやすく、情報漏えいや改ざんの事例を目にしたことがある方も多いのではないでしょうか。
攻撃被害に合わずに運用を続けるためには、
- WordPressを動かすサーバの適切な設定
- WordPressを動かすサーバを守るWAFなどのセキュリティ対策
- WordPressを動かすサーバのOSやミドルウェアの更新
- WordPress自体の更新
- 使用しているWordPress Pluginの更新
などなど、何かと運用コストがかかるものです。
これらの運用コストを低減する目的で、WordPressサイトを静的ページに変換して公開できるShifterについて検証してみました。
Sifterとは？
WordPressサイトを静的ページに変換して公開できるサービスです。
- 自動バックアップ
- 自動スケーリング
- スケジューリング機能
などなど、サイトの運用であると便利な機能が数多く提供されています。
今回は試していませんが、HeadlessCMSとしてWordPressを利用することもできます。
費用
検証用途であれば、無料で1サイト公開することができます。
価格についての詳細は下記URLをご参照ください。
Shifterを使ってみる
早速Shifterを使ってみましょう。
アカウント作成
まずはアカウントを作成します。
Site作成
アカウント作成後、ログインするとSites画面が表示されます。
「Create New」でSiteを作成します。
今回はShifter StaticのFree Tierを使います。
必要事項を入力
内容を確認して「Create」
1分ほど待つと、Sites画面に作成したサイトが追加されます。
Siteカスタマイズ
早速作成したSiteの設定をしていきます。
まずは管理画面を見てみましょう。
「Start WordPress」でWordPress環境を起動。
WordPressが起動したら、「Dashboard」をクリック。
見慣れた画面が出てきました。
Themeを変更してみます。
今回は、SparkNewsというThemeを選択しました。
Spark News - WordPress theme | WordPress.org
Themeを選択したら、いくつか記事を投稿しておきます。
WordPressの管理画面での操作が終わったら、Shifterの管理画面に戻ります。
今回は4記事ほど投稿した状態で試したところ、大体2分くらいで静的ページへの変換と公開が完了しました。
検証してみる
表示速度比較
静的ページ化して最初に気になるのが表示速度です。
静的ページに変換する前のWordPressのサイトと、静的ページ変換後のサイトで表示速度を比較してみました。
Chromeの機能を使って速度を調べます。
静的ページ化前後で、それぞれ2回ずつ表示速度を測っています。
結果がこちら。静的ページ化後の方が若干表示速度が早くなっています。
記事数が膨大になってくると、もっと差が開くでしょう。
| 静的ページ化前 | 静的ページ化後 |
|---|---|
| 2.76秒 | 2.32秒 |
| 2.43秒 | 1.55秒 |
Lighthouseで比較
続いて、Googleが公開しているSEOテストツール「Lighthouse」で比較してみます。
静的ページ化前
静的ページ化後
意外なことに、静的ページ化後の方がPerformanceスコアが低いという結果でした。
OpportunitiesとDiagnosticsは以下のようになっています。
Opportunitiesを見る限り、静的ページ化したあとの方が結果は良さそうに見えるような・・・？
Diagnosticsの内容は、静的ページ化前後であまり変化はなさそうです。
なぜ静的ページ化後の方がスコアが低くなるのかわからなかったので、わかる方がいらっしゃれば教えていただけると嬉しいです。
静的ページ化前
静的ページ化後
表示崩れ
「WordPressのサイトを静的ページ化すると、表示が崩れる」ことがあるようです。
参照: WP2StaticでWordPressを手軽に静的サイト化！
表示崩れを検証する目的で、jQueryなどを使ってリッチな表現をしている「Spark News」を選択してみましたが、今回使ってみた範囲では表示崩れは発生しませんでした。
エラーページはどうなる？
Shifter同様にWordPressを静的ページ化するWP2Staticというプラグインがあります。 このプラグインを使った場合、Themeの404ページは静的ページ化の対象にならないようです。
参照: WP2StaticでWordPressを手軽に静的サイト化！
Shifterの場合、「404 Page Not Found」が発生した場合もThemeの挙動が反映されていました。
削除した記事はどうなる？
WP2Staticでは、WordPress管理画面から記事を削除しても静的ページ化したコンテンツは残り続けるそうです。一度静的ページ化したコンテンツは手で削除する必要があります。
手動での削除はトラブルの元になる予感しかしないので、実際の運用では避けたいところ。
参照: WP2StaticでWordPressを手軽に静的サイト化！
Shifterの場合、WordPress管理画面から削除した記事は、静的ページ化後のサイトからも削除されていました。
できたこと、できなかったこと
今回検証した中で、できたこと、できなかったことを列挙してみます。
できたこと
- jQueryなどを使ったリッチな表現
できなかったこと
- Themeに付属していた検索機能
- コメント投稿機能
静的ページ化後は、DBやPHPを動かすような機能は使えませんでした。
当然といえば当然ですが。
検索機能については、こちらを使うことで解決できそうです。
コメント機能は、Hugoなどの静的サイトジェネレータと組み合わせてよく使われるDisqusを使えば対応できるのではないでしょうか。
向き不向き
ここまでの中で感じた、向き不向きについて書いてみます。
コーポレートサイトやサービスの紹介サイトなど、機能が少なくて更新頻度もそれほど高くないサイトの運用には非常に向いていると感じました。
逆に向いていないのは、コメントを投稿するなど、利用者が能動的に機能を動かすサイトでしょうか。
とはいえ、Shifterの特徴として「電子商取引」が挙げられているので、良い解決方法が提供されているのかもしれません。
最後に
WordPressを静的ページ化するShifterを使ってみました。
Shifterとてもアリですね！
Shifterに移行する前に、ローカルでテストするためのDockerイメージ（Shifter-Local）も提供されているので、テストしてみようと思います。