How to improve Largest Contentful Paint for a better page experience

Поделиться
HTML-код
  • Опубликовано: 25 дек 2024

Комментарии • 70

  • @DarinPirkey
    @DarinPirkey 3 года назад +13

    Not sure who this guy is, but keep him around. Well done video.

  • @mio...
    @mio... 3 года назад +5

    I watched this 22 minutes video for more than 2 hours. The best video on the topic by far! Thanks

    • @patrickkettner8398
      @patrickkettner8398 3 года назад +2

      So glad to hear!

    • @dannmarceau
      @dannmarceau 3 года назад +3

      That's pretty typical for me as well! I like to "understand."

    • @mio...
      @mio... 3 года назад +1

      @@dannmarceau to understand, and then i go to my 92 yo grandma to explain her LCP

  • @france976
    @france976 2 года назад +3

    6:43 how to popup that window to search for core web vitals overlay?
    NVM I found it: F12 to open devtools, then CTRL+SHIFT+P to open the popup to type "core" into.

  • @BBI-Brandboost
    @BBI-Brandboost 3 года назад +6

    A very informative video and is something we have been taking into consideration since Google implemented their page experience update.

  • @taofeekjunaid1388
    @taofeekjunaid1388 2 года назад +1

    Awesome. I really need to re-watch the video

  • @Theneerajrchandran
    @Theneerajrchandran 3 года назад +3

    Wow something I was in search for. 👍👍👍👍👏👏👏👏👏👏👏

    • @patrickkettner8398
      @patrickkettner8398 3 года назад

      Super glad it was useful! Please do let us know if you have any questions

  • @dannmarceau
    @dannmarceau 3 года назад +3

    Thank you so much, these videos are great for newbies and dunder-heads such as myself, lol.

  • @Tony.Nguyen137
    @Tony.Nguyen137 9 месяцев назад +1

    @4:30„Whatever element had the highest number of seconds between the first byte and when it was painted is what is reported for the LCP..“ I was confused why lighthouse labels my heading, which is absolute centered on a hero image as the Largest Contentful Paint, and not the Hero image 😂. a ‚Aha‘ moment for me

  • @SarahThornburg
    @SarahThornburg 3 года назад +2

    Does anyone know how to set up the custom event to track the largest contentful paint in Analytics as he mentions at the very end?

    • @patrickkettner8398
      @patrickkettner8398 3 года назад

      lots of different ways to approach it, but once you have the value discussed starting at 5:55, you want to upload that to google analytics. You don't need to change anything in analytics to send that value, you can just send an Event hit using the Google Analytics js api (i.e. ga('send', {ec: 'Sarahs Web Vital Info', el: 'lcp', ev: THE_NUMBER_YOU_GOT_EARLIER})

  • @gaborom
    @gaborom 2 года назад +1

    I didn't think about creating a GA Event to measure LCP improvements before. I will search for info on how to implement it. Thanks!

  • @Rafaelorenzoni
    @Rafaelorenzoni 3 года назад +2

    Thank's for the video!

  • @MistyMeanour
    @MistyMeanour 3 года назад +2

    Excellent video, thank you! May I ask what the software/interface is at the 17:26 mark?

  • @ib4112
    @ib4112 3 года назад +2

    Wow what an insight. Could you please tell us how we can use piece of JS code to measure LCP as you mentioned in video... Do we need to create GA event for i am bit lost if you can share an example how we can do that would be great.. at present i keep check on LCP using PageSpeed or GTMatrix etc.

    • @patrickkettner8398
      @patrickkettner8398 3 года назад +1

      Hi! Really depends on the infrastructure you are using, (v4 vs universal, etc). But in general, once you have the value discussed starting at 5:55, you want to upload that to google analytics. You don't _need_ to change anything in analytics to send that value, you can just send an Event hit using the Google Analytics js api (i.e. ga('send', {ec: 'Web Vital Info', el: 'lcp', ev: THE_NUMBER_YOU_GOT_EARLIER})

    • @ib4112
      @ib4112 3 года назад +1

      @@patrickkettner8398 Thanks Patrick, I use both version of GA on different websites. I will try it.

    • @ib4112
      @ib4112 3 года назад

      @@patrickkettner8398 I tried to implement this through GTM but it script generates error on multiple lines "This language feature is only supported for ECMASCRIPT_2015 mode or better: arrow function"... Sorry i am not a JS guys so but hard for me must be easy for other guys

    • @patrickkettner8398
      @patrickkettner8398 3 года назад +1

      ​@@ib4112 sorry about that - the arrow function is just a different syntax for writing a javascript function - i.e. "(FOO, BAR) => alert(BAR)" is the same as "function(FOO, BAR) { alert(BAR) }", just a bit nicer to write. You. can change the () => {} version to standard JS functions to get past that error. If you share a link to a code sample, I may be able to help more

    • @claudinejoly4265
      @claudinejoly4265 Год назад

      ​@@ib41121:06

  • @PradeepSonawane8
    @PradeepSonawane8 3 года назад +8

    Great video, your way of explaining things is awesome! 👌

  • @WickyDesign
    @WickyDesign 3 года назад +2

    Great video! Tons of useful information.

  • @arinium
    @arinium 2 года назад +2

    Thanks a lot! A great video and a great way to explain things!

  • @NationFirstAlways-qp9xx
    @NationFirstAlways-qp9xx 3 года назад +1

    Sir, Are cache plugins in a CMS like WordPress, an efficient substitute for writing any code that can help lower our LCP? Warmest regards, Forever.

  • @kimiyakhaleghpoor
    @kimiyakhaleghpoor Год назад +2

    OMG that was great

  • @franciscoisaacdominguezjua1975
    @franciscoisaacdominguezjua1975 Год назад +1

    Muchas gracias realmente necesario.

  • @mizanulhasan6588
    @mizanulhasan6588 3 года назад +2

    Amazing

  • @t1t1s29
    @t1t1s29 3 года назад +2

    I miss a real example with Chrome Dev Tools and write the exact code to solve LCP issues...

    • @patrickkettner8398
      @patrickkettner8398 3 года назад

      It’s difficult to give a universal solution to solve a problem that can be exposed in hundreds of thousands of different ways. If you share a URL with an issue, I would be more than happy to help debug!

  • @บุญปันทําสาหา1OKนะ

    O K ครับ

  • @บุญปันทําสาหา1OKนะ

  • @rickmorphe-vy1fy
    @rickmorphe-vy1fy 10 месяцев назад

    I got bim buzy 🎉🎉🎉❤

  • @ГригорийСнежковский

    Я дійсно не розумію,стільки багато інформації. Напевно я зроблю все правильно,і ця інформація мені допоможе.😊😊😊 7:04 8:44 8:46

  • @EdyPerez-h3k
    @EdyPerez-h3k 3 месяца назад

    Podría traducir a español

  • @Jennifercerisano
    @Jennifercerisano 5 месяцев назад +1

    Stop it no certificate

  • @Adrinslim
    @Adrinslim 3 года назад +2

    Adsense laughs

  • @love9891
    @love9891 4 месяца назад

    Good morning

  • @Jennifercerisano
    @Jennifercerisano 5 месяцев назад

    1:30

  • @MdmontuKhan-mm3ef
    @MdmontuKhan-mm3ef Год назад +1

    Aarti Aarti

  • @YouMotorcycle
    @YouMotorcycle 3 года назад

    I was completely lost in the first twenty seconds of this video

    • @patrickkettner8398
      @patrickkettner8398 3 года назад +1

      Shoot! Really sorry about that - that information isn't really needed for the rest of the video :/. If you have any questions (including on the first 20 seconds!) please do leave em and I will be more than happy to help

  • @Karen-e1m6w
    @Karen-e1m6w 17 дней назад

    Why does this matter to me? I'm lost, most certainly.

  • @LEILAROSANE-jv3cr
    @LEILAROSANE-jv3cr 9 месяцев назад

    Tradução

  • @juan.josealvarez.rodriguez9292
    @juan.josealvarez.rodriguez9292 Месяц назад

    Acti
    var comercio en mundo

  • @delhudson2907
    @delhudson2907 2 месяца назад

    This is stupid. This is for people who understand what any of this means. It don't help people like me that don't understand any of it. And it goes way to fast

  • @Vinay-yn2we
    @Vinay-yn2we 2 дня назад

    😂

  • @josephbwuzhere
    @josephbwuzhere Год назад

    This is 2 years old and inaccurate now?

  • @CarlosArturoTorres-p9g
    @CarlosArturoTorres-p9g 23 дня назад

    Español primero