up-for-grabs.net icon indicating copy to clipboard operation
up-for-grabs.net copied to clipboard

Published 20 hours ago • verified publisher icon up-for-grabs

Improve performance

Open Andaughters opened this issue 7 months ago • 2 comments

This PR adds several performance optimizations to the Up For Grabs website, making it faster and more responsive for all users.

Performance Improvements

  1. Pagination

    • Implemented page-based navigation for projects
    • Only loads a limited number of projects per page (30)
    • Added accessible pagination controls with keyboard support
    • Significantly reduces initial page load time

  2. LocalStorage Caching

    • Projects are cached in the browser's localStorage
    • Instant loading on repeat visits
    • Background refresh of cache to ensure content stays current
    • Cache expiry after 1 hour to maintain data freshness

  3. Lazy Loading

    • Added IntersectionObserver-based lazy loading for project stats
    • Content loads only when scrolled into view
    • Reduces initial resource usage and API calls

  4. Event Optimization

    • Implemented debounced scroll and resize event handlers
    • Reduced performance impact of DOM operations
    • Smoother scrolling experience

  5. CSS & UX Improvements

    • Added smooth transitions for pagination controls
    • Improved visual feedback during loading and transitions
    • Made pagination controls fully accessible with ARIA attributes

These improvements significantly enhance the user experience, especially for users on slower connections or devices, and make the site feel much more responsive while reducing server load.

Andaughters avatar May 04 '25 21:05 Andaughters

:wave: I'm a robot checking the state of this pull request to save the human reviewers time. I don't see any changes under _data/projects/ so I don't have any feedback here.

As you make changes to this pull request, I'll re-run these checks.

shiftbot avatar May 04 '25 21:05 shiftbot

Deploy Preview for up-for-grabs-test-bench ready!

Name Link
Latest commit 985efb2c452367aa4bdc74db967496db8a40f424
Latest deploy log https://app.netlify.com/sites/up-for-grabs-test-bench/deploys/6817d80e280b1d00089bb8c4
Deploy Preview https://deploy-preview-5186--up-for-grabs-test-bench.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar May 04 '25 21:05 netlify[bot]