When it comes to performance and cache options for Oxygen, you can tweak a variety of settings to meet your needs.
For general performance and optimization tips, please see this tutorial: https://oxygenbuilder.com/tutorial/how-to-speed-up-wordpress-in-2019/.
Bloat Eliminator
Oxygen’s Bloat Eliminator settings are located at Oxygen -> Settings under the Bloat Eliminator tab.
These settings allow you to disable some third-party scripts and functionalities that are not necessary on every site, allowing you to further optimize and increase performance on your Oxygen site.
- Disable WP Emojis - Disables built-in WordPress JavaScript for rendering Emojis.
- Disable jQuery Migrate - Disables the ability to run deprecated jQuery code on the current jQuery version.
- Disable Embeds - Disables the automatic embedding of some content such as YouTube videos, Tweets, etc., when pasting the URL into your blog posts.
- Disable Google Fonts - Completely disables Google Fonts for your site.
- Disable Webfont.js - Forces Google Fonts to be included using a pure CSS method rather than relying on Webfont.js.
Image Srcset
Srcset is an attribute of image elements that allows the browser to intelligently load the most appropriate size of the image for display based on viewport size. To use srcset, you must use an Image element from +Add -> Basics.
- Select the Image element.
- In the Properties Pane, choose Media Library.
- In the ID field, click the browse button.
- Upload or choose the image you’d like to use and click Select Image.
- Next, use the Size dropdown to choose the size of your image that you’d like to use.
By loading the image in this way, as long as you haven't chosen the smallest size in the Size dropdown, the image will use the srcset attribute to determine which version to load depending on the viewport size, thus improving page load times.
Further reading: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Google Fonts Weight/Italic Picker
By default, if you use a Google Font in Oxygen, all font weights are available and are loaded as long as they are used somewhere on the page or post that you're currently viewing.
The new Google Fonts Weight/Italic Picker allows you to specify the exact weights (and whether to load Italics) you'd like to use, and only ever load those weights regardless of the weights chosen for text elements on your site. To use the Google Fonts Weight/Italic Picker:
- Go to Manage -> Settings -> Global Styles -> Fonts.
- Choose a Google Font for one of the existing font options or add a new one.
- Once you’ve chosen a Google Font, click the weights » link under the dropdown.
- Tick the checkboxes for each weight/italic that you’d like to load on your site.
By ticking these checkboxes, you're telling Oxygen to only ever load the weights selected, increasing performance. In this way, if a text element has been set to 400 weight, but you've only chosen 300 and 700 weights in the Google Fonts Weight/Italic Picker, the browser will load the nearest available weight (in this example, 300) when rendering that text element.
Additionally, by choosing italics in the Google Fonts Weight/Italic Picker, your site will load true italics from Google. If italics are not chosen, the browser will render text set to Italic (under Advanced -> Typography) with faux italics by skewing the font.
Preview Dropdown Limit
The Preview Dropdown Limit found in Oxygen > Settings > General on the WordPress Admin Dashboard allows you to define the maximum number of items that show up when previewing a template in Oxygen.
Oxygen's Dropdown for the Preview window when viewing templates tries to load as many posts as possible for the Preview window. This has been known to cause performance issues for some users.
Changing this setting to a number such as 20 or 50 should work for most servers if you encounter performance issues in templates.
CSS Cache
Oxygen's CSS cache, which is found via Oxygen > Settings > CSS Cache, is a feature that we recommend leaving active unless you have to deactivate it for a specific reason. We recommend leaving it active because Oxygen's CSS cache stores Oxygen's CSS locally instead of building it on page load. It will then serve those CSS files to your caching system.
If you deactivate Oxygen's CSS cache, you will see an "xlink=css&ver=x.x.x" file being loaded onto the site. This occurs because, without Oxygen's CSS cache, Oxygen will build the CSS manually when the page loads.
You may find that you have to regenerate Oxygen's CSS cache on occasion, such as when prompted by Oxygen itself or when migrating a site. This process itself is fairly quick and you will want to select any post types that have been edited directly in Oxygen. If a post type has not been edited in Oxygen, you do not need to select it.
Working with Caching and Optimization Plugins
Depending on the combination and minification settings set within caching and optimization plugins and services, they could cause issues with some of Oxygen's features when working with these performance plugins/services. Therefore, adding the following exclusions to a site may help restore Oxygen's functionalities on the front end:
CSS Exclusions:
- /wp-content/plugins/oxygen/component-framework/oxygen.css
JS Exclusions:
- /wp-includes/js/jquery/jquery.js
- /wp-content/plugins/oxygen/component-framework/vendor/aos/aos.js
- /wp-content/plugins/oxygen/component-framework/vendor/unslider/jquery.event.move.js
- /wp-content/plugins/oxygen/component-framework/vendor/unslider/unslider-min.js
- /wp-content/plugins/oxygen/component-framework/vendor/unslider/jquery.event.swipe.js
- /wp-content/plugins/oxygen/component-framework/vendor/alpine/alpinejs3.10.5.js
Please consult the plugin developer/service provider of the performance plugin being used on a site to know where to add these exclusions.
Some services have also suggested excluding the component-framework folder.
WP Rocket iframe Lazy Load CSS
If WP Rocket's Iframe lazy load is enabled, this should fix the padding issue for both logged-in users and visitors: https://gist.github.com/Kpudlo/62eede3cb38cca070c8ca2c68e3017d3
