Site Performance - CSS, Java, Etc.

[johnsmith0251]

In certain site performance scores - unused CSS and unused javascript, seem to be common issues on my websites. I find eliminate render blocking resources as another common issue.

Of course, these don't seem to ever really effect the "desktop" scores. They do however dig into the "mobile" scores - which is highly important since most people view a website from a mobile device.

I'm curious to know if there really is a way to fix this through the program that I am not seeing.

Or, is it just the the program needs to include the bloat because it needs to cover all possible outcomes which prevents the coding from being leaner?

[Pablo]

You can control the generated HTML in Tools-> Options -> HTML.
For example, you can move scripts to the end of the page.

Note that WWB will not include scripts if they are not needed.
So, if you want to remove a specific script then you will need to remove the associated functionality from your pages.

[crispy68]

To some extent, I'm not sure how easy it would be to address the "remove unused CSS and javacript". I get these flags as well and I looked into it a little bit to try and understand what it meant.

Essentially, it means there is CSS or Javascript that's not being utilized when the page is loaded yet the code is still having to be loaded. The example I saw was this:

"For example, suppose that you want to use Bootstrap's button component on your page. To use the button component you need to add a link to Bootstrap's stylesheet in your HTML. This stylesheet doesn't just include the code for the button component. It contains the CSS for all of Bootstrap's components. But you're not using any of the other Bootstrap components. So your page is downloading a bunch of CSS that it doesn't need. This extra CSS is a problem for the following reasons:

* The extra code slows down your page load. See Render-Blocking CSS.
* If a user accesses the page on a mobile device, the extra code uses up their cellular data."

One problem that I found was that a lot of the CSS code that was being flagged as 'unused' was code that couldn't be removed because it wasn't ready to be used yet. In other words, the code wasn't needed when the page first loaded but, later on after user interaction, it would be used or needed.

I'm assuming this is the same for .js files. If you are loading an entire .js library, there is code in that file that your website might not use which is being flagged. The issue is how do you determine what to remove and do it right without messing up your .js file. What if the .js file is a global file. Then you have to make sure you don't remove anything one of your other pages uses.

I don't really know what the fix for this is other than what Pablo mentioned other than making sure you don't add every bell and whistle to your website. I know sometimes as designers, you want to add every trick in the book to your website (slideshow, carousel, fancy appearing headers, gobs of animation, effects, etc) and in the end this can cause you some of these headaches.

[johnsmith0251]

I appreciate the feedback. Thank you!

Here's some examples of whats showing up as unused css in the index:

#wb_indexText17 div {
text-align: left

a:visited {
color: #800080;
}

a:active {
color: #FF0000;
}

a:hover {
color: #0000FF;
text-decoration: underline;
}

input:focus, textarea:focus, select:focus {
outline: none;

#wb_indexFontAwesomeIcon6:hover {
background-color: transparent;
background-image: none;
border: 0px solid #000000;



It looks like a lot of the links themselves are flagged as unused - how they function (hover, visitied,etc).

it's like 70% of the total unused css.

Any suggestions on how to make those adjustments?

[crispy68]

Keep in mind, they may not be used on initial page load but may be used later somewhere on your page.

As I stated before, I have a project where I have some layout grids 'hidden' on page load but based on user interaction these grids are made visible (button clicks). It was telling me the CSS code for these hidden grids was unused. If I removed all that CSS it flagged as unused, then when my grids became visible they would be all jacked up due to the missing CSS!!

I would only remove it if you are absolutely 100% sure no objects on your page use it. Keep in mind, WB won't be/shouldn't be generating code that is not needed.

[johnsmith0251]

Thank you for the feedback!

I don't care for changing colors on the link hovering. It's not something that happens on mobile devices anyway. I don't see a way to disable that.

I know I know - it gets frustrating trying to comply with Google page speed scores.

I'm just trying to figure out what I "added" thats causing Google to trigger unused css and java.

The site is text and a few images snuggled in different layers.

[crispy68]

I don't care for changing colors on the link hovering.

I do. I use it all the time as it's a good visual clue that you are hovering over a link. Even if you don't want a different color you need to set it to the same color as your normal link. To be honest, remove this little bit of code will not improve your pagespeed much if at all.

[Pablo]

Code: Select all

a:visited {
color: #800080;
}

a:active {
color: #FF0000;
}

a:hover {
color: #0000FF;
text-decoration: underline;
}

These style are not unused. They control the colors of links and elements at different states.
The link styles are the defaults, so each unstyled links on the page have a defined color. You can change these colors in the page properties.
If you do not want to include visited,active and hover, then make the link colors of all states the same.

Code: Select all

input:focus, textarea:focus, select:focus {
outline: none;

These styles disable the outline of input fields.

Code: Select all

#wb_indexFontAwesomeIcon6:hover {
background-color: transparent;
background-image: none;
border: 0px solid #000000;

This sets the hover color of the icon font.

[johnsmith0251]

Just dropping a quick thank you to Pablo and crispy68!

Your feedback is valuable to me!