Does hiding a layer on a breakpoint mean it won't be loaded on that breakpoint?

[nike_kid]

Hi everybody,

I'm looking to optimize site loading times on mobile breakpoints. When on them (the mobile breakpoints)
I've hidden some complex buttons from the desktop breakpoints and replaced them with more basic buttons.

Normally I would suppose everything loads regardless if I hid them or not but I was really hoping that Adobe
in their genius have made some kind of optimiziation and faster loading for when some layers are hidden.

Also if you can advise on tips and tricks for faster loading times, I am all ears!

Thank you!

[fotoroeder · Accepted solution]

Main:

Yes. You can also "hide in other breakpoints".

nike_kid  schrieb

in their genius have made some kind of optimiziation and faster loading for when some layers are hidden.

Also if you can advise on tips and tricks for faster loading times, I am all ears!

The less breakpoints you use the less is uploaded to your ftp and therefor this is one feature to speed up your site.

Also using fixed width breakpoints instead of fluid width breakpoints as much as possible makes sites less heavy and so it gets faster.

Thank you!

Best Regards,

Uwe

[Günter Heißenbüttel]

And, most important: Avoid cluttering the pages with 3rd party eye candy widgets, and – above all –  resist this strange fashion of „one pagers“ with tons slide shows and videos. A one page site has to load everything in the beginning, and this eats up time …

Don’t know, why we are seeing more and more of these one page page web sites, which need endless scrolling after endless load times. Perhaps it’s simply the „me too“ effect.

[nike_kid]

thank you. i have some more questions regarding the subject if guys you don't mind.

why do less breakpoints mean a less heavy website? in my case i used the same graphic items on all breakpoints
and only adjusted font sizes and image sizes.

also, why does fluid mean heavier?

i started by creating my website "fluid" but in the end i just created 3 breakpoints per page with locked elements.
is there a way to change all of the pages (with breakpoints) from fluid to fixed (in page settings)? right now, i only
see this possible by going to each breakpoint in each page, editing it and setting it to fixed.

anyway, my real question...will this change make my website lighter?

thanks!

[Günter Heißenbüttel]

• Question 1:

If you export your site as HTML to your local disc, and look into the exported „images“ folder, you’ll see, that Muse exports not only one instance of an image but more – depending on the different breakpoints:

This happens because Muse optimises the images to speed up the loading time of your site per breakpoint.

That means: Muse has to export more data then you may have expected. This needs more time for exporting the site, but less time for screen rendering in your browser.

The same happens for the needed HTML/CSS/JavaScript data: More breakpoints make the your site „heavier“ than a site with only one breakpoint would be. Regarding fonts: One font in different sizes hasn’t to be loaded twice (if loading is necessary, because it is a web font), but Muse has to tell the browser, to change the font size at this or that breakpoint – what appearently needs some lines of extra code.

In one word: The amount of exported data is necessarily bigger, if a site is responsive and has more than one breakpoint, compared to a fixed width site with only one fixed breakpoint.

These are the data of an exported sample site (all data):

• 4 fluid breakpoints, one image: 367 kb
• 2 fluid breakpoints, one image: 334 kb
• 1 fluid breakpoint, one image: 330 kb
• 2 fixed breakpoints, one image: 290 kb
• 1 fixed breakpoints, one image: 289 kb

(These values are not representative! Of course they depend heavily on your site and the complexity of your data. But you see: There are differences, of fixed/fluid sites and fixed/fluid breakpoints) – what not necessarily means, that your site will load slower corresponding to the amount of data. As already said: If Muse export one instance of an image per breakpoint, you have more overall data, but faster loading and rendering times, because for example the assets for smaller breakpoint will load and display faster.

• Question 2:

You have to change the fixed/fluid attribute in every breakpoint.

The reason: Muse allows, to mix fixed and fluid breakpoint on every page and on every master page. Changing this attribute with one single click site-wide would be more than dangerous.

But right clicking into the breakpoint bar and set  the attribute from „Fluid Width“ to „Fixed Width“ isn’t that time consuming …

[nike_kid]

Cool. Thank you very much for your answers!