3.0.3 compared to 2.8.9

And also, what about those unused css and js files.
There’s always one css file 98% and one js file 56% not used (which were created by FVM)

• This reply was modified 4 years, 2 months ago by umutusu.

@umutusu there is no way to remove unused css or js automatically and accurately.

If you want to do that, it’s a manual process that can be done, before installing FVM.
FVM will merge what you put on the site.

—

In regard of merging settings, the CSS part is supposed to read them in order and merge them in order as well. Maybe I overlooked something.

Can you give me a list of css files on your site, and a list of what was merged for that page from the status page log?

In regard of js processing, I want users to actually spend some time learning it because like you see, scores improve if you can do it right.

For most cases, you only need a jquery filename to be render blocking.
The filename can be whatever your theme or plugins use… those are just the common names, so they are all there just in case. Having 1 or more, doesn’t really change performance.

If your site is simple and has very little inlined jquery, you could actually also put jquery on the defer list. However, any inline code with jQuery or $ would trigger an undefined error.

That is why the dependencies section exists.
If you are deferring jQuery, you would need to (carefully) add any patter for jQuery code there, so whenever an inline piece of code needs jQuery, it would wait for the deferred script.

So in many cases, it’s possible to defer all scripts and force the inline code that trigger an undefined error, to wait for it to finish, by using the dependencies field.

—

For a basic configuration however, I suggest copy pasting the defaults from the HELP tab and remove everything from the ignore list first.

The first thing to try is the dependencies, as I explained.

If some inline code needs to be already set before the deferred scripts, you cannot add it as a dependency (that’s the main code and the deferred file needs it to be there).
In addition, if inside the same script there is and another piece needs to wait for the deferred script, then this prevents using dependencies for that script.

That is when, you would use the ignore list, and exclude the file that needs to be in the same position and order relative to those inline scripts.

—

Third party scripts delay, is inspired in this plugin.
https://www.ads-software.com/plugins/flying-scripts/

It works in a similar way, so you could use it to delay inline scripts, or scripts with async or defer attributes (FVM will rewrite the script).

For example, google tag manager, analytics, tracking pixels, etc.
These are all very heavy by default, and the browser is busy downloading them right away, as soon as possible… so this affects your web vitals scores on google.

By delaying them until they move the mouse, swipe, click, (or whatever) or by waiting up to 5 seconds if it’s a bot, we are effectively removing those heavy scripts from the critical path, thus reducing the amount of data on the initial request and improving your web vitals (the CRuX reports consider the average loading times from your users during 30 days for the initial request).

—

You don’t need to add those to the ignore list on css.
Those were from Internet Explorer conditionals, which at the time there was no way to read them, and now it can recognize them and ignore them automatically.

Thank you for the detailed answer.
I really am not sure how to give you a list of all used css files on the website but here is the copy of the processed files from the status page of FVM.
https://privatebin.net/?e812a1b49203b702#9U95qQLKUkbg687EZmYvF8EJEcTRt1NT67LnWkT1G63e

The file share was already deleted.
Please try version 3.0.5 as there were some css fixes on this version.

https://justpaste.me/vQF6

You still have trouble on 3.0.5?

Yes still with 3.0.6.
For this CSS file(/wp-content/uploads/so-css/so-css-Divi.css), it’s still pushing it to the end of the list.
Before, it was creating a CSS file just with that file and/or with just a few others which have nothing to do really what that file modifies in the page visually.
This CCS file coming from this plugin: https://www.ads-software.com/plugins/so-css/
which I used to add some CSS. This was the only one that I could find which really helped to surpass some CSS priority problems.

@umutusu I installed the so-css plugin, and it puts the file in the footer in the last position, so FVM merging it last is correct. On my test site, that file is always last.

When you disable FVM CSS processing, do you have any other css files after it?

The fact that the file is last, should overwrite styles that come first because the files execute sequentially.
However, when we merge them into one file, they all get the same priority.

In those cases, even if the rules on the last file come later, they will not overwrite previous rules that are more specific (longer rules specifying parents and the css dom tree).

If you cannot edit the original css and just want this file to overwrite some style, you need to be more specific.
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

If you have no idea how to do that and you cannot hire a developer, then I suggest adding that file path /wp-content/uploads/so-css/ to the “Ignore CSS files”.

That way, the file will get separated from the main file and be left alone in the last position. Furthermore, because it’s a new file it will work as you expect it to work.

Thanks again

Hi.
I was about to write about this.
I managed to force some parts of the CSS code to behave as it should after minifying/merging etc.
But there’s a part that no matter what after the merge it doesn’t work as it should.

And actually, this was the part no matter what I did, it wasn’t working until I used so-css plugin.

At the end, this CSS file is just 3kb so I can put it in the ignore list>

If you want to look at it, in case there’s a problem with the minifying and merging CSS files, (I don’t know, like a bug maybe with your plugin), I put the code below.

As far as I can see, there’s just one part of this code that doesn’t work as it should, after going through FVM. (starting from line 12, 3rd and 4th ones, decrease the space between submenu items and decrease the space between submenu items when fixed)

Thanks again for all your help.

/* triangle arrow size and color */
#top-menu>li:not(.mega-menu)>.sub-menu:after {
border-bottom-color: #ff0066!important;
border-width: 15px!important;
top: -30px!important;
margin-left: -10px!important;
}
/* top submenu border */
#top-menu>li>.sub-menu {
border-top: 3px #ff0066 solid!important;
}
/* decrease the space between submenu items */
#top-menu li li a {
padding-top: 3px!important;
padding-bottom: 3px!important;
}

/* decrease the space between submenu items when fixed*/
.et-fixed-header #top-menu li li a {
padding-top: 3px!important;
padding-bottom: 3px!important;
}

#top-menu li.current-menu-item>a {
color: #ff0066!important;
}

#top-menu li.current-menu-item>a:hover {
color: #53febe!important;
opacity: 1!important;
}

/*main menu links*/

#et-top-navigation nav>ul>li>a:hover {
color: #53febe!important;
opacity: 1!important;
}

/*main menu link when fixed*/

.et-fixed-header #et-top-navigation nav>ul>li>a:hover {
color: #53febe!important;
opacity: 1!important;
}

/*right side menu callout text css snippet*/

.pa-callout-right {
font-size: 10px!important;
margin-left: 4px!important;
position: relative!important;
top: -10px!important;
margin-bottom: 13px!important;
color: #ffffff!important;
background-color: #e03574!important;
padding: 2px 3px!important;
border-radius: 3px!important;
}

/*the bounce effect*/

@keyframes bouncing {
0% {top: -5px;}
100% {top: -8px;}
}

.pa-callout-right { animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}

/****** New Instagram Gradient *******/

.et_pb_module .et-social-instagram a.icon {
background: #d6249f;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

/*woocommerce message box colors*/

div.woocommerce-message {
background-color: #53febe !important;
color: #ff0066 !important;
box-shadow: 0px 10px 15px -6px rgba(83,254,191,0.5) !important;
/*margin-top: 10px;*/
}

.woocommerce-error {
background-color: #ff0066 !important;
color: #53febe !important;
box-shadow: 0px 15px 15px -6px rgba(255,0,102,0.5) !important;
/*margin-top: 10px;*/
}

.woocommerce-info {
background-color: #ff0066 !important;
color: #53febe !important;
box-shadow: 0px 15px 15px -6px rgba(255,0,102,0.5) !important;
/*margin-top: 10px;*/
}

/*hide default woocommerce my account navigation*/

.woocommerce-MyAccount-navigation {
display:none!important;
}

/*columns stacked side by side in mobile views*/

@media only screen and (max-width: 980px) {
.five-columns .et_pb_column {
width: 20%!important;
}
}

@media only screen and (max-width: 980px) {
.three-columns .et_pb_column {
width: 33%!important;
}
}

@media only screen and (max-width: 980px) and (min-width:550px) {
.three-columns-footer .et_pb_column {
width: 33%!important;
}
}

/*hide google recaptcha*/
.grecaptcha-badge {
visibility: hidden!important;
}

/*change shipping rates table background strange #ededed color to f9f9f9*/
.et_builder_inner_content {
background-color: #F9F9F9!important;
}

/*change checkout page background #ffffff color to gradient*/
@media only screen and (min-width: 980px) { html body.page.page-id-25 div#main-content {
background-image: linear-gradient(90deg,#20123a 50%,#f9f9f9 50%)!important;
}
}
@media only screen and (max-width: 979px) { html body.page.page-id-25 div#main-content {
background-color: #f9f9f9!important;
}
}

/*chekout page valid/invalid field border colors*/
.woocommerce form .form-row.woocommerce-invalid .select2-container, .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select {
border-color: red!important;
border-width: 2px!important;
}

.woocommerce form .form-row.woocommerce-validated .select2-container, .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select {
border-color: lawngreen!important;
border-width:2px!important;
}

/*product loop image border radius*/
.et-db #et-boc .et-l IMG{
border-radius: 6px!important;
}

I tested this, it’s CSS specificity as per the link I posted (using !important will not overwrite other !important more specific rules), that’s why it needs to be ignored and separated.

As long as the code is being merged and you can see it there last, everything is working correctly. The code is there, so it just doesn’t work because other code is taking precedence.

You can inspect it on google chrome, go to elements > styles and it will show you, which css is responsible, on which file and on which line for that element.

You could also actually, copy paste the contents, minify it online, and then inline it on the footer (before the </body>) inside a <style>your code here</style>.

Inline code, overwrites external files in the same way.
In this case, 3 Kb could be inlined, thus reducing that extra http request.

• This reply was modified 4 years, 2 months ago by Raul P..

Okay great!
Thanks again and again ??