Style issues after enabling Hummingbird

Hello @bvk69varghese !

I’m very sorry to hear that you’ve experienced this issue while using our plugin!

Looks like the optimisation needs a small adjustment.

Please go to Hummingbird >> Asset Optimisation >> Assets tab. At the bottom, please find the Exclusions option. In it, please add the following CSS handles one by one:

bln-custom
twentynineteen-style

I think just the first one will be enough, but please try the second one as well if excluding the first one doesn’t help.

Warm regards,
Pawel

Thanks for your help. The issue has been fixed. But when we check our site performance on your test tool and in https://pagespeed.web.dev/ the CLP score is not improving. I have changed the different settings and the the scores are not improving. The CLS score is already fixed under 1 and other scores are not improving through this plugin. Do you have any recommendation for the CSS/JS settings for our site(https://bilingualnews.jp/) for this plugin. Do we need to change any settings on the plugin to improve the score?

Thanks in advance.

Thank you so much. I have added the exclusions and many issues have been resolved.

But now there is some other issues

I only did these settings in my testing site(https://testing.bilingualnews.jp)

1. Page caching did by adding wp-config file – define(‘WP_CACHE’, true);
2. Enable preload caching – Enabled for

Choose which pages you want to trigger cache preload. We recommend you always preload the homepage.
Homepage
Any Post or page has been updated

3. CSS /JS bulk option and selected compress option.

Now we are facing these issues.

1. In product details page product images are not displayed(https://testing.bilingualnews.jp/product/water-bear-%e3%82%af%e3%83%9e%e3%83%a0%e3%82%b7-t%e3%82%b7%e3%83%a3%e3%83%84/)
2. After selecting the product attributes the add to cart button clicks it will change the color and a tick mark should be displayed. But the tick mark is not appearing after enabling Hummingbird.

You can see the live site with working functionality here – https://bilingualnews.jp/product/water-bear-%E3%82%AF%E3%83%9E%E3%83%A0%E3%82%B7-t%E3%82%B7%E3%83%A3%E3%83%84/

Could you please help me to resolve this. Thanks in advance.

Hi @bvk69varghese

I hope you are doing well.

I can see there is a JS error: https://monosnap.com/file/6AUxxAng8wKmFOKXBT8RaKj4NDey9u

Can you go to Hummingbird > Assets Optimization and double check if you moved the jQuery-core file?

As @wpmudev-support9 let you know, we should move one file per time and check if everything is working, some files for example jQuery-core and Theme CSS files we shouldn’t move.

The video on this page shows how to check for errors:
https://wpmudev.com/docs/wpmu-dev-plugins/hummingbird/#asset-optimization

For optimization guides please check: https://wpmudev.com/docs/wpmu-dev-plugins/hummingbird/#optimization-guide

Best Regards
Patrick Freitas

Thanks for your reply. I have deactivated the Hummingbird plugin and the jquery error is not going (https://testing.bilingualnews.jp/product/water-bear-%e3%82%af%e3%83%9e%e3%83%a0%e3%82%b7-t%e3%82%b7%e3%83%a3%e3%83%84/). I think the Plugin cache is there in the system. How to reset the settings.?
I have removed the jquery.js in the bulk update checkbox and did the bulk update, there is no change in the error is still showing. Is there any data stored in the DB to enable/disable the settings.? I did the reset option and its still showing the jquery error on the front end.
If the error disappears I can reinstall and check the asset optimisation?one by one for the plugin.

Please help me to resolve the issue. Thanks.

H @bvk69varghese,

I have deactivated the Hummingbird plugin and the jquery error is not going (https://testing.bilingualnews.jp/product/water-bear-%e3%82%af%e3%83%9e%e3%83%a0%e3%82%b7-t%e3%82%b7%e3%83%a3%e3%83%84/). I think the Plugin cache is there in the system. How to reset the settings.

If Hummingbird is deactivated then one of its settings would get applied on your website in any way. Hummingbird won’t be calling any data from the DB if the plugin is deactivated.

Even after deactivation, if you still notice a JQuery error it would mean that the error isn’t related to Hummingbird or there is a server-side cache enabled in your Hosting provider side.

However, at the moment I’m not able to notice the mentioned JQuery error. I could only notice Captcha error:

Screenshot at 16:09:31.png

Please do check and let us know once you keep the Hummingbird activated so that we could check further if needed.

Kind Regards,
Nithin

Hi,

I have integrated the Hummingbird in my test website. Enabled cache and Asset Optimisation Compress/Combine and did the bulk update. This is breaking the woocommerce pages. So I reset cache and made it automatic. We are facing one issue right now. In the add to cart button the tick mark is not appearing in mobile and Desktop. I am getting font loading error also in this page. https://testing.bilingualnews.jp/product/abduction-t-shirt-%ef%bd%9c%e3%82%a2%e3%83%96%e3%83%80%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b3-t%e3%82%b7%e3%83%a3%e3%83%84/

Without enabling the Hummingbird this is working fine in our live site here – https://bilingualnews.jp/product/abduction-t-shirt-%EF%BD%9C%E3%82%A2%E3%83%96%E3%83%80%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3-t%E3%82%B7%E3%83%A3%E3%83%84/

Could you please help us to resolve this issue. Thanks.

Hi @bvk69varghese

Can you add this CSS in the WordPress > Appearance > Customise > Additional CSS?

.button.added::after{
    font-family: 'Woocommerce' !important;
}

https://monosnap.com/file/tIwffhv8JgNzfV1ptTEkNk3reR51B3

Best Regards
Patrick Freitas

Hi,

I have fixed all errors on my website by adding and removing the CSS and js from the bulkupdate list in Asset Optimisation. After adding the plugin my LCP score has increased on all pages in https://pagespeed.web.dev/. How can I improve the score. Also I am using javascript slider in my homepage and the error showing the slider images are using lazy load. How to remove the lazy load of images using your plugin.

My live URL is – https://bilingualnews.jp/

Please help me to resolve the issue. Thanks.

• This reply was modified 2 years, 10 months ago by bvk69varghese.

Hello @bvk69varghese !

I’ve ran the test and I see that one of the suggestions is indeed to not lazy-load the main image.

It looks like there’s a plugin on your site (or a builder) which is adding the lazy loading. You’d have to check that plugin’s documentation to see if it allows excluding specific images from being lazy loaded.

One other major improvement recommendation is the “Reduce initial response time” – it seems that even with Hummingbird’s caching, the server is still not able to respond in the expected time – for me (in Europe) the response time is much more than 2 seconds, which is way above the recommended 600ms or less. I would suggest to check with your hosting provider regarding this as it’s clearly a server resource issue. Possibly switching the hosting will be necessary here, but please first contact your hosting provider as they can perform additional checks for you.

Kind regards,
Pawel

Hi,

Thanks for your response.

I can see the report of https://pagespeed.web.dev/ of our live site(https://bilingualnews.jp/) I can see that the LCP score has increased from 3.2s to 10.2s after installing HummingBird. You can also see this in your testing. Top of the screen it will show the previous score and bottom it will show the current score. Can you please explain why the LCP score has increased after enabling Hummingbird plugin? Should I make any changes to the Hummingbird settings to reduce the score?

Please help us to resolve the issues. Thanks.

Hi

Can you please reply to my above post. Thanks.

We are trying to improve the LCP score but the Hummingbird plugin had increased the score. So please help us how to improve the score using Hummingbird. Thanks.

Hi @bvk69varghese

The LCP depends on what Google is reporting,

https://wpmudev.com/docs/wpmu-dev-plugins/hummingbird/#largets-contentful-paint-element

It is your Largest Contentful Paint Element, sometimes it can be an HTML section, so to improve it you can move some CSS and JS scripts to the footer removing the render block files.

In other cases it is related to a big image, then optimizing the image using WPMU DEV Smush or any software like GIMP or Photoshop will help.

https://wpmudev.com/blog/image-optimization-guide/

On your website for mobile, it is this image https://bilingualnews.jp/content/uploads/2022/01/homepage1profile.webp I suggest removing the Lazy Load of it, it will make the image show faster.

Best Regards
Patrick Freitas

Hi

Thanks for your response.

As per yur instruction I have removed the lazy loading of images using jquery like below.

$(document).ready(function () {
 var images = $('img');
  $.each(images, function() {
    $(this).removeAttr("loading");
  });
});

But the LCP score is increasing more in this case. Is this what you mentioneed?

Also I have updated the Hummingbird plugin as per our weekly plugin update. Now the mobile left nav some line or text is displaying on the cross button of the close menu option when you change the Menu items.

Please see the issue here – https://testing.bilingualnews.jp/

Could you please check these issues andgive a reply. Please give a proper solution to reduce the LCP score. Thanks.

Hi @bvk69varghese,

Please see the issue here – https://testing.bilingualnews.jp/

I’m afraid, it seems like Hummingbird isn’t enabled in the mentioned testing site.

Could you please enable the plugin, so that we could check further regarding this?

Looking forward to your response.

Kind Regards,
Nithin