LCP / FID / CLSを改善する実装方法

microCMSを用いた高速でSEOに強いセキュアなサイト（Jamstack構成）の構築方法やmicroCMSとimgixを組み合わせて簡単にCore Web Vitals対策を行う方法について発表したスライドです。
実際のサイトでスコアの改善（63点→82点）も行いました。

Transcript

1. ͝ར༻
   اۀ਺ ͝ܖ໿
   ܧଓ཰ Ҏ্ ˋ  ࣾ Ҏ্ ฤूऀ΋࢖͍΍͍͢
   ೔ຊ੡ϔουϨε$.4
2. ϔουϨε$.4ͱ͸Կ͔ʁ ैདྷ$.4 ϔουϨε$.4 8FCαΠτ σʔλϕʔε ؅ཧը໘ σʔλϕʔε ؅ཧը໘ ӡ༻ऀ ӡ༻ऀ 8FCαΠτ ϞόΠϧΞϓϦ ళ಄αΠωʔδ ֎෦σʔλ
   &Y
   ళฮσʔλɺސ٬σʔλɺ঎඼σʔλ ࣗࣾαʔϏε Ի੠σόΠε طଘσʔλͱ࿈ܞ ෳ਺νϟωϧͰͷίϯςϯπ׆༻ ߋ৽ ߋ৽ $.4෦෼ $.4෦෼ "1* "1*
3. σϞ
4. $PSF
   8FC
   7JUBMT
   ରࡦ
5. ᶃ
   +BNTUBDL
6. +BNTUBDLͱ͸ ࣄલʹੜ੒͞ΕͨHTMLΛCDN͔Β഑৴͢Δ͜ͱͰɺߴ଎Ͱ 
 ηΩϡΞͳαΠτΛ࣮ݱ͠·͢ɻ 
 ΢Σϒαʔόʔͷ؅ཧ΍࣮ߦ͸ඞཁ͋Γ·ͤΜɻ https://jamstack.org/ Fast and secure sites and apps delivered by pre-rendering fi les and serving them directly from a CDN, removing the requirement to manage or run web servers.
7. ग़యɿIUUQTKBNTUBDLPSH
8. Α͋͘ΔJamstackͷߏ੒
9. w ඞཁͳͷ͸੩తϑΝΠϧͷϗεςΟϯάͷΈ
   w /FUMJGZɺ(JU)VC
   1BHFTɺ"NB[PO
   4ɺ7FSDFMͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ
   w "1*ίʔϧ͸Ϗϧυ࣌ͷΈ
   w "1*ϦΫΤετ਺ͷ੍ݶ͕͋ͬͯ΋҆৺
   w ສ͕Ұɺ"1*͕མͪͯ΋҆৺
   w ηΩϡΞˍϋΠύϑΥʔϚϯεˍڧ4&0ˍϩʔίετ +BNTUBDLͷϝϦοτ
10. ᶄ
    ը૾ͷ࠷దԽ
11. NJDSP$.4ϒϩάΛ୊ࡐʹਐΊΔ ͜ͷ෦෼
    Λमਖ਼͍͖ͯ͠·͢
12. ֘౰෦෼ͷιʔείʔυʢ/VYU੡ʣ <img :src="content.ogimage.url" class="ogimage" alt />
13. ը૾αΠζΛௐ੔ <img :src="content.ogimage.url + '?w=670'" class="ogimage" alt /> 
    JNHJYͷXύϥϝʔλΛར༻ͯ͠ը૾αΠζΛௐ੔͢Δ
14. ࣍ੈ୅ϑΥʔϚοτʢ8FC1ʣΛར༻  *NHJYͷGNύϥϝʔλΛར༻ͯ͠ը૾ϑΥʔϚοτΛม׵͢Δ
     QJDUVSFλάΛ༻͍ͯɺରԠσόΠεʹԠͯ͡ϑΥʔϚοτΛग़͠෼͚ <picture> <source type="image/webp" :srcset="content.ogimage.url + '?w=670&fm=webp'" /> <img :src="content.ogimage.url + '?w=670'" class="ogimage" alt /> </picture>
15. ը૾Λ஗ԆಡΈࠐΈͤ͞Δ  MB[ZTJ[FTΛར༻ͯ͠ɺը૾Λ஗ԆಡΈࠐΈͤ͞Δ
     TSDΛEBUBTSDʹมߋɺDMBTTʹMB[ZMPBEΛ௥Ճ͢Δ <picture> <source type="image/webp" :data-srcset="content.ogimage.url + '?w=670&fm=webp'" /> <img :data-src="content.ogimage.url + '?w=670'" class=“ogimage lazyload” alt /> </picture> ࢀߟɿIUUQTXFCEFWCSPXTFSMFWFMJNBHFMB[ZMPBEJOHIPXEPJIBOEMFCSPXTFSTUIBUEPOUZFUTVQQPSUMB[ZMPBEJOH
16. ԣ෯ɺߴ͞Λࢦఆͯ͠ϨΠΞ΢τγϑτΛͳ͘͢  NJDSP$.4ͷ"1*͔ΒXJEUI
    IFJHIU͕ฦ٫͞ΕΔͷͰJNHλάʹࢦఆ͢Δ
     Ϩεϙϯγϒͷ৔߹͸$44Ͱ
    XJEUI
    
    IFJHIU
    BVUP
    ͳͲ΋ࢦఆ͢Δ <picture> <source type="image/webp" :data-srcset="content.ogimage.url + '?w=670&fm=webp'" /> <img :data-src="content.ogimage.url + ‘?w=670'" :width=“content.ogimage.width" :height=“content.ogimage.height" class=“ogimage lazyload” alt /> </picture>
17. ݁Ռʢ఺ˠ఺ʣ
18. w NJDSP$.4Λ༻͍Δͱߴ଎Ͱ4&0ʹڧ͘ηΩϡΞͳαΠτ ʢ+BNTUBDLߏ੒ʣΛߏஙͰ͖Δ
    w NJDSP$.4ͱJNHJYΛ૊Έ߹ΘͤΔ͜ͱͰൺֱత؆୯ʹ$PSF
    8FC
    7JUBMTରࡦ͕Ͱ͖Δ ·ͱΊ º