A deep dive into optimizing LCP

Показать описание

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:

Speaker: Philip Walton

Watch more:

#GoogleIO

Рекомендации по теме

Комментарии

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

PaulVoorberg

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!

NiteshGarg

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.

CookingForAlba-qhnq

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

mikegeyser

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

YouCodeThings

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

isagive

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

aliesmaeili

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

geopolitics

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

bbrosser

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

nexTabDE

my LPC was 5000ms and after this tutorial its 10000 :D

Apopjak

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

Alexsmith

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

andrewkain

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

toyflish

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

saurabhsethi

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

SunilKumar-yugg

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 <head> how do we fix this issue? as you don't want to preload the image on every page?

BenHewart

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

Tony.Nguyen

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

romaknafel

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

HubertHeller

A deep dive into optimizing LCP

A deep dive into optimizing LCP

Who's Adam and What's He Optimizing? | Deep Dive into Optimizers for Machine Learning!

Optimizing INP: A deep dive

Breakpoint 2022 : Deep Dive Into Performance Optimization With Kevin Bowers From Jump

Apache Spark Core—Deep Dive—Proper Optimization Daniel Tomes Databricks

Secret To Optimizing SQL Queries - Understand The SQL Execution Order

A Deep Dive into Advanced Analytics Model Review and Validation

Optimizing Developer Workflows: A Deep Dive with Score

How to Actually Optimize Your Code

Orca Slicer 101: Taking a Deep Dive to Optimize Your 3D Prints for Strength, Speed, and Quality

Deep Dive: Optimizing LLM inference

A Deep Dive into the Catalyst Optimizer (Herman van Hovell)

TorchScript and PyTorch JIT | Deep Dive

A Deep Dive into Nanite Virtualized Geometry

Deep dive into the ART runtime (Android Dev Summit '18)

Deep dive into performance optimization with graalvm

Mastering Performance Optimization: A Deep Dive into Troubleshooting with Progress Flowmon

A deep dive into Flink SQL - Jark Wu, Kurt Young

Deep Dive w/Scott: Allocation Optimization #adafruit

'A deep dive into optimizing Multi-Scalar Multiplication' (Niall Emmart, Yrrid)

2020 LLVM Developers’ Meeting: “A Deep Dive into the Interprocedural Optimization Infrastructure”...

Optimizing Maintenance Strategies: A Deep Dive into Reliability-Centered Maintenance | UpKeep

Job Progress Optimization: Deep Dive into Connections, Improvements & Query Analysis | 2023 Guid...

Take a Deep Dive Into On-Page SEO