Frontend Optimizations in SG Optimizer
This tutorial covers the following topics:
Minify HTML, JS, CSS and combine Google Fonts
To find those features, go to your WordPress admin dashboard > SG Optimizer > Frontend Optimization tab. Enabling all these features will greatly improve the loading speeds of your site by removing all unnecessary characters from your CSS and JS files as well as the HTML output of your site. The plugin will also combine all Google Fonts requests used on your website into one. That will reduce the websites’ pages actual size and improve the loading time of your pages.
You can also exclude particular files from the different optimizations if necessary.
Combine CSS and JS files
Combining CSS and JS files will reduce the requests made towards your website and thus improve its loading speed. The plugin will keep the scripts and styles in their original location after the combination for best compatibility with other plugins.
Combining JavaScript files may cause issues with scripts that require a certain order of execution. This is why we advise you to check the frontend of your website after you enable this optimization.
Defer Render-blocking JS
This option allows you to postpone JS files that delay the rendering of your website on initial visits. The Defer Render-blocking JS functionality will instruct browsers to load and display resources that should be immediately visible on your websites.
Deferring render-blocking JavaScript may cause issues with scripts that require a certain order of execution. Once this feature is enabled, it is recommended that the frontend of your website is thoroughly checked. If you notice any issues with this, use the “Exclude from Loading JS Files Asynchronously” option.
Activating Web Fonts Optimization
With the Web Fonts Optimization, we’re changing the default way to load Google fonts in order to save HTTP requests. In addition to that, all other fonts that your WordPress website uses will be properly preloaded so browsers take the least possible amount of time to cache and render them.
To activate the optimization, log into your WordPress admin dashboard > SG Optimizer > Frontend Optimization tab. Scroll down to the Web Fonts Optimization section and click on the toggle button in order to activate it.
When you enable it, we add the so-called “preconnect” link to fonts.gstatic.com so we will do the DNS lookup, TLS negotiation, and the TCP handshake, which will result in a faster download of the font when you request it. When the optimization is enabled and working properly you will be able to see the following link in the head tag of the web page. You can find it by going to your website, right-click, and select View Page Source.
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>Fonts Preloading
The Fonts Preloading option will appear once you enable Web Fonts Optimization. With it, you can preload the fonts you аre using for faster rendering and better website performance. Make sure you preload only the fonts you are actually using. In most cases, you can find those fonts when you make a PageSpeed test and you will be prompted to preload those assets. You can do it here.
This will add a preload link in the head section of your website to ensure faster loading for those resources. When adding fonts for preloading, make sure you paste the full URL of the font. If everything is set correctly, the links in the Fonts Preloading tab should be visible in the head tag like in the example below.
<link rel="preload" as="font" href="https://www.website.com/wp-content/plugins/woocommerce/assets/fonts/star.woff" crossorigin="">
Changing font-display properties
In addition to that, if you are using the Combine CSS optimization, we will change the font-display property to swap so we eliminate the render block for those fonts. If the font-family does not have a specified font-display property, we will add it.
The combination of these optimizations will decrease the render-blocking time and will increase the loading speed of your website.
Remove Query Strings From Static Resources
The standard functionality of the WordPress script loading process is to append a version of the script that’s loaded. Removing those version parameters improve the caching of your pages both by a CDN that you may use and your visitors’ browsers.
Disable Emojis
By default, WordPress will load scripts to automatically detect and generate emojis in your content. Disabling this option will stop that script from loading, saving some precious time. Note, that most of the modern browsers will still convert symbols like ; ) to a smiley automatically.
