Ownedmedia ウェブ制作に役立つコンテンツを発信中!

制作実践・パフォーマンス向上 2021.04.09

WordPressから静的サイトジェネレーターに移行後のサイトパフォーマンスの変化をチェックしてみる

Tags: ,,
最終更新日:Update

弊社コーポレートサイトは、すでにリニューアルを行ってから半年以上経過しているのですが、このリニューアルでは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で運用中のサイトをリニューアルする際には一度検討してみてもいいかもしれませんね。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?