Update: I found the part where you check removal of google fonts, and it improved my mobile speed from 71/100 to 73/100 and cut the number of issues from 3 down to 2. Desktop speed remained at 87/100.
However, I did not like the look of the blog without the google fonts and did not think it worth just a 2 point increase in speed so I removed the checkmark.
for render blocking CSS (for the autoptimize-file) you can also “force CSS inline” (easy) or “inline & defer CSS” (better but harder). there’s more info in the FAQ about that.
if you don’t want to remove google fonts, you could try the “google fonts optimizer” plugin?
frank
Thanks Frank.
— Where is “force CSS inline”? I see “Inline all CSS?” in the selections/options…same thing?
— Also, and ideas about the Javascript issue I listed earlier regarding the below?
wp-includes/js/jquery/jquery.js?ver=1.12.4
Where is “force CSS inline”? I see “Inline all CSS?” in the selections/options…same thing?
same thing, I’m only have awake 😉
wp-includes/js/jquery/jquery.js?ver=1.12.4
jquery is excluded from optimization by default, because a lot of themes/ plugins (esp. sliders/ carousels) need it early. you can try removing it from the JS exclusion list and test if everything still works. if it doesn’t, roll back the config change, if it does work you have one render blocking file less 🙂
frank
you can try removing it from the JS exclusion list
Hi Frank, do you mean where it says:
Exclude scripts from Autoptimize: seal.js, js/jquery/jquery.js
I should remove the js/jquery/jquery.js?
I have been workiing all night to improve pagespeed myself on clients side, and right about now I am about to manually go through all files being merged with autoptimizer. I have a feeling there might be some duplicate content which could improve mobile ranking.
I must add deferring files, loading and external files really didnt impriove much for me from 75 to 78 and that ioncluded replacing and updating all images pagespeed complained about so I am feeling lucky on trying to shrink to overall size of minified CSS and JS contents.
I have also added expiry_headers, lerverage caching and enabled gzip for static files so all by the book however cant seem to break the 80% barrier yet.
So far:
Combined jquery and jquery minified files into 1 jquery include, head.
Merged google fonts into 1 file from google fonts page
Deferred javascript load for analytics and facebook and twitter
Autooptimize
My own cache plugin around wordpress for max performance
I am wondering on how to solve that jquery problem, havnt found any sollution. Maby having jquery on website means you cannot have 100% on pagespeed?
For reference – I will probably remove link later:
http://www.skarpnes.com/
Hi Kim,
When I disabled google fonts and when I removed “js/jquery/jquery.js?” from the below listed Autoptimize settings:
Exclude scripts from Autoptimize: seal.js, js/jquery/jquery.js
My mobile speed went up by 15-18 points to almost 90!!
However I do not like the look with disabled google fonts, and the google fonts optimizer plugin that Frank recommended did not work.
So at the moment, the google fonts issue is all that is causing my mobile pagespeed to remain at 70 instead of close to 90 :-((((
I wish I knew how to handle this google fonts issue without removing the fonts.
I just tried removing google fonts and font awesome myself, however in my case the difference was zero.
With google fonts loaded, and font awesome – both in footer – PageSpeed: 77 points
Without them… 77 points
I will experiment some more on this. I also havnt tried downloading the font files and hosting from own server – but since it doesnt affect my page speed at all I will probably not experiment to much with fonts right now. If I could only get that plunge above 80% I would be so happy.
I will post my findings from experimenting with autopimizer the next hour or so.
kimsteinhaugcom;
* try “inline CSS” (easy) or “inline & defer CSS” (harder but better), cfr. the FAQ to fix those render blocking autoptimize CSS-warnings
* regarding jquery: on most sites you won’t be able to remove it from AO’s JS optimization exclusion list, as some themes/ plugins require it to be un-optimized. but as I wrote earlier here, you can try removing it from the exclusion list & test if everything still works.
androgenicalopecia; do try that “google webfont optimizer”-plugin I linked to earlier, it should improve your pagespeed score as well.
frank
Thanks Frank, for some reason the second time I tried out that plugin to optimize fonts it worked well.
Thanks to your help today and your plugin, my mobile speed has gone up from around 70/100 to around 90/100!
If I understand this correctly I am wasting time by trying to reorder the CSS being optimized, as I need to find the CSS that is needed to render the visible part of the page only for the head section.
So I should try seperating all the CSS into two parts – one critical and one not critical. If I understand correctly.
I guess I will need to google abit now as I have no understanding with the links you posted, however I have a feeling that as soon as I understand the concept here and unerstand how to use the tools – things will get alot clearer.
Thanks for the links – will look into them now.
OK I got the bookmarklet to work and tried the option inline and defer styles. However this dropped me 10 points on mobile, dropped med from 100 at usability and 1 point at desktop. I went back to the old way of optimizing.
I will try manually deferring some of the CSS at the end of the page to make the file lighter and see how it goes. There are small margins however as I see now reverting to previous setup where I had 77 points mobile and 88 points pc – its dropped to 72% and 87%.
I know one thing now – and that is to store snapshots of HTML file and main CSS files with notes so that I can compare them to see why pagespeed jumps so much back and forth.
My main problem is that I cannot remove and optimzize to much on the actual plugins since the webmaster may update or change this at any time – my work is to optimize it in a way that the system is fluid so to speak. I find it veryu interesting to tweak I have learned lots last 24 hours however it is painfull when small things have huge impacts and I do not feel pagespeed really gives detailed information since fixing many of the points doesnt result in any change at all many times.
And I also noticed, alot of websites writing about their 100% score doesnt have it – so they had it when doing it but have lost it over daily use of the system so having 90% or higher seems like a huge effort in keeping it there.
I did look into a few pages that had more than 90% pagespeed – noone had jquery at all in their page… 🙁
finding the correct critical CSS can be difficult, you might have more luck with Jonas’ free or premium online service?
as far as pagespeed insights is concerned; this is but an attempt to quantify best-practice adherence. real performance is (shoudl be) measured using tools that give hard data about time to first byte, time to start render, time to document complete, time to fully loaded … such as (my favorite) webpagetest.org. It is entirely possible to have a site with a near-perfect pagespeed score that is slower (wrt time to …) then one with a lower score.
but web performance-tuning is somewhat of an art. or black magic, maybe 😉
