WordPressをHTML化させてページの表示スピードを高速化してみた話

UPDATE：2021.02.04 RELEASE：2021.01.04

どうも、リモートワークで5Kg増量してしまい、安易に痩せれる方法はないかとダイエットサプリメントに手を出したらまさかの5Kg増量してしまったafiruことN.Sです。

今回はWordPressの特徴と課題。その課題についてどういったプロセスを組み課題を克服するのかを伝えていきたいとおもいます。
これをするのとしないとで、大きくページの表示速度が変わりますので是非ともご覧くださいませ。

1 WordPressとはなにか。
2 何が課題なのか。
3 静的化とはなにか。
4 まとめ

WordPressとはなにか。

WordPressとは、「ホームページの制作ができない人でも、簡単に新しいページやフォームを作り、管理できる仕組み」です。
通常では、HTMLというコードを利用して、作成した後CSSで画面の描写をしていきます。（実際にやろうと思うと心が折れる作業です）
それがWordPressの場合は、マイクロソフトのワードの感覚でページや記事を作成することができます。
そしてこのシステム。なんと無料で使えます。

何が課題なのか。

WordPressは、PHPとデータベースを使用するためHTMLで作ったページと比べると表示が遅くなります。
更に、WordPressではMVCと呼ばれる構造がなされておらず、

・どこでデータを読み込んでいるのか
・どこで取得したデータを処理しているのか
・どこで表示をしているのか

という処理が分かれていないことが多く、プログラムを管理するのも難しいです。
そのため、世のフレームワークよりも動作が遅いというところもデメリットの一つと言えるでしょう。

更に、PHPというプログラムでできている以上
どうしても攻撃を受けやすくなってしまうこともあります。

静的化とはなにか。

まず、静的化の前に、静的ページとは何かを知る必要があります。静的ページというのは、単純にHTMLで作られているページのことを指します。PHPなどのプログラムを介さずに〇〇.htmlと表示されるものが静的ページといいます。

ここでは、静的化させるメリットと静的化するための方法の一つとしてWordPressを使用したサイトのページすべてをHTMLにしてしまうという方法をご紹介していきたいと思います。

静的化させるメリット

サーバーの負担が軽減される

サーバー側はHTMLファイルをユーザーに渡すことだけで済むのでサーバーの負荷が軽減されます。WordPressの状態で設置すると、サーバーの性能によっては、「ページを作る」ということに時間がかかります。ですが、静的化を行うことで「ページを作る」という作業をサーバー側はしなくてもいいということになり負担が軽減されます。これにより、ユーザーがアクセスしてから表示されるまでのページ読み込み速度を短縮することができます。これは、サイトに訪問してくれたユーザーの離脱を防げる一つの対策になるかもしれません。

負荷に強い

静的サイトは、すでにあるHTMLファイルを表示するだけになっているので、サイトやページへのアクセスが急上昇した場合にサーバーが処理できずダウンすることを防ぐことができます。よく有名なSNSやWEBサービスでは急なアクセス増加によってサーバーがダウンしてしまうということもあります。そういったときにユーザーがアクセスするとサイトやサービスから離脱してしまいますよね。静的サイトではそういったアクセスが急上昇しても負荷に強いというのがメリットです。

セキュリティをより強固にすることができる。

WordPressは、世界のサイト37.8％を占めています。同じシステムがこれだけ使用されているとなると攻撃者の標的にされやすい仕組みになっています。また、WordPressも人が作っているためどうしてもセキュリティ上の弱点（脆弱性）が生まれてしまいます。WordPressはデータベースという仕組みを利用するために、常にセキュリティ対策と戦う必要があります。ですが、静的サイトではページ（HTMLファイル）を保存するだけで済むため、WordPressに比べてセキュリティ対策を格段にコストを抑えることができます。

事例1.Static Press

プラグインを使用するという方法です。今回は代表的なものとして、
Static Pressというプラグインを使用して、WordPressをHTML化（静的化）させ
出力先のディレクトリーにHTML化（静的化）されたものをアップしていくという方法です。

Step.01 プラグインのインストール

1.WordPressの管理画面にログインしてください。
2.[プラグイン] -> [新規追加]の順番でクリックしてください。
3.「staticpress」で検索し、[今すぐインストール]をクリックしてください。
4.[Activate]をクリックしてください。

Step.02 StaticPressの設定

パーマリンクの設定

1.[設定] -> [パーマリンク設定]の順番でクリックしてください。
2.カスタム構造を選択し、「/%postname%.html」を入力してください。
3.[変更を保存]をクリックしてください。

Step.03 StaticPressの設定

1.[StaticPress]→[StaticPress設定]の順番でクリックしてください。
2.静的サイトURLにWeb公開URLを入力してください。
3.出力先ディレクトリの最後尾に「任意の名前（半角英数字）/」を追加してください。
4.[設定を保存]をクリックしてください。

Step.04 静的ファイルへ変換実行(再構築)

1.[StaticPress] -> [再構築]の順番でクリックしてください。

生成が終わったのち、Web公開URLに設定しているURLにアクセスすると、静的化された状態のものが表示されます。

静的化することで生じる課題

Static Pressを使用することで、サイトを静的化することができました。ですが静的化することで生じる課題があります。ここではその課題について触れていきたいと思います。

課題1.サイト内検索ができない

サイト内検索などで使用する下記のプログラムが静的化になり使えなくなります。
（PHPではなくHTMLを生成するためどうすることもできません。）

<form id="form" action="<?php echo home_url('/'); ?>" method="get">
<input id="searchinput" name="s" type="text" placeholder="キーワードを入力"/>
<button type="submit" id="submit">検索</button>
</form>