Support » Plugin: Fast Velocity Minify » 3.0.3 compared to 2.8.9

  • Resolved umutusu

    (@umutusu)


    Hi.
    First, happy new year and a bit late merry Christmas!
    And thank you very much for such a nice plugin and all the hard work you put into it, even if you made us struggle a bit with the v3 🙂

    Here are my settings with the v3
    https://imgur.com/LnHi7fm

    Merge and defer scripts (if I understand correctly, this basically makes the v3 behaves and optimizes like v2 of your script):
    /ajax.aspnetcdn.com/ajax/
    /ajax.googleapis.com/ajax/libs/
    /cdnjs.cloudflare.com/ajax/libs/
    /stackpath.bootstrapcdn.com/bootstrap/
    /wp-admin/
    /wp-content/
    /wp-includes/

    Ignore script files (if I understand correctly, this basically makes the v3 behaves and ignores the same files as v2 of your script with minor differences-see below*):
    /IE9.js
    /a.optnmstr.com/app/js/api.min.js
    /assets/js/plugins/wp-enqueue/min/webfontloader.js
    /assets/js/wcdrip-drip.js
    /avada-ie9.js
    /excanvas.js
    /fusion-ie9.js
    /html5.js
    /html5shiv-printshiv.min.js
    /html5shiv.js
    /js/TweenMax.min.js
    /js/mediaelement/
    /mailchimp-for-wp/assets/js/third-party/placeholders.min.js
    /pixelyoursite/js/public.js
    /plugins/LayerSlider/static/layerslider/js/greensock.js
    /plugins/elementor-pro/assets/js/frontend.min.js
    /plugins/elementor/assets/js/common.min.js
    /plugins/elementor/assets/js/frontend.min.js
    /plugins/revslider/public/assets/js/jquery.themepunch.tools.min.js
    /plugins/woocommerce-product-search/js/product-search.js
    /respond.js
    /respond.min.js
    /selectivizr.js
    /themes/Avada/assets/js/main.min.js
    /themes/jupiter/assets/js/min/full-scripts
    /themes/kalium/assets/js/main.min.js
    /wp-includes/js/mediaelement/wp-mediaelement.min.js

    Merge render-blocking JS files in the header:
    /jquery.min.js
    I tried all 3 usual suspects and found that I had to put /jquery.min.js no matter what, if not the page is broken and doesn’t load correctly.
    But the other 2:
    /jquery-migrate.js
    /jquery.js
    doesn’t have the same effect so I don’t put them in here. Maybe I should, to be sure?

    I also had to exclude one CSS file because before, I think that the v2.8.9 of your plugin was merging the CSS files in order and that one CSS file was always the first, but now with v3.x.x, this file goes to the end of the list, so the page is visually broken. Is there a way to force merge order?

    *And I see that from the older version, ignore list and blacklist became just one list to ignore in the v3. And there are some lines missing in the new one (from what you said that we should use if we want the v3 works as v2 in another discussion https://wordpress.org/support/topic/not-usable-anymore-3/) :
    /Avada/assets/css/ie.css
    /vc_lte_ie9.min.css
    /old-ie.css
    /ie.css
    /vc-ie8.min.css

    Should I also add these files to the ignore list?

    So I’m basically trying to make the v3 works as the v2 (well because it was working perfectly, at least for me).
    With these settings, there’s no significant page speed difference that a human being can really notice. But, google pagespeed insights and gtmetrix scores are much better.

    And again, thank you very much, and happy new year!

    -Umut-

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter umutusu

    (@umutusu)

    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 1 year, 7 months ago by umutusu.
    Plugin Author Raul P.

    (@alignak)

    @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://wordpress.org/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.

    Thread Starter umutusu

    (@umutusu)

    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

    Plugin Author Raul P.

    (@alignak)

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

    Thread Starter umutusu

    (@umutusu)

    Plugin Author Raul P.

    (@alignak)

    You still have trouble on 3.0.5?

    Thread Starter umutusu

    (@umutusu)

    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://wordpress.org/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.

    Plugin Author Raul P.

    (@alignak)

    @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

    Thread Starter umutusu

    (@umutusu)

    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;
    }

    Plugin Author Raul P.

    (@alignak)

    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 1 year, 7 months ago by Raul P..
    Thread Starter umutusu

    (@umutusu)

    Okay great!
    Thanks again and again 🙂

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘3.0.3 compared to 2.8.9’ is closed to new replies.