Question posted in 
Trying to optimize my WordPress site and I have a few questions about how I can improve. Further down in this post you can see that Google PageSpeed is recommending me to remove unused CSS as well as render blocking content, my questions are:
- The jQuery file seems large to me, why 780ms for a cached jQuery file?
- And is it logical for the cached css to slow down my page?
Let me know if you need more info. Thank you very much!
Page URL: https://utanuc.nu
Theme:
- Hello Elementor
Plugin:
- WP Rocket Pro
Removed unused CSS:
- /wp-content/cache/min/1/aad770152f8bd8d0197b0ef0ecc3052b.css (143 kb)
Rendering Blocking Content:
- /wp-content/cache/busting/1/wp-includes/js/jquery/jquery-1.12.4-wp.js (780 ms to load)
4
Answers
You can install this plug-in to remove caches.
https://en-gb.wordpress.org/plugins/wp-fastest-cache/
Google Page Speed tells you that cached files slow down your page not because cached files are slower than non-cached ones.
It’s because (for example) file:
/wp-content/cache/min/1/aad770152f8bd8d0197b0ef0ecc3052b.cssis a combination of all your CSS files and it is the only one, so it contains all your theme, plugins and WP CSS code.When files are not cached Page Speed checks them and it is listing every file (for example) like: 20 files * 50ms. Now when it is one cached file, Google checker tells you something like 1 file * 1200ms – and the one is faster but it’s one so looks like a big website slowing file.
By the way, you have to know, that current page speed result is really good for a website based on a heavy theme like Hello Elementor so it will be hard to speed it up without changing listed theme.
With regard to jQuery – Page Speed tells me that it is loading 136ms, so maybe you have changed something or maybe Page Speed is giving different results in specific cases.
Actually what has been said so far is incorrect due to misunderstanding what each bit means.
Rendering Blocking Content:
Render blocking content is content that the page has to load in order to render everything ‘above the fold’ (first page full of content you can see without scrolling).
As it is the JavaScript blocking the page you can use the
deferattribute on all of your JavaScript files (I don’t useRocketbut have a look if you can find a setting that allows you to set all JavaScript todefer).This means that the page will only start loading the JS once all the HTML has loaded and been parsed, therefore not ‘blocking’ the render.
important – you may see an option to use
asyncinstead. No theme I have ever seen is set-up to handleasyncas this loads all the JS in any order and executes it as fast as it can so sometimes it can execute out of order and cause errors (as jQuery may load after something that requires jQuery).deferkeeps the order JS files appear in your HTML.Removed unused CSS:
So this is exactly as it sounds.
Most theme files have hundreds of CSS classes etc. that are just simply not needed to render the page (as there are so many variations to the page design, colour etc.).
To fix this you would have to find all the styles your theme actually uses (on every page, throughout the whole site, in every state (hovered, visited etc.).
You would then remove any that aren’t needed anywhere in your site.
As you can probably imagine this is a monumental task and I would probably just ignore this entirely as this is a really tough one to fix on a theme and requires you to design from the ground up.
Generally:
Your page looks like that you can archive a lot of things with just Gutenberg and a little custom development.
For the jQuery part:
For the CSS part