hey kureman;
I had a look at the HTML of your website, but unfortunately I don’t see any reference to Autoptimize in there, meaning that either you turned it off already or something (another plugin?) is conflicting. Can you start by confirming if AO is active and if so what your settings are?
frank
Hi @optimizingmatters,
Thank you for your fast feedback!
Oops, indeed I turned it off temporarily. It’s now active again.
Sorry I don’t know how it’s written in English, but here are the settings I chose.
I am using WP Super Cache btw.
1. JavaScript options
Optimize JavaScript code ?
Do not concatenate but defer?
Defer inline JS as well?
2. CSS options
Optimize CSS code ?
Concatenate CSS files ?
Concatenate also inline CSS?
(default) Exclude CSS files from Autoptimize : admin-bar.min.css, dashicons.min.css, wp-content/cache/, wp-content/uploads/
3. HTML options
Optimize HTML code ?
Also minify inline JS/ CSS?
4. Various options
Save concatenated scripts/CSS as static files?
Minimize excluded CSS and JS files?
Enable fallback in case of 404 error?
Optimize also for logged in editors and administrators?
Optimize shopping cart or order pages as well?
Enable configuration by publication/page?
well, congratulations, your load time went from 5 to 1.8s 🙂
or are you still seeing 5s?
Impressive!
Thank you 🙂
Maybe I had to wait a bit before testing again with pingdom..
Still, I don’t understand why it’s faster.
Because in Pingdom > Content size by content type I see: JS Script 1.1 MB, CSS 229.2 KB
And I had the same results without Autoptimize.
For some unknown reasons the performance grade hasn’t change too.
well, you could try the “aggregate JS” option, which will combine all JS and load it deferred in the footer, but I’m not sure if that will *really* improve performance despite pingdom suggesting less HTTP requests.
typically I prefer assessing performance (and perf. improvements) using Google Pagespeed Insights (simpler) or webpagetest.org (more in-depth & configurable) and in those focus on relevant KPI’s (which is not a grade and not even the “load time”).
I had a quick look at pagespeed insights for your site and the most important thing to tackle based on that tool are … images. Consider using the image optimization option in Autoptimize or use a separate plugin to ensure images are served as webp or AVIF where possible?
Thank you for your many advices!
I will definitively have a look at Google Pagespeed Insights and webpagetest.org.
At present I am using TinyPNG. I like it but there is a monthly compression limit that I have already reached 🙁 I will probably wait next month to act on images.. But I will also have a look on your solution with ShortPixel.
-
This reply was modified 3 years, 10 months ago by
kureman.
compression as such is not the issue, but the fact that you’re not serving the “modern” image formats, but I’m not sure if/ how TinyPNG (which is great) offers that.
based on Pagespeed you might also gain perf. by looking into the “remove render-blocking CSS” option (for which you’ll either have to (a) generate & add the “above the fold”-CSS or (b) create manual rules on the critical CSS page (generating the critical CSS) or (c) fill in the API key of the premium criticalcss.com service to automate it all.
You’re right, TinyPNG does not offer the conversion from (e.g) png to webp.
I am not sure about something. If I use the image optimization option in Autoptimize, do I have to install Shortpixel?
Pagespeed gives me a lot of advices! I will need more time to understand them all..
I am not familiar with critical CSS yet, I need to study this subject in more depth too.
The “remove render-blocking” and “reduce unused CSS” options show me that https://mononikokoro.ch/wp-content/cache/autoptimize/css/autoptimize_xxxx.css is one of the url that could be improved. Do I need to change something in the settings or act elsewhere?
If I use the image optimization option in Autoptimize, do I have to install Shortpixel?
no, AO uses SP’s image optimizing CDN, but their plugin is not needed for that 🙂
I am not familiar with critical CSS yet, I need to study this subject in more depth too.
there’s some info about that in AO’s FAQ under “inline & defer CSS”
The “remove render-blocking” and “reduce unused CSS”
remove render-blocking CSS is what critical CSS does.
re. Unused CSS; AO has no idea what CSS is used on a page, but there’s a 3rd party service called Rapidload that can help there, see the link on the “Optimize More” tab.
Hi @optimizingmatters,
Sorry to use this resolved topic to discuss again, I hope it’s not a problem.
I am still trying to improve my website performance using Google Pagespeed Insights recommandations and I don’t really understand why the mobile performance is so bad compared to desktop.
First, Google tells me that I should reduce/defer unused CSS and JS, indeed it takes ~6.2s on mobile while it takes only 0.97s on desktop. Then, on mobile only, I get the diagnostic: “reduce impact of third party code”. Do you know why there is such differences?
Finally, I would like to manually create rules in Autoptimize Critical CSS tab.
BTW, will it have an effect on JS scripts too?
So, I used https://www.sitelocity.com/critical-path-css-generator and typed my website url.
Then in Autoptimize, I clicked on “Add new rule”, selected “path”, typed “/” and added the Critical Path CSS generated by this tool. Is it the correct way to do? If yes I don’t see any changes on performances (neither on mobile nor on desktop).
Should the rule be different on mobile and desktop? if so, is there a way to define this?
critical CSS will help with making sure the CSS is not render-blocking, but does not help with unused CSS nor does it impact JS.
for the homepage choose conditional tag instead of path and from the dropdown then use the is_front_page and past the sitelocity results but without the opening and closing style tags.
the rules apply to both desktop and mobile, so no need to differentiate, but you might want to create rules for other conditionals (e.g. is_single for blogposts or is_page for pages) as well.
happy optimizing! 🙂
frank
Oh okay! Thanks for the explanation.
Sorry, one last question, do you know any good plugins to dynamically act (delay) on unused CSS and JS when pages load?
The following pages don’t really help me understand how to act on wordpress after analyzing the coverage.
https://web.dev/unused-javascript/?utm_source=lighthouse&utm_medium=lr
https://web.dev/unused-css-rules/?utm_source=lighthouse&utm_medium=lr
well, for unused CSS you could give Rapidload a try, it’s listed on the “optimize more” tab. don’t have something handy like that for JS I’m afraid.
