wordpress をやめて静的サイトに変えた(hugo使用)

 2020/12/25, last updated 2022/08/03 -  moriya -  ~4 Minutes

WEB サイトを分析したりキーワード検索をしたりするのに ahrefs というツールを使っているのだが、site audit メニューで このサイトを見ると、Slow page という警告が出ていた。

slow page を改善したからといって、内容のないサイトにアクセスを集めることは できないだろうが、何か得られる知見があるかもしれないと思い、 高速化にトライすることにした。

現状と移行案

現状の構成は、以下のようなものである。

  • サーバ aws ec2 t2.medium
  • OS centos 7
  • WEBサーバ apache 2.4
  • データベース mariadb
  • php 7 / fpm 使用
  • wordpress 5

どの程度で slow page と判定されるのかはっきりしないが、 chrome の開発者ツールで見たところ、 WEBサイトに接続してから最初のバイトが返ってくるまでの時間(TTFB)が 1.5秒程度あった。 実際には、この前に、DNS lookup、接続、SSL 分が足されることになる。

wordpress の不要なプラグインを削除したり、SEO プラグインを変更したりして調整したが、 キャッシュを設定したり、CDN を使ったりという、煩雑なことはやりたくなかったので、 1秒を少し切る程度にしか調整できなかった。

wordpress は PHP スクリプトで書かれていて、コンテンツはデータベースに格納されており、 その上、AWS の安価なインスタンスでホスティングしているので、 遅いのは当然だろうと思う。

一方で動的に生成するのではなく、 事前に html に変換しておくという静的サイト生成という考え方がある。

静的サイトであれば、OS と WEB サーバだけあればよいので、 高速化は期待できる。

wordpress へのこだわりは無いので、この際、静的サイトジェネレータを使うことにした。

静的サイトジェネレータとして使えそうなものとしては、 sphinx、jekyll、hugo(gohugo) などが挙げられるだろう。 どれも、マークダウン形式で記述し、html に変換する点が特徴だろう。 マークダウン形式であれば、WEB サイトに公開しつつ、 手元で(WEBサイトにアクセスせずとも)メモ的にも使えるという利点があるだろう。

これらの静的サイトジェネレータのうち、hugo を使うこととした。 単に、以前使ってみてわかりやすかったからだ。

移行

各ブログシステムからの移行方法については、 Migrate to Hugo   という記事にまとめられており、 wordpress については、 WordPress   の項に記載されている。このうち、wordpress-to-hugo-exporter が使えた。

wordpress の管理画面からプラグインを実行すると上でプラグインを実行すると zip ファイルがダウンロードされるので、hugo でサイトを作った後、 展開した zip ファイルの内容を contents フォルダーにコピーする。

code ブロックなど、変換できない部分は html タグのままなので、 マークダウン形式に変換する。 または、Configure Markup の Goldmark   の項にあるように、unsafe を true に設定する。

permalink が日本語だと URL は完全には変換されなかった。 例えば、「、」を含む URL。hugo で変換すると「、」が消えてしまう。 url の rewrite などで対応できるとは思うが、 めんどうなのであきらめた。

どの程度改善されるのか

トップページへのアクセスを chrome で調査。

WordPress の応答速度

WordPressの応答速度

hugo 版の応答速度

hugoの応答速度

TTFB が 820ミリ秒程度であったものが、90ミリ秒程度に改善した。データベースを使わないので当然だろう。

hugo 版 (s3 でホスティング)

s3 に置くほうがメンテナンス性が高いかもしれないので、s3 に置いた場合についても調査した。 s3 の静的ウェブサイトホスティングで構築すると TTFB は 120ミリ秒程度。(http)

hugo on s3の応答速度

hugo 版 (s3 + reverse proxy)

(独自ドメインSSLをs3に設定できないので)ProxyPass でこの静的ウェブサイトにプロキシした場合は、TTFB は 160 ミリ秒程度であった。悪くはないと思う。

hugo on s3にプロキシした場合の応答速度

最終的な構成

データベースを使わないので、最終的には以下の構成とした。

  • サーバ AWS ec2 t2.nano
  • OS centos 7
  • WEBサーバ apache 2.4

かなり高速化&低コスト化できたのではないかと思う。

追記: その後、さくらのレンタルサーバ に載せかえた。