How to Locate and Exclude CSS Files in the 10Web Website Booster

10Web Speed Booster is a powerful WordPress plugin that improves website load times by optimizing elements like CSS files. While effective, these optimizations can sometimes affect your site's design or functionality. This guide shows you how to identify and exclude problematic CSS files using the Excluded CSS Files feature.

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

1. Open your website in Google Chrome.
2. 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

3. Press enter to load the non-optimized version of your website

Use the select an element in the page to inspect it tool

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

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

3. Navigate to the element that isn't displaying correctly.

   For example, a button on your page is not styled correctly. 

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

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

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

3. Follow the steps in the Excluding CSS files section to exclude the files

Locating the problematic CSS files for Safari users

Enable the develop menu

1. Open Safari 
2. Click on Safari in the menu bar at the top, then select Preferences
3. In the Preferences window, select the Advanced tab.
4. Check the box that says Show Develop menu in menu bar

Open the Non-Optimized Version of Your Website

1. Open your website in Safari
2. 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. 

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

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

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

1. Log in to your 10Web dashboard.
2. Click on the site where you're facing the issue
3. Navigate to Website Booster > Settings
4. Scroll down to the Advanced Settings section
5. Paste the copied URL into the Excluded CSS Files field in the 10Web dashboard.
6. Click Save 

The specified CSS file is now excluded from the optimization process, and any issues it was causing should be resolved.