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

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

microCMS
February 09, 2022

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

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

microCMS

February 09, 2022
Tweet

More Decks by microCMS

Other Decks in Marketing & SEO

Transcript

  1. ͝ར༻
    اۀ਺
    ͝ܖ໿
    ܧଓ཰
    Ҏ্
    ˋ

    Ҏ্
    ฤूऀ΋࢖͍΍͍͢
    ೔ຊ੡ϔουϨε$.4

    View full-size slide

  2. ϔουϨε$.4ͱ͸Կ͔ʁ
    ैདྷ$.4 ϔουϨε$.4
    8FCαΠτ
    σʔλϕʔε
    ؅ཧը໘
    σʔλϕʔε
    ؅ཧը໘
    ӡ༻ऀ
    ӡ༻ऀ
    8FCαΠτ
    ϞόΠϧΞϓϦ
    ళ಄αΠωʔδ
    ֎෦σʔλ
    &Yళฮσʔλɺސ٬σʔλɺ঎඼σʔλ
    ࣗࣾαʔϏε
    Ի੠σόΠε
    طଘσʔλͱ࿈ܞ
    ෳ਺νϟωϧͰͷίϯςϯπ׆༻
    ߋ৽ ߋ৽
    $.4෦෼ $.4෦෼
    "1*
    "1*

    View full-size slide

  3. $PSF8FC7JUBMTରࡦ

    View full-size slide

  4. +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.

    View full-size slide

  5. ग़యɿIUUQTKBNTUBDLPSH

    View full-size slide

  6. Α͋͘ΔJamstackͷߏ੒

    View full-size slide

  7. w ඞཁͳͷ͸੩తϑΝΠϧͷϗεςΟϯάͷΈ
    w /FUMJGZɺ(JU)VC1BHFTɺ"NB[PO4ɺ7FSDFMͳͲʢݸਓར༻ϨϕϧͳΒແྉʣ
    w "1*ίʔϧ͸Ϗϧυ࣌ͷΈ
    w "1*ϦΫΤετ਺ͷ੍ݶ͕͋ͬͯ΋҆৺
    w ສ͕Ұɺ"1*͕མͪͯ΋҆৺
    w ηΩϡΞˍϋΠύϑΥʔϚϯεˍڧ4&0ˍϩʔίετ
    +BNTUBDLͷϝϦοτ

    View full-size slide

  8. ᶄը૾ͷ࠷దԽ

    View full-size slide

  9. NJDSP$.4ϒϩάΛ୊ࡐʹਐΊΔ
    ͜ͷ෦෼
    Λमਖ਼͍͖ͯ͠·͢

    View full-size slide

  10. ֘౰෦෼ͷιʔείʔυʢ/VYU੡ʣ


    :src="content.ogimage.url"


    class="ogimage"


    alt


    />

    View full-size slide

  11. ը૾αΠζΛௐ੔


    :src="content.ogimage.url + '?w=670'"


    class="ogimage"


    alt


    />
    JNHJYͷXύϥϝʔλΛར༻ͯ͠ը૾αΠζΛௐ੔͢Δ

    View full-size slide

  12. ࣍ੈ୅ϑΥʔϚοτʢ8FC1ʣΛར༻
    *NHJYͷGNύϥϝʔλΛར༻ͯ͠ը૾ϑΥʔϚοτΛม׵͢Δ
    QJDUVSFλάΛ༻͍ͯɺରԠσόΠεʹԠͯ͡ϑΥʔϚοτΛग़͠෼͚





    type="image/webp"


    :srcset="content.ogimage.url + '?w=670&fm=webp'"


    />




    :src="content.ogimage.url + '?w=670'"


    class="ogimage"


    alt


    />





    View full-size slide

  13. ը૾Λ஗ԆಡΈࠐΈͤ͞Δ
    MB[ZTJ[FTΛར༻ͯ͠ɺը૾Λ஗ԆಡΈࠐΈͤ͞Δ
    TSDΛEBUBTSDʹมߋɺDMBTTʹMB[ZMPBEΛ௥Ճ͢Δ





    type="image/webp"


    :data-srcset="content.ogimage.url + '?w=670&fm=webp'"


    />




    :data-src="content.ogimage.url + '?w=670'"


    class=“ogimage lazyload”


    alt


    />





    ࢀߟɿIUUQTXFCEFWCSPXTFSMFWFMJNBHFMB[ZMPBEJOHIPXEPJIBOEMFCSPXTFSTUIBUEPOUZFUTVQQPSUMB[ZMPBEJOH

    View full-size slide

  14. ԣ෯ɺߴ͞Λࢦఆͯ͠ϨΠΞ΢τγϑτΛͳ͘͢
    NJDSP$.4ͷ"1*͔ΒXJEUI IFJHIU͕ฦ٫͞ΕΔͷͰJNHλάʹࢦఆ͢Δ
    Ϩεϙϯγϒͷ৔߹͸$44ͰXJEUIIFJHIUBVUPͳͲ΋ࢦఆ͢Δ





    type="image/webp"


    :data-srcset="content.ogimage.url + '?w=670&fm=webp'"


    />




    :data-src="content.ogimage.url + ‘?w=670'"


    :width=“content.ogimage.width"


    :height=“content.ogimage.height"


    class=“ogimage lazyload”


    alt


    />





    View full-size slide

  15. ݁Ռʢ఺ˠ఺ʣ

    View full-size slide

  16. w NJDSP$.4Λ༻͍Δͱߴ଎Ͱ4&0ʹڧ͘ηΩϡΞͳαΠτ
    ʢ+BNTUBDLߏ੒ʣΛߏஙͰ͖Δ
    w NJDSP$.4ͱJNHJYΛ૊Έ߹ΘͤΔ͜ͱͰൺֱత؆୯ʹ$PSF8FC
    7JUBMTରࡦ͕Ͱ͖Δ
    ·ͱΊ
    º

    View full-size slide