Thank you for your quick response after removing the inline and defer it then creates render blocking in Google Page Speed test. I also use W 3 Total cache is there another setting perhaps i need to adjust?
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following: https://www.elikarealestate.com/…ize_f7b972cc3730bfab9a8b7f53f45e7cfa.css
OK, now that that works (your site was severly broken before); for “inline & defer” have a look at this video for info on how to extract your critical (aka above the fold) css;
well, you mobile score on google pagespeed insights is a lot better already, but for desktop you indeed still have the autoptimized CSS as render-blocking, which means the critical CSS is not enough for desktop. maybe try using one of the other tools listed in the FAQ to create your critical CSS to see if that fixes anything?
for the autoptimize JS-file; make sure you’re not forcing JS in head and you should be OK.
Thank you i am not sure which tools you are refering too is it the below:?
But how can one find out what the “above the fold CSS” is?
There’s no easy solution for that as “above the fold” depends on where the fold is, which in turn depends on screensize. There are some tools available however, which try to identify just what is “above the fold”. This list of tools is a great starting point. http://jonassebastianohlsson.com/criticalpathcssgenerator/ is a nice basic solution and http://criticalcss.com/ is a premium solution by the same developer. Alternatively this bookmarklet (Chrome-only) can be helpful as well.
I have done all as advised including compressing CSS and pasting it into: Inline and Defer CSS?, however, the errors remain in GTMETRIX. Is there anything else i can do?
I have the settings below:
Optimize HTML Code? – selected
Optimize JavaScript Code? – selected
Exclude scripts from Autoptimize: seal.js,
Optimize CSS Code? – selected
Generate data: URIs for images? – selected
Remove Google Fonts? – selected
Also aggregate inline CSS? – selected
Inline and Defer CSS? – selected and included compressed css
Exclude CSS from Autoptimize: admin-bar.min.css, dashicons.min.css, contact-card.css, visualizer/css/frame.css, visualizer/css/library.css, visualizer/css/media.css,
Save aggregated script/css as static files? – selected
Well, I only see one slightly relevant recommendation in GTMetrix; “Inline small CSS”. when NOT doing “inline & defer”, small css is automatically inlined, but that makes no sense with “inline & defer” active really.
What you could do (but that’s not for the faint at heart) is to force AO to treat the two inline blocks of CSS with media="screen" as media="all" instead with a couple of line of code against AO’s API, which will result in that code being added to the other (bigger) AO CSS file instead.
But if I were you I would rather focus on the images (which are the only really significant issue left when looking at the report).
Hmmm i am a little confused so i guess there really is not fix for the CSS issue?
I have tried very plugin for the image but somehow i can’t get them to perform better. I am using Compress JPEG & PNG Images, EWWW image optimizer and Sumsh it pro. I know this is not related but is there anything you could recommend?
there is, but it’s complex (you’d have to do some code) and I don’t think it’s really worth it (I mean, you still have an A score for “inline small CSS”, 92/100 good enough not to bother with that really).
I know this is not related but is there anything you could recommend?
well, as per the GTMetrix details the problem is not with image compression, but with the fact that you’re scaling images;
Sorry to be a pain in the — but i posted the compressed css code as you recommended into the online entry box and my site has experienced problems i am unable to revert and when accessing the admin area now just receive a blank screen. I have tried disabling the plugin but the changes i believe remain somewhere on the site and i am not sure how to find. Could you please help me find a way to reverse the css that was entered into the field box. I even tried deleting all autoptimize css and still problems persist.
