Loading images and above the fold issues?

  • Hi again,

    I want to prepare the best “above the fold scripts” for all pages but I can’t disable logos during loading a page (2 logo images for 1 second visible and it is very annoying).

    And the piece of the html code and 2 logo images on branding selector:

    ...
<div class="branding">
	<a href="https://desktop-66h52pc/wordpress4/">
		<img class="preload-me retinized" srcset="/logo-wall-3d-bottom.png 1x, https://desktop-66h52pc/wordpress4/wp-content/uploads/2014/05/logo-wall-3d-rev-business.png 2x" width="59" height="50" alt="Dekoracje ?cian" src="https://desktop-66h52pc/wordpress4/wp-content/uploads/2014/05/logo-wall-3d-bottom.png">

		<img class="mobile-logo preload-me retinized" srcset="https://desktop-66h52pc/wordpress4/wp-content/uploads/2014/05/logo-wall-3d-bottom.png 1x, https://desktop-66h52pc/wordpress4/wp-content/uploads/2014/05/logo-wall-3d-rev-business.png 2x" width="59" height="50" alt="3D Wall Decorations" src="https://desktop-66h52pc/wordpress4/wp-content/uploads/2014/05/logo-wall-3d-bottom.png">
	</a>
	...
</div>
...

    The problem is with the logos that are visible one by one during loading for one second. They shouldn’t be visible even 0.001 seconds!

    Temporary solution now. The above the fold script contains for test purposes only:

    #page .branding {
    display: none;
}

    and no logos during loading visible and it works but no one logo visible after loading the whole page at all. That is unwanted behavior too.

    It seems that the “above the fold script” works like custom css and overrides all styles loaded before.

    Without Inline “above the fold CSS” checked all worked fine. How to get it working right with “above the fold”?

    Any suggestions are welcome. ??

    https://www.ads-software.com/plugins/autoptimize/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Frank Goossens

    (@futtta)

    hmmm, you’ll have to add some mediaqueries to your above-the-fold CSS won’t you, displaying the first logo if on desktop-size screens and the 2nd logo on smaller screen-widths?

    regarding inline above-the-fold taking priority over the deferred CSS; that indeed is a known issue, for which I hope to include a solution in the next minor release (actually using JS to remove the above-the-fold CSS as soon as the deferred CSS is loaded). in the mean time you could add an !important flag to the relevant styles in the deferred CSS?

    frank

    Plugin Author Frank Goossens

    (@futtta)

    ok, regarding

    I hope to include a solution in the next minor release

    have a look at this commit on GitHub ??

    nothing like experimenting users pushing me in the right direction ??

    frank

    Thread Starter cybertex

    (@cybertex)

    Thank you Frank,

    in the mean time you could add an !important flag to the relevant styles in the deferred CSS?

    That is not so easy because there are a lot of theme css generated as min.css and I do not want to touch them and only custom css or above the fold css should be changed.

    Thank you for the link I will try to make more experiments with the pages in order to find the solutions.

    Thanx

    Arek

    Plugin Author Frank Goossens

    (@futtta)

    That is not so easy because there are a lot of theme css generated as min.css and I do not want to touch them and only custom css or above the fold css should be changed.

    Thank you for the link I will try to make more experiments with the pages in order to find the solutions.

    no need to do the !important stuff of experiment, you can simply download the zip-file of the in-development version (overwrite the contents of wp-content/plugins/autoptimize/ with the contents of autopitimize-master in the zip) which includes the fix I linked to above.

    frank

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Loading images and above the fold issues?’ is closed to new replies.