Today Steffen and Dominik dive deep into the page speed factor of the Largest Contentful Paint (LCP). You'll learn how to optimize your website to achieve a fast LCP and which strategies work for flexible components. But with all the details, don't forget the basics of page speed optimization...
Highlights
00:00 Intro
00:10 What is LCP?
02:56 Typical largest elements
05:51 Reach fast LCP
09:03 How to handle video?
13:27 New Blackhat PageSpeed technique?
14:24 How to optimize LCP?
17:19 Strategies for flexible components
22:20 Font display strategy
28:42 First do the basics
32:52 Simplicity over Complexity
Links
Optimize LCP: https://web.dev/optimize-lcp/
Flynt Starter Theme: https://flyntwp.com/
lazysizes: https://github.com/aFarkas/lazysizes
fetchpriority="high": https://www.smashingmagazine.com/2023/01/optimizing-image-element-lcp/
Best practices for fonts: https://web.dev/font-best-practices/
LCP font optimization: https://pixelpoint.io/blog/advanced-web-font-optimization-techniques/
Fontaine (font fallback generator): https://github.com/danielroe/fontaine
Fontpie (font fallback generator): https://github.com/pixel-point/fontpie
More from Bleech
Blog Posts (WordPress Development)
Flynt (WordPress Starter Theme)
VRTs (Visual Tests for WordPress)
Siegfried, deploy! (YouTube Channel)