おもちゃの定額制レンタルサービス「トイサブ」のサイトでResizeCDNとUXSEOをやってみた
新しい企画です。スタートアップ のサイトで疑似的にResizeCDNとUXSEOをやってみたらどうなるんかな？という好奇心からスタートしましたが、気になったスタートアップから順にやっていこうと思います。
初回はおもちゃの定額制レンタルサービス「トイサブ」さんです。
- おもちゃの定額制レンタルサービス「トイサブ」
- 【ビフォー】「トイサブ」さんのページ表示スピード関連
- 【ビフォー】「トイサブ」さんのPageSpeed Insights評価
- 検証結果の注意点
- 「トイサブ」のサイトでResizeCDNを疑似的にやってみた
- 「トイサブ」のサイトでUXSEOを疑似的にやってみた
- 【アフター】「トイサブ」さんのページ表示スピード関連
- 【アフター】「トイサブ」さんのPageSpeed Insights評価
- 改善すべきポイント まとめ
目次
おもちゃの定額制レンタルサービス「トイサブ」
トイサブ！成長に合わせた上質なおもちゃを毎月定額でレンタル・お届けします
利用者は1万人突破しおもちゃに特化した定額制レンタルサービスとしては国内最大級との事です。個人的にもめちゃくちゃ気になるサービスで0歳時のプランが良ければ試してみたいなと思ってます笑
金額感も安くて毎月3,340円でなんと定価総額15,000円以上のおもちゃを隔月で交換してご利用できるようです。1日約111円なのでジュース代抑えるだけで何を選んだら良いかわからない赤ちゃんや子供のおもちゃをプロフェッショナルが個別に選んでくれるのはマジでありがたいサービス。
という事で、本題のResizeCDNとUXSEOをやっていきましょー
検証結果の注意点
- 注意点としては「トイサブ」さんのページのHTMLを持ってきて実際にサーバーで検証を行いましたが、検証ページ自体はSEO観点からオープンに致しません。
【ビフォー】「トイサブ」さんのページ表示スピード関連
初回表示スピード: 1.3s~3.2s
2回目以降のスピード:1.1s~1.5s
リクエスト数: 210ファイル
読み込み情報量: 14.60MB
【ビフォー】「トイサブ」さんのPageSpeed Insights評価
モバイル：15
PC：60
「トイサブ」のサイトでResizeCDNを疑似的にやってみた
HTMLでの検証ですのでCDN自動変換ツールでサクッと自動置換して検証致しました。簡単でした。5秒で作業は終わりです。
無事に52枚もの画像がRfesizeCDNにて正常に配信できるようになりました！パチパチ
画像めっちゃあるのでかなりの読み込み容量を削減できる事ができましたね！
初回表示スピード: 850ms~1.5s↑
2回目以降のスピード:800ms~1.2s↑
リクエスト数: 210ファイル
読み込み情報量: 8.80MB↑
モバイル：32↑
PC：76↑
とは言っても「トイサブ」のサイトの問題点は画像ではないのでそこまで劇的な変化はありませんでした。
「トイサブ」のサイトでUXSEOを疑似的にやってみた
改善するポイントが多かったですね。まずはJS。95%のjsが使用していないのに読み込まれているのでアナリティクス以外のjsを削除いたしました。まあ実際のUXSEOではクライアント様と相談して進めていくのですが、ここは独断で全て削除いたしました。(使ってないし)
CSSもインラインにしたかったのですが、スクレイピングできない外部ファイルがありまして、時間的にCSSインライン化の施策は行いませんでした。この施策もやればもっと評価が良かったと思います。
あとは見出し系のタグがあまり活用されてなかったので変更・追加は必要そうです。
最後にファイル自体を圧縮致しました。基本中の基本ですが、まずはこの4つのみの施策を行いました。
【アフター】「トイサブ」さんのページ表示スピード関連
初回表示スピード: 320ms~380ms↑
2回目以降のスピード:75ms~90ms↑
リクエスト数: 70ファイル
読み込み情報量: 3.04MB↑
【アフター】「トイサブ」さんのPageSpeed Insights評価
モバイル：87↑
PC：98↑
改善すべきポイント まとめ
動的ファイルと静的ファイルを比べんなよって声もあると思いますが、動的ファイルのhtml出力自体80msほどでしたのでそれを上乗せした計算でも結果は良い数値を叩き出せそうです。
- 使ってないjsは削除
- 正しいイケてるHTMLを記述する
- 画像に関してwebp配信はマスト
- 圧縮はもちろん最新画像フォーマットにも対応
ResizeCDNを利用すると圧縮・最新画像フォーマットに自動対応して配信できます。
- 全体対応・特定の箇所のみと柔軟なCDN配信が可能
プッシュ型ならでは柔軟な対応とハイスピード最短1分でCDN化ができます。