・・ 渋谷区神泉町のWeb制作Labが運営するメディアサイトです ・・

サイトスピード(PageSpeed Insights )改善します!

近年のHPにおいてサイト速度や、
サイトパフォーマンス(CoreWebVitals)は非常に重要になってきております。

こちらの記事でも解説しておりますが、
Google2024年からサイトパフォーマンスの指標に(INP)を正式採用するようです。

あのGoogleが力を入れているくらいなので、
Webサイトの指標として、今後さらにサイト速度やパフォーマンスなどは重要になっていくものかと思われます。

弊社ではこのあたり高い温度感を持って業務に取り組んでおります。

以下、弊社で行うサイト速度やサイトパフォーマンス(コアウェブバイタル)改善の一例になりますので、
もし少しでも気になることございましたら、お気軽にご相談いただけますと幸いです!

改善方法に関して

改善方法は状況によって様々ですが、
修正点を分類すると、

  • 利用サーバーの再選定
  • 利用技術の再選定
  • コードの書き方、テクニックなどで改善

の3つになるのかなと思います。

利用サーバーの再選定

サーバーとかは今使用しているものがあまりにもスペック低すぎる場合とかですね。

エックスサーバーさんとか、このはウィングさんとか使えれば、この部分で足を引っ張られることはそうないのかなと思います。
※AWSとか使ってオリジナルで建てていて、チューニングが必要な場合は話変わってくるかもですが。

弊社ではサーバー移管の経験も豊富にあるため、
もし気になった際にはご相談いただければ幸いです!

利用技術の再選定

こちらはもしかしたら聞いたことがあるかもしれないですが、
WordPressを使用すること自体が、サイト速度やパフォーマンスにとってそこまで良くなかったりします。

WordPressでユーザーにサイトを表示させるまでの流れが以下になるのですが、

  1. ユーザーのパソコンでドメイン叩いてサーバーにリクエスト送信
  2. 受けとったリクエストを元に、記事情報などサイトで表示するために必要な情報を取得するためのSQLを発行
  3. SQLで情報を受け取って、それを元にPHPでHTMLを生成する
  4. ユーザーがブラウザでページを見れるようになる

結構処理があります。

特にSQLやPHPでHTML生成するところは時間かかる場合ありますし、
実は4の後にもサイト速度やサイトパフォーマンスに影響が出るロジックがあったりします。

サイト処理のことを考えるとSSG

技術選定に話戻りますが、
実はこのあたりの処理をもっと軽くするための技術がここ数年出てきてまして、headlessCMSや、SSG/SSRなどといったワードがそれに当たります。

このあたり話出すとキリがないのであくまでざっくりとした説明になりますが、
headlessCMSでSSG構成でサイトを作った場合だと先ほどのWordPressでの処理が、

  1. ユーザーのパソコンでドメイン叩いてサーバーにリクエスト送信
  2. 事前に生成されたhtmlをユーザーに返却する
  3. ユーザーがブラウザでページを見れるようになる

これくらいまで簡略化します。
※細かいロジックは省いてますが。

また、SSGなどを利用する際には、
Next.jsといった技術を使うことになるのですが(wpでいうPHPのようなもの)

こちらの技術、サイトパフォーマンス(CoreWebVitals)向上のためのロジックがすでに含まれているため、この構成でサイトを作るだけで、サイトパフォーマンスが上がるケースが多いです。
※どのサーバー環境かは当然影響強いですが

あとは、使い慣れたWordPressはそのままにサイトを軽くしたい!
というっ方にはシフターもおすすめです。

コードの書き方、テクニックでの改善

最後にコードの書き方、テクニックでの改善です。
こちらは例えば、

  • キャッシュをGoogle推進の1年に設定
  • html、css、jsのコードを圧縮して軽くする
  • クリティカルCssを導入して、ファーストビュー部分のcssだけhtml上に記述する
  • Googleフォントの読み込み方を工夫して、処理速度を改善させる
  • 画像の次世代フォーマートのwebpを導入する
  • 画像を圧縮する
  • 事前にdnsプリフェチさせる
  • レイアウトシフト改善のため、imgタグには全てwidthとheightを入れる

などが挙げられます。
※先ほどのNext.jsではこのあたり何もしなくても標準で最適化してくれるものもあったりします

コードの書き方、テクニックでの改善が難しいのが、
PageSpeed Insights などで測定した結果を元に、
それぞれのサイトに合わせて適切にコードを調整していくことが必要になります。

当然コードの書き方、テクニックでの改善だけでは、改善できない場合もありますので、
その場合、弊社ではサーバー選定、技術選定から対応させていただいております。

弊社ではレポート作成なども対応しておりますので、まずはお気軽にご相談いただけますと幸いです!

Web製作Lab執筆者の声
Web製作Lab執筆者の声

Googleのアップデートは「これサイトの評価にどこまで関わってくるだろう?」と悩んでしまうことが多いですが、Googleは昔からユーザーファーストを掲げているため迷ったらユーザーにとってメリットがあるかどうかを判断基準にしています。
サイトスピードやパフォーマンスはユーザーの使いやすさに影響してくるため改善することで評価アップにつながると思います。まずはお気軽にご相談ください!

まとめ

サイトスピードや、サイトパフォーマンス(コアウェブバイタル)の改善例を紹介させていただきました。

弊社では、お客様の状況に合わせて、さまざまな手法を使用して対応させていただきますので、もし少しでも興味を持っていただけたら、相談ベースでも大丈夫ですのでお気軽にご連絡ください!

この記事の関連するページ