遷移の高速化 ヤフートップの試行錯誤

LY社では、Webパフォーマンスの改善による高速化の取り組みを続けてきました。中でもbfcacheの有効化は、ユーザー影響が大きく重要視していた技術の一つです。
bfcache（バックフォワードキャッシュ）とは、ブラウザでページを遷移した時にページの完全なスナップショットとして保存されるメモリキャッシュを指し、有効化することで高速な遷移を実現することができます。
Yahoo!ニュースの例では、有効化することにより、PVが+2％向上、広告売上が+9％向上する結果がもたらされており、ユーザーにもより良い体験を提供することが出来ています。
ところが、一見メリットがあるだけに見えるこの対策にも「例外」がありました...。
"Yahoo! JAPAN トップページ"は、日本でも有数のアクセスを誇る巨大なWebサービスですが、本ページでbfcacheを有効化したところ、どういう理由かビジネスとしておっている広告売上やクリック数といった指標が、軒並み低下する事態となってしまったのです。
本セッションでは、bfcaheを有効化するための技術を振り返りながら、なぜユーザーメリットの高い施策によってビジネス指標が低下する事例があるのか、その謎について数値分析から迫り、最も苦戦した"Yahoo! JAPAN トップページ"で直面した課題を解決にまで到った流れをご説明します。

Transcript

1. ˜
   -:
   $PSQPSBUJPO -*/&Ϡϑʔגࣜձࣾ .BTBOBSJ
   )BNBEB ϒϥ΢βભҠͷߴ଎Խ Ϡϑʔτοϓϖʔδͷࢼߦࡨޡ CGDBDIFΛ༗ޮʹ͢ΔͱɺϏδωεࢦඪ͕མͪΔέʔε
2. ˜
   -:
   $PSQPSBUJPO .BTBOBSJ
   )BNBEB !OBSJSPX  -*/&Ϡϑʔגࣜձࣾ ΞϓϦέʔγϣϯΤϯδχΞ ө૾ྖҬͷٕज़ϦʔυΛܦͯɺ:BIPP
   +"1"/ͷτοϓϖʔδͷ։ൃΛ୲౰ɻ શࣾԣஅͱͯ͠ɺ8FCύϑΥʔϚϯενʔϜΛϦʔυɻ-*/&Ϡϑʔͷ਺ଟ͘ ͷαʔϏεύϑΥʔϚϯεΛվળ͍ͯ͠·͢ɻ ݩୈ୅8FCϑϩϯτΤϯυྖҬͷࠇଳɻ
3. ˜
   -:
   $PSQPSBUJPO  ֓ཁ -*/&ϠϑʔͰ͸ɺ͜Ε·Ͱ8FCύϑΥʔϚϯεͷվળʹ೪Γڧ͘औΓ ૊ΜͰ͖·ͨ͠ɻͦͷதͰ΋ʮCGDBDIFͷ༗ޮԽʯͷऔΓ૊Έ͸ɺ ϢʔβʔӨڹ͕େ͖͘ॏཁࢹ͍ٕͯͨ͠ज़ͷҰͭͰ͢ɻ l:BIPP
   +"1"/
   τοϓϖʔδz͸ɺͦͷCGDBDIF༗ޮԽʹ࠷΋ۤઓ͠ ͨڊେͳ8FCαʔϏεͰ͢ɻࠓճ͸ɺࢲୡ͕ͲͷΑ͏ʹͯ͠ʮϢʔ βʔମݧʯͱʮϏδωεࢦඪʯΛߟ͑ɺվળΛ࣮ࢪ͖͔ͯͨ͠ɺͦͷϓ ϩηεΛ͝঺հ͠·͢ɻ
4. ˜
   -:
   $PSQPSBUJPO "HFOEB  CGDBDIFʹ͍ͭͯ  શࣾͰCGDIBDIFΛ༗ޮԽ͢Δ  CGDBDIFΛ༗ޮԽ͢Δͱɺ਺஋͕௿Լ͢Δ  ·ͱΊ 
5. ˜
   -:
   $PSQPSBUJPO CGDBDIFʹ͍ͭͯ 
6. ˜
   -:
   $PSQPSBUJPO  CGDBDIFͱ͸ #'$BDIFʢόοΫϑΥϫʔυΩϟογϡʣ͸ɺϒϥ΢βͰϖʔδΛભҠͨ࣌͠ʹϖʔδͷ׬શͳεφο ϓγϣοτͱͯ͠อଘ͞ΕΔϝϞϦΩϟογϡΛࢦ͠·͢ɻ ༗ޮͷ৔߹ɺݩݟ͍ͯͨը໘͕ͦͷ··ϒϥ΢β্ʹ෮ݩ͞ΕΔܗͰදࣔ͞ΕΔͷͰɺ௨ৗͷભҠͱൺֱ ͯ͠ߴ଎ʹදࣔ͞Ε·͢ɻ
7. ˜
   -:
   $PSQPSBUJPO 
8. ˜
   -:
   $PSQPSBUJPO  CGDBDIF༗ޮແޮͷൺֱ CGDBDIF͕༗ޮͳ৔߹ͱແޮͷ৔߹Ͱൺֱͨ͠৔߹ɺϢʔβʔͷ࣮؀ڥͰ͸େ͖ͳҧ͍͕ൃੜ͠·͢ɻ ˞:BIPP
   χϡʔεͷϒϥ΢βόοΫਪҠ࣌ʹɺωοτϫʔΫ଎౓ΛҰகͤͨ͞ঢ়ଶͰܭଌ
9. ˜
   -:
   $PSQPSBUJPO શࣾͰCGDBDIFΛ༗ޮԽ͢Δ 
10. ˜
    -:
    $PSQPSBUJPO  -:ʹ͓͚ΔCGDBDIF༗ޮԽͷऔΓ૊Έ Ϡϑʔͷ؀ڥͰ͸ɺCGDBDIFΛ༗ޮԽͤ͞Δ͜ͱͰͲͷఔ౓ޮՌ͕͋Δͷ͔ΛݕূΛଓ͚͍ͯ·ͨ͠ɻ ৄࡉ͸ʮϠϑʔ
    CGDBDIFʯͰϠϑ͍ͬͯͩ͘͞ɻ
11. ˜
    -:
    $PSQPSBUJPO  :BIPP
    χϡʔεͷݕূ݁Ռ ΨλπΩͷͳ͍ ߴ଎ͳભҠ 17  ޿ࠂച্  ˠ ͜ΕΒͷ݁ՌΛ౿·͑ͯɺϠϑʔͰ͸શࣾతʹCGDBDIFΛ༗ޮԽ͢Δํ਑ΛͱΔ͜ͱʹɻ
12. ˜
    -:
    $PSQPSBUJPO  CGDBDIFͷ༗ޮԽΛ્ΉཁҼ ৄࡉ͸ׂѪ͠·͕͢ɺCGDBDIFΛ༗ޮԽ͢Δʹ͸ʮϒϥ΢β્֐ཁҼʯʮطଘͷϩά܏޲͕มԽͯ͠͠· ͏໰୊ʯʮΩϟογϡઃఆʯͳͲɺোนͱͳΔཁҼ͕ଟ਺͋Γɺશମతͳݟ௚͕͠ඞཁʹͳΓ·͢ɻ ແޮԽ͞ΕΔॲཧ VOMPBEΠϕϯτϋϯυϥ Ωϟογϡઃఆ DBDIFDPOUSPM
    OPTUPSF ࣮૷ࡁΈϩά
13. ˜
    -:
    $PSQPSBUJPO  -:Ͱ͸ɺͦΕͧΕͷཁҼΛਫ਼ࠪɺϠϑʔ؀ڥͰ༗ޮԽग़དྷΔΑ͏ʹεςοϓʹ෼͚ͯશମతͳमਖ਼Λ͔͚ ·ͨ͠ɻ ແޮԽ͞ΕΔॲཧ VOMPBEΠϕϯτϋϯυϥ Ωϟογϡઃఆ DBDIFDPOUSPM
    OPTUPSF ࣮૷ࡁΈϩά શࣾڞ௨1SPYZ͔Β Permissions-Policy: unload=() ϔομΛ෇༩ Cache-Control: no-store ΛՄೳͳൣғͰ΍Ίͯɺ ద੾ͳΩϟογϡઃఆʹ มߋ શࣾͷϩάΨΠυϥΠϯ ج४Λݟ௚͠ɺ࣮૷ࡁΈ ͷՕॴΛमਖ਼ CGDBDIFͷ༗ޮԽΛ્ΉཁҼΛશࣾతʹͳ͘͢
14. ˜
    -:
    $PSQPSBUJPO  CGDBDIF༗ޮԽ͕໰୊ͱͳΔέʔε ͜ͷରࡦʹΑͬͯɺݱࡏϠϑʔͷ໊Λؔ͢ΔαʔϏεͰ͸΄ͱΜͲͷϖʔδͰCGDBIFΛ༗ޮԽ͢Δঢ়ଶ Λ࡞Δ͜ͱ͕ग़དྷ͍ͯ·͢ɻ ϨεϙϯεϔομͳͲ͔Β֬ೝͯ͠Έ͍ͯͩ͘͞ ҰํɺҰ෦ͷέʔεͰ໰୊͕ൃੜ͢Δ͜ͱ΋Θ͔͖ͬͯ·ͨ͠ɻ͜ͷ͏ͪɺࠓճ͸ʹ͍ͭͯઆ໌͠·͢ɻ  ϒϥ΢βόοΫϑΥϫʔυͨ͠ࡍʹҙਤͤͣݹ͍දࣔͱͳΔ  CGDBDIFΛ༗ޮԽ͢ΔͱϏδωεࢦඪʹѱ͍Өڹ͕ग़Δ ຊ೔ͷ࿩୊
15. ˜
    -:
    $PSQPSBUJPO CGDBDIFΛ༗ޮԽ͢Δͱ ਺஋͕௿Լ͢Δ 
16. ˜
    -:
    $PSQPSBUJPO  :BIPP
    +"1"/
    τοϓϖʔδ 1$
    ͷݕূ :BIPP
    +"1"/ͷτοϓϖʔδ͸೔ຊͰେ͖ͳ17Λ༗͢ΔϖʔδͰɺCGDBDIF༗ޮԽʹ͋ͨͬͯ͸"# ςετΛ࣮ࢪͯ݁͠ՌΛݕূ͠ͳ͕Β৻ॏʹ͢͢Ί·ͨ͠ɻ
17. ˜
    -:
    $PSQPSBUJPO  CGDBDIFΛ༗ޮԽͨ͠࠷ॳͷςετͷ݁Ռ :BIPP
    +"1"/ͷτοϓϖʔδʹ͓͍ͯɺCGDBDIFΛ༗ޮԽͨ͠ࡍͷճ໨ͷςετ݁Ռɻ • ✅ Ϣʔβʔମݧ͸޲্ • 🙅Ϗδωεࢦඪ͸ݢฒΈ௿Լͨ͠  ओཁίϯςϯπͷΫϦοΫ਺ • ϝΠϯΧϥϜͷ਺஋͕௿Լ τϐοΫεɺλΠϜϥΠϯ • ӈΧϥϜͷ਺஋͕௿Լ  ܝࡌ͍ͯ͠Δ޿ࠂച্͕ 
    ϚΠφε
18. ˜
    -:
    $PSQPSBUJPO  τϐοΫε ΫϦοΫ਺$53௿Լ λΠϜϥΠϯ ΫϦοΫ਺$53͕ඍݮ ӈΧϥϜ ΫϦοΫ਺$53௿Լ ޿ࠂ $73ച্௿Լ
19. ˜
    -:
    $PSQPSBUJPO  Ұମͳͥ Ϣʔβʔମݧ͸໌Β͔ʹ޲্͍ͯ͠Δ͸ͣͳͷʹɺϏδωεࢦඪ͕௥ैͯ͜͠ͳ͍ɻΘͨͨͪ͠͸ճ໨ Ҏ߱ͷςετͰɺ༷ʑͳԾઆͷݕূΛ࣮ࢪ͠·ͨ͠ɻ୅දతͳԾઆ͕ҎԼʹͳΓ·͢ɻ Ծઆ ΋ͱ΋ͱޡΫϦοΫ͕ൃੜ͍ͯͨ͠ͷͰ͸ͳ͍͔ Ծઆ ϖʔδͷಈ࡞ʹରͯ͠ҧ࿨ײΛ๊͍͍ͯΔਓ͕ଟ͍ͷͰ͸ͳ͍͔ Ծઆ ϖʔδͷ಺༰͕ݹ͘ͳΔ͜ͱͰΫϦοΫ཰͕Լ͕ΔͷͰ͸ͳ͍͔ Ծઆ ॏཁͳ޿ࠂ্͕ͷํʹ͋Γɺ޿ࠂදࣔػձΛ௿Լ͍ͤͯ͞ͳ͍͔ʁ
20. ˜
    -:
    $PSQPSBUJPO  Ծઆ
    ΋ͱ΋ͱޡΫϦοΫ͕͋ͬͨͷͰ͸ վળલͷλΠϜϥΠϯ͸ɺ޿ࠂ͕දࣔ͞ΕΔࡍʹίϯςϯπ͕ԡ͠ͷ͚ΒΕɺ͍ΘΏΔΨλπΩ͕ൃੜ͠ ͍ͯ·ͨ͠ɻ͜ΕʹΑͬͯɺ࣮͸΋ͱ΋ͱͷΫϦοΫ਺஋ʹޡΓ͕͋ͬͨͷͰ͸ͳ͍͔ɺͱ͍͏఺Λݕূ ͠·ͨ͠ɻ ޡΫϦοΫΛҎԼͷ༷ʹఆٛ͠ɺ਺஋Խ ίϯςϯπΛΫϦοΫޙʹඵҎ಺ʹʮ໭ΔʯϘ λϯΛԡͯ͠τοϓϖʔδʹ࠶๚໰ͨ͠Ϣʔ βʔׂ߹ ݁Ռ
    CGDBDIF༗ޮԽͷ΄͏͕एׯߴ͍݁Ռʹ Ծઆ͸ؒҧ͍ͬͯͨ
21. ˜
    -:
    $PSQPSBUJPO  Ծઆ
    ಈ࡞มԽ΁ͷҧ࿨ײ͕͋Δ CBDLGPSXBSE͕͋·Γʹߴ଎ͳͷͰɺ͜Ε·Ͱͷڍಈͱҟͳ͍ͬͯΔΑ͏ʹײ͡ΔϢʔβʔ͕૿͍͑ͯ ͳ͍͔
    ͱͷԾઆΛௐࠪɻ $ISPNF౳ͷϒϥ΢β͕ߦ͍ͬͯΔௐࠪͷ܏޲Ͱ͸ɺϢʔβʔ͕ҧ࿨ײΛײ͡Δͱ·ͣͦͷϖʔδΛϦ ϩʔυ͢ΔՄೳੑ͕ߴ͘ͳΔ͜ͱ͕Θ͔͍ͬͯΔɻ͜ͷಛੑΛར༻ͯ͠ϖʔδͷϦϩʔυ཰Λࢉग़͢Δ ͜ͱͰɺϖʔδͷෆ۩߹΍ϢʔβʔӨڹΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δɻ Ϧϩʔυ཰ ݁Ռ
    CGDBDIF༗ޮͷ৔߹ɺ΄ͲϦϩʔυ཰͕ߴ͍݁ՌɻԿΒ͔ͷ໰୊Λײ͍ͤͯ͡͞Δɻ Ծઆ͸ਖ਼ͦ͠͏ͩ
22. ˜
    -:
    $PSQPSBUJPO  Ծઆ
    ϖʔδ಺༰͕ݹ͘ͳΔ͜ͱʹΑΔӨڹ CGDBDIFͷੜଘظؒ͸෼ͱఆٛ͞Ε͍ͯΔ͕ɺ)551Ωϟογϡ͔Β෮ݩ͞ΕΔ৔߹΋ଘࡏɻ ςετͰϖʔδͷੜ੒࣌ؒΛௐࠪͨ݁͠Ռɺ෼Ҏ্ͷܦաͨ͠ϖʔδΛӾཡ͍ͯ͠ΔϢʔβʔ͕ ఔ౓ൃੜ͍ͯ͠Δ͜ͱ͕Θ͔ͬͨɻ ͜ͷϢʔβʔʹରͯ͠ɺϖʔδΛڧ੍తʹϦϩʔυΛߦͬͨঢ়ଶΛͭ͘Δͱɺࢦඪʹվળ͕ΈΒΕͨɻ ݁Ռ
    ࣌ࣄίϯςϯπΛܝࡌ͢ΔαΠτͷಛੑ্ɺ ݹ͍ίϯςϯπͩͱΫϦοΫ਺͸௿Լ͠ɺ࠷৽ Խͨ͠৔߹ʹ਺஋͕޲্͢Δ͜ͱ͕Θ͔ͬͨ Ծઆ͸ਖ਼ͦ͠͏ͩ ΄ͱΜͲ͕࣌ࣄίϯςϯπ
23. ˜
    -:
    $PSQPSBUJPO  Ծઆ
    ޿ࠂදࣔػձΛ௿Լ͍ͤͯ͞ͳ͍͔ʁ τοϓϖʔδͷϖʔδಛੑͱͯ͠ӈΧϥϜ্෦ʹɺॏཁͳ޿ࠂ࿮Λܝग़͓ͯ͠Γ޿ࠂछผʹΑͬͯѻ͍͕ҟ ͳ͍ͬͯΔɻ • ӡ༻ܕ ࿮ΛೖࡳܗࣜͰߪೖ͠ɺڝΓউͬͨ޿ࠂΛ഑৴͢Δܗࣜ • ༧໿ܕ ࿮Λ͋Β͔͡Ίߪೖ͠ɺܾΊΒΕ͕ͨࣾ഑৴͢Δܗࣜ ӡ༻ܕͷϚΠφεӨڹ͸ͳ͔ͬͨ΋ͷͷɺ༧໿ܕ ͷදࣔػձ͕௿Լͨ͜͠ͱͰɺશମͷച্͕ϚΠ φεͱͳ͍ͬͯͨɻ Ծઆ͸ਖ਼͔ͬͨ͠
24. ˜
    -:
    $PSQPSBUJPO ՄࢹྖҬ ՄࢹྖҬ  CGDBDIFແޮͷͱ͖ "% ભҠ͠ϒϥ΢βόοΫ "% ՝ۚ ՝ۚ ϖʔδ͕࠶औಘ͞ΕΔ ޿ࠂ΋࠶औಘ͞ΕΔ
25. ˜
    -:
    $PSQPSBUJPO ՄࢹྖҬ ՄࢹྖҬ  CGDBDIF༗ޮͷͱ͖ "% ભҠ͠ϒϥ΢βόοΫ "% ՝ۚ ϖʔδ͕CGDBDIF͔Β෮ݩ ޿ࠂ͸ͦͷ·· ༗ޮͷ৔߹͸ɺϖʔδ͕࠶औಘ͞Εͳ͍ͷͰ޿ࠂͷίϯςϯπ಺༰͕มԽͤͣɺදࣔ΋ͦͷ··ͱͳΔɻ
26. ˜
    -:
    $PSQPSBUJPO  ͜ΕΒͷԾઆΛ౿·͑ͯ ͜ΕΒͷԾઆ͔ΒओʹҎԼͷͭͷରࡦΛ௥Ճ͠ɺෳ਺ճͷ"#ςετΛ࣮ࢪݕূ͠·ͨ͠ɻ • ରࡦ
    ίϯςϯπͷ઱౓ΛอͭΑ͏ʹ෼ͷܦաͰϦϩʔυ ݹ͍ίϯςϯπ͕ΫϦοΫ͞Εͳ͍ಛੑͷͨΊɺ෼Ҏ্ܦաͨ͠Ωϟογϡ͕࢖༻͞Εͨ৔߹ʹ͸ɺεΫϩʔ ϧҐஔΛอͪͭͭը໘Λڧ੍తʹϦϩʔυ͢Δಈ࡞Λ௥Ճɻ • ରࡦ
    ϒϥ΢βભҠ࣌ʹ޿ࠂ͚ͩ࠶Ҿ͖౰ͯ͢Δػೳͷ։ൃ طଘͷ༧໿ܕ޿ࠂͷػೳʹ͸ϒϥ΢βόοΫ࣌ʹ࠶Ҿ౰Λߦ͏࢓૊Έ͕ͳ͔ͬͨͨΊɺ഑৴ͷ࢓૊ΈΛݟ௚͠ɺ ϖʔδΛϦϩʔυͤͣͱ΋޿ࠂͷΈࠩ͠ସ͑ΔػೳΛ௥Ճɻ
27. ˜
    -:
    $PSQPSBUJPO  ରࡦΛߦͬͨςετ݁Ռ • ✅ Ϣʔβʔମݧ͸޲্ • ✅
    Ϗδωεࢦඪ΋޲্  ओཁίϯςϯπͷΫϦοΫ਺͸༗ҙࠩͳ͠ɺ·ͨ͸޲্ ϝΠϯΧϥϜͷओཁ਺஋͸ίϯςϯπߋ৽ੑΛ୲อͨ͜͠ͱʹΑͬͯΫϦοΫ਺͕޲্  ܝࡌ͍ͯ͠Δ޿ࠂച্͸ᆝଛͳ͠ʹ ࠶Ҿ౰͢Δػೳ௥ՃʹΑͬͯɺϚΠφεͷඇৗʹେ͖ͳϏδωεΠϯύΫτΛճආ :BIPP
    +"1"/ͷτοϓϖʔδʹ͓͍ͯɺCGDBDIFΛ༗ޮԽͨ͠ࡍͷ࠷ऴతͳςετ݁Ռɻ
28. ˜
    -:
    $PSQPSBUJPO ·ͱΊ 
29. ˜
    -:
    $PSQPSBUJPO  ݁Ռ͔ΒΘ͔Δ͜ͱ CGDBDIFΛ༗ޮԽ͢ΔͱɺҰൠతʹ͸ • ϒϥ΢βભҠͷ69͸େ͖͘޲্ • ଟ͘ͷέʔεͰ͸Ϗδωεࢦඪ΋޲্͢Δ ͨͩ͠ɺҰ෦ͷέʔεͰ͸ • ߋ৽ੑ͕ඞཁͳ৔߹ɺ௕ظؒͷΩϟογϡʹΑͬͯΫϦοΫ਺௿ԼͷՄೳੑ͕͋Δ Ωϟογϡͷ55-Λܭࢉ͠ɺίϯςϯπͷߋ৽ॲཧΛߦ͏͜ͱͰվળͰ͖Δ • ϖʔδ্෦ʹॏཁίϯςϯπ͕͋Δ৔߹ɺܝग़ػձʹӨڹ͢Δ৔߹͕͋Δ ಛʹ༧໿ܕ޿ࠂͳͲɺ޿ࠂछผ΍ܝࡌՕॴʹԠͯ͡࠶Ҿ౰Λݸผʹ࣮ࢪ͢Δ͜ͱͰվળͰ͖Δ
30. ˜
    -:
    $PSQPSBUJPO  ΤϯδχΞ͔Βࣄۀߩݙ͢Δͱ͍͏͜ͱ αʔϏεʹ͓͚Δ։ൃ͸࠷ऴతʹ͢΂͕ͯʮϢʔβʔମݧʯͱʮ࣋ଓతͳࣄۀ੒௕ʯʹͭͳ͕͍ͬͯΔɻ Ϣʔβʔମݧ ޲্ ࣋ଓతͳࣄۀ ੒௕ ૊৫͕େ͖͘ͳΔʹͭΕͯɺͳʹ͔ͷ෦ͷ࡞ۀ͚ͩΛ΍Δ͜ͱ΋૿͑Δ͕ɺͦΕ͚ͩͰ͸׆༂ͷ෯͸খ ͘͞ͳΔɻ ஌ࣝͷ෯Λ޿͛ɺΤϯδχΞ͔ͩΒͦ͜ग़དྷΔࢹ఺ΛϓϩμΫτʹ΋൓ө͢Δ͜ͱΛߟ͑ΔͱɺΩϟϦΞ ͷ෯Λ޿͛Δ͜ͱ͕ग़དྷΔɻ
31. ˜
    -:
    $PSQPSBUJPO