10Web Speed Booster is a robust WordPress plugin designed to significantly enhance your website's load times by optimizing various elements, including CSS files. Through techniques like aggregating or minifying CSS files, the plugin eliminates unnecessary data, resulting in a faster and smoother site. However, occasionally, these optimizations might inadvertently alter your site's design or functionality.
This guide will walk you through the process of identifying problematic CSS files that may be causing these issues and excluding them from being optimized using 10Web Website Booster's Exclude CSS Files feature.
Important:
This guide is for more advanced users who are familiar with working with CSS. If you are not familiar or are a beginner, we recommend disabling the critical CSS feature in the advanced settings of the 10Web Booster.
Locating the problematic CSS files
The first step in troubleshooting is to identify the CSS files causing the issues. This process can be carried out using your browser's built-in inspection tools. We'll use Google Chrome as an example for the instructions below:
Access the non-optimized version of your website
- Open your website in Google Chrome.
- Add ?two_nooptimize=1 to the end of your website's URL to view the non-optimized version of your website
For example, if your website is www.example.com, you would enter www.example.com?two_nooptimize=1
- Press enter to load the non-optimized version of your website
Use the select an element in the page to inspect it tool
- Right-click anywhere on the non-optimized version of your website and select Inspect from the dropdown menu.
This will open the Developer Tools panel on the right-hand side or at the bottom of your browser.
At the top left corner of the Developer Tools panel, you'll see an icon that looks like a square with a cursor. This is the Select an element in the page to inspect it tool.
- Click on this icon
Once the tool is active, you can move your cursor around your website. Different sections of your website will be highlighted as you hover over them.
- Navigate to the element that isn't displaying correctly.
For example, a button on your page is not styled correctly.
- Hover over that button and click on it.
Identifying the CSS file
The HTML code for the element you clicked and the CSS rules that style it will appear in the panel. Each CSS rule comes with a file name and a line number, such as style.css:30.
- Right-click on it and select Open in new tab
This will open the CSS file associated with the problematic element. In the new tab, you'll see the URL of the CSS file.
- Copy the URL starting from /plugins/ or /themes/
For example, if the URL is www.example.com/wp-content/plugins/my-plugin/style.css, you would copy /plugins/my-plugin/style.css.
- Follow the steps in the Excluding CSS files section to exclude the files
Note:
If you can't find the exact CSS file, it's possible to exclude the entire plugin or theme folder by excluding the /plugin/my-plugin folder or /plugin/my-theme folder.
Locating the problematic CSS files for Safari users
Enable the develop menu
- Open Safari
- Click on Safari in the menu bar at the top, then select Preferences
- In the Preferences window, select the Advanced tab.
- Check the box that says Show Develop menu in menu bar
Open the Non-Optimized Version of Your Website
- Open your website in Safari
- Append ?two_nooptimize=1 to the end of your website's URL in the address bar, then press Enter.
Inspect your website
Control-click (or right-click) an element that's not displaying correctly, then select Inspect Element. The web inspector will open, showing the HTML and CSS for your site.
Identify the CSS file
On the right side of the web inspector, you'll see the CSS rules that apply to the selected element. Each CSS rule has a file name and a line number, such as style.css:30.
- Control-click (or right-click) on it and select Open in new tab
This will open the CSS file associated with the problematic element. In the new tab, you'll see the URL of the CSS file.
- Copy the URL, starting from /plugins/ or /themes/
For example, if the URL is www.example.com/wp-content/plugins/my-plugin/style.css, you would copy /plugins/my-plugin/style.css.
- Follow the steps in the Excluding CSS files section to exclude the files
Excluding CSS files
After identifying a problematic CSS file, you can exclude it from 10Web Booster's optimization process.
- Log in to your 10Web dashboard.
- Click on the site where you're facing the issue
- Navigate to Website Booster > Settings
- Scroll down to the Advanced Settings section
- Paste the copied URL into the Exclude CSS Files field in the 10Web dashboard.
- Click Save
The specified CSS file is now excluded from the optimization process, and any issues it was causing should be resolved.