Google PageSpeed Insightsより
「ONIMARU」の最適化で
表示速度(First Contentful Paint)が28%向上
しました。
Google PageSpeed Insightsより
Google PageSpeed Inshighs Before/After
「ONIMARU」の最適化で、モバイルページのパフォーマンススコアと指標が以下のように変化しました。WEXAL® Page Speed Technologyの導入により同様の効果が出る見込みがあります。
Before
オリジナルのサイト
| First Contentful Paint |
4.3 秒 |
| Speed Index |
5.6 秒 |
| Largest Contentful Paint |
6.5 秒 |
| Time to Interactive |
10.9 秒 |
| Total Blocking Time |
180 ミリ秒 |
| Cumulative Layout Shift |
0.104 |
After
最適化済みサイト
| First Contentful Paint |
3.1 秒
（-1.2秒）
|
| Speed Index |
7.7 秒
（2.1秒）
|
| Largest Contentful Paint |
5.5 秒
（-1.0秒）
|
| Time to Interactive |
17.4 秒
（6.6秒）
|
| Total Blocking Time |
910 ミリ秒
（733ミリ秒）
|
| Cumulative Layout Shift |
0.08
（-0.024）
|
※ドメインに依存する項目は正常に表示されないことがあります
重要指標のバランスから課題を探す
右側の速度の指標が低い場合はサーバに、左側のレンダリングの指標が低い場合には画像などのリソースやレンダリングに
課題が多くある可能性があります。
スコア ： ページのパフォーマンスに関する総合的なスコアです。
LCP(Largest Contentful Paint) : 最も大きなテキストまたは画像が描画されるまでにかかった時間です。LCP を高速にすることで、そのページが有益であることをユーザーに印象付けることができるようになります。
FCP(First Contentful Paint) : テキストまたは画像が初めてペイントされるまでにかかった時間です。FCP を高速にすることで、そのページが動作していることをユーザーがわかるようになります。
TBT(Total Blocking Time) : タスクの処理時間が 50 ミリ秒を上回った場合の、コンテンツの初回描画から操作可能になるまでの合計時間（ミリ秒）です。Core Web VitalsのFIDのスコアに近似します。TBT が低ければ低いほどページが確実に使用可能となることを示しています。
CLS(Cumulative Layout Shift) : ビューポート内の視覚要素がどのくらい移動しているかを測定する指標です。
参考：https://web.dev/
主要な改善項目と改善結果
「PageSpeed Inshighs」の「改善できる項目」の中から「ONIMARU」での改善効果の高かった項目をピックアップしました。この結果を参考に改善効果が高いものから対応していくと良いでしょう。
| # |
オリジナルのサイト（短縮できる時間） |
高速化済サイト（短縮できる時間） |
| テキスト圧縮の有効化 |
0.600秒 |
0.300秒
100%改善 |
改善項目に対する対策
改善項目としてあげられることが多い項目に対する対策をまとめました。軽量化することとファーストビューの表示に必要ないものを遅延読み込みさせることが高速化のコツです。
世代フォーマットでの画像の配信
画像をWebPに代表される次世代フォーマットに変換して軽量化します。ブラウザによって対応しているフォーマットが異なるので適切に出し分けをする必要があります。
適切なサイズの画像
サムネイル画像などをCSSで縮小して表示していたりしませんか？適切なサイズで画像を配信して読み込み時間とデータ量を削減します。
オフスクリーン画像の遅延読み込み
ファーストビューで表示されない画像は遅延読み込みさせます。
レンダリングを妨げるリソースの除外
ファーストビューの表示に必要のないCSS、JavaScriptは遅延読み込みさせましょう。
高速化はAIにおまかせ！
改善項目に挙げられるような対策を常にすべてのページに対して行い続けるのはとても大変です。
Web高速化エンジン「WEXAL® Page Speed Technology」と 戦略AI 「David」は自動でそれぞれのページに最適な高速化を行うので、コンテンツや施策などに集中できるようになります。
WEXALについて
サーバーの応答時間から課題を探す
あなたのサイトのサーバーの応答時間は49ミリ秒でした。
サーバの応答時間は200ミリ秒以下にすることが推奨されています。
以下のグラフは日本の約29万のWordPressサイトのサーバー応答時間を調査した結果の分布です。とくにWordPressサイトで2秒以上の場合、サーバの速度やアプリケーションの処理に何らかの問題がある可能性があります。
データ量とリクエスト数を削減
リクエスト数やページの容量も高速化の重要な指標です。クラウドでは転送量がコストに比例するので
リソースを最適化することはコストの削減にもつながります。
ウェブページの読み込みを高速化するために何をすればいいのでしょうか。ウェブページの高速化では、以下の 3 つの要素が重要となります。
- 表示にかかる時間（目標は 3 秒未満）
- リクエスト数（目標は 80 回未満）
- ページ容量（目標は 1MB 未満）
Googleの推奨する目標値の「リクエスト数80回未満、ページ容量1MB未満」に近づけましょう。
| # |
DomContentLoaded |
転送量 |
リクエスト数 |
| 現サイト |
0.632秒 |
1.055MB |
149 |
| 高速化済みサイト |
2.778秒(2.146秒) |
2.463MB(1.408MB) |
186(37) |
コンバージョンシミュレーション※
- 売上が12% UP
- ページビューが13.2% UP
- コンバージョンが8.4% UP
※表示速度をFirst Contentful Paintの数値として改善結果と以下のデータをもとに算出しています。効果を保証するものではありません。
- 表示速度が0.1秒遅くなると売上が1％減少する。(Amazon)
- 1秒遅くなるとページビューが11％下がる。
- カスタマー満足度が16％下がる。
- コンバージョン率が7％下がる。(Aberdeen Group)
コアウェブバイタル(Core Web Vitals)に注目
2021年6月からコアウェブバイタル(Core Web Vitals)が検索のランキングの指標に加わりました。
コアウェブバイタル(Core Web Vitals)はWebのユーザー体験に関する指標でもあるため、対応することはユーザー体験の向上につながり、ユーザー体験の向上はPVや回遊率などのコンバージョンの向上につながります。
そのため、特にメディアや広告で収益をあげているようなサイトにとって「収益に直結する」重要な変化として注目されているのです。
コアウェブバイタル(Core Web Vitals)を最適化する高速化ソリューション
KUSANAGIとWEXAL®はコアウェブバイタル(Core Web Vitals)を最適化する高速化ソリューションです。
コアウェブバイタル(Core Web Vitals)最適化はツールに任せて、Webサイトの価値を高めるコンテンツ作成や施策に集中しましょう。
サイトに合わせた高速化をご提案
サイトの種類や状態によって高速化の手法は少しづつ異なります。
アクセス集中時に表示が遅くなる、など高速化のお悩みをお気軽にご相談ください。
あなたのサイトに合わせた高速化ソリューションをご提案します。
