Hey umbrellacover ; I had a look just now and I’m not sure I see what you are seeing;
More generally concerning performance; as you can see in above video it takes 6s for anything to happen, this is due to a long “server response time”, I think the first thing you need to do is install something to do page caching (could be a plugin such as KeyCDN Cache Enabler or Speed Booster Pack or WP Super Cache).
Additionally Asset Cleanup is preloading an Autoptimize file that is not there anymore and is preloading as="font" which is not correct anyway, you might want to reconfigure that 🙂
Regarding Autoptimize; I would (re-)enable “serve as static files”, it generally is the faster, better solution.
hope this helps,
frank
Hello, thank your very much for your fast response! Ive deactivated the entire Asset Cleanup, enabled Caching by Speed Booster Pack and enabled ‘Save aggregated script/css as static files’. There is still no changes. Even before i added the ‘Above the Fold’ files, my CSS always tend to load later. After using the Above the Fold method though, my mobile version cant seem to want to ‘accept’ or ‘cancel’ the cookie notification below. Only after all CSS loads, then its clickable. I thought by adding a shorter Above the Fold file, that it will do the trick and load CSS faster, yet it hasnt change a bit. As if ive done nothing at all..
I do understand that i have tons of animated things or alot of gallery slides that might slow the load page, making it 6 seconds to load. My problem is between Second 7 to 10 where the icon info box sliders are beeing shown. On Desktop it first only shows ‘Qualitätskontrolle’, after 3 seconds of waiting it shows all. On Mobile, it loads one by one down the screen but pops back up as a slider. Its just not fuctiontioning well. How can i make the CSS load first? Have i added something that forces html to load first?
when using “inline & defer CSS” your CSS always loads late(r), so if you want to loads CSS early disable that, but at that point your CSS will be render-blocking.
the alternative would be manually adding CSS to the above-the-fold-CSS to ensure all is fine when the site is first rendered?
Oh my, and i thought inline & defer CSS means load first. Im working through WordPress, Elementor and Woocommerce as you can tell. I just need that Info Box Slider (made through the plugin Premium Addons) and that animated Welcome Message ‘Hier glĂĽcklich..fĂĽndig..’ (made through the plugin Essentional Addons) to initially load. Im just guessing everything while creating this website. Must i add the css file of ‘Premium Addons’ and ‘Essentional Addons’ in some place public html file in the File Manager by my hosting provider?
“inline & defer CSS” means load the inline (above the fold CSS) immediately and load the full CSS in a deferred manner (i.e. later).
how did you create/ generate the “above the fold CSS”?
aha. i did that but it didnt change anything, but perhaps i did something wrong? i generated the css through https://jonassebastianohlsson.com/criticalpathcssgenerator/ and i took every single thing from https://www.mimok.ch/wp-content/cache/autoptimize/autoptimize_35821ca0b6b62af9d87af086d3aa98a7.php and generated it and placed it in the ‘above the fold’ box in autoptimize.
it’s entirely possible you’ll have to tweak the resulting CSS manually to ensure all needed styles are there umbrellacover; most tools have problems with JS/ animation-driven content such as the one you’re using :-/
aha are my ‘hier glĂĽcklich, hier fĂĽndig’, my info box slider and my items slider all JS driven and not pure CSS? Im very new to this and it could be i just got crazy using my learnt abilities but didnt realize, this will cause lots of slow loading.
sliders generally are JS-driven indeed 🙂
Ohh great to know that.. I think it will be better to do less than too much even though i had a visual plan on how my website should look like, but since i dont have knowledge for tweaks, i guess i will change my layout a little for the time beeing. Thank you very much for guiding me
