Configure built-in CSS and JS optimization safely, including exclusions and checks to prevent frontend regressions.
Optimization of scripts and stylesheets is very important for SEO, user experience and website speed. Brand new optimization features in osclass contains following features:
Note that external libraries are not merged, as it usually cause conflicts. You should also exclude font / icon font libraries to avoid problems.
To enable osclass optimize your CSS stylesheets and JS scripts, go to Oc-admin > Settings > Optimization:
You can now enable optimization. First, there are CSS settings, then JS settings. Both has identical settings.
Enable "Merge internal CSS style sheets into one" to merge all internal CSS files into 1 big one. Note that sheets those are not on your URL are not included.
Enable "Minify/optimize merged CSS style sheet" to remove all white spaces, comments and redundant code to reduce size of master file.
Into field "CSS Exclude words" enter keywords of libraries those should be excluded, by default it should be "font" and "awesome" to exclude font libraries as well as font awesome.
Into field "CSS Exclude pages" enter pages where optimization should not be performed (i.e. home, search, item, ...) in case you experience issues on particular pages with optimized file
Enable "Merge internal JS scripts into one" to merge all internal JS script files into 1 big one. Note that sheets those are not on your URL are not included. Keep in mind that merged file is placed on website as first, excluded and external scripts are placed after master file.
Enable "Minify/optimize merged JS script" to remove all white spaces, comments and redundant code to reduce size of master file.
Into field "JS Exclude words" enter keywords of libraries those should be excluded, by default it should be "tiny" to exclude tinyMCE those contains relative links to sub-libraries and would lead to JS error.
Into field "JS Exclude pages" enter pages where optimization should not be performed (i.e. home, search, item, ...) in case you experience issues on particular pages with optimized file
Also see the Core Web Vitals guide and Cache Osclass Plugin.
Question: How do I enable Osclass CSS and JS merge in Settings Optimization?
Answer: Open oc-admin, Settings, Optimization. Enable Merge internal CSS style sheets into one and Merge internal JS scripts into one. Minify is a second checkbox. External URLs are never merged. If the front office is blank, disable merge and add exclude words. Save, then hard-refresh the home page.
Question: Why does Font Awesome break after Osclass CSS optimization?
Answer: Merged CSS can rewrite font paths. Check which CSS file contains the Font Awesome reference, then put that path or name in CSS Exclude words under Settings, Optimization. Osclass then leaves those files out of the master sheet. If icons still fail, add the font library URL keyword too.
Question: Why does TinyMCE error after Osclass JS minify?
Answer: Put a TinyMCE path keyword such as tiny in JS Exclude words under Settings, Optimization so Osclass does not merge that editor. TinyMCE often loads extra scripts from relative paths inside its folder. Exclude words match the script path. Test item publish after the exclude, not only the home page.
Question: Can I skip Osclass Optimization merge on the item page only?
Answer: Enter item in CSS Exclude pages or JS Exclude pages under Settings, Optimization. Home and search are valid page names too. Use this when one page breaks and the rest are fine. Do not turn the whole merge off for a single template bug. Save and reload that page only.
Question: What is the difference between CSS Exclude words and JS Exclude words in Osclass?
Answer: CSS Exclude words and JS Exclude words are separate lists in Settings, Optimization. Font Awesome belongs in CSS. TinyMCE belongs in JS. Exclude pages is also split per type. A word in the CSS list does not protect a JS file with the same name. Add the keyword that appears in the asset path.
Question: Where is the Osclass Settings Optimization screen versus Minify plugin?
Answer: Turn CSS and JS merge on in oc-admin, Settings, Optimization, then add exclude words and save. That is core Osclass, not an OsclassPoint Minify plugin ZIP. If the front office is blank, disable merge and check the exclude lists on that screen. Minify plugins are a separate product.
