The Ideal FlyingPress Settings With CDN Instructions (Moving Away From WP Rocket Resulted In Faster Real-World Browsing Experience)

Flyingpress settings

I switched from WP Rocket to FlyingPress – click through my blog to see the speeds!

This was WP Johnny’s recommendation (I was lucky enough to have him help me with some optimizations to improve speed/core web vitals) and switching to FlyingPress was one of them. So actually, he set it up initially and I just dug through the settings + documentation afterwards.

I honestly didn’t think it would do much, but the difference when clicking through my site was huge.  While there wasn’t much improvement in PageSpeed scores (because I later found out that something as simple as breaking comments would make me pass core web vitals), it was all in real-world browsing experience. I wish I had taken a video comparing their speeds, but if you’ve been on my site recently, you know it wasn’t as fast as it could be. Well now it should be! It was even faster once I set up Cloudflare’s APO which I’ll also walk you through in this tutorial.

If you haven’t heard of Gijo Varghese, he runs the WP Speed Matters Facebook Group and developed some amazing plugins which usually have a perfect 5/5 star rating. While some people are turned off by the initial price of FlyingPress, it’s actually cheaper than WP Rocket long-term considering renewals are $42/year (FlyingPress) and $49/year (WP Rocket) for 1 site. Especially now that WP Rocket stopped offering renewal discounts. Of course if you’re managing 50+ sites then yes, FlyingPress is more expensive than WP Rocket’s infinite license.

Finally, FlyingPress has a 14-day refund policy. You can always set up a staging site, delete your old cache plugin, and try FlyingPress to see the impact on speed + scores. I’m sure Gijo would also appreciate any before/after screenshots (feel free to send them my way so I can post them).

Omm switches to flyingpress

FlyingPress has clear documentation too. Download the plugin from the FlyingPress website and upload it (license key is attached to the zip file and added automatically). Two things I definitely suggest learning are lazy rendering CSS classes and delaying JS.

 

1. Dashboard

General information like links to your FlyingPress account, documentation, Facebook Group, open a support ticket, etc. Shows number of cached pages with option to purge/preload cache.

Flyingpress dashboard

 

2. Cache

Flyingpress cache settings

  • Cache Pages: OnGijo’s documentation says to disable cache in FlyingPress when using APO. However, Brian Li from Kinsta explains how APO is not a substitute for page caching (in your cache plugin or server caching in Kinsta/RunCloud/GridPane). Brian says to keep it enabled in your cache plugin. I use APO and still have caching enabled in FlyingPress. If using Cloudways, FlyingPress automatically Varnish. To make sure FlyingPress cache is working, open your website in an incognito window and look for the FlyingPress response header (x-flying-press-cache: HIT) in the first request/HTML page. See steps to use APO.
  • Additional Auto Purge: None in most cases. FlyingPress already detects many URLs and purges key pages when you publish/update a post or update WooCommerce stock. If you have other types of dynamic content that aren’t being auto purged, use the other options.
  • Cache Lifespan: Never in most cases, unless certain plugins use shorter security tokens.
  • Exclude Pages from Caching: key eCommerce pages, admin/login pages, and several others are automatically excluded from the cache (see list), but you can add more here.
  • Ignore Query Strings: if you have query strings that should be ignored and not cached (i.e. ad campaigns), add them here. FlyingPress has a list of query strings it ignores by default. Johnny also has a detailed tutorial on when to ignore query strings with some examples.
  • Optimize for Logged in Users: Off – turning it on means pages will remain uncached (dynamic). By turning this setting ON, FlyingPress just optimizes pages for logger-in uses “on the fly.” Johnny says this can speed up your admin but will probably cause some issues.

 

3. CSS

Flyingpress css settings

  • Minify & Optimize CSS Files: On – minify CSS with other CSS optimizations such as rewriting font + background image URLs in CSS files so they can be served from your CDN. Whether you should minify or not and where to minify (cache plugin vs. Cloudflare) is tricky. When using APO, Cloudflare recommends disabling minification in Cloudflare and doing it from your cache plugin. Gijo recommends minifying CSS/JS in Cloudflare but not HTML (I’m assuming when not using APO, then disabling minification in FlyingPress). Johnny suggests leaving minify CSS/JS off for large sites with lots of pages/CSS. Then there’s the fact that minifying from your CDN is supposed to be faster than your cache plugin. Lots of different advice (all from smart people), so I guess do your own testing? I use APO so I took Cloudflare’s advice of minifying in FlyingPress + disable in Cloudflare.
  • Generate Critical and Used CSS: On – critical CSS can fix render-blocking resources by creating a critical CSS file which is injected into the head. Unused CSS removes unused CSS selectors and the new file will be loaded asynchronously from an external stylesheet.
  • Load Unused CSS: asynchronously is the safest option which loads the rest of CSS files asynchronously. I would still try the other options and check whether it breaks your site. It did for me, so I went back to asynchronous. See the descriptions and test them yourself.
  • Force Include Selectors: add CSS selectors to be force included in your critical and used CSS. Gijo gave the example of cookie-notice and sure enough, I have a cookie-notice CSS selector on my site. If there are other selectors you want to force include, add them here.
  • Lazy Render HTML Elements – similar to lazy loading images only for CSS selectors. You’ll want to inspect your site in Chrome Dev Tools then copy non-critical CSS selectors loading below the viewport (jump to 1:08 in the video). You can do this with CSS selectors like comments (#comments) and your footer (#footer), then paste them into FlyingPress. But make sure you check your own CSS selectors since they can be different for each site.
Css selectors chrome dev tools
Use Chrome Dev Tools to find CSS selectors, then add them to FlyingPress to lazy render them

 

4. JavaScript

Flyingpress javascript settings

  • Minify JavaScript: On – basically the same optimizations as minify CSS only for JS.
  • Preload Links:  Off – when users hover over a link, that page will be preloaded so by the time users actually click it, the page will appear to load almost instantly. This also means that if users hover over lots of links, too many pages can be preloaded which can increase CPU usage (especially on shared servers). To be safe, you should probably leave this off.
  • Disable jQuery Migrate: On – most themes/plugins stopped using jquery-migrate.min.js.
  • Defer JavaScript – can fix render-blocking errors by loading JS asynchronously, but Johnny says to not enable it since it improves scores at the cost of a slower website.
  • Load Scripts on User Interaction – mostly used to delay third-party code and specific plugins from loading until user interaction. See this list of common JS files to delay. You can also check your “reduce impact of third-party code” report in PSI (see screenshot). The documentation shows you how to delay specific plugins (wp-content/plugins/xxx), scripts from a theme (wp-content/themes), and other examples. When there is no user interaction, all scripts load after a 10s timeout period. Love that you can do this manually.

5. Font

  • Optimize Google Fonts: On – downloads Google fonts to host them locally, combines, and inlines them. Google Fonts served from external JavaScript files cannot be hosted locally.
  • Display Fallback Fonts: On – addresses “ensure text remains visible during webfont load” in PageSpeed Insights which improves CLS. Enable this sets a fallback font for external fonts. This prevents FOIT (flash of invisible text) by adding font-display: swap to your CSS. But this can also cause FOUT (flash of unstyled text), so choose between one or the other.
  • Preload Fonts: On – Gijo recommends only preloading fonts mentioned in the CSS file and fonts loading above-fold. PSI should tell you which fonts to preload under “preload key requests.”  If you’re using a CDN URL to serve fonts, make sure you use the font file with the CDN URL in it (it should match the exact font file found in PageSpeed Insights).
Preload key requests wordpress
PSI tells you which fonts to preload

 

6. Image

  • Lazy Load Images: browser native in most cases which is supported by most major browsers (except Safari) and doesn’t use JavaScript. Otherwise, “using JavaScript” is supported by all major browsers (including Safari) but JavaScript has worse performance. I have “exclude above fold images from lazy load” set to 2 since lazy loading images in the viewport increases LCP. But it depends on how many images are typically in the viewport. Gijo has instructions for lazy loading background images by using the CSS class “lazy-bg”.
  • Add Responsive Images: On – can only use with a FlyingCDN subscription. This resizes images to the appropriate size based on render size. Similar to Cloudflare’s image resizing.
  • Add Width And Height Attributes: On – improves CLS by adding width/height attributes to images. This should help fix the “use explicit weight and height” recommendation in PSI.
  • Preload Critical Images: On – FlyingPress will attempt to detect images shown in the viewport so these images can be preloaded and excluded from lazy load automatically.
  • Disable Emoji: On – removes a small JavaScript code in WordPress that displays emojis.

 

7. IFrame

Flyingpress iframe settings

  • Lazy Load iFrames: On – iFrames like embedded videos and Google Maps will only be loaded when they’re near the viewport, and will be excluded if they’re in the viewport.
  • Use Placeholder Image for YouTube iFrames: On – replaces YouTube iFrames with a preview image. Significantly improves speed if you embed videos since they load extra JavaScript + third-party requests. The iFrame only loads when the play button is clicked.
  • Self-host YouTube PlaceholderOn – love this setting! Even when using placeholders, you may still notice third-party requests from ytimg.com. This should eliminate them by hosting the placeholder on your server instead of pulling them from that external domain.

 

8. CDN

To my knowledge, FlyingPress is still powered by BunnyCDN.

And last time I saw, FlyingCDN also includes Bunny Optimizer. Gijo briefly described the differences between Cloudflare vs. BunnyCDN but there isn’t much documentation on it. You can still use BunnyCDN with FlyingPress, but it looks like FlyingCDN is cheaper and has more value without having to pay an extra $9.50/month for Bunny Optimizer which optimizes images and serves them using WebP. The only reason you might see me switch back to BunnyCDN is because I have credits for referring people as an affiliate. Otherwise, I would use FlyingCDN and I’ve also seen Gijo help many people set it up in his Facebook Group with excellent results.

Here are Gijo’s instruction for setting up FlyingCDN.

Cloudflare vs. Flyingcdn

Step 1: Recharge your FlyingCDN account.

Recharge flyingcdn account

Step 2: Set up a custom CDN URL by adding a CNAME record in your DNS.

Flyingcdn custom domain

Step 3: Add your CDN URL to FlyingPress and select the types of files to serve (i.e. all files).

Flyingpress cdn settings

Step 4: View your source code and make sure the correct files are being served from FlyingCDN. You can also try purging, or just waiting some time for the CDN files to update.

Flyingcdn assets

Recommended Cloudflare settings – if using Cloudflare, Gijo’s recommends changing your website to proxied, setting browser cache TTL to 1 year (or respect existing headers if using Cloudflare to cache pages), only minifying CSS + JS (not HTML), and disabling Rocket Loader.

 

9. Database

Flyingpress database settings

I have database cleanups scheduled every week (yeah, yeah, not a good idea but I’m lazy).

I don’t delete auto drafts or post revisions because I want to keep at least a few backups of posts, but I do limit post revisions to only 5 using Perfmatters (or just do it with a line of code).

Just like I recommend with any cache plugin, I like to install WP-Optimize once in a blue moon to do a thorough cleaning of my database. If you install/delete plugins often, they leave behind bloat in your database. You can probably delete all tables that say “remove.” Also take note of plugin features/modules causing bloat (i.e. anything that scans your site and provides you data).

Wp-optimize-tables
All those plugins you once thought were good leave behind crap in your database

 

10. List Of JS To Delay

I borrowed some of these from Github and WP Rocket’s default JS execution list (before they took it down and made it automatic). Check your third party code report and go through your plugins to learn which ones make sense to delay (i.e. plugins loading files below the viewport). Be especially careful with Google Adsense and other third-party JavaScript tied to tracking.


addtoany
cookie-law-info
apps.elfsight.com/p/platform.js
xfbml.customerchat.js
fbevents.js 
fbq(
/busting/facebook-tracking/
/sdk.js#xfbml
feedbackcompany.com/includes/widgets/feedback-company-widget.min.js
ft.sdk.min.js
getbutton.io
adsbygoogle.js
google-analytics.com/analytics.js
ga( ' 
ga('
/gtag/js 
gtag(
/gtm.js
/gtm-
translate.google.com/translate_a/element.js
static.hotjar.com/c/hotjar-
static.leadpages.net/leadbars/current/embed.js
snap.licdn.com/li.lms-analytics/insight.min.js
livechatinc.com/tracking.js
LiveChatWidget
widget.manychat.com
olark
//a.omappapi.com/app/js/api.min.js
pinit.js
pixel-caffeine/build/frontend.js
shareaholic
ShopifyBuy
sharethis
simple-share-buttons-adder
smartsuppchat.com/loader.js
Tawk_API
widget.trustpilot.com/bootstrap
static.ads-twitter.com/uwt.js
twq(
platform.twitter.com/widgets.js
wpdiscuz

 

11. Cloudflare APO

FlyingPress is fully compatible with Cloudflare APO. I wrote a detailed guide on setting up Cloudflare APO using the Cloudflare plugin, or Cloudflare also has their own APO instructions.

The first step is to benchmark your results/TTFB in KeyCDN and disable FlyingPress (this is recommended by Cloudflare). You’ll reactivate FlyingPress after you confirm APO is working. Kinsta’s Brian Li recommends keeping caching enabled in your cache plugin when using APO.

Next, you’ll need to proxy your traffic through Cloudflare in order to use APO (turn your website to proxied (not DNS only) in Cloudflare’s DNS settings). Once you’ve purchased APO ($5/mo), install Cloudflare’s plugin, create an API Token in Cloudflare, and add it to the plugin.

Cloudflare plugin automatic platform optimization

Finally, use uptrends.com to make sure APO is working by testing your website using https://www. format. Reference the screenshot below. Once it works, reactivate FlyingPress. Gijo also listed some recommended Cloudflare settings if you’re caching pages with Cloudflare.

Test cloudflare apo

Cloudflare’s plugin has a setting to “apply recommended Cloudflare settings for WordPress,” but I would only do this if you’re not comfortable with configuring your Cloudflare settings.

 

12. FlyingPress Facebook Group

Gijo’s main Facebook Group is WP Speed Matters (awesome group) but he also has a group specifically for FlyingPress. You can also stay updated by checking the FlyingPress changelog. I love that he is so involved in the community and listens/answers to what real users are saying. No doubt he’s constantly improving the plugin based on feedback from the community he built.

 

13. FlyingPress vs WP Rocket vs. LiteSpeed Cache

I switched from WP Rocket and can tell you real-word browsing is significantly faster. Maybe because Gijo put an emphasis on this with better critical CSS generation or settings like “preload critical images.” Or maybe the caching is just more aggressive than WP Rocket. All I know is that I’m sticking with it. I don’t have any before/after screenshots of my own site, but quite a few people posted their results in those Facebook Groups, so feel free to search them.

***I’m trying to do a better job of asking people’s permission before posting screenshots from FB Groups, but I’ll try to post some before/after FlyingPres migration results assuming I get people’s permission. I at least wanted to publish this guide in the meantime to make it available.

If you switch to FlyingPress, do Gijo a favor and take a few before/after screenshots of your report(s) and send them to him. You could even post them in the FlyingPress Facebook Group.

You rock Gijo, keep up the great work and thanks for building the awesome community/plugins.

Cheers,
Tom

About Tom Dupuis

Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

4 thoughts on “The Ideal FlyingPress Settings With CDN Instructions (Moving Away From WP Rocket Resulted In Faster Real-World Browsing Experience)

  1. I have always been using WP-rocket on my WooCommerce store until today when I decided to switch to FlyingPress. No regret at all. I have passed core web vitals all the time but with flying press the site got even faster. I also noticed i got much more HIT then before on our cloudflare plan.

    I would definitely recommend FlyingPress over WP-rocket nowdays!

  2. Hi there, great write up on FlyingPress! Have been waiting for good in depth article such as yours on the FlyingPress plugin. I am using a Litespeed enabled hoster but failed to fully correctly utilise the Litespeed Cache plugin therefor switched to FlyinPress which in the end solved everything for me without needing to lift a finger! It sure is a magical plugin but now I am trying to give Litespeed Cache plugin a go again as recommended by my web hosting support as they say it is better in terms of caching with the server. I read till the end of the article but I do not see any mention of Litespeed Cache in your conclusion, might you add it in? Hehe. thanks for the nice article!

    1. Hey Benjamin,

      I do have a tutorial on LiteSpeed Cache. It’s supposed to be the fastest cache plugin but the trick is configuring it correctly which like you said, can be difficult since there are so many options. Probably my top 2 cache plugins right there though… both are great!

Leave a Reply

Your email address will not be published.