ep.3 FC2 爆速テンプレート を覗く

  • HANATANI Takuma(@potato4d)
  • Miyoshi Kosuke
2019/02/28 に公開957 views

このエピソードについて

自己紹介

miyoshi

  • livedoor入社(最後の正社員らしい)
    • 直後に彼女に振られてテンションがガタ落ちしている状態で、3次面接でやる気のない対応をしていたらなぜか受かった
    • 「以前国内の大手家電メーカーにいて、無意味な手続きが多い上にそれがユーザーには不利益しかもたらさないのが不満で辞めた」みたいなことを言ったらイデザワさんがメッチャ喜んでた
    • この時点でNHN JAPAN と合併することは既に決定していて、新聞にも出てた
    • 以前は社内SEみたいなことをやっていたり、メーカーで携帯電話のブラウザ検証用のサイトとかを作ったりしてました
    • 最近は LINE News の主にチャンネル面を担当してます

今週のフロントエンドについて

FC2 のテンプレートについての概要

  • FC2 ブログのテンプレートであること
  • シンプルなデザインの制限はあるものの、非常に高速な読み込みを提供していること
  • 中を覗いてみたら最新の Web 技術が詰まっていたこと

あたりを話して今回のテーマについて興味を持ってもらう?

FC2 テンプレートの構造とフロントエンドのパフォーマンス改善

  • miyoshi さんが調べた解析構造について紹介していく
    • 機能的な話
      • InstantClick の威力はワリと絶大だが、StaticなWEBサイトじゃないと後付で導入するのは問題がありそう
      • FC2の爆速テンプレートは ServiceWorker.js 自体をサーバー側が動的に生成してる(と思う)のが結構斬新
    • FC2 テンプレート全体を通しての所感
      • そもそも爆速だけどリソースを先にドカドカ食いますっていうのが本当に正義なのかはサービスに拠ると思う
      • FC2の実装自体をどう思うかは色々あると思うけれど、こういう大手がメジャーなサービスで速度によるUXの向上みたいなことを実施してきたのは、圧倒的にいいことだと思ってます

現実的な導入戦略について

  • 結局はサービス設計レベルで最適化されてないと、あまり意味はない
    • SPAだと結構事情が違うというかキャッシュさえあれば普通に爆速で動くので、なんかそういう(Vue.jsでいう)ディレクティブがあると安易に結果出るかも
  • 既にプリフェッチ戦略をきちんと立てているプロダクトも多いが、重くなっていくプロダクトにどこから導入していくとよいか
  • 私見を語れるとよさそう
    • ユーザーの多い商用プロダクトでCacheAPIを使うのは、個人的には結構怖いと思ってる(バグの再現が難しい、ユーザーのキャッシュを更新するのが難しい、動作検証が難しい)
    • そもそも簡単安全に実装できるキャッシュ戦略が無いのが原因
    • 爆速テンプレートだとServiceWorkerの更新がCacheの更新と一体化していて簡単安全にしてる(ように見える)

クロージング

  • FrontEnd 情報にある他のテーマについて読み上げ

BGM & SE: 魔王魂

採用について

使用素材・クレジット

© Presented by UIT