SlideshareとSpeakerDeckにおけるスライド表示方法の違い #JavaScript

なんで調べたか

SpeakerDeckのスライドにアクセスしたときに次のスライドへの読み込みが遅いと
よく感じていたため。
競合のSlideshareと比較して何が違うのか知りたかった。

SlideShare

遅延ロードやってる
Thumbnailもスライドもすべて遅延読み込み
ユーザーのインタラクションがあってから読み込むようになっている

例えば、最初に送りボタン ▶ がクリックされると1番目から9番目くらいまで
画像のリクエストが送られるようになる

簡略したものですが
初回読み込み時こうだったものが

<section data-index="9" class="slide" slidenumber="9">
  <i class="fa fa-spinner fa-spin"></i>
  <img 
  class="slide_image" 
  src="" 
  data-small="https://hoge.com/t-9-320.jpg?cb=xxxx" 
  data-normal="https://hoge.com/t-9-638.jpg?cb=xxxx"
  data-full="https://hoge.com/t-9-1024.jpg?cb=xxxx"
  title="" alt=""
  >
</section>

↓ ロード対象になると

<section data-index="9" class="slide" slidenumber="9" style="min-height: 0px;">
  <img 
  class="slide_image"
  src="https://hoge.com/t-9-638.jpg?cb=xxxx"
  data-small="https://hoge.com/t-9-320.jpg?cb=xxxx" 
  data-normal="https://hoge.com/t-9-638.jpg?cb=xxxx"
  data-full="https://hoge.com/t-9-1024.jpg?cb=xxxx"
  title="" alt=""
  >
</section>

src=“”に読み込み先が転記されます。

画像の置き場はドメインとってるだけでS3?
SlideShareのほうが転送量もかからないし効率的な運用になっている

細かいところですが、スライドが読み込まれてないときはloadingGifがでるように
なっているのも親切

SpeakerDeck

遅延ロードやってない(1リクエストですべて完結)
Thumbnailもスライドも一回のページリクエストですべて読み込むようになっている
Thumbnailやスライド画像はS3から
スライド領域はjsで動的に切り替えを行っている

何気にErlangを使っているのが気になりました。
cowboy(WAF)を使っている?

まとめ

技術的にはSlideShareのほうが
サービスにかかる原価やユーザーへの待ち時間が考慮されてるので
Slideshareにモノは上げ続けようと思います。

ゴリゴリにjs書いて管理してるんでしょうが。。