local fonts

Since I just can’t stand that super slowness (drives me MAD) i managed to fix missing fonts issue (I adjusted the stylesheet of my theme and changed the url for the fonts into local addresses and it seemed to help with that particular matter)

Nevertheless, it did nothing.

At this point, I am just desperate. Before the upgrade my speed grade via google dev tool was around 70, after its like 40..
And nothing has change – apart of the fact that I changed the hosting (and my server response time decreased by 400% from 1.5-2 seconds, to 0.1-0.5 seconds)

So I would really appreciate some optimization suggestions. Maybe I am missing something? (doghint.com)

Thank you in advance!

@mukopu3a If you check your browser’s console, you’ll notice that you have “jQuery is not defined errors” because you async loaded the jQuery library. Please remove the “async” feature as it’s not needed for jQuery at least in this case (e.g. the mobile menu doesn’t work as a result when clicking on the burger icon).

One thing that Google PageSpeed Insights report is “Ensure text remains visible during webfont load” –> For that, you need to set “Apply font-display: CSS property value” from “Local Fonts” to “swap (most used)”. Also, have you enabled minify CSS/JS? It doesn’t seem to be on since there are non-minified assets loading (example: /wp-content/themes/minimer/style.css?ver=5.3.2).

For mobile, you have to eliminate some render-blocking resources to get a higher score. One of them is /wp-content/plugins/smooth-scroll-up/css/scrollup.css?ver=5.3.2 – consider Preloading it with Async. You could also do the same for /wp-content/themes/minimer/responsive.css?ver=5.3.2 but make sure to test it out on mobile devices. For the desktop view, it’s totally fine to have it preloaded with an async load.

The website loads two versions of Font Awesome: /wp-content/themes/minimer/fonts/all.min.css?ver=5.3.2 and /wp-content/plugins/smooth-scroll-up/css/font-awesome.min.css?ver=4.6.3 – perhaps you can check them out and if you only need one of them, you can unload the unused one.

Let me know how you get on with these changes. I’d suggest starting with that jQuery issue as it affects the functionality of the website.

• This reply was modified 4 years, 11 months ago by Gabe Livan.

Hi there, Gabe!

Thank you for all the guidelines. I started with jQuery and hope that was something that was causing the problem.

As I’ve mentioned in my email I had to switch off the java optimization at all to make things work but, as it was before, the mobile version was functioning for a while (after clearing the cache) and then stopped working again. So hope that async feature was the cause let’s wait and see. For now everything seems to be working fine at this department.

But is there a way to make it smaller still?? It’s so huge and messing with the speed load grr :(((

Now to the rest of your suggestions (All are highly appreciated)

You wrote:

One thing that Google PageSpeed Insights report is “Ensure text remains visible during webfont load” –> For that, you need to set “Apply font-display: CSS property value” from “Local Fonts” to “swap (most used)”.

Response:

I use the swap function. I also strip away all the fancy fonts that were coming with the theme I use. And I even preload fonts i use locally (here’s the screenshot https://ibb.co/rFFcvrt

All my efforts improved the font loading situation significantly, however, if I use GTmetrix speed test and check the waterfall data fonts are REALLY makes me mad. So if there any other suggestions maybe I miss something – it will be really appreciated.

You wrote:

Also, have you enabled minify CSS/JS? It doesn’t seem to be on since there are non-minified assets loading (example: /wp-content/themes/minimer/style.css?ver=5.3.2).

Response:
I use it, but I excluded minimer/style.css? from minification when I was experimenting with different variations of compression and was trying to make sure that everything works properly.

You wrote:

For mobile, you have to eliminate some render-blocking resources to get a higher score. One of them is /wp-content/plugins/smooth-scroll-up/css/scrollup.css?ver=5.3.2 – consider Preloading it with Async. You could also do the same for /wp-content/themes/minimer/responsive.css?ver=5.3.2 but make sure to test it out on mobile devices. For the desktop view, it’s totally fine to have it preloaded with an async load.

Response:

So async for smooth scroll up didn’t seem to be working at all and I wasn’t able to restore plugin functionality even when I switched everything off and excluded the code from minification and compression. So I ended up installing another similar plugin and async seems to work for it (also I use preloaded picture instead of font awesome for it- which is great). Async for minimer responsive css also works well, so thanks a lot for this one!

You wrote:

The website loads two versions of Font Awesome: /wp-content/themes/minimer/fonts/all.min.css?ver=5.3.2 and /wp-content/plugins/smooth-scroll-up/css/font-awesome.min.css?ver=4.6.3 – perhaps you can check them out and if you only need one of them, you can unload the unused one.

Response:

those are social media icons and the arrow icon. So those were separate things. However, since i ve moved on to another plugin instead of smooth scroll up this issue has eliminated itself.

So, for now that’s it… JQuery is huge and annoying and font loading seems to be horrifying. IF you have any suggestions about it – It would be appreciated.

Also, I am using another theme for another website of mine. (With Asset Clean Up Pro of course :)) and even though the google score is way better the mobile loading speed is horrible (I cry every time I get into my speed report at google analytics)
Could you advise something on it too?

Its buddhatooth.com

Thank you in advance, and Merry Christmas if you are celebrating this.