How to reduce image HEADERS ? Tips on faster image transfers.

[stevieosaurus]

I notice every image (jpg, gif), no matter how small is 575 bytes larger when transferred, this due to OLS adding headers to it. Might not seem a lot, but it adds up when you have lots of small images.
Is there any way of reducing the header size being added, dare I ask even removing headers from image transfers?

 

[stevieosaurus]

While on the subject: any tips for faster image transfers under OLS would be greatly appreciated.
As you can see, they all take way too long to transfer (see the turtle next to each). What am I doing wrong? (default OLS config)



OLS 1.7.19 on Alma Linux 9.4 x64
no cookies, all static content put on a separate subdomain

 

[LiteCache]

It's the nature of every HTTP request that a response header must be added, so you can't request a source without a response. If you want images to be loaded faster optimize images or use a better image type like webp or much better use avif. avif images are up to 50% smaller in size than webp images.

 

[stevieosaurus]

I understand. They are all small (PNG) images however, so converting them to AVIF won't help much (or at all). As far as image optimization goes, I found a solution in either to:

1. merge them all into 1 big PNG image, then display them as sprites, with CSS offset & slicing - this way only 1 HTTP request & header is being generated and received.
2. scrape them completely and replace them with SVG vector images (or fonts) instead.

I am still open to header, caching and web server optimization suggestions, if anybody is willing to share their wisdom. Much appreciated.

 

[LiteCache]

png images are bigger than jpg, jpg images are bigger than webp and webp images are bigger than avif images, so png images are not a good choice.

Compare the difference:
https://www.cachecrawler.com/WP-Plu...e-Conversion-for-LiteSpeed-LScache::6574.html

I am still open to header, caching and web server optimization suggestions, if anybody is willing to share their wisdom. Much appreciated.

Images are cached by the browser, so the only important thing is to set correct TTL for cache-control. Headers can't be removed, because no headers no response, meaning there is nothing you can optimize at the server.

 

[LiteCache]

and replace them with SVG vector images

svg is not an image, it's a document.

 

[Sneha]

To make image transfers faster, you can compress images using online JPEG Compressor tool to maintain quality while reducing size. Switching to WebP or AVIF formats can also significantly help as they are smaller than PNGs. Proper cache-control headers will further optimize loading times.

 

[LiteCache]

To make image transfers faster, you can compress images using online JPEG Compressor tool to maintain quality while reducing size. Switching to WebP or AVIF formats can also significantly help as they are smaller than PNGs. Proper cache-control headers will further optimize loading times.

This was already posted before https://forum.openlitespeed.org/thr...ips-on-faster-image-transfers.6147/post-16554, so there is nothing new, but the amount of data to be transfered if an image is requested can be reduced.

As it is supported by OLS add this code to the root .htaccess.

<FilesMatch "\.(jpg|JPG|jpeg|webp|avif|jpe?g|woff|woff2|png|css|js|gif|swf|ico|ttf|eot|ico|js|mp4|webm|svg|json|webmanifest)$">
    Header unset ETag
    Header unset Set-Cookie
</FilesMatch>

 

[stevieosaurus]

Excellent update @LiteCache ! Is there any other way to implement these 2 unset headers in the OLS Webadmin console, instead of the .htaccess file ? Maybe at the Virtual Host level? Would it work setting them in the Context section of VH as headers, something like in this example of OLS docs ?

 

[LiteCache]

Excellent update @LiteCache ! Is there any other way to implement these 2 unset headers in the OLS Webadmin console, instead of the .htaccess file ?

This is the job of @Cold-Egg or the OLS support. I use LSWS only, sorry

btw. If you are a Speed Junkie use https://www.cachecrawler.com/Downlo...-LiteSpeed-LScache-Wordpress-Plugin::113.html instead of LiteSpeed's built in crawler to warmup the cache since the built-in crawle is faulty and uses wrong cache vary.

 

[stevieosaurus]

Indeed, I managed to make it work from within the OLS webadmin console:
Virtual Host -> Context: Type Static | URI: exp:^.*(jpg|jpeg|gif|png|ico|webp|avif|mp4|webm)$

You can add both "Header unset ETag" and "Header unset Set-Cookie" here just be careful which file extensions you list in the above URI, as these 2 settings can completely block your local fonts from loading from a subdomain/CDN (due to CORS header removal) while also revert Brotli compression to GZIP for JS and CSS files if you remove their headers - which is why I chose to only select images and video/audio files by their extensions:

Thank you @LiteCache for the idea and update!