弊社コーポレートサイトは、すでにリニューアルを行ってから半年以上経過しているのですが、このリニューアルではWordPressで構築していたものを、静的サイトジェネレーター（SSG）を使った方法に切り替えています。静的サイトジェネレーターには、他のプロジェクトでもよく使っていたVue.jsのフレームワークであるNuxt.jsを採用しており、WordPressの記事情報はAPIで取得してページ上に表示させているという形になっています。   今回はリニューアルからかなり時間が経ってしまいましたが、WordPressから静的サイトジェネレーターに移行してからのサイトパフォーマンスの変化についてまとめてみたいと思います。静的サイトジェネレーターに使っているNuxt.jsに関しては、当メディアサイトでもいろんな記事を投稿していますのでそちらも合わせて参考にどうぞ。  

移行前後でのページロード時間の変化

まずはデベロッパーツールで実際にサイトのロード時間を計測してみます。ここでは比較的コンテンツ量が多いトップページを対象に静的サイトジェネレーターで構築した場合と比較していきます。実際の計測結果はこのようになりました。   【移行前のWordPressサイト】 DOMの解析完了：1.88秒 ページのロード完了：2.52秒 リクエスト数：100   【移行後の静的サイトジェネレーターサイト】 DOMの解析完了：0.37秒 ページのロード完了：0.49秒 リクエスト数：50   デザイン自体も変更になった部分もありますが、それでも大幅にロード時間が短縮されているのがわかります。WordPressではリクエストが行われるとサーバー側でページが構築されますが、静的サイトジェネレーターで作成したサイトは静的なHTMLページになりますので、そのままレスポンスとして返されますのでとても高速です。あとはWordPressの場合、システムに依存する様々なリソースが読み込まれることもあり、その分リクエストが増えたりロード時間にも影響してくるようですね。  

移行前後でのPageSpeed Insightsスコアの変化

続いてグーグルのPageSpeed Insightsでスコアを計測していきます。同じくトップページを対象にチェックしています。PageSpeed Insightsではデスクトップとモバイルに分けて計測することができます。   【移行前のWordPressサイト】 デスクトップ：68点 モバイル：59点   【移行後の静的サイトジェネレーターサイト】 デスクトップ：81点 モバイル：91点   移行後でもまだ改善の余地はありますが、スコアは大幅に改善できたことが確認できます。特にデスクトップ環境においては合格といってもいいのではないでしょうか。一部、デザインも変更したという背景もありますが、表示速度に対してはやはり静的サイトに軍配が上がりますね。ちなみにサーバー環境などは同じ条件となっていますので、単純にサイトの構築方法を変えるだけでここまで改善できることがわかります。  

移行前後でのLighthouseスコアの変化

最後にデベロッパーツールでもチェックできるLighthouseでのスコアを計測していきます。一部の指標に関しては先ほどのPageSpeed Insightsにも関係してくると言われており、おおよそ似たような傾向が出ることが予想されます。Lighthouseもデスクトップとモバイル両方の環境に対してチェックできます。詳しくは過去記事「Chromeの拡張機能「Lighthouse」でウェブサイトのパフォーマンスをチェックする」をご参考ください。   【移行前のWordPressサイト】 （モバイル） パフォーマンス：58点 アクセシビリティ：86点 ベストプラクティス：85点 SEO：88点 （デスクトップ） パフォーマンス：84点 アクセシビリティ：86点 ベストプラクティス：85点 SEO：92点   【移行後の静的サイトジェネレーターサイト】 （モバイル） パフォーマンス：85点 アクセシビリティ：96点 ベストプラクティス：100点 SEO：100点 （デスクトップ） パフォーマンス：97点 アクセシビリティ：96点 ベストプラクティス：100点 SEO：100点   今回の検証結果ではロード時間と合わせて大きな変化を実感できたのではないでしょうか。SEOに関しては、WordPressか静的サイトジェネレーターかはあまり関係ないと思いますが、それ以外の指標についてはこちらも大きく改善が見られました。デスクトップに関していえばほぼ満点という結果であると言えるでしょうか。  

WordPressから静的サイトジェネレーターに移行するメリットと気になるポイント

静的サイトジェネレーターでサイトを構築することで、サイトパフォーマンスの数値が改善されることは大きなメリットであるというのは間違いありません。また静的サイトとして運用されるので、表示速度だけでなくページ改ざんなどのセキュリティに関しても安全です。単純に静的コンテンツだけを見せるという要件であれば十分対応できると思います。   ただし、静的サイトジェネレーターでサイトを作成する場合には、実際に使用するジェネレーターツールの使い方や、あとはJavaScriptなどの知識が必要となってきます。この時に少なからず学習コストが発生するというのは考慮しておいたほうがいいかもしれません。   特にブログ記事をはじめとした動的コンテンツを表示させる際には、JavaScriptを使ってAPIでデータを取得したり、フィルタリングしてページ上へ出力するなどの処理が必要となるので、一気にハードルが上がります。また、メタ情報などページごとに値を切り分けて出力する必要があるものに関しては、それぞれ分岐させる仕組みも検討しなければなりません。とは言っても、パフォーマンスの観点からもメリットは大きいため今後このような静的サイトジェネレーターで構築されたサイトは増えてくるのではないでしょうか。  

---

  このように、各検証結果でも大きく改善が見られているのは数値として出ているのでよく分かりますが、実際にサイト閲覧時において体感としてもサクサクとページが表示され明らかに快適と感じるようになりました。ユーザビリティの観点からもかなり重要なポイントになるのではないでしょうか。WordPressで運用中のサイトをリニューアルする際には一度検討してみてもいいかもしれませんね。