GoogleChrome / GoogleChrome/lighthouse

Strategies for optimizing CLS and LCP on a documentation-heavy "Cheat Sheet" site?

Open
#16,814 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.