Improve Largest Contentful Paint (LCP) and Speed up your WordPress Website
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)