Best FlyingPress Settings for 2024 (To Pass Core Web Vitals)

Are you looking for the best FlyingPress settings to speed up your website and pass Google’s Core Web Vitals in Google PageSpeed Insights?

I switched from WP Rocket to FlyingPress on this website many months ago and haven’t looked back. When I did, I started passing Core Web Vitals on both desktop and mobile and got a crucial Google ranking boost.

Feel free to view my speed tests below. I’ll teach you exactly how you can get fast speeds like this, too.

Here are the main reasons I switched from WP Rocket to FlyingPress:

• Easier to configure (just flip on a few extra settings and you’re good)
• Even faster speeds than WP Rocket. I consistently passed Core Web Vitals in the mobile tab after switching which is the main tab you need to optimize for
• Much better Cloudflare APO compatibility
• More unique speed features that WP Rocket doesn’t offer (for example, lazy render HTML elements)
• Perfect integration with FlyingCDN which means you no longer have to use plugins like ShortPixel or spend time manually resizing/compressing images (saves me hours of time every year)

Fortunately for you, FlyingPress is extremely easy to configure without showing you a bunch of overwhelming settings. And, best of all, it just works (unlike some other caching plugins).

The developer of FlyingPress, Gijo, is one of the most highly-respected developers in the WordPress speed world and is an overall awesome dude.

This FlyingPress best settings tutorial will guide you through each section and tell you exactly which settings you should apply depending on your situation so that you can have a very fast WordPress site that passes Google’s Core Web Vitals which will get you a precious Google ranking boost.

My current setup is the following:

• Cloudways Vultr HF Hosting (fastest hosting in speed tests)
• FlyingPress for speed optimization (using my recommended settings)
• Cloudflare APO (to cache HTML versions of my pages on the edge)

This FlyingPress tutorial is the most comprehensive guide on the web right now. It’s a longer one, but I encourage you to use the Table of Contents below and follow along as you need, or check out the Best FlyingPress Settings Overview below for the condensed version.

So, are you ready? Let’s make your site fly.

Use the best FlyingPress settings guide below to jump around as you need:

FlyingPress Speed Tests

First off, let’s talk about how fast your website can be if you use the proper setup along with the best FlyingPress settings that I’ll go over.

With my recommended FlyingPress settings, you can pass Core Web Vitals with flying colors and even get a score of 100 on the mobile tab of Google PageSpeed Insights which is the hardest one to optimize for.

Here’s a GTMetrix report ran on this exact FlyingPress tutorial which passes all Core Web Vitals with insanely fast speeds.

Getting fast scores like these is very easy by doing four things:

1. Using fast, reliable hosting (See hosting page)
2. Using a lightweight, customizable WordPress theme (I highly recommend the Kadence Theme or you can read my full Kadence Theme Review)
3. Not using third-party page builders and using the built-in WordPress block editor to build your pages (Join my WordPress Without Page Builders Facebook Group)
4. Using a high-performance caching plugin (FlyingPress)

Feel free to read my full Cloudways Review or Getting Started with Cloudways if you want to use the same extremely high-performance hosting that is powering this website.

FlyingPress Setup

If you don’t already have FlyingPress, I would really appreciate it if you used my affiliate link to purchase it. I spend a lot of time writing 100% free tutorials, and your contribution goes towards making this site even better. Thank you, you’re awesome! 🙂

Once you purchase FlyingPress, sign in to FlyingPress if you haven’t already.

Go to Account → Subscriptions tab.

Here, you will see a button to Download FlyingPress.

If you use this file to upload FlyingPress on your WordPress site, it will use keyless activation, and FlyingPress will automatically be enabled with your license key.

Do I need to purchase additional FlyingPress licenses to use it on staging or testing sites? No, you do not need to purchase additional licenses to use FlyingPress on staging/testing websites.

For example, if you buy a single license to FlyingPress, you can activate the license on “example.com” and also “staging.example.com.”

Now let’s do this thing!

Best FlyingPress Settings Overview

As soon as you install and activate FlyingPress, the plugin will apply several “safe” default settings which should work for the vast majority of websites.

However, there are still more settings we can configure to make your site even faster.

If you don’t want to read through this entire guide, I went and compiled all of my recommended FlyingPress settings in a condensed overview which should work for most WordPress sites.

1. Dashboard

The FlyingPress dashboard contains three sections: Cache, Account, and Quick Actions.

The Cache area will show the number of pages that are currently cached.

The Account area tells you the following information:

• The Renewal/Expiry date of your subscription
• Whether your FlyingPress Subscription is ‘Valid‘ or not

In Quick Actions, you also have various options for purging and preloading:

• Purge pages – Purge only HTML pages from the cache
• Preload cache – Preload the cache without clearing the existing cache
• Purge pages and preload – Purge all HTML pages only and preload cache
• Purge everything and preload – Purege all (HTML pages, CSS, JS, fonts, etc) and preload cache

You shouldn’t use these buttons often since FlyingPress is great at automatically controlling the cache.

Still, if you need to use them, I suggest using the ‘Preload cache‘ button, which will overwrite existing cached pages one by one as they become ready. Visitors on your site will continue seeing the previously cached pages until the new cache has been generated.

The Dashboard area has some convenient quick links:

• Documentation – If you are wondering what FlyingPress settings you should use, I suggest you use the FlyingPress documentation which will explain each area within the plugin.
• Facebook Community – The FlyingPress Facebook Group is fantastic, with nearly 2,000 members. The community is very helpful and Gijo, the developer of FlyingPress, actively monitors the group and responds to many questions. I expect this group will grow pretty quickly once people discover how amazing FlyingPress is compared to other caching plugins. I would also highly recommend joining the WP Speed Matters Facebook Group which has over 20,000 members and is run by Gijo and covers all topics involving WordPress site speed.
• Open a ticket – If you have a question or an issue with FlyingPress, then use this link to open a support ticket. The FlyingPress team will respond to your query within 24 hours and are always happy to help.

2. Cache

• Cache Logged in Users – Disabled
• Scheduled Preload – Never
• Exclude Pages from Caching – Enter the URL or path of pages that you want to be excluded from caching
• Ignore Query Parameters – Query parameters that match will be removed and the cached page will be served
• Bypass Cookies – Specify cookies that, when matched, bypass the cache

These are the best FlyingPress settings for the Cache section.

Cache Settings Overview

As of FlyingPress v4, FlyingPress uses “Always On Caching.”

This means that even if you have another caching layer (Varnish, Nginx, Cloudflare APO), FlyingPress always caches pages which serves as a fallback in case any external caching layers don’t have a cached page. This leads to a higher cache hit ratio for your visitors!

FlyingPress automatically generates static HTML versions for all your pages, which can significantly improve your Time To First Byte (TTFB).

This is because the HTML versions of your pages are cached and don’t need to be dynamically generated each time a user comes to your page using calls to PHP, WordPress, and your database which really slows down the rendering of a page.

How is the FlyingPress cache generated? FlyingPress will build your static HTML page cache by preloading pages specified in your sitemap which is automatically detected.

Scheduled Preload

You can specify if you want to automatically preload your site’s cache after a specific time interval.

The majority of websites should have “Scheduled Preload” set to “Never,” but you may need to set it to one of the timed values if you are running into “nonce” validation issues.

Remember that the more frequently you automatically purge the cache, the more server resources it will use.

Exclude Pages from Caching

FlyingPress automatically excludes certain pages from caching such as your “Cart,” “Checkout,” and “Account” pages if you’re using eCommerce plugins like WooCommerce.

However, you may still have additional pages that you’ll want to exclude from caching.

For example, say you have created a custom checkout page for a product on your website and the URL is this:

https://startblogging101.com/custom-checkout/

You can automatically exclude this page from being cached by adding the keyword ‘custom-checkout‘ in the “Exclude Pages from Caching” box.

Ignore Query Parameters

In this box, you can type query parameters that you want to be removed and have the cached page served instead.

When there is a query parameter in your URL, FlyingPress doesn’t cache that page and instead optimizes the page on the fly.

However, there is a large list of query parameters that FlyingPress ignores by default and instead serves the cached page.

If you need additional query parameters other than the default FlyingPress ones, you can add the keywords in the “Ignore Query Parameters” box.

FlyingPress + Cloudflare APO Setup

FlyingPress is fully compatible with Cloudflare APO, which is one of the main reasons I switched from WP Rocket to FlyingPress.

If you want to learn how to set up Cloudflare APO on your website, it only takes a few simple steps.

Kinsta has a really helpful Cloudflare APO setup guide that highlights the benefits of why using Cloudflare APO is superior for your WordPress speed if you want to drastically lower your TTFB.

A quick overview of setting up Cloudflare APO on your WordPress site is this:

1. Create a Cloudflare API Token for WordPress
2. Install the Cloudflare WordPress Plugin
3. Configure Cloudflare WordPress Plugin With Your API Key
4. Enable APO in Cloudflare for Your Site

I would also recommend reading “Get Started With APO” on Cloudflare’s site for simple instructions.

3. CSS

• Minify CSS – Enabled
• Remove Unused CSS – Enabled
  • Load Unused CSS – Asynchronously
  • Exclude Stylesheets – Enter the URL or path of CSS files that you want to be excluded from the unused CSS removal process
  • Include Selectors – Enter selectors you want to forcefully include in your used CSS
• Lazy Render Elements – Skips the rendering of HTML elements until they’re needed based on CSS selectors that you specify

These are the recommended FlyingPress settings for the CSS section.

Let’s go over each of the FlyingPress CSS settings below.

Minify CSS

You should enable the “Minify CSS” setting in FlyingPress.

Doing this will increase the loading speeds of your site by removing all unnecessary characters in your CSS files, such as empty spaces, empty lines, and comments.

After saving this option, click through your site to ensure everything still looks good.

Remove Unused CSS

The FlyingPress Remove Unused CSS feature addresses the “Remove Unused CSS” suggestion in Google PageSpeed Insights for your CSS files.

You should enable the “Remove Unused CSS” setting in FlyingPress.

FlyingPress is insanely good at removing unused CSS and does it very quickly.

In fact, unused CSS is removed from complex pages in under 30 ms while using very few resources. This is one of many reasons why FlyingPress is the best caching plugin out there.

Keep in mind that Critical CSS and Used CSS are slightly different.

Critical CSS is all the CSS needed for rendering your page above the fold. FlyingPress figures out the necessary CSS and injects it directly in the head tag like so:

<style id="flying-press-css">...</style>

The Used CSS is all the remaining CSS generated after removing all the unused CSS for your page. The used CSS is then injected as an external stylesheet that is loaded asynchronously.

Load Unused CSS

After you have enabled the “Remove Unused CSS” setting, you have three options to choose from for how you want to load your unused CSS:

• Asynchronously – The rest of your CSS files will be loaded asynchronously with the rest of your files. This is the safest option.
• On user interaction – Similar to loading the files asynchronously, except that the remaining CSS files don’t start loading until user interaction (mouse movement, keyboard input, scrolling, etc.)
• Remove – This option will remove all unused CSS files, never loading them. This option will give you the best performance, but be very careful because you may see issues if you use this option.

Test your website thoroughly if you choose the ‘on user interaction‘ or ‘remove‘ options, especially right after the initial page load, as you may see things “jump” or styling correct itself (which is what I saw), in which case you should choose the ‘asynchronously‘ option to be safe.

Exclude Stylesheets

If you have entire CSS files that you want to be excluded from the unused CSS removal process, you can enter the URL or path of those files in the “Exclude stylesheets” box.

This would be used if you have CSS files needed to run your site that shouldn’t be removed.

Include Selectors

Sometimes, FlyingPress may not include all the Critical and Used CSS needed. If you find that certain selectors are missing for elements that need to be included, you can specify those in the “Include selectors” box.

For example, say you had a slide-out that is supposed to show on your pages, but it didn’t get added to the Critical CSS.

The HTML and CSS for the slide-out might look something like this:

<div id="slide-out">
    <p class="heading">Sign Up!</p>
    <p class="content">Make sure to sign up for our newsletter.</p>
</div>

#slide-out {
    background: #cccccc;
}
#slide-out .heading,
#slide-out .content {
    color: #ffffff;
}

You could add either ‘#slide-out‘ or ‘slide-out‘ to the “Include selectors” box to force the CSS for that element to load.

Lazy Render Elements

First and foremost, THIS FEATURE IS AWESOME!

You should enable the “Lazy Render Elements” setting in FlyingPress.

In the box, enter selectors of elements you want to be lazy rendered.

Lazy rendering HTML elements can greatly improve your Time to Interactive (TTI), Total Blocking Time (TBT), and Largest Contentful Paint (LCP) scores.

As you’ll see later in this FlyingPress tutorial, you can lazy load your images. This feature works similarly, except you can lazy load entire HTML elements. 😲

So, you know all your comments below your blog post? And your “related blog posts” section? And your “about the author” section? And your footer?

You can tell your browser to not render any of those things until the user scrolls it near their viewport.

You might be wondering… “yeah, but does Google still see this content when it crawls your site?” You bet it does!

You can see that Google bots still see your lazy rendered HTML elements in a FlyingPress tweet.

That’s why this feature is amazing.

For example, I have the following selectors in my “Lazy Render HTML Elements” box:

#comments
footer
.entry-related

This will go and lazy render all of my comments on my blog posts, my footer on my pages, and my “Similar Blog Posts” section.

4. JavaScript

• Minify JavaScript – Enabled
• Preload Links – Enabled
• Defer JavaScript – Enabled
  • Defer Inline – Enabled
  • Exclude Scripts from Defer – Specify which scripts should be excluded from deferring
• Delay JavaScript – Enabled – Download and execute scripts after user interaction (scroll, mouse movement, keyboard input)
  • Delay Method – Delay selected
  • Scripts to Delay – Specify which scripts should be delayed

These are the best settings for the JavaScript section within FlyingPress, but you have to be careful with a few of them.

The JavaScript section contains a gold mine of optimizations for your site that will help cut down on First Input Delay (FID) or Total Blocking Time (TBT), which will take care of a lot of the speed suggestions in Google PageSpeed Insights and GTMetrix, helping you pass Core Web Vitals.

If you’re coming from a different caching plugin, such as SiteGround Optimizer or WP Rocket, you may notice that FlyingPress doesn’t have an option to “combine” your JavaScript or CSS files.

Why? Because you shouldn’t. With HTTP/2, you should not be combining your JavaScript and CSS files. It’s an outdated optimization option that I wish other optimization plugins would remove.

Therefore, FlyingPress doesn’t even show that as an option, leaving you with fewer settings to worry about. I love it. 🙂

Let’s go over each of the FlyingPress JavaScript settings below.

Minify JavaScript

You should enable the “Minify JavaScript” setting in FlyingPress.

Doing this will increase the performance of your site by removing all unnecessary characters in your JS files, such as empty spaces, empty lines, and comments.

After saving this option, click through your site to ensure everything still looks good.

Preload Links

You should enable the “Preload Links” setting in FlyingPress.

Enabling this option will improve the perceived loading time of pages for a user that is navigating around your site.

How do preload links work? If a user hovers over or touches a link, that page will start to be fetched in the background. That way, when the user does actually click or tap the link, the page will appear to load instantly.

Pretty cool, huh?

Defer JavaScript

The FlyingPress Defer JavaScript feature addresses the “Eliminate render-blocking resources” suggestion in Google PageSpeed Insights for your JavaScript files.

You should enable the “Defer JavaScript” setting in FlyingPress.

This should help dramatically lower your First Input Delay (FID) or Total Blocking Time (TBT) times for Core Web Vitals.

For the best performance on your website, it’s recommended that you load JavaScript files in the footer of your website or defer them so that they don’t block the downloading of other assets on your site, which slows it down.

Enabling this option will load each JS file on your website with the defer attribute.

Before deferring JavaScript:

<script src="large_script.js"></script>

After deferring JavaScript:

<script src="large_script.js" defer></script>

If enabling this option breaks your site due to a problematic script, you can use the “Exclude Scripts from Defer” box to specify scripts that should be excluded from deferring.

Defer Inline

You should enable the “Defer Inline” setting in FlyingPress.

Inline JavaScript is executed immediately. When you enable the “Defer JavaScript” setting mentioned in the previous section, some inline scripts could potentially throw errors.

Therefore, you should also enable the “Defer Inline JavaScript” setting, which will also convert the inline scripts to load deferred.

Before inline JavaScript defer:

<script>
  alert("hello");
</script>

After inline JavaScript defer:

<script
  src="data:text/javascript,alert%28%27hello%27%29"
  type="text/javascript"
  defer
></script>

Exclude Scripts from Defer

In this box, you can specify which scripts you want to be excluded from being deferred.

When you enable the “Defer JavaScript” setting, every single script may not work with the defer attribute.

Therefore, if you need to exclude a certain script from getting the defer attribute, you can add the URL of the script or a keyword that matches the script tag.

For example, say you have two jQuery scripts that you need to be excluded that look like this:

<script src="https://startblogging101.com/wp-includes/jquery.min.js">
<script src="https://startblogging101.com/wp-includes/jquery.migrate.min.js">

You could paste the entire URLs in the “Exclude Scripts from Defer” box, or you could make it even easier by adding the keyword ‘jquery‘ which will exclude both files.

Delay JavaScript

The Delay JavaScript feature in FlyingPress is an incredible feature that could potentially increase your website’s loading time by several seconds.

You should enable the “Delay JavaScript” setting in FlyingPress.

What does it do? Delay JavaScript improves performance by loading and executing the specified scripts only on user interaction, such as mouse movement, keyboard input, scrolling, touching a mobile screen, etc.

If there is no user interaction, all scripts will automatically be loaded after 10 seconds.

Enabling this feature can significantly improve several speed recommendations in Google PageSpeed Insights, including the following:

• Remove unused JavaScript
• Minimize Main thread work
• Reduce JavaScript Execution time
• Total Blocking Time (TBT)
• Time to Interactive (TTI)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)

This feature will give your website a massive speed boost if your site has heavy resource-intensive scripts that need to load (such as third-party scripts like Google Analytics, AdSense, live chat plugins, Gravatars, Facebook Pixel, YouTube embeds, and social sharing plugins).

FlyingPress includes a default list of scripts that are automatically loaded on user interaction (see the list below), but you can always remove or add your own scripts as needed.

googletagmanager.com
google-analytics.com
googleoptimize.com
adsbygoogle.js
xfbml.customerchat.js
fbevents.js
widget.manychat.com
cookie-law-info
grecaptcha.execute
static.hotjar.com
hs-scripts.com
embed.tawk.to
disqus.com/embed.js
client.crisp.chat
matomo.js
usefathom.com
code.tidio.co
metomic.io
js.driftt.com
cdn.onesignal.com

Delay Method

If you enable the “Delay JavaScript” option in FlyingPress, you will see a section to choose your “Delay Method.”

You can choose between “Delay selected” or “Delay all.” Here’s the difference between the two:

• Delay selected – This option works as an inclusion list where you can list all of the scripts that you want to delay in the “Scripts to delay” box
• Delay all – This option works as an exclusion list where all scripts are delayed except for the scripts you specify in the “Exclude scripts from delay” box

5. Font

• Optimize Google Fonts – Enabled (if you use Google Fonts on your website)
• Display Fallback Fonts – Enabled (if you want to ensure text remains visible during webfont load)
• Preload Fonts – Enter font URLs to prioritize loading fonts that are required for rendering

These are the FlyingPress best settings for the Font section, assuming that your website uses Google Fonts.

This site only uses system fonts which is the fastest way to use fonts as it requires absolutely zero additional requests or downloads. If your site uses system fonts, you do not need to do anything for this section.

Optimize Google Fonts

You should enable the “Optimize Google Fonts” setting in FlyingPress if you are using Google Fonts on your website.

When you enable the optimize Google Fonts setting, FlyingPress will:

• Combine all Google Fonts on the page to reduce HTTP requests
• Self-host Google Fonts (download and save the fonts locally)
• Inline Google Fonts CSS

With all of the new GDPR rules, the Google Fonts optimization that FlyingPress provides is clutch. It will self-host your Google Fonts and do all the behind-the-scenes work for you so that you don’t have to worry about it.

Display Fallback Fonts

You should enable the “Display Fallback Fonts” option in FlyingPress, assuming that you are using Google Fonts on your website.

If you are using system fonts on your website (like this website), you don’t need to do anything here because system fonts don’t need a fallback font.

When you use external fonts such as Google Fonts, the Google Font won’t show until it’s fully loaded. This can cause an unwanted effect called “Flash of Invisible Text” or FOIT. You can see a nice GIF of this in the Display Fallback Fonts FlyingPress documentation.

With “Display Fallback Fonts” enabled in FlyingPress, your site will show a system font (which loads right away) to your users until your Google Font is ready, and then your Google Font will take over and show.

This helps fix the suggestion in Google PageSpeed Insights, which says “Ensure text remains visible during webfont load,” but it will cause what is called Flash of Unstyled Text (FOUT).

Preload Fonts

In this box, you can enter font URLs for fonts you want to preload that are required immediately for rendering your page.

The Preload Fonts feature in FlyingPress allows you to tell the browser to start downloading fonts that it otherwise wouldn’t realize until much later, usually due to the font being referenced within a CSS file.

How do I know which font URLs to preload in FlyingPress? The easiest way is to go to Google PageSpeed Insights and enter the URL for the page you want to analyze.

If you see a suggestion that says “Preload Key Requests,” look for a list of font URLs under that section.

Right-click on each one, choose “Copy Link Address,” and then add it to the “Preload Fonts” box in FlyingPress.

Easy peasy!

6. Image

• Lazy Load Images – Enabled
  • Exclude Above Fold Images from Lazy Load – 2 images
  • Exclude Images from Lazy Load – Specify which images you want to preload and have displayed immediately without lazy loading them
• Add Responsive Images – Enabled (only enable this if you are using FlyingCDN)
• Add Width and Height Attributes – Enabled
• Preload Critical Images – Enabled
• Disable Emoji – Enabled

These are the FlyingPress best settings for the Image section.

Let’s go over each of the FlyingPress image settings in more detail below.

Lazy Load Images

You should enable the “Lazy Load Images” option in FlyingPress.

In order to pass Google’s Core Web Vitals, you are going to want to lazy load your images.

Some of my blog posts (including this tutorial) have dozens of high-resolution images on them. Imagine if every single one of those images had to load when the user first clicked into this page. That could take a while, especially on a slow connection.

With the “Lazy Load Images” option enabled, images that are not required for the initial rendering of the page (which are most of them) will only be loaded once the user scrolls them near their viewport.

Exclude Above Fold Images from Lazy Load

I would recommend setting “Exclude Above Fold Images from Lazy Load” to 2 images in Flying Press, but yours might differ depending on the number of images you have above the fold on pages.

Lazy loading images is good. It prevents the browser from needing to load tons of images that are below the fold and not needed for the initial rendering of a webpage.

However, what about your images above the fold that are needed when you first load a page? For example, say you have your logo and a featured image on your blog post that load above the fold – what happens then?

Well, these images would also be lazy-loaded if you have that option turned on.

If you run your pages through Google PageSpeed Insights, you may see a warning that says “Largest Contentful Paint image was lazily loaded.”

Images above the fold that are lazy-loaded end up rendering later in the page lifecycle which can delay your Largest Contentful Paint (LCP), hurting your page scores.

Therefore, you will want to exclude images in the viewport to improve your LCP and the overall loading experience for your visitors.

I have 2 images excluded for my site, which should take care of my logo and the main image for my pages (whether that be a featured image on a blog post or a hero image on a landing page).

Exclude Images from Lazy Load

In this box, you can specify a list of images that you want to manually exclude from being lazy-loaded.

For example, say you have an image on your website like this:

<img src="https://startblogging101.com/wp-uploads/flyingpress-best-settings.png" class="wp-image-3159" />

You could exclude that image from being lazy-loaded by typing either “flyingpress-best-settings.png” or “wp-image-3159” in the “Exclude Images from Lazy Load” box.

Add Responsive Images

You should enable the “Add Responsive Images” setting in FlyingPress, but there are a couple of important things to point out.

First, you can only enable responsive images if you are using FlyingCDN.

Go down to the FlyingCDN setup section if you want to learn how to set it up.

Secondly, this feature may not perform well on every website, so just be aware of that. If you run into any issues, you can simply toggle the responsive images setting off.

A very common suggestion that you see in Google PageSpeed Insights is “Properly size images.”

With the FlyingPress responsive images feature, you should be able to kiss this suggestion goodbye.

For example, if you have an image that is 1200×600 pixels when shown on a desktop screen, it would need to be resized to 600×300 pixels on mobile.

The size that is needed for each image is calculated at render time and then the image is properly sized on the fly using FlyingCDN which is why this feature requires that you are using FlyingCDN.

And to think that you used to have to go in and manually resize images… this feature alone saves so much time!

Add Width and Height Attributes

You should enable the “Add Width and Height Attributes” setting in FlyingPress.

This setting will help to greatly reduce layout shifts caused by images which will improve your CLS (Cumulative Layout Shift) scores.

Before adding width and height attributes:

<img src="https://startblogging101.com/wp-uploads/avatar.jpg" />

After adding width and height attributes:

<img src="https://example.com/wp-uploads/avatar.jpg" width="150" height="150" />

Preload Critical Images

You should enable the “Preload Critical Images” setting in FlyingPress.

In the background, FlyingPress tries to automatically detect critical images that are needed for the initial render (such as your logo, featured image, or other images above the fold).

These images are then set to preload as well as being excluded from lazy loading.

Preloading images tells your browser to expect the image before it’s even discovered in HTML, speeding up the rendering time of these images.

Disable Emoji

You should enable the “Disable Emoji” setting in FlyingPress.

You don’t need to load the extra JavaScript file that WordPress uses to “show” emojis because your browser will still recognize these characters and show things like smiley faces. 🙂 See?

Plus, your site will be faster.

7. iFrame

• Lazy Load iFrames – Enabled
• Use Placeholder Images for YouTube Videos – Enabled

You should enable both options in the iFrame section of FlyingPress, which will significantly speed up your website if it uses embedded YouTube videos or other iFrames.

Lazy Load iFrames

You should enable the “Lazy Load iFrames” setting in FlyingPress. For iFrames below the fold, this option will make it so that the iFrame only loads when the user scrolls to it.

Essentially, iFrames allow you to embed content from external sources in your pages through an HTML document. Some popular examples include embedding YouTube videos, Google Maps, Twitter posts, or a Spotify playlist on your website.

Use Placeholder Images for YouTube Videos

You should enable the “Use Placeholder Images for YouTube Videos” setting in FlyingPress.

This will replace embedded YouTube videos on your site with a placeholder image instead. The YouTube video (which is an iFrame) will only load when the user clicks or taps on your video.

This will help drastically reduce page load time and heavy requests on initial page load for pages or blog posts with embedded YouTube videos.

FlyingPress will also self-host the YouTube thumbnail image on your domain by downloading and caching it. This means the thumbnail image will now be served from your domain and CDN (if you’re using one), which will load this image even faster while cutting down on external calls.

8. CDN

• Enable CDN – Enabled (if you are using FlyingCDN)
  • CDN URL – Specify the URL of the CDN that will be used for delivering static files
  • Type of files – All files

You should turn on the “Enable CDN” setting if you are using FlyingCDN (which I recommend using).

A CDN is a content delivery network. In other words, it’s basically a number of servers that are spread all throughout the world that work together to provide fast delivery of content to users no matter where they are located.

Do I need a CDN? The answer is… it depends.

Is the majority of your website traffic in the same continent as your hosting server? If so, you may not want to use a CDN as it can actually slightly slow down your website by adding another layer.

However, if you have a decent amount of your traffic coming from all over the world, then it probably makes sense to use a CDN.

A CDN will cache the content of your website on a number of servers around the world and then when someone goes to access your website, it will pull the data from the CDN server closest to that user which will greatly speed up the time it takes for them to see your website loaded.

Which CDN should I use with FlyingPress? You should use FlyingCDN with FlyingPress. It is integrated perfectly with the plugin and provides extremely fast loading of static files such as CSS, JS, fonts, and images. FlyingCDN uses BunnyCDN in the background and only costs $3/month.

If you don’t have FlyingCDN yet, you will see a section like this with a “Get Started” button in your CDN section.

Why should I use FlyingCDN?

• 70+ PoPs with under 30ms global latency
• Automatically compress your images and serve them in WebP format (you no longer will need a plugin like ShortPixel to do this)
• Responsive images which saves you tons of time from needing to manually resize images
• Minify CSS and JS files on the fly
• Global file replication
• Custom subdomain (instead of a URL like flyingcdn-302b4ac6.b-cdn.net on all your files, you can make it really nice so it only says cdn.your-site.com)

All of those features for only $3/month per 100GB. That is insanely, insanely cheap. FlyingCDN saves me days of time every year not needing to mess with image sizes and compression.

You can also use Cloudflare with FlyingPress without issues. For example, this site uses FlyingCDN for all of my static files (CSS, JS, fonts, and images), and then I use Cloudflare APO to serve static HTML versions of all my pages. It’s an epic combo that makes passing Google’s Core Web Vitals very easy.

Keep reading if you want some step-by-step tutorials to teach you how to set up FlyingCDN with your website along with getting a custom URL so your files will load from cdn.your-site.com.

How to Set Up FlyingCDN with FlyingPress

Now I’ll teach you how to set up FlyingCDN on your website. It only takes a few easy steps!

FlyingCDN costs $3/month per 100GB, so it’s very affordable for all of the benefits that it offers.

Step 1: Add funds to your FlyingCDN Wallet

Before you can set up FlyingCDN on your website, you need to have funds available in your FlyingCDN Wallet. You need a minimum balance of $3.

Go to your Account → FlyingCDN tab and click on the Recharge Account button.

You will see predefined options for the amount you want to add to your FlyingCDN wallet.

For this tutorial, I’ll choose $30 and hit the Recharge button.

You should now see the new amount added to your Account Balance.

Step 2: Create a new CDN

The next thing we need to do is create a new CDN which will give you your CDN URL.

Go to your Account → FlyingCDN tab and click on the Create new CDN button.

You’ll be asked to enter your origin URL. Your origin URL is the base URL of your website starting with https:// so I would enter ‘https://startblogging101.com‘. Then, hit ‘Create‘.

Your new FlyingCDN URL will be generated and will look something like this: https://flyingcdn-abc123.b-cdn.net. You will see this new CDN URL displayed in the table next to your website.

Step 3: Enter new CDN URL in FlyingPress

Once your new FlyingCDN URL is generated, you need to copy your CDN URL from the table and paste it into the CDN URL box within the FlyingPress plugin in the CDN section.

Make sure to check the box that says ‘Enable CDN‘ first within FlyingPress.

I recommend keeping ‘Type of files‘ set to ‘All files‘ so that all of your static files (CSS, JS, fonts, and images) are all served from FlyingCDN for really fast speeds.

Click ‘Save Settings‘ and you’re done setting up FlyingCDN!

If you want to have a more friendly CDN URL (for example, https://cdn.your-site-com instead of the complex URL https://flyingcdn-abc123.b-cdn.net), then read on to learn how to connect a custom domain in FlyingCDN.

How to Connect a Custom Domain in FlyingCDN

When you set up FlyingCDN, you are given a CDN URL that looks like this: https://flyingcdn-abc123.b-cdn.net.

FlyingPress gives you the ability to connect a custom domain such as https://cdn.your-site.com which looks much nicer.

Step 1: Configure CNAME in your DNS

Sign in to your domain’s DNS (in my case, I use Cloudflare to manage my DNS records).

1. Click ‘Add record‘ to add a new DNS record in Cloudflare
2. Set ‘Type‘ to CNAME
3. Set ‘Name‘ to cdn
4. Set ‘Target‘ to your FlyingCDN URL without using https:// – So, it would look like flyingcdn-abc123.b-cdn.net
5. Set ‘Proxy status‘ to OFF so that it says DNS only
6. Set ‘TTL‘ to Auto
7. Click ‘Save‘

Once the Cloudflare DNS record for FlyingCDN is added, it will look like this:

Step 2: Connect custom domain to FlyingCDN

Now that you have your DNS record configured correctly, you need to connect your custom domain to FlyingCDN so it recognizes it.

Go to your FlyingPress Account → FlyingCDN tab and click on the ‘Connect‘ button next to your FlyingCDN URL.

You’ll see a modal where you can enter your Custom CDN URL.

There will also be a message telling you to make sure you have the correct DNS record set up which we already did in the previous step.

Enter in your Custom CDN URL with the format https://cdn-your-site.com and hit ‘Connect‘.

Step 3: Enter custom FlyingCDN URL in FlyingPress

Now that your custom FlyingCDN domain is successfully added to your account, you need to copy your Custom CDN URL and paste it into the CDN URL box within the FlyingPress plugin in the CDN section.

Make sure to check the box that says ‘Enable CDN‘ first within FlyingPress.

I recommend keeping ‘Type of files‘ set to ‘All files‘ so that all of your static files (CSS, JS, fonts, and images) are all served from FlyingCDN for really fast speeds.

Click ‘Save Settings‘ and you’re done connecting your custom domain in FlyingCDN! All your static files will now be served from https://cdn.your-site.com.

9. Database

• Automatic Cleaning – Weekly
• Post Revisions – Disabled
• Post Auto Drafts – Disabled
• Trashed Posts – Enabled
• Spam Comments – Enabled
• Trashed Comments – Enabled
• Expired Transients – Enabled
• All Transients – Enabled
• Optimize Tables – Enabled

These are the best FlyingPress settings for the Database section. If you are like me and use post revisions and auto drafts, then you should disable both “Post Revisions” and “Post Auto Drafts” so that they don’t get accidentally removed. Otherwise, feel free to enable those options to clean them up if you don’t use them.

The FlyingPress Database section allows you to clean up your database and also gives you the option to schedule automatic cleaning which will optimize your site and reduce database bloat.

Let’s go over each of the database cleanup options in more detail:

• Automatic Cleaning – Here, you can choose how frequently you want your database cleaned up and optimized by FlyingPress. You can choose “Never,” “Daily,” “Weekly,” or “Monthly.” I would recommend choosing “Weekly” so your database stays optimized every week.
• Post Revisions – After officially publishing a post or page, revisions are the older versions of your post or page that are saved.
• Post Auto Drafts – As you’re creating or editing a post or page, automatic drafts get saved of your content along the way so that you don’t lose your work.
• Trashed Posts – These are posts that you’ve deleted and put in the trash.
• Spam Comments – These are comments marked as spam, either by a plugin or manually yourself.
• Trashed Comments – These comments have been deleted and put in the trash.
• Expired Transients – Transients are temporary options that are created by plugins. They are safe to remove.
• All Transients – As stated above, transients are temporary options created by plugins and are safe to remove. Plugins frequently recreate transients, so you may not see the number hit zero even after removing them.
• Optimize Tables – This will optimize the tables in your database, so they are running efficiently without any bloat. You should always have a recent backup of your site and database as a best practice (I use the free version of UpdraftPlus).

---

That’s it! Pretty easy, wasn’t it?

I hope this detailed tutorial on the FlyingPress best settings helps you speed up your slow WordPress site and pass Google’s Core Web Vitals, giving you that coveted ranking boost!

Did this FlyingPress tutorial help improve your Core Web Vital scores? Let me know in the comments below!

Go speed up those websites,
Jake ✌️