Cloudflare related questions

Hi,

Should I use Minification of HTML/CSS/JS in FVM or in Cloudflare or both and why?

If you enable HTML minification on cloudflare and if your HTML is big, you are increasing your time to first byte.

You can think of cloudflare as a middleman.
If you want it to do some work, it takes time.
Hence, it has to read your page, minimize it and delivery it.
The same is true for CSS and JS files.

I haven’t tested how they process the page with APO, but last time I checked they save the page without changes, and still apply those things on every page load, but it could have changed.

Also be advised, that double minification on javascript can sometimes lead to scripts getting corrupted and stop working. It’s rare, but it can happen.

For performance, I always disable HTML minification. Others it’s your choice.

Shold I use Rocket Loader with or without JS optimization enabled FVM? For my knowledge, both should be enabled and help each other, because FVM merges the JS, rocet loader helps to multiplex the cached JS from CDN

Most of those “speed settings” on cloudflare will slow down your page, by injecting more javascript into your pages.

Same process as earlier.
They have to read the page, inject the scripts and deliver.

Rocket Loader is an experimental feature that will break a lot of scripts.
It forcefully loads all scripts async, which is not possible in a lot of cases.

On FVM I specifically mark all scripts with data-cfasync="false" to prevent that destructive behaviour and thus render that option useless. We want to control what is async, what is render blocking and what can be deferred. If we add another setting to overwrite what we just did, things are bound to break.

Furthermore, rocket loader injects another js file.
This is not controllable by wordpress, as it’s added by them after the page was generated.
Since I explicitly prevent that feature, you should disable it.

Cloudflare caches about 50% of the hits to my site. My hoster uses agressive caching with an ngix proxy in front of apache with 10 min timeout. Should I use an extra caching plugin in wordpress (like cache enabler) or can i omit this plugin? Is a cache plugin a good idea, when the merged files from FVM are cached through the CDN?

If your server is caching content on nginx, ask them if there is any plugin you can use to purge their nginx cache. If there is, ask them to increase the cache to 24+ hours and then use it as a cache plugin (it would work the same).

However, if you are using APO, you could also disable this cache and ensure the site is always fresh for APO. Else the actual cache time may be 20 minutes… if APO fetches a page after 9:59 while nginx is going to purge it in one second.

APO is almost exactly the same thing as what your hosting is giving you.

What is the right way to Merge and Defer Scripts like the pinterest tag (example see below)>

You don’t merge third party scripts. You only merge scripts that belong to your site.
Scripts like these, need to load directly from the origin.

Third party scripts can be delayed on the Execute matching third party scripts after user interaction section, but you need to see if it triggers errors. Some scripts need to load exactly as they are, but most can be delayed.

To configure this, you only need to copy paste a piece of code from it, that is unique to it.

I would use: s.pinimg.com/ct/core.js and pintrk( (one per line), just in case another script uses the pintrk function somewhere else, without loading the js file.

Is there a special optimization for adobe typekits possible?

There is, but that is a developer’s job…
When people hire me for this, I manually download the fonts and save them on the theme directory. Then I create CSS font-face rules and add them to the theme. Finally, I remove the script completely.

We want fonts to load with CSS, because JavaScript should be avoided for performance reasons.

You could use the same method as the third party scripts above, but it would cause a FOUT effect, as your fonts would only load later (fonts should be render blocking most of the time, hence they should load with css).

My advise, remove typekit and use some google font with a link css tag.
Also use as few fonts as possible, and reuse the same font as much as possible.

• This reply was modified 3 years, 10 months ago by Raul P..

Hi Paul,
thank you for the long and detailed answer. I’m trying your suggestions and will publish a article in german about WordPress + Cloudflare + FVM next time.

With my hosting provider df.eu I can only disable the ngix cache with “Header always set Cache-Control: s-maxage=0” in .htacess, which is not a really good solution (only for experiments).
The typekit integration is done with Astra and Elementor, so changing this from JS to CSS is not that easy. An I need typekit, because some fonts are not available at google fonts.
Markus

You can look at this
https://github.com/CodeZombie/TypeRip

And it should allow you to download the fonts you need.
You would just need to save the fonts locally, create the font-face rules and add it to your css file.