Cloudflare related questions
-
Hi,
i’m using my site https://markus-kaemmerer.de with Cloudflare and the Automatic Platform Optimization. I have some performance questens. Maybe the answer is something for a “Cloudflare FAQ”
- Should I use Minification of HTML/CSS/JS in FVM or in Cloudflare or both and why?
- 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
- 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?
- What is the right way to Merge and Defer Scripts like the pinterest tag (example see below)>
- Is there a special optimization for adobe typekits possible?
<!– Pinterest Tag –>
<script>
!function(e){if(!window.pintrk){window.pintrk = function () {
window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version=”3.0″;var
t=document.createElement(“script”);t.async=!0,t.src=e;var
r=document.getElementsByTagName(“script”)[0];
r.parentNode.insertBefore(t,r)}}(“https://s.pinimg.com/ct/core.js”);
pintrk(‘load’, ‘XXXXX’, {em: ”});
pintrk(‘page’);
</script>
<noscript>
</noscript>
<!– end Pinterest Tag –>The page I need help with: [log in to see the link]
-
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 interactionsection, 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.jsandpintrk((one per line), just in case another script uses thepintrkfunction 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.
- The topic ‘Cloudflare related questions’ is closed to new replies.
