Reduce the size of images on static pages (about us, donate, FAQ) so they load quickly and use less data

[fancyham]

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

[Athi223]

Hey, I'd like to contribute to this if its available

[khanhtranngoccva]

Hi there! I would like to contribute to this issue as well.

[staceyrebekahscott]

Moving to Prioritized Backlog, to be assessed once current Dev workload is completed.

[entrotech]

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]

@entrotech So, it is up for grab?

[entrotech]

@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.

[fancyham]

Okay, so something’s strange here — if the images aren’t that big, what’s slowing down these page loads?

According to the Total Load Time table showing load times for each page, as seen in

• #928 the About Us page takes about 19(!) seconds to load on DSL?

If it’s not the images, why is it so slow? That’s the real goal for this issue — faster load times.

[junjun107]

I compressed the about page image to 267 KB and tested:

This is what hosting reduced about image on Cloudinary. The difference isn't very significant

[fancyham]

@junjun107, Any idea what the long blue line here is? That seems like the real reason the page loads so slowly — is there perhaps a way to reduce the time needed for that item?

This page has very little functionality on it, so it's surprising it takes so long to load.