How to properly size "background lower layer" image from the header?

The image currently has 379.2kb and a resolution of 1920x665! I think that’s slowing down the website considerably. I don’t really understand how to size it properly in order for a optimal loading.
The settings from “Dimensions” are:
Height: auto
Outer spacing: 1.5 EM
Content length: 100%
Content max length: 100 EM

Hi Cristian,

Thank you for reaching out to us. Please check the Image Compression section here https://theme.co/apex/forum/t/customizations-performance/210

Hope this helps!

So i should leave the default settings from “Dimensions” as they are? Even the “Content max length: 100 EM” and just further optimize the background image?

Hello @CristianD,

Changing the values does not affect how the images is loaded. Do you have any other images on the page? Having more images could add up and affect the page loading. I would like you to test your page here: tools.pingdom.com and check how many resources you are loading on the page. You can also check other data like number of server request, files, etc.

Hope this helps.

1 Like

Hello @RueNel! I’ve tested it and here are the results:

Gzip compression is enabled and i’ve also modified the .htaccess file for the expires headers so i don’t really understand why those first three low scores.
What also worries me is the google mobile pagespeed report, especially this part taking 1.65 sec to load:

Hello @CristianD,

67% of the page content were loaded from your server. You might need to use caching plugin like W3 Total cache and Autoptimize minify plugin to minify and combine your CSS and JS files which would also lessen the number of request from your server.

Hope this helps.

1 Like

@RueNel, i already have W3 Total Cache installed but i haven’t enabled the minify section because i was afraid i might break something on the website.
Should i also install Autoptimize besides W3 Total Cache or just enable minification in W3 Total Cache?
Also if the theme code is minified, wont enabling the minification break the code?

Thank you!

Hi Cristian,

Yes, there are cases that minifying and combining JS breaks a site/theme. If that is the case after you install W3 Total Cache and Autoptimize, please exclude the files mentioned here from being minified. Those files are already optimized/minified.

Cheers!

1 Like

Thank you @friech! So i guess i should just add those files into the “Never minify the following JS files” section from W3 Total Cache. Is Autoptimize still necessary if i have W3 Total Cache or they’re just doing the same job?

Hi,

Yes, they are basically doing the same thing.

Please choose only one and I suggest you use w3 total cache.

Thanks

1 Like

Many thanks to everyone for the answers! You guys truly are an awesome and very professional team

You’re most welcome!

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.