A deep dive into optimizing LCP

Рет қаралды 83,390

2 жыл бұрын

There is no shortage of advice on the web about improving page load performance, and yet, of the three Core Web Vitals, Largest Contentful Paint (LCP) is still the hardest metric for most sites to consistently meet the recommended "good" threshold. This talk looks at what makes LCP a hard metric to optimize, and offers some concrete strategies to break this complex metric down into a few simple parts, making it much easier to reason about and ultimately improve.
Resource:
Optimize LCP → goo.gle/3vhmmSg
Speaker: Philip Walton
Watch more:
All Google I/O 2022 Sessions → goo.gle/IO22_AllSessions
Web at I/O 2022 playlist → goo.gle/IO22_Web
All Google I/O 2022 technical sessions → goo.gle/IO22_Sessions
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

Пікірлер: 61

@PaulVoorberg 5 ай бұрын

12:25 - Point where the practical advise starts 18:19 - Real website case study

@CookingForAlba-qh8nq 7 ай бұрын

I can't exaggerate how helpful this type of learning- and practical material is for us to improve our user experiences and ultimately improving the bottom line (for all you PM's out there). I would strongly urge and request (beg?) that the same format is made but for INP, as we're getting closer to March 2024 and INP becoming de-facto part of Core Web Vitals. Thanks for the extremely well produced and explained material. More of this will make the web a better place for everyone.

@NiteshGarg Жыл бұрын

Extremely simple and helpful explanation. I could bring the LCP that used to stay between 3.5 to 4s, down to 1.5 to 2s. Thanks a lot for creating this video!

@bbrosser694 2 жыл бұрын

Thank you so much. You gave me the tools that I need to learn, apply the learning, and combine other functions and information.

@aliesmaeili7433 2 ай бұрын

thank you for simple and practical advices. i hope you have simple and practical guidance along your way.

@groquikman 2 жыл бұрын

Really clear, well done Philip!

@mikegeyser467 2 жыл бұрын

What a really good talk Phil. Sending it to everyone. :P Thank you.

@nexTabDE 5 ай бұрын

Thank you for the video; I really liked the practical example at the end and the various breakdowns. 🙂

@YouCodeThings 2 жыл бұрын

This was brilliant! Loved the structure of the video and the optimization of the demo at the end!

@mariuszmiszuta3200 2 жыл бұрын

I miss your content @YouCodeThings

@saurabhsethi1055 Жыл бұрын

Amazing, such a great video... Thanks for the insights on this topic

@mingstru Жыл бұрын

Very helpful. Thank you Phillip.

@geopolitics777 Жыл бұрын

Can you give basic instructions to non-coders on how to install the perf.js code with a wordpress site? Thanks

@j.y. 11 ай бұрын

Wow. So helpful. Thank you very much!

@romaknafel4116 2 жыл бұрын

Amazing!!! Its Exactly Just what i looking for to improve Agency websites SEO, thanks A lot! 😬😬😁

@isagive 6 ай бұрын

תודה רבה, הטיפ הזה על טעינה מראש של תמונות הביא לי לפחות 10 נקודות. כל הזמן הזה ניסיתי לעכב את הטעינה של תמונה בראש הדף במקום לנסות לטעון אותה יותר מהר. 👍

@viniciuserwindasilvahoyer2820 Жыл бұрын

This video is perfect, thanks a lot

@Alexsmith54355 Жыл бұрын

Thank you for this video its very interesting, but i hava a qestion where I can get perf.js file????

@user-kv4ny6lz2y 6 ай бұрын

Wonderful illustrations and much appreciated. Are there tools within the Performance test that can help track down the element_render_delay? Looking to pinpoint the javascript files or functions could be causing a long LCP? A stack trace leading to the LCP?

@HubertHeller Жыл бұрын

Thank you for your excellent advice! Is LCP computed only for the landing page or for every page a user visits during a session?

@sbfhoney435 Жыл бұрын

For Each page

@andrewkain7518 Жыл бұрын

For those looking for the perf js file, you'll need to type it out yourself which is shown fully on the screen The file is only 36 lines I searched on the linked article, the author's github, and the co-author's github and I was unable to find this file

@paulydee5650 Жыл бұрын

I typed in verbatim the code and it didn't work for me. I'm pretty sure I had everything right; I even put it in chatGPT to make sure I didn't have any typos. Realized that the Web Vitals Extension on Chrome already does this anyway, so no need for the script.

@AlirezaMirhabibi Ай бұрын

Very useful, Thanks.

@AlirezaMirhabibi Ай бұрын

And also professional.

@user-hn6mt3tc5k Жыл бұрын

Optimising LCP! Yes! Finally!

@BenHewart 6 ай бұрын

How do we fix LCP Preload Largest Contentful Paint image when using native web components I have an example when using the picture tag also using the fetchpriority = hgih which works when its just on the dom, but my question is without using the preload in the how do we fix this issue? as you don't want to preload the image on every page?

@DigitalTechTube Жыл бұрын

Awesome video, how can we optimize wordpress websites?

@nathankrasney 5 ай бұрын

Excellent !

@krizzaa8710 4 ай бұрын

Hi is there a video for optimizing website banner images to pass the page insight?

@nikitaluparev6478 4 ай бұрын

is it possible to have access to a project you've been working on as a demo? I'd like to follow your steps just to make I can reproduce and see similar results. Thanks

@SunilKumar-yu2gg Жыл бұрын

Sir this amazing but how to do in WordPress without plugin?

@bruceliu2101 Жыл бұрын

At 27:43: 1. Why is london.jpg still loaded? 2. Why are there only 5 max concurrent requests in flight? I thought Chrome can handle 6 connections to a domain at a time.

@terenciogomez3389 Жыл бұрын

What about the Text element? I mean, how I can improve the LCP when I have a blocker for a text element?

@shashanktmk5934 Жыл бұрын

Could you please share code example?

@baoyuli1495 2 жыл бұрын

anyone knows when this bug "LCP_SUB_PARTS.forEach(performance.clearMeasures);" can be fixed?

@toyflish 10 ай бұрын

working with next and nuxt for years, seeing him copying and pasting the rendered markup into the html page caused a shortcut in my brain :D

@apostolmarinov5577 4 ай бұрын

I am building my website to static html, its served by a CDN, and my metrics are TTFB - 20% and render delay is 80% lol others are 0 so Im not sure about that tip. Also I didnt understand how are we to identify the LCP resource?

@BalloonSchool 7 ай бұрын

How can I improve the Load delay?

@YourProductions1 Жыл бұрын

I'm unable to replicate the 'document_ttfb", 'resource_load_delay', 'resource_load_time' in the inspector/Performance - where do you see these features? Thanks.

@philipwalton3768 Жыл бұрын

See the Optimize LCP article for the code that outputs those marks: web.dev/optimize-lcp/

@rinatriyanov8015 Жыл бұрын

Can we have a source code to practice?

@Tony.Nguyen137 20 күн бұрын

why my Timings section doesnt look like his @22:49

@diegonoxvo Жыл бұрын

Where can we get the perf.js code used in the example to measure all the metrics?

@philipwalton3768 Жыл бұрын

You can find that code in the linked article, Optimize LCP: web.dev/optimize-lcp/

@rishabsharma5307 Жыл бұрын

@@philipwalton3768 How to add perf.js code in performance tab so that it start showing those bars?

@rishabsharma5307 Жыл бұрын

@@philipwalton3768 And can you please share the repo link?

@GabrielMartinez-gs9bo 2 жыл бұрын

Is there any reason to believe that using the Link header would offer better performance over using a link tag?

@philipwalton3768 2 жыл бұрын

It can, especially if you have a lot of content in the prior to the tag. But on most pages it makes very little difference.

@GabrielMartinez-gs9bo 2 жыл бұрын

@@philipwalton3768 Thank you very much for your reply! I also assume that if we were to use http push for our preloaded link header we could potentially get even better results! I will try to experiment with it, wish me luck!

@EricoGuizzo 2 жыл бұрын

@@philipwalton3768 At 27:34 how does the browser know to prioritize the london.avif image - without using preload or fetchpriority?

@ChromeDevs 2 жыл бұрын

@@EricoGuizzo Because the fetchpriority attribute is applied to the tag within the element, so the URL that gets prioritized is the same one that the browser will ultimately load (after resolving the elements).

@EricoGuizzo 2 жыл бұрын

@@ChromeDevs I see, very cool. Thanks for the clarification.

@user-xr4oo2xp7q 11 ай бұрын

As amazing this was, the only issue is that nobody codes in plain HTML anymore where we have absolute control to apply optimisation the web standard way. In Next 12, it's annoying to optimise these things when it still fails in mobile after all the best standard framework practices.

@shivankbatra5643 8 ай бұрын

yeah the video was amazing but i m facing the same issue. Using next 12, have implemented these things but getting a high LCP on mobile. Did you figure something out?

@user-xr4oo2xp7q 8 ай бұрын

@@shivankbatra5643 No. Nothing.

@user-gs2og5yr9c 4 ай бұрын

يا صديقي العزيز هل هناك ترجمة لمحتوى الفيديو باللغة العربية

@voitek777 2 жыл бұрын

Sorry if this was mentioned in the video (I didn't listen to the whole thing). What type on connection do those times target? Is it 4G, 3G?

@philipwalton3768 2 жыл бұрын

The thresholds for all the Core Web Vitals metrics are based on UX research, so they target all connection types. See: web.dev/defining-core-web-vitals-thresholds/

@nickwoodward819 Жыл бұрын

youtube's mobile LCP? 6secs :P

@MichaelsPaintingChannel 3 ай бұрын

In my eyes everything about LCP is not about the image itself but all the other aspects.. sadly.. And sadly everybody is just talking about the hero image.