BacklinkoのヘッドレスWordPressとNext.jsへの移行【前半】

Googleが2021年後半にCore Web Vitalsをランキング要素として採用したことで、ウェブサイトのパフォーマンスを支える信頼性の高いアーキテクチャの重要性を認識する企業が増えています。

 

一流の企業と仕事をすることはあっても、私たちがフォローしながらも学ばせてもらう企業と一緒に仕事をすることはこれが初めてでした。そのため、2020年5月にBacklinkoが自社サイトのNext.jsのフロントエンドを作りたいというアイデアで私たちに連絡してきたときは、本当にわくわくしました。

1. Backlinkoストーリー

BacklinkoとExploding Topicsの創始者であるブライアン・ディーンは、2013年にBacklinkoを立ち上げました。その後、SEO業界で最大級のブログとブランドに成長しました。彼らは、SEOのトピックやトレンドの、長く、わかりやすい詳細な説明をする点を重視しています。デジタル関連の仕事（マーケティング、ウェブ開発、ビジネスなど）に携わっている人なら、Backlinkoの記事を読んだことがあるかもしれません。

 

彼らが大きなウェブサイトを持っていることはすでに知っていました。しかし、最初の電話で、彼らが持っていたWordPressテーマを詳細に確認した後、彼らがどれほどの努力をしてきたかに驚かされました。何十種類ものランディングページや投稿テンプレートがあるということです。数千ものCSSライン、たくさんのレガシーJS、何百ものコンポーネントがありました。

 

Backlinkoは一見シンプルなブログのように見えますが、もっと深く掘り下げてみると、巨大なコンテンツマシンであることがわかりました。

 

数字で見るBacklinko

130万以上

月間訪問数

30000以上

コメント数

450以上

投稿数とページ数

 

1－1 パフォーマンスの問題

数枚の画像とユーザーによるコメントを含む長い記事は、パフォーマンスに大きな影響を与えます。それに加えて、BacklinkoのWordPressのテーマ開発では、長年にわたって多くのレガシーコードが蓄積されており、ページレンダリングの問題、LCP（Largest Contentful Paint）の増加、TTI（Time to Interactive）の時間の増加も引き起こしていました。

 

低速で一枚岩なWordPressを使用してウェブサイトを運営していたことで、2021年にCore Web Vitalsへの最適化がビジネスの第一優先事項になると考え、Backlinkoチームはスタックの切り離しを検討しました。

 

私たちはBacklinkoの読み込み速度に何年も悩まされていました。高解像度の画像やイラストが多いため、ページサイズが必然的に大きくなっていました。また、WordPressのテーマを可能な限り最適化したにもかかわらず、読み込み時間が遅くなってしまっていました。

 

ブライアン・ディーン
SEOエキスパート、Backlinko.comの創設者

 

1－2 初期コンタクト

BacklinkoのCTOが、BacklinkoのWordPressフロントエンドをNext.jsに移植しないかというメールを送ってきたのが始まりでした。

 

私たちは、お客様のご要望に個別に対応し、期待通りの結果が得られるようにサポートしています。Backlinkoでは、依頼されたわけではありませんが、Jamstackのアプローチからどれだけ恩恵を受けられるかを示すために、さまざまな静的サイト・ジェネレーターを使ったシンプルなデモでコンセプトの証明を行いました（すべてのソリューションの長所と短所、起こりうる問題点を提示しました）。

 

自分たちのコンテンツのパフォーマンスが格段に上がっているのを直接目の当たりにしたことで、私達への第一印象が非常に良くなりました。それに加えて、キャッシュ戦略に苦労しない、ダウンタイムがない、スケーリングが容易である、つまりエッジからすべてを提供できるというアイデアが、彼らに新しい可能性をもたらしました。

 

そこで、すぐに一緒にやろうと決めてくれました。

 

1－3 タイムライン

2020年5月下旬に作業を開始しました。私たちはプロジェクトを小さなタスクに分割し、ポストテンプレート、ページ、コンテンツコンポーネントの移動を徐々に開始しました。全ての作業を終えるまでに2ヶ月近くかかりました。

 

 

1－4 新しいフロントエンド

Backlinkoは最初からNext.jsを使うことにかなり納得していましたが、それが彼らにとって最良の選択肢なのかどうかはわかりませんでした。究極や最良のツールはありません。それぞれのお客様に対して、Q&Aや調査を行い、お客様の目標やニーズをより深く理解することで、お客様のユースケースに最適な技術スタックを見つけることができるようにしています。

 

Backlinkoはコンテンツが多いサイトなので、不必要に大きなJSペイロードが発生することを恐れていました。そのため、Eleventyを代替案として提示しました。当時のEleventyは、まだ実社会での大きな導入実績がなく、個人のブログや小さなウェブサイトが中心でした。このプロジェクトに関わっているチームは大きくなく、コミュニティも比較的小さいので、（ある意味）リスクがありました。

 

技術スタックを選択する際には、すべてのビジネス要件を満たすことが不可欠です。この場合、プレビューやReactエコシステムとのすぐに統合できるといったハイブリッドな機能が重要な要素となりました。Next.jsの背後には素晴らしいコミュニティとVercel社があり、さらに多くのケーススタディと実績のあるプロジェクトがあったため、Next.jsを安心してお勧めすることができました。

 

1－5 Headless WordPress

複雑なWordPressのセットアップに加えて、WordPressをCMSとして採用したのは、BacklinkoチームがWordPressのコンテンツ編集の可能性に満足し、よく理解していたからです。

 

CMSの機能をプレゼンテーション層から分離するために、WPGraphQLを使用しました。WPGraphQLは、拡張可能なGraphQLスキーマとAPIをあらゆるWordPressサイトに提供する、オープンソースの無料WordPressプラグインです。

 

私はWordPress Rest APIの開発を当初から追いかけてきましたが、今はずいぶんと進歩しました。数年の開発期間を経て、安定したバージョンとなり、あらゆるプロダクションでの使用が可能となりました。WPGraphQLプラグインは、WPのヘッドレス機能をさらに向上させました。

 

PHPのwp_queriesを大量に作らなくても、必要なデータを取得してレンダリングするだけで簡単にできます。また、Advanced Custom Fields（ACF）との相性も抜群で、このケースではCMSでコンテンツを構成するのが主な方法となっていました。

 

Backlinkoが何年もACFを使っていたことは特筆すべきでしょう。Next.jsへの移行では、多くのカスタムコードを書いたり、ACFの構造を変更したりする必要はありませんでした。GraphQLプラグインを接続してみたところ、ほとんどの場合、すぐに動作しました。

 

1－6 静止画の課題

　　

すべての投稿とページは静的なものです。Next.jsは、すべてのページを自動的に静的なHTMLにエクスポートします。リクエストごとにAPIからデータを取得するのではなく、ビルドごとに一度だけデータを取得します。しかし、これはビルド時間の増加につながりました。これらの問題と修正については、Netlifyのブログで説明しています。

 

1－7 ダイナミックなコメント欄

優れたコンテンツ以外にも、Backlinkoは、公開した各記事について、活発で魅力的なコミュニティとのオープンな議論を行っていることでも知られています。ブログページには2万件以上のコメントが寄せられています。

 

Jamstackでコメントを扱うにはいくつかの方法があります。最も一般的な方法は、新しいコメントが投稿されるたびに再構築を行うことです。しかし、それではしっくりこないし、CI/CDの力を無駄にしてしまいます。

 

その代わり、最初の数十個のコメントをあらかじめ作っておくことにしました。そして、優れたSWRライブラリ（リモートでデータを取得するためのReact Hooksライブラリ）を使って再検証し、スクロールでさらにコメントを取得します。

 

このような仕組みになっています。

 

• 読者がその記事を訪れ、コメント欄にスクロールします。
• ファーストコメントは、プリビルドなのですぐに使える。
• swrはコメントの再検証を行い、データが古くなっていないかどうかをチェックします。コメントの次のバッチを取得します。

 

新しいコメントが表示されても、ページを再読み込みする必要はありません。swrは、フォーカス時とインターバル時の再検証を行います。ブログ管理者が新しいコメントを承認すると、訪問者全員に自動的に同期されます。