Optimize the element identified in the recording. A large heading can be the LCP candidate even when the page contains a hero image.
Confirm the heading is the candidate
Record a page load at the problem viewport and inspect the LCP element. Save the exact text and container. Repeat on mobile, where an image may move below the fold and leave the heading as the largest visible content. Do not assume that the same template produces the same candidate at every breakpoint or with every headline length.
Compare text availability and visibility
Inspect whether the heading is present in the initial HTML. Then trace when it becomes visible relative to stylesheet and font requests. A headline inserted by script, hidden during an entrance effect, or awaiting a font can have different delays. Temporarily remove the entrance effect on staging and compare recordings. This tests a cause rather than treating animation as automatically harmful.
Review only the typography that matters
Identify the actual font family, weight and character subset used for the heading. Confirm successful delivery and the fallback behavior if the request is slow or fails. Avoid preloading every weight in the brand family. A font request can compete with other critical files, and a preload that does not match the used face may achieve little while adding traffic.
Keep a readable fallback layout
Test with the intended font blocked in developer tools and inspect the heading’s wrapping, navigation and nearby buttons. Choose fallback typography that fits the real content and container, then verify the transition when the font arrives. A change that displays text sooner but pushes the action out of view needs further design work, not a declaration of success.
Retest multiple headings and states
Use short and long titles, both themes and the smallest supported viewport. Compare cold-load recordings with the same conditions and note the LCP element each time. If a new strategy causes invisible text or severe wrapping, restore the previous typography rule. Document the specific face and rendering condition improved rather than claiming a universal speed benefit.
Symptom-to-cause worksheet
| What you observe | What to investigate | Next check |
|---|---|---|
| Heading exists but stays hidden | Font policy or entrance effect | Compare visibility with requests and animation |
| Only one language loads slowly | Subset or fallback mismatch | Check the face requested for that text |
| Font arrives but heading shifts | Fallback metrics differ | Compare wrapping before and after arrival |
Worked investigation scenario
This is an illustrative case, not a measured Velonic result. Suppose a desktop recording identifies the hero photo as LCP, but a phone recording identifies the heading. Preloading the photo everywhere would not directly address the phone’s late text. Inspect the heading’s actual face and visibility effect in the phone trace, then change one cause on staging. Confirm the candidate and wrapping after the change. Document the viewport-specific finding rather than generalizing a desktop hero fix to all page loads.
Put it into practice
- Identify the text candidate before changing assets.
- Check the precise face used by the heading.
- Verify long titles and font-failure fallback.
AI-assisted educational content prepared for the Velonic resource library. How these guides are prepared.