Best Image size for background of a section and using the parallax option

Hello,
Thanks for this question. I’m doing some tests on my end and will try to propose a solution.

Great Thank you so much Nicolas

@condosvip the latest version of the plugin includes various improvements for the parallax effect. Your question actually brought up other issues that needed to be fixed, so thanks for that ??
When using the parallax effect, the Scale to fit option is not possible because it can break the effect, that’s why it is automatically disabled if previously set.

Taking advantage of the customization by device for the section’s height can be a possible interesting work around.

Thank you Nicolas. I’m working on another site:PrimeCondos.site I am doing the customization by device using just regular image without parallax for the mobile devices. I’m using version Version 1.4.10 of the nimble plugin. Is there a latest version I should be using?

I have also another questions now regarding the nimble plugin and the W3 total Cache. Should I open a different thread?

I tried the W3 total cache with the settings recommended for the customizr. But not sure why my page keeps having a really low score in Gtmetrix: PageSpeed Score(71%) YSlow Score (68%)

When I get the results, There is a few things related to the MAP module I’m using with the nimble plugin

609.9KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

https://maps.gstatic.com/maps-api-v3/embed/js/36/1a/init_embed.js (144.8KiB)
https://maps.googleapis.com/maps/api/js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=en_US (97.9KiB)
https://www.google.com/maps/embed?origin=mfe&pb=!1m4!2m1!1s319-323+Jarvis+St.+Toronto!5e0!6i15

How can I set those up in the minify Js in the W3 Settings? Embed in Head, Before Body, After body.. Not sure what those mean. Your help is appreciated.

OK.
For faster page load and better performance scores, I would recommend to :

1. use optimized images : your parallax background images should ideally not be larger than 200kb, with a maximum width of 1500 pixels
2. enable the lazy loading options :

1. Click on the global settings icon
2. expand the site wide options and click on the page speed optimizations tab

About the javascript parsing on page load, and the minify settings in W3, I would recommend to explore the W3 documentation which is much smarter than what I know about this ??
Thanks for bringing up the google map topic. I’ll see if this can be loaded only when becoming visible, which would allow faster page load.

By the way, that’s a really nice design you’ve done here @condosvip. I like the menu items connected to your sections. The scrolling effect looks good.

Hi Nicolas.

Thank you. I’m just trying to make my own pages, your instructions and the nimble plugin has made everything way easier because I know nothing of coding. I’ve just been reading all the documentation provided:)

Yes Please let me know about the map. I will check out the W3 documentation, I see my website fine when I open it. It loads Ok from my computer, and my phone but google and gtmetrix insist I had to fix haha.

BTW, I just tried the Load images on Scroll from Nimble as suggested, and the pictures completely went blank, there were not loading on scroll they just disappeared. So I had to change it back and pictures showed up again. I wanted to show you but can’t find how to insert a picture.

I had the lazy load option but from the Website performance options from the Customizr.

OK.
About the blank pictures when the load image on scroll is enabled in Nimble, I can’t reproduce this problem on my end.
I would like to understand exactly what’s going on on your site. Would you mind contacting me with this form, and providing a temporary admin access to the site?
Thanks

Hi Nicolas, I just filled out the contact form. I am trying to set up the admin access but it is asking me for an email address. Let me know. Thank you.

Hi @condosvip,
I was curious how to improve your page performance. This was a real use case for me because your Nimble Builder page has several interesting characteristics :
– using hidden sections on desktop
– many large image backgrounds potentially impacting performance
– a Google map at the bottom, which is quite heavy to load and impact performance

The lazy load problem was due to a wrong setting of the W3 cache plugin. The js minification had to be set to auto instead of manual.

Once this problem fixed, I tested the performance of your site and noticed that it was quite poor, despite the lazy loading enabled.
That’s how I discovered a bug in Nimble : the lazy loading was not working for hidden sections. Leading to a weight of almost 3Mb for your page, which of course severely impacted the page load perf.

Then the last thing to improve was to implement a new lazy loading option for the Google Map module. This way, the map is loaded only becoming visible, which has a significant impact on your page load time.

Here are the results of my latest tests, which are really good :
https://tools.pingdom.com/#5a41b72d38400000
https://gtmetrix.com/reports/primecondos.site/36gHZ9X3

Thanks again for you help

Thank you so much Nicolas for all your work. I am so happy with the new results, the changes and the new update really improved the performance.