food-oasis
food-oasis copied to clipboard
hackforla
Reduce the size of images on static pages (about us, donate, FAQ) so they load quickly and use less data
Overview
Based on research from #928 , we found some easy ways to increase the performance of our website.
One of the things found was that we are using unnecessarily large and high-resolution images on our static pages (About Us, Donate, FAQ), leading to 42-second(!) load times for those pages over 3G connections.
We should reduce the size of those image files so that the pages load more quickly and require less data.
The images should still look nice, but they don't need to be such high quality / low compression / large.
Action Items
- [ ] Reduce the resolution/size/quality of the images used on these pages
Moving to Prioritized Backlog, to be assessed once current Dev workload is completed.
The main problem with initial page load speed is not image size (at least for the landing page), but react script bundle size, as shown in Issue #1415.
Image size is already pretty good for the landing page. Here are the images loaded for the landing page:
The About page could use a smaller about-bg image:
Likewise, the background image for thee Donate Page is too large:
The FAQ page also has a background image that is much too large.
For this issue, find all the images that are over 100KB-200KB and further compress them to a smaller size (in bytes)
@Athi223 @khanhtranngoccva Thanks for your interest in the Food Oasis repo. We manage assignment of issues to developers through our project board and developer stand-up meetings. This is a project of Hack for LA, the Los Angeles brigade of Code for America, and we have an on-boarding process for volunteers who want to contribute to our projects. Please see hackforla.org for the steps to join the project and make contributions.