Oxygen 3.9 is now available - see what's newlimited time special pricing available
docs PHP, CSS & JS

Performance Optimization Options

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 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.

  1. Select the Image element.
  2. In the Properties Pane, choose Media Library.
  3. In the ID field, click the browse button.
  4. Upload or choose the image you’d like to use and click Select Image.
  5. 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:

  1. Go to Manage -> Settings -> Global Styles -> Fonts.
  2. Choose a Google Font for one of the existing font options or add a new one.
  3. Once you’ve chosen a Google Font, click the weights » link under the dropdown.
  4. 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. 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.


Last modified: June 14, 2020
Copyright © 2021 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram