Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

1f1d874ed952074278d27fad3fb870b8?s=47 microCMS
February 09, 2022

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

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

1f1d874ed952074278d27fad3fb870b8?s=128

microCMS

February 09, 2022
Tweet

More Decks by microCMS

Other Decks in Marketing & SEO

Transcript

  1. ͝ར༻ اۀ਺ ͝ܖ໿ ܧଓ཰ Ҏ্ ˋ  ࣾ Ҏ্ ฤूऀ΋࢖͍΍͍͢

    ೔ຊ੡ϔουϨε$.4
  2. ϔουϨε$.4ͱ͸Կ͔ʁ ैདྷ$.4 ϔουϨε$.4 8FCαΠτ σʔλϕʔε ؅ཧը໘ σʔλϕʔε ؅ཧը໘ ӡ༻ऀ ӡ༻ऀ

    8FCαΠτ ϞόΠϧΞϓϦ ళ಄αΠωʔδ ֎෦σʔλ &Yళฮσʔλɺސ٬σʔλɺ঎඼σʔλ ࣗࣾαʔϏε Ի੠σόΠε طଘσʔλͱ࿈ܞ ෳ਺νϟωϧͰͷίϯςϯπ׆༻ ߋ৽ ߋ৽ $.4෦෼ $.4෦෼ "1* "1*
  3. σϞ

  4. $PSF8FC7JUBMTରࡦ

  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)VC1BHFTɺ"NB[PO4ɺ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ͰXJEUIIFJHIUBVUPͳͲ΋ࢦఆ͢Δ <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Λ૊Έ߹ΘͤΔ͜ͱͰൺֱత؆୯ʹ$PSF8FC 7JUBMTରࡦ͕Ͱ͖Δ ·ͱΊ º