GoogleChrome / GoogleChrome/lighthouse
Strategies for optimizing CLS and LCP on a documentation-heavy "Cheat Sheet" site?
- Dominant language
- JavaScript
- Stars
- 30.8k
- Forks
- 9.8k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 20
Description
Hi everyone,
I’m currently managing a technical resource site, [Snipping Tool Shortcuts](https://snippingtoolshortcuts.com/), which focuses on keyboard shortcuts, productivity guides, and high-resolution instructional screenshots.
Since the site is highly visual and relies on long-form "cheat sheet" tables, I’m running into a few Core Web Vitals hurdles that I’d love some community input on:
Cumulative Layout Shift (CLS): Because I use many dynamic tables and toggle-able menus for different OS versions (Windows 10 vs. 11), I’m seeing shifts when the CSS for these interactive elements loads.
LCP (Largest Contentful Paint): My "Hero" images are often detailed screenshots that need to be crisp, but they are slowing down the initial paint.
Accessibility (A11y): For a site dedicated to "shortcuts," I want to ensure my navigation is perfectly keyboard-friendly.
What I’ve implemented so far:
Converted all screenshots to WebP with fixed dimensions.
Implemented Critical CSS to prioritize the fold.
Using a lightweight WordPress stack with localized caching.
My Questions for the Community:
Are there specific GitHub Actions you recommend for automated image compression (like an img-optimizer workflow) before deploying to production?
For table-heavy layouts, do you prefer CSS Grid or Flexbox to minimize rendering lag on mobile devices?
How do you handle "Skeleton Screens" for data-heavy tables to improve the perceived load speed?
I’d appreciate any technical feedback or audits. Feel free to check the live performance at [snippingtoolshortcuts.com](https://snippingtoolshortcuts.com/) if you want to see the current bottlenecks.
Thanks in advance!
Contributor guide
Research direction
No repository file, test, or reproducible Lighthouse failure is identified. Start by auditing the linked site for the reported CLS, LCP, and accessibility issues; a suitable contribution would need a clearly scoped change and measurable verification criteria.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, github-actions, wordpress
- Domain
- accessibility, performance, web-dev
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100