Skip to content

Commit 763859a

Browse files
committed
chore: optimize down the public/ dir png files
## Problem When looking at our cloudflare analytics today it called out a few images as offenders in our LCP. Our LCP is generally quite "good" with 70% of all requests under 2.5 seconds. But these images were called out as potential offenders, Im thinking its their weight Slimming down their weight should help pageload times where these images appear. My plan is to watch the LCP stats over the next few weeks to measure how much of an impact this change had. Specifically for the /5x/guide/writing-middleware/ page bc that was cited as the worst in a couple langs like Japanese. ## Solution This PR optimizes all our pngs in the public/ dir in place. | File | Before | After | Reduction | |---|---:|---:|---:| | `public/apple-touch-icon.png` | 3,557 B | 978 B | 72.5% | | `public/images/blog/redesign/before-after.png` | 435,879 B | 140,677 B | 67.7% | | `public/images/blog/redesign/brand-values.png` | 92,724 B | 36,181 B | 61.0% | | `public/images/blog/redesign/logo-favicon.png` | 47,064 B | 16,418 B | 65.1% | | `public/images/blog/redesign/vision-mission.png` | 82,218 B | 31,845 B | 61.3% | | `public/images/clustering.png` | 6,254 B | 3,696 B | 40.9% | | `public/images/express-mw.png` | 119,397 B | 36,423 B | 69.5% | | **Total** | **787,093 B** | **266,218 B** | **66.2%** | I ran all the pngs in the public dir through [pngquant](https://pngquant.org/) ```sh find public -name '*.png' -exec pngquant --quality 80-98 --skip-if-larger --strip --force --ext .png {} \; ``` in order to "quantize" the pngs. these are simple diagrams/logos mostly so they are pretty well suited to pngquant optimization. The `--quality 80-98` makes pngquant refuse to save any image that would fall below that quality floor. And I spot checked all the images manually against their previous versions and could see no difference. ### context Background on this is that anything in our public dir is not part of the astro build pipeline, so the images will not be optimized into webp like things in our src dir. This PR's in place optimization lets us see how/if our web vital stats are impacted by optimizing these images, without having to update any content pages to point to either new images (swapping png for webp for example) or a new image location. We can eventually move images into the src dir if we wish for anything added in the future to be optimized via the build process, so we dont have to do maual optimizations like this or think much about it in the future (there are also some drawbacks to letting astro handle the images for us, like it lazy loading images in markdown content etc which can actually hurt LCP).
1 parent b9d5106 commit 763859a

7 files changed

File tree

public/apple-touch-icon.png

-2.52 KB
Loading
-288 KB
Loading
-55.2 KB
Loading
-29.9 KB
Loading
-49.2 KB
Loading

public/images/clustering.png

-2.5 KB
Loading

public/images/express-mw.png

-81 KB
Loading

0 commit comments

Comments
 (0)