WordPressが激重なので静的サイトに移行したいと思った話

話題

WordPressは重い

WordPressが重い理由はいくつかある。まずは近代的なレスポンシブデザインに対応しきれていないということがある。

モバイル向けに対してもリサイズされていないでっかい画像を送りつけて来たりするのはあまりにも有名。

極めつけはDBにアクセスしていることが挙げられるだろう。つまり、記事のデータを取ってこようとしたら一度DBにアクセスして記事の内容を取得し、それをHTMLに直した上で表示しているわけだ。

このDBアクセスというのは思った以上に遅く、WordPressのサイトを重くしている一番の原因はここにあると言っても良い。

それに加えてプラグインなどを入れ始めるとますます重くなる。これでは快適なブラウジングができないのだ。

Vue.jsに倣う

以前、GitHubを利用してホームページを作成するという記事を書いたのだが、これを覚えている人はいるだろうか?

これは予めビルドした静的ファイル(CSS, JS, HTML)をホスティングサーバ(ここではGitHubのサーバ)にアップロードしておくことでHPを実現するというものだった。

サーバはただファイルを送り返すだけなのでDBアクセスの遅延はないし、そもそもプラグインという概念もないので非常に高速にページのレンダリングが可能になる。

とはいうものの、Vue.jsでそのままつくったHPはいかにもスクラッチという感じでこれをそのままWordPress並みの機能をもったサイトにするというのは手間がかかる話だ。そこで、Vue.jsを利用したフレームワークであるNuxtJSに注目することにした。

NuxtJS

Nuxt.js - ユニバーサル Vue.js アプリケーション
Nuxt.js はサーバーサイドレンダリングやコード分割、ホットリローディング、静的ファイル生成などを備えた Vue.js アプリケーションを構築するためのミニマルなフレームワークです!

NuxtJSはVueのフレームワークとだけあって、Vueよりも遥かに簡単に高機能なウェブページをつくることができる。

静的ホームページのフレームワークはたくさんあるのだが、NuxtJSは日本語ドキュメントも充実しており比較的わかりやすいと言えるだろう。

yarnが導入済みなら以下のコードでNuxtJSのデフォルトページが完成する。

yarn create nuxt-app <Project Name>
cd <Project Name>

選択肢がたくさんでてくるので自分が選んだものを載せておく。Deployment targetだけはStaticにしておかなければいけないだろう(サーバ側でNode.jsが動いているわけではないので)

Project name
JavascriptYes
Package managerYarn
UI frameworkVuetify.js
Nuxt.js modulesAxios, PWA, Content
Linting toolsNone
Testing frameworkNone
Rendering modeUniversal (SSR / SSG)
Deployment targetStatic
Development toolsjsconfig.json (VSCode)
What is your GitHub username
Version control systemGit

ページの確認自体はyarn devで行える。Vue.jsと違ってyarn serveでないことに注意されたい。

ここで注意しなければいけないのはgh-pagesではルーティングとしてhash modeを使わなければいけなかったということだ。こうしないとアクセス権がないディレクトリを参照してしまってJavascriptなどのファイルが読み込めなかったためだ。

ところがNuxt.JSは「まさかgh-pagesで公開するやつおらんやろ」というスタンスのフレームワークである。ホスティングサーバとしてGitHubを利用するのは流石にやめたいのだ。

ではとりあえずテンプレートの段階のNuxtJSのファイルをGitHubにプッシュしよう!

git remote add <GitHub Repository URL>
git add .
git commit
git push --set-upstream origin master

Netlify

Netlify: All-in-one platform for automating modern web projects
Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.

Netlifyはまあ至極簡単に言えばgh-pagesの代わりをするファイルホスティングサーバである。ファイルサーバなのでPHPは実行できないし、DBも使えない。

しかし、gh-pagesと違ってhistory modeが使えるのが強みなのだ。

さらに言えば、gh-pagesに公開するためには、

git push
yarn build
yarn deploy

という三度手間が必要だったのだが、NetlifyはGitHubの指定したブランチが更新されたことをチェックして自動でビルドしてアップデートすることが可能なのだ。

こんなに便利であればもはや使わないという選択肢はないだろう。

まずはウェブサイトとして公開したいソースコードがあるページを選択する。自分はGitHubしか使わないのでGitHubを選択した。

ここが少々手こずったところなのだが、ブランチはmasterを指定し(ビルドする前のソースコードがあるブランチである必要がある)、ビルド設定は上の画像と全く同じようにすれば良い。

あとはDeploy siteをクリックすればNetlifyがソースコードをクローンしてきてビルドしてくれるのである。

完成したもの

tkgstrator.work
## Build Setup

そして完成したのが上のページである。今回はドメインなどは全くいじっていないが、設定すれば自分が取得したドメインを紐つけることができる。

静的サイトなのでまだ何もコンテンツがないとは言え、猛烈に早い。NetlifyのサーバもどうもGitHubよりそこそこ速いらしく、GitHubだと89しか出なかったスコアがNetlifyだと97まで伸びた。

WordPress謹製のこのサイト(天安門事件録)がスコアがたったの68しかないことを考えるとNetlify+NuxtJSに置き換える価値は十分にあるといえるだろう。

今後の展望

とはいえ、Netlify+NuxtJSで全て置き換え可能かと言われるとそうではない。

まず、静的サイトであるがゆえにコメントの機能を実装することが原理上不可能である。うちのブログはそれなりにコメントを頂いているので、コメント機能が全くなくなってしまうというのは困ってしまう。

が、これには解決法がある。コメント機能をローカルのDBに保存していたところをFirestoreなりの外部DBで管理するようにするのだ。もちろんDBを参照するのだから遅くはなるだろうが、コメント自体は非同期で取得できるので利用者側の体感として遅くなることはないだろう。

次に、今までWordPressで書いてきた記事が使えなくなってしまうというのが困る。

NuxtJSはブログのように扱うことも可能なので、特別困ることではないのだがWordPressから記事をインポートしてくるのが大変面倒である。WordPressは4.7以降REST APIが実装されており、エンドポイントを叩くことで記事の概要や内容を取得できるらしい。

実際、検索して見つかる多くのWordPressからNuxtJSへの移行記事はこのREST APIを利用したものが多く見られた。ところが、なぜかうちのブログでは条件を満たしているにも関わらずREST APIを叩いても常に400エラーが返ってくる問題に直面してしまった。

そういえばかなり昔にREST APIの機能をオフにしたような気がしないでもないのだが、今更どこをいじればもとに戻せるのか全くわからない。WordPressを初期化すれば行けるだろうが、正直そこまでしたくない。

なので今回はWordPressから直接記事データをXMLとしてダウンロードし、そのXMLから記事データをMarkdownとして抽出する方法をとった。ところがこれもめんどくさいのだが、NuxtJSはMarkdownを標準でサポートしていないのだ。

そこでMarkdownからHTMLを作成し、そこからJSONを……というややこしい手順を踏んでいるのだが、前任者がほとんどいない分野なのでまだ記事がかける段階まで進んでいない。とりあえずウェブサイトを立ち上げることはできたので、年内にはコメント欄以外は静的サイトに移せるように頑張りたいところだ。

WordPressから直接NuxtJSがデータ取得して記事を作成するっていうツール、あれば便利だと思うんですけどね。

記事は以上。

コメント

タイトルとURLをコピーしました