Enhance Performance with Optimizations and Lighthouse Audit in Workflow #Issue 2550

[HarshSharma0801]

Summary

This PR introduces a suite of performance enhancements to the Next.js blog website, addressing render-blocking resources, slow server response times, CSR overhead, and adding a Lighthouse audit to the CI/CD workflow for continuous monitoring. These changes improve Largest Contentful Paint (LCP), Time to First Byte (TTFB), and overall user experience while ensuring stability for long-running processes (e.g., maxDuration: 300).

Fixes -> keploy/keploy#2550

Changes

1. Render-Blocking Resources:
   ~ Inlined critical CSS for above-the-fold content (e.g., titles, buttons) in pages like Index.tsx, /technology/[slug].tsx, etc.,
   reducing LCP.
   ~ Added for key images (e.g., hero images, HOME_OG_IMAGE_URL) across pages.
   ~ Deferred non-critical scripts by keeping components like PostBody as dynamic imports with next/dynamic.

2. Slow Server Response Time:
   ~ Optimized API functions in lib/api.ts:
   Added in-memory caching with a 5-minute TTL to fetchAPI.
   Reduced batch sizes (e.g., first: 50 to first: 10) and capped data fetches (e.g., maxPosts: 50) in
   getAllPostsForTechnology, getAllPostsForCommunity, etc.
   Used Promise.all for concurrent API calls in getStaticProps (e.g., /technology/[slug].tsx, /community/[slug].tsx).
   ~ Increased ISR revalidate from 10s to 300s (5 minutes) or 3600s (1 hour) across pages for better caching.

3. Client-Side Rendering (CSR) Overhead:
   ~ Minimized CSR by leveraging SSG via getStaticProps across all pages (e.g., Index.tsx, /tag/[slug].tsx).
   ~ Simplified client-side logic (e.g., moved content parsing out of useEffect in /community/[slug].tsx).
   ~ Used fallback: "blocking" in getStaticPaths (e.g., /authors/[slug].tsx) to avoid CSR fallbacks.

4. Lighthouse Audit in Workflow:
   ~ Updated .github/workflows/build-and-deploy.yml:
   Added steps to install @lhci/[email protected], run lhci autorun, and upload reports as lighthouse-report artifacts.
   ~ Created .lighthouseci/lighthouserc.json:
   Audits http://localhost:3000/ with 3 runs, focusing on performance.
   Sets thresholds: LCP < 2.5s, FCP < 1.8s, TBT < 200ms, Speed Index < 4.3s (warnings only).
   Uses filesystem storage due to lack of secret access in this open-source repo.
   ~ Added continue-on-error: true to prevent workflow failure on performance warnings

Testing

~ Locally tested via npm run build and page loads to verify LCP/TTFB improvements.
~ Ran lhci autorun manually to confirm audit functionality and artifact generation.
~ Workflow tested in fork (HarshSharma0801/blog-website) to ensure compatibility.

[Hermione2408]

Hey @HarshSharma0801 Thanks for creating the PR, please sign off the DCO and fix the build!

[HarshSharma0801]

@Hermione2408 I have signed DCO and fixed the build , its some version error but fixed it now

[manasmanohar]

Kindly attach the before and after lighthouse and build report.

[HarshSharma0801]

@manasmanohar i have attached the lighthouse audit report workflow it runs smoothly , locally !

[HarshSharma0801]

I think its ready you can also run audits if you want

[HarshSharma0801]

@manasmanohar Please Approve The changes if reviewed 👍

[Aditya-eddy]

hey @HarshSharma0801 have reviewed some of your changes:
Also the UI in the pr and current pr have some differences can please address them
Current:

UI pr's:

Also the reviewer and author currently have # next to their name can please fix that?

[HarshSharma0801]

@Aditya-eddy Sure will resolve it

[HarshSharma0801]

@Aditya-eddy let me know if you find any other issues

[HarshSharma0801]

@Aditya-eddy @manasmanohar I tried to resolve ui issues , with blog website , it seems api for both prod and local environment is different as code is unchanged in production and my PR related to ui , locally we are getting different response , same is with UI , can you please check it

[HarshSharma0801]

@Aditya-eddy @Hermione2408 resolved the UI issues

[Aditya-eddy]

Hey @HarshSharma0801
this is the current Lighthouse score:

this is the pr's lighthouse score:

Maybe some changes have decreased the performance? UI changes looks good.

[TvisharajiK]

Hey @HarshSharma0801 Any updates on this?

[keploy]

Nice Pr 😄. We currently support Unit Test Generation only for Go projects.
Stay tuned – support for more languages is coming soon! 🚀