Frontend Optimizations in Speed Optimizer
Table of Contents
On this page you will find different optimizations for the CSS, JavaScript and HTML parts of your website.
Speed Optimizer – Frontend Optimizations Video Guide:
Minify CSS, JS, HTML
Enabling all three features will greatly improve the loading speed of your site by removing all unnecessary characters from your CSS and JS files as well as the HTML output of your site. You can also use the exclude functionality if you would like to exclude specific scripts from the minification.
You can find each feature in their respective tab:
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.
You can also add a preload value to the combined css file, which will indicate that it is an important resource absolutely required in order to render the page properly. Use this option if after combining the CSS files your website does not look properly.
Defer Render-blocking JavaScript
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 Deferral of Render-blocking JS” option.
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.
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 preconnect link in the head tag of the web page.
Fonts Preloading
With this setting 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, in our plugin.
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.
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.
