How I think about LCP (Largest Contentful Paint)
May 10, 2021
TL:DR doing whatever it took to get the big element on the page first
Get the big element on your page as quick as you can
That means get it there before as many other things happen as you can.
This means prioritising it in your loading and making sure the HTML renders as early as possible.
I found this way of thinking about it much easier then trying to optimise everything (faster server response, inline critical css, minimize non-critical JS, reduce image size etc. etc.)
This realisation led to the two things which helped our LCP the most in our Rails app.
a) Server side render any LCP element. Waiting for JS to run to render your element always means there’s an avoidable delay.
b) preload the image as early as possible for the LCP element.
