What are the most effective ways to improve website loading speed without a full rebuild?

[user325007]

Discussion Type

Product Feedback

Discussion Content

Hi everyone,
I’ve been working on a website that has slowly gotten heavier over time. We kept adding new features, images and scripts and now pages take noticeably longer to load, especially on mobile connections.
Here’s the site if you want to take a look.
A full rebuild isn’t realistic right now, so I’m looking for improvements that give the biggest results for the least effort. I’ve been thinking about things like:

• Compressing images and switching to modern formats like WebP or AVIF

• Lazy loading images and videos

• Cutting down unused JavaScript and CSS

• Better caching or using a CDN

For those of you who’ve been through this, what made the biggest difference on your projects? And how do you decide what to fix first when there’s a long list of possible issues? I’ve been running Lighthouse, but I’m curious whether you also use tools like WebPageTest or Chrome DevTools to find the real bottlenecks.
Thanks in advance. I’d really appreciate hearing what worked for you.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[iamphduc]

Ran your homepage through curl and it's pretty much all images. HTML, CSS, JS and the logo come to about 18 kB compressed, and the 6 product images are about 1.36 MB. Your JS is only 1.7 kB, so I wouldn't bother cutting it.

I'd fix things in this order:

1. Images. You're using 1500px Amazon images in 300–600px slots. The hero is 299 kB, and the same image with _AC_SL600_ in the URL is 73 kB. Better long term to host them yourself as WebP or AVIF with srcset.
2. Hero priority. It's probably your LCP, so check in DevTools and add fetchpriority="high". Your lazy loading already looks fine.
3. Fonts. Your CSS @imports 8 Poppins styles, so the browser fetches your CSS, then Google's CSS, then the fonts. Self-host 2 or 3 weights and preload the main one.
4. Caching. Assets are on max-age=0, must-revalidate, but that only affects repeat visits. Add a hash to your filenames before you set a long max-age.

To decide what's first, I sort the DevTools Network panel by size with the cache off and Fast 4G on, then start at the top. That's also how you'd catch something like what I had on my portfolio, where a bundling mistake put about 65 kB of libraries on the first load. Reading the modulepreload links in the built HTML helps there too.

For tools, I use Lighthouse to find problems (median of 5 runs, single runs are noisy) and the DevTools Performance panel to check a fix actually helped. I once dropped a change that took my mobile score from 86 to 90 because a real trace showed no difference and it made the code messier. WebPageTest is good for seeing the waterfall on a slow device.

P.S. I used Claude Opus to help check your site and write this, in case it feels too AI :)

[ashwin8332]

Thanks for taking the time to analyze the website and share such detailed insights!

Your point about the images makes a lot of sense. I hadn't realized that the product images were contributing so much to the overall page size, especially when the JavaScript footprint is already quite small.

I'll prioritize optimizing the images with WebP/AVIF and responsive sizing, followed by improving the hero image loading priority and reducing the font weights being loaded.

The suggestion about checking the Network panel with cache disabled and Fast 4G is particularly helpful. I'll also use the Performance panel to validate whether each change actually makes a measurable difference rather than just improving Lighthouse scores.

Really appreciate you going beyond generic suggestions and identifying the actual bottlenecks. This gives me a much clearer direction without needing a complete rebuild!