Need help to improve Page Speed Score

I want to improve my Google Page Speed Insights. I have enabled Smush pro and Hummingbird Pro.

  • Kris
    • Support

    Hi Andy

    Hope you are doing good today.

    To get most high score in Google Page Speed Insights or GTMetrix require long time and settings up all features correct.

    I made some review of your site and settings in our both plugins: Hummingbird and Smush.

    Hummingbird:

    1. Cache and Gzip works correct on your site.

    2. You have enabled Asset Optimization but you use only basic mode. I recommend to switch to advanced mode and work on each file separate.

    Each file which exist in Asset Optimization list can be:

    – compress

    – combine

    – move to footer

    – inline.

    I recommend those steps:

    1. click only one icon for each file, click Publish Settings at the bottom, clear cache (if is active in Hummingbird – Cache), refresh home page and see does site works correct (font colors, backgrounds, sliders, forms etc. – because you modify not only css files but also JS).

    2. if site works ok, repeat for another icon in this file.

    3. repeat step 1-2 for rest of files until all files will have most of icons as blue.

    Note: some plugins/theme files cannot be compress/combine etc., because the site can start working incorrectly. Plugin or theme author could build code in a way that this specific file cannot be compress etc.

    So this is a lot of work but worth to speed up the site.

    And here is our full guide for Hummingbird:

    https://premium.wpmudev.org/docs/wpmu-dev-plugins/hummingbird/

    Smush:

    I recommend here to enable two additional features:

    1. Resize my full size images (so each new image on site will be automatically resize on upload)

    2. Smush my original full size images (some theme or plugins user original image to display in widgets, post etc, it is good to compress those images as well)

    Hope this help :slight_smile:

    Kind Regards,

    Kris

  • Andy
    • Talking to Teens Host

    also do you know what’s going on?

    there are several errors on my website right now.

    two pictures aren’t loading.

    the pricing module looks off

    and the fonts (header font) are all off and different

    in addition some of the graphs look different

  • Kris
    • Support

    Hi Andy

    I'm terribly sorry for the delay

    I made changes in your Smush settings as I mention here before:

    https://premium.wpmudev.org/forums/topic/need-help-to-improve-page-speed-score#post-1411827

    I also disabled Hummingbird CDN and pricing box is ok now. Please double check on your side.

    As for Hummingbird -> Asset Optimization advanced mode is still not ON.

    If you enable this feature you will be able to work on those files one by one following my guide from first post. You have over 40 files there and I'm afraid this os out of scope here to optimize each file one by one in advanced mode.

    two pictures aren't loading.

    Can you share screenshot of site section which images are missing?

    and the fonts (header font) are all off and different

    Can you double check now those fonts as well?

    see how there is a black box up there at the top of the page? and not down at the bottom of the page?

    Can you clarify this little bit more. Do you mean this bottom box should be also black and not blue?

    Kind Regards,

    Kris

  • Kris
    • Support

    Hi Andy

    Please check again site. I exclude both images from lazyload as both of them added as background image conflict with lazyload from Smush. They should load correct now. Rest of images use lazyload.

    As for optimize images there is no need to do that as you use Smush CDN with Automatic Resizing feature. You can check in page source that image got different sizes in srcset tab which load correct image for different mobile devices.

    Kind Regards,

    Kris

  • Andy
    • Talking to Teens Host

    ok its looking much better.

    there are two small errors that I still seee.

    1) the blue box at the bottom of the screen. [the picture should cover it entirely] on homepage

    2) the “black box” around the final free session request is gone. [do you see the black box around the first contact form on the top of the page? it should look really similar on bottom of page]

  • Andy
    • Talking to Teens Host

    awesome. is there any way you could try and fix the pricing module too?

    there are just two small errors there.

    1) the first 1599 should be highlighted blue when people scroll down the first time. then when they move their mouse they should be able to move the highlighted area over to the other options

    (right now when you initially scroll down… none of them are highlighted until you put your mouse curser over it)

    2) also when the page is moved down to about the size of an ipad. the dollar signs on the first two pricing options rise too high and make it look weird. do you see that?

    let me know what you can do

    everything else is looking really really good. thank you so much

  • Kris
    • Support

    Hi Andy

    1) the first 1599 should be highlighted blue when people scroll down the first time. then when they move their mouse they should be able to move the highlighted area over to the other options

    (right now when you initially scroll down… none of them are highlighted until you put your mouse curser over it)

    Page builder module generate those boxes automatically with “no” css class, if mouse is hovre on box automatically “active” class is added. This will be a custom coding in this case to make this first box blue on load I’m afriad.

    As for nr 2 I cannot replicate this on my side. Can you record a video of this and tell me on which device and which browser you see this?

    Kind Regards,

    Kris

  • Nithin
    • Support Wizard

    Hi Andy,

    it actually used to load first. but something has changed. maybe someone already built this custom code? but it used to do that and then one day it stopped

    I checked whether it was related to Asset Optimization, but this seems to be default behaviour before, and after Asset Optimization is enabled, ie at the moment the theme only highlights when you hover the mouse over the section.

    To make the 1st section to get highlighted out of page load, you can try this jQuery:

    <?php

    add_action( 'wp_footer', 'wpmu_add_active_class' );
    function wpmu_add_active_class() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery("body > div.main-container > div > section.bg-secondary.vc_row.wpb_row.vc_row-fluid.vc_custom_1454728291516.pricing-2.parallax > div > div > div > div > div > div.vc_row.wpb_row.vc_inner.vc_row-fluid > div:nth-child(1) > div > div > div > a > div").addClass("active");
    });
    </script>
    <?php
    }

    Please check the above code via mu-plugins. You can find this documentation on how to make use of mu-plugins:

    https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    Kind Regards,

    Nithin

  • Nithin
    • Support Wizard

    Hi Andy,

    The above code given is for the following section as shared in the given screenshot:

    I have applied the code, and now it’s loading fine. Regarding the dollar sign, this CSS should fix the issue:

    @media only screen
    and (min-device-width: 1024px)
    and (max-device-width: 1366px)
    and (-webkit-min-device-pixel-ratio: 2) {

    .price-container > .price {
    font-size: 60px;
    }

    .pricing-3 .price {
    font-size: 60px;
    }
    }

    I have added the above CSS in your website which should fix in iPad. Please do check, and let us know how that goes.

    Kind Regards,

    Nithin

  • Andy
    • Talking to Teens Host

    ok thank you!! also – do you think we can add one more pricing option? so that we have a total of 5 options?

    would that work and still look good? let me know! thank you.

    also, is there any way to fix the scroll thing… so that we can highlight the unlimited option first when people first scroll through?

  • Nithin
    • Support Wizard

    Hi Andy,

    do you think we can add one more pricing option? so that we have a total of 5 options?

    would that work and still look good? let me know! thank you.

    It's possible via WP Bakery, but the column width will get reduced if you add 5th column, so that all will be in a single row.

    If still looking to add a 5th column, then you can add a new column as shown in the following screenshot:

    Then clone an existing pricing table as shown in the following screenshot:

    And then drag, and drop the cloned pricing table to the new column. Since it's a 3rd party plugin, it's something we would recommend for you to tweak from your side. Please make sure to take a backup before making these changes.

    also, is there any way to fix the scroll thing… so that we can highlight the unlimited option first when people first scroll through?

    I do see the "Unlimited" pricing table is highlighted on the 1st scroll. That's once the page is loaded, the "Unlimited" pricing table is the one which is highlighted in blue.

    If you hover the mouse over any of the pricing tables during the scroll then it would highlight the pricing table over which the mouse pointer is, maybe that's what you are seeing?

    I'm afraid, that's more of a behaviour of your theme, so during scroll, if the mouse pointer hovers over another pricing table then the "Unlimited" won't get highlighted.

    Maybe we could remove that hover effect if needed when the mouse pointer hovers? Please let us know.

    Regards,

    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.