Hi everyone,

I’m currently managing a technical resource site, Snipping Tool Shortcuts, 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 if you want to see the current bottlenecks.

Thanks in advance!