おもちゃの定額制レンタルサービス「トイサブ」のサイトでResizeCDNとUXSEOをやってみた

Writer:松岡宗谷松岡宗谷
Posted date:

新しい企画です。スタートアップ のサイトで疑似的に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を利用して画像の悩みを一気に解決しませんか?
  1. 圧縮はもちろん最新画像フォーマットにも対応
    ResizeCDNを利用すると圧縮・最新画像フォーマットに自動対応して配信できます。
  2. 全体対応・特定の箇所のみと柔軟なCDN配信が可能
    プッシュ型ならでは柔軟な対応とハイスピード最短1分でCDN化ができます。
  3. →より詳しく

著者プロフィール
松岡宗谷

画像特化型CDNサービス ResizeCDN https://resizecdn.com/ を開発・運営しています。スペースナビ 代表取締役。スタートアップ界隈でCTO→Sharetube創業→スペースナビ創業→画像に特化したCDN開発。個人の夢は完全義体化。会社の夢は宇宙事業。プログラマーは死ぬまで現役でありたい

Twitter:@mtoksuy