iFrames
Use placeholder images for YouTube videos
YouTube embeds an iFrame and loads several resources: Downloads an HTML file, one CSS, and two/three (heavy) JS files which are more than 500KB. Extra DNS lookups to www.youtube.com, i.ytimg.com etc. You can replace YouTube embeds with a placeholder image. The YouTube video (iFrame) will be loaded only on click/touch. So, only a single image is downloaded instead of loading several iframe resources. FlyingPress will also self-host this placeholder image.Some readersLazy Load iFrames
iFrames embed other websites in your website as an element. Some famous examples are YouTube videos, Google Maps, Twitter posts etc. By lazy loading iFrames, iFrames below the above fold will be loaded only when they're nearby the viewport. Compatibility If you're using any other performance optimization plugin, make sure to disable lazy loading iframes in that plugin to prevent conflicts. Similarly, turn off lazy loading iframes in your theme setting if there are any.Few readers
Cache
Exclude pages from caching
The "Exclude pages from caching" feature in the FlyingPress plugin allows you to specify pages that should not be cached. This feature is helpful for pages that contain dynamic information that should not be cached. To exclude pages from caching, enter the URL or path or unique keywords that match the page URL that you want to exclude. By default, pages such as wp-admin, wp-login, wp-register, wp-cron, and sitemap are automatically excluded from caching. For users who are using WooCommerce, thPopularIgnore query parameters
The "Ignore query parameters" feature in the FlyingPress plugin allows you to specify query parameters that should not affect the content of a page and the cache. This feature is helpful for pages that contain dynamic information generated by query parameters but should not affect the content or cache of the page. To ignore query parameters, list the parameter names that should not affect the content or cache of the page. For example, if a page contains a query parameter for tracking purposes,Some readersBypass cookies
The "Bypass Cookies" feature in FlyingPress allows you to specify certain cookies that should bypass the cache generation. This means a separate cache will not be generated for pages containing these cookies. To use this feature, enter the names of the cookies that should be ignored in the cache generation process. It is recommended only to use this feature if necessary, as it may result in decreased performance. Please note that this feature should be used cautiously, as ignoring certain cookFew readersScheduled preload
The "Scheduled preload" feature in the FlyingPress plugin allows for automatic cache purging and preloading (regeneration) at specified time intervals. This feature provides a convenient way to ensure that the cache is cleared and updated regularly without manual intervention. It is recommended to enable the "Scheduled preload" feature only when facing any nonce issues or when content is updated in a non-WordPress way. This helps to prevent any potential errors or problems with the cache thatFew readersCache logged in users
The "Cache logged in users" feature in the FlyingPress plugin allows for a separate cache to be generated for logged-in users. This separate cache is generated and served for all logged-in users, ensuring a consistent user experience across the site. It is important to note that the cache for logged-in users will not be generated when preloading. This ensures that the latest and most up-to-date information is always available to logged-in users without the risk of serving outdated or incorrectFew readersInclude query parameters
FlyingPress by default will not cache or optimized URLs with query parameters, unless they're specified in Ignore query parameters. For example, in https://example.com/?utmsource=ads will serve cache of https://example.com/ However, https://example.com/?email=abc@xyz.com will NOT serve cache. In case you need this page to generate cache, add "email" to FlyingPress -Advanced -Include query parameters. Another examplFew readers
Images
Lazy load images
Images usually contribute 90% of a website's size. Preventing loading on unwanted images that are not required for initial render can significantly improve performance. By enabling lazy loading, images will be loaded only on demand when they're nearby the viewport. Compatibility If you're using any other performance optimization plugin, disable lazy loading images in that plugin to prevent conflicts. Similarly, turn off lazy loading images in your theme setting if there are any. ExclPopularPreload critical images
Critical images are the ones the above-fold. FlyingPress will try to detect critical images like featured images automatically. These images will be set to preload and excluded from the lazy load. Preload tells the browser to load the resource on high priority.Some readersAdd responsive images
Responsive Images delivers appropriately sized images to fit the actual render size. Your images must have different sizes generated using WordPress/theme and should be available in srcset attribute. Why am I still getting properly sized warnings? If it's a background image inserted using CSS or the image is lazy-loaded by your theme or some other plugin, responsive images will not work. Why are images not preloaded anymore? Responsive Images calculate the required width of theFew readersAdd missing width and height
Adding width and height attributes to images will reduce the Cumulative Layout Shift (CLS) caused by images. Before: (https://storage.crisp.chat/users/helpdesk/website/c7749a8cbac5f800/d45271b8-521d-44e8-baee-b48f8f1yokhf0.png) After: (https://storage.crisp.chat/users/helpdesk/website/be64a60411af5800/c8b78fa2-6b64-4ed4-bc19-a3312d1l5m7eg.png) Compatibility Width and height attributes can be added to images only on your server. It won't be added to external imFew readers
Fonts
Preload fonts
Preloading fonts tell the browser to load the fonts immediately, at high priority. If the font URL is mentioned only in a CSS file or it's critical for the above-fold content, it's better to preload them. Finding Fonts to Preload The easiest way to find the font URLs to preload is to analyze your site using Google PageSpeed Insights. It will give you the list of font URLs to preload under "Preload Key Requests". You can righSome readersOptimize Google Fonts
Optimize Google Fonts Optimize Google Fonts will: Combine all Google Fonts on the page to reduce HTTP requests. Self-host Google Fonts (download and save fonts locally). Inline Google Fonts CSS. Why some Google Fonts are not Self-hosted When the Google Fonts are injected by external JavaScript files (like reCAPTCHA, webfont.js), FlyingPress can't optimize them. The Google Fonts should be found in the HTML as a thumb rule. The embed code will look like this:Few readersDisplay fallback fonts
When using external fonts (like Google Fonts), your browser won't display text until those fonts are ready. This creates an effect called Flash of Invisible Text or FOIT. Google PageSpeed Insights also warns of this, saying, "Ensure text remains visible during webfont load". We can tell the browser to display a fallback font (defaults to system font) until the fonts are ready. ThiFew readers
CSS
Remove Unused CSS
The "Remove unused CSS" feature in FlyingPress is designed to improve the loading time and reduce the file size of your website by removing any unused CSS code. This feature is particularly useful for websites with large CSS files that are not optimized for performance. Load unused CSS There are three available options for "Load unused CSS" methods: "Asynchronously", "On user interaction", or "Remove". Asynchronously - Load the unused CSS in the background, without affecting the loadPopularLazy render elements
The "Lazy render" elements feature in FlyingPress allows for elements on a page to be skipped during rendering until they are actually needed by the user. This can significantly improve page load time and speed up the website. There are three ways you can lazy render in FlyingPress. 1. Using page builders We've integrations with the following page builders: Gutenberg Elementor Divi Oxygen Breakdance Select thPopularMinify CSS
The "Minify CSS" feature in FlyingPress allows you to optimize your CSS files by removing unnecessary white spaces, comments, and crunching property values. This helps to reduce the file size of your CSS files and improve the overall performance of your website.Few readers
JavaScript
Delay JavaScript
Download and execute scripts after user interaction, like mouse movement, keyboard input, scrolling, etc. This helps to improve the page load time and overall performance. The feature has two methods to delay scripts: "Delay Selected": This method allows you to specify specific scripts to delay by entering the script selectors in the "Script to Delay" option. "Delay All": This method delays all scripts except those specified in the "Exclude scripts from Delay" option. This option allowPopularDefer JavaScript
The feature "Defer JavaScript" in the FlyingPress plugin allows for scripts to be executed only after the browser parses the HTML. This means that the scripts will be loaded in the background without blocking the loading of other elements on the page, such as images and text. Defer Inline Defer inline help to defer inline scripts; this helps fix many inline scripts that depend on external JS files. Exclude scripts from defer List the scripts that should not be deferred, such as critiFew readersPreload links
With the Preload Links feature in FlyingPress, you can optimize your website's performance by preloading links on mouse hover or touch in the browser. This helps load the content faster and reduce the wait time for your users, thus providing a better user experience.Few readersMinify JavaScript
The Minify JavaScript feature removes unnecessary whitespaces, comments, and optimizes property values to reduce the file size of JavaScript files, resulting in faster page load times.Few readers