Cloudflare Images + Workers KVで お手軽&低コスト画像最適化をしたかった

Kyoto Tech Talk #7 学生LT枠で登壇した際の資料です。
進捗があり次第このdescriptionにGitHubのrepositoryのURLが貼られると思われます

Transcript

1. $MPVEGMBSF *NBHFT
   
   8PSLFST
   ,7Ͱ ͓खܰ௿ίετը૾࠷దԽΛ͠Α͏ ژ౎࢈ۀେֶ ৘ใཧ޻ֶ෦
   ճੜ ਆాر
2. ࣗݾ঺հ • ਆా ر • ژ౎࢈ۀେֶ ৘ใཧ޻ֶ෦
   ճੜ • ਧ૗ָ͕޷͖Ͱ͢ • /FYUKTΛॻ͍͍ͯ·͢ • ௕ظΠϯλʔϯ͸͡Ί·ͨ͠ 2025/02/07 Kyoto Tech Talk #7 2 https://github.com/nenrinyear https://x.com/nenrin_yearring
3. ը૾࠷దԽͯ͠·͔͢ʁ✋ ݸਓ։ൃͰ 2025/02/07 Kyoto Tech Talk #7 3
4. ը૾࠷దԽ • 4&0తʹྑ͍ͱ͞Ε͍ͯΔ 
   ༏ΕͨϢʔβʔ
   ΤΫεϖϦΤϯεΛఏڙ͢Δʹ͸ɺαΠτͰ 
   -BSHFTU
   $POUFOUGVM
   1BJOU
   Λ 
   ඵҎԼʹऩΊΔΑ͏ʹ͠·͢ɻ (Ҿ༻: https://web.dev/articles/lcp?hl=ja#what-is-a-good-lcp-score) • ݸਓ։ൃͩͱը૾શ෦Λѹॖͯ͠8FC1ʹ͢Δͷ΋ྑ͍ • /FYUKT
   
   7FSDFMͩͱOFYUJNBHFΛ࢖͏ͱউखʹ࠷దԽͯ͘͠ΕΔ IUUQTWFSDFMDPNEPDTJNBHFPQUJNJ[BUJPO 2025/02/07 Kyoto Tech Talk #7 4
5. ը૾࠷దԽ • 4&0తʹྑ͍ͱ͞Ε͍ͯΔ 
   ༏ΕͨϢʔβʔ
   ΤΫεϖϦΤϯεΛఏڙ͢Δʹ͸ɺαΠτͰ 
   -BSHFTU
   $POUFOUGVM
   1BJOU
   Λ 
   ඵҎԼʹऩΊΔΑ͏ʹ͠·͢ɻ (Ҿ༻: https://web.dev/articles/lcp?hl=ja#what-is-a-good-lcp-score) • ݸਓ։ൃͩͱը૾શ෦Λѹॖͯ͠8FC1ʹ͢Δͷ΋ྑ͍ • /FYUKT
   
   7FSDFMͩͱOFYUJNBHFΛ࢖͏ͱউखʹ࠷దԽͯ͘͠ΕΔ IUUQTWFSDFMDPNEPDTJNBHFPQUJNJ[BUJPO 2025/02/07 Kyoto Tech Talk #7 5 • ຖճѹॖͯ͠ΦϒδΣΫτετϨʔδʹอଘ ˠखܰͰ͸͋Δ͕ɺϋοΧιϯɾݸਓ։ൃͰຖճॻ͖ͨ͘ͳ͍ʜ • OFYUJNBHF
   
   7FSDFMͰࣗಈ࠷దԽ ˠ7FSDFMҎ֎ͰσϓϩΠͰ͖ͳ͍ʜ
6. $MPVEGMBSF
   *NBHFTͰը૾ม׵αʔϏεΛݐͯΑ͏ʂ ελοΫ
   • $MPVEGMBSF
   *NBHFT • $MPVEGMBSF
   8PSLFST • $MPVEGMBSF
   8PSLFST
   ,7 • )POP 2025/02/07 Kyoto Tech Talk #7 6
7. ׬੒͍ͯͨ͠Β͜͜ͰσϞ͕ೖΔ👀 2025/02/07 Kyoto Tech Talk #7 7
8. ׬੒͍ͯͨ͠Β͜͜ͰσϞ͕ೖΔ👀 2025/02/07 Kyoto Tech Talk #7 8 Կ΋͍ͯ͠ͳ͍ͷʹಥવಈ͔ͳ͘ͳͬͨʜ
9. બఆཧ༝ •$MPVEGMBSF
   *NBHFTΛ બΜͩ࠷େͷཧ༝ μογϡϘʔυͷαΠυόʔʹ ໘നͦ͏ͳػೳ͕͔͋ͬͨΒ 2025/02/07 Kyoto Tech Talk #7 9
10. ଎ղ$MPVEGMBSF
    *NBHFT • ΤϯυπʔΤϯυͰը૾ΛϗεςΟϯάɺ࠷దԽ·Ͱߦ͏ • $MPVEGMBSFͷ$%/্Ͱ࣮ߦ͞Εߴ଎഑৴͕Մೳ • αΠζɾϑΥʔϚοτΛΤοδଆͰಈతʹม׵ɾ࠷దԽ • ࣗಈతʹϢʔβʔ؀ڥʹ߹Θͤͨܗࣜʢ8FC1"7*'
    ͳͲʣ ΛఏڙՄೳ • গ͠લʹྉۚମܥ͕มΘΓɺແྉͰ΋࢖͑ΔΑ͏ʹͳͬͨ • $%/ͱಉ࣌࢖༻ͷΠϝʔδ • ;0/&ઃఆͱޙड़͢ΔADEODHJʜAͷ63-͕͋ΔͨΊ 2025/02/07 Kyoto Tech Talk #7 10 $MPVEGMBSF
    *NBHFT
    c
    0WFSWJFX
    
    IUUQTEFWFMPQFSTDMPVEGMBSFDPNJNBHFT
11. $MPVEGMBSF
    *NBHFT
    ৽ྉۚϓϥϯ 2025/02/07 Kyoto Tech Talk #7 12
12. ଞʹ΋ը૾ม׵αʔϏε͸͋Δ • *NBHF
    'MVY • QJYJWͱ͘͞ΒΠϯλʔωοτ ͕ڞಉ։ൃ • సૹྔ՝੍ۚ • อଘػೳ͸ͳ͍ 4͔Β 3&45"1*Ͱ࣋ͬͯ͜ΕΔΒ͠ ͍ 2025/02/07 Kyoto Tech Talk #7 13
13. ଎ղ$MPVEGMBSF
    8PSLFST
    
    8PSLFST
    ,7 • 8PSLFST • &EHF্ͰεΫϦϓτΛಈ࡞ͤ͞ΔαʔόʔϨε࣮ߦ؀ڥ • 8PSLFST
    ,7 • 8PSLFST͔Βݺͼग़͠ՄೳͳLFZWBMVFܕετϨʔδ • ௿ϨΠςϯγ • ࠷େ.#·ͰอଘՄೳ • 7BMVFʹBSSBZ#VGGFS͕ೖΔ
    ˡ
    ʂ 2025/02/07 Kyoto Tech Talk #7 14
14. ࣮͸*NBHFTͷΈͰ΋ಈ࡞͢Δ • ެࣜʹOFYUJNBHF༻ͷυΩϡϝϯτ͕༻ҙ͞Ε͍ͯΔ $MPVEGMBSF
    *NBHFT c
    *OUFHSBUF
    XJUI
    GSBNFXPSLT
    IUUQTEFWFMPQFSTDMPVEGMBSFDPNJNBHFTUSBOTGPSNJNBHFTJOUFHSBUFXJUIGSBNFXPSLT • ҎԼͷ63-Ͱ*NBHFT͕ಈ࡞͍ͯ͠ΔͷͰɺͦ͜ʹ௚઀ OFYUJNBHFͷMPBEFSΛ͚ͭΔͱྑ͍Β͍͠ IUUQTFYBNQMFDPNDEODHJJNBHF\QBSBNT4USJOH^\OPSNBMJ[F4SD TSD ^ • ͔͠͠ɺ͜ͷํ๏ͩͱը૾͕ݺ͹ΕΔࣄʹຖճม׵ॲཧ͕ ೖͬͯ͠·͏ ˠ8PSLFSTͰը૾ΛΩϟογϡ͢Δͷ͕ྑͦ͞͏ ઌۦऀ͕͍Δ 2025/02/07 Kyoto Tech Talk #7 15
15. 2025/02/07 Kyoto Tech Talk #7 16
16. ࣗռΛࠐΊͯʜ •Կ΋͍ͯ͠ͳ͍ͷʹյΕΔ͜ͱ͸ͳ͍ͷͰɺ όʔδϣϯ؅ཧΛ͠Α͏ •$MPVEGMBSF࠷ߴʂ)POP࠷ߴ͔΋ʂ 2025/02/07 Kyoto Tech Talk #7 17
17. $MPVEGMBSF
    *NBHFT
    
    8PSLFST
    ,7Ͱ ͓खܰ௿ίετը૾࠷దԽΛ͠Α͏ ͔ͨͬͨ͠ ژ౎࢈ۀେֶ ৘ใཧ޻ֶ෦
    ճੜ ਆాر
18. ҒେͳΔઌۦऀ༷ํࢀߟࢿྉ • IUUQTWFSDFMDPNEPDTJNBHFPQUJNJ[BUJPO • IUUQTXFCEFWBSUJDMFTMDQ IMKBXIBUJTBHPPEMDQTDPSF • IUUQTIPOPEFWEPDT • IUUQT[FOOEFWZVTVLFCFBSUJDMFTBCFGLW • IUUQTDPNNVOJUZDMPVEGMBSFDPNUJTJUPLUPTFSWFJNBHFTGSPN XPSLFSTBOELW • IUUQTUFDITNBSUDBNQDPKQFOUSZQSJDFPQUJNJ[BUJPOVTJOH DMPVEGMBSFXPSLFSLW • IUUQT[FOOEFWOBQPSJOBSUJDMFTFCDBC • IUUQT[FOOEFWEEQOBSUJDMFTDMPVEGMBSFJNBHFTDBDIJOH 2025/02/07 Kyoto Tech Talk #7 19