Gutenberg Blocks That May Slow Down Your WordPress Website

[@faithnomore101]

Jack is my favorite Gutenberg Block loading time comparing youtuber.

[@JackCao]

Thank you! Such an honor! 😊

[@fabrictexture4767]

Need more videos like this from u dear

[@nicheschool-5481]

I learned something new from your video. I really like it, so I've shared this video with my SEO community. Also, your voice and presentation are awesome.

[@JackCao]

Thank you so much! Really appreciate it! 😊

[@robertturner2687]

Your videos are awesome!

[@nabulalke]

one question Jack am a designer which guntenburg blocks are good for portfolio grids?

[@webjumpmedia4873]

Awesome content Jack!

[@JackCao]

Thank you! 😊

[@mountainman4135]

Great vid! Thanks again

[@TheNettforce]

Another very useful video Jack, great schematic on the parameters

[@JackCao]

Thanks Brian! 😊

[@Tripwithadi]

Jack, do you ever test about cumulative layout shift? What kind of block affect it the most?

[@JackCao]

The info box from Kadence blocks do have a little lag time in layout shift. I haven't encountered any other at this moment. Do you find any other you have discovered?

[@felipe_arbelaez]

First video I watch, and you got a new subscriber! What block did you use for the circular progress bar? Also, is there an alternative for the getwid counter? unfortunately it does not allow you tu customize font/size. Last, have you used gutentor blocks? Opinions?

[@wordpressadwords7932]

Awesome man, how you compare gutenberg blocks speed with each other. I am in the same boat like you and I don't want to use any third party plugins to build my sites with.The lesser plugins the better. What are your lightweight theme and plugins you use minimally?

[@mgsxf]

Awesome stuffs, very good comparison on different blocks, interested to see comparison on other blocks such as kadence blocks? Will those blocks add more weight?

[@JackCao]

Nope. Most Kadence blocks are lightweight. But, just avoid those heavier blocks as mentioned. They are heavy even from other block developers.

[@mgsxf]

@@JackCao I just watched your other video on speed test with multiple blocks, that answers my initial question too. Awesome stuffs, keep'em coming

[@JackCao]

@@mgsxf If you have more questions in mind, please share it and I will experiment with them 😁

[@thepurpleufo]

GREAT! Thank you.

[@imdurgeshpratap]

Hi Jack... First of all thank you for sucha useful content you post.. Already subscribed... I have also started designing on gutenberg rather than elementor.. got huge speed difference... I have a question... Should I use Sgoptimizer or wp rocket.. since I use sg hosting so its already enabled... can you make some comparison.....or Is there a way to use both, What will be the settings if I use both?...

[@JackCao]

I think wp rocket is much better when it comes to frontend caching and optimization, but you will need SG optimizer to control the backend caching. Once you install WP rocket, it will detect and deactivate the settings from SG optimizer, so there won't be any overlapping conflicts.

[@imdurgeshpratap]

@@JackCao Thank you, very... Good advice as always,,,,

[@pahtashow]

1:15, > site speed my main focus - Then why do not you have video about Kadance and WP Rocket optimization ? Can't find a video about right settings in Kadence and same right settings in WP Rocket.

[@JackCao]

There is no "perfect" wp rocket settings because every website have different plugins and functionalities. WP rocket settings is always a case by case settings, that's why I haven't created a video on that.

[@JackCao]

I have done a few live site optimization in my channel if you are interested

[@pahtashow]

@@JackCaoSir, with all respect I understand that every website is unique but my question was about only right setting when using Kadence and WP Rocket.

[@JackCao]

@@pahtashow The best setting for WP Rocket is to turn on all the settings, if that is what you are looking for. As for Kadence, it depends on what you are using. In every page of your site, you may have used different things that might slow down your website, such as slider, video embed and all those "Heavy" Gutenberg Blocks. I have discussed those here: kzbin.info/www/bejne/jIaYh4ZmhdRnnpY Respectfully, I have no answer to you as to which are the "right" settings for Kadence and WP Rocket, because there is none to begin with.

[@pahtashow]

​@@JackCao For example "Enable CSS Preload" in Kadence Theme > Customize > General > Performance > Enable CSS Preload and other performance settings. Thank you for answering me and your time. I will try this question in Kadence support.

[@youcefdebih2660]

Hi sir! Thank you for the valuable offering, I have a question I can use theme generatepress for e-commerce website without a code if I use elementor Or I use the theme Astra pro it's good

[@JackCao]

My advice is not to use any page builders like Elementor. What are the features you need for your store? If you build a store with Generatepress it will be a challenge if you don't understand codes. But, Astra Pro is fine.

[@youcefdebih2660]

@@JackCao Thank you, but if I do not use any page builders it's challenge for me because I don't understand a code

[@JackCao]

@@youcefdebih2660 Which theme are you using now? And do you have a link to your site? Maybe you can show me what is done with Elementor, I can share with you how it can be achieved with Gutenberg.

[@youcefdebih2660]

@@JackCao I choose Astra theme for my website eCommerce I have an example ecommerce but cannot put site link

[@JackCao]

@@youcefdebih2660 sure please show me what features you need for your ecom site. (The example site)

[@PilatesinSacramento]

Thank you for another great video, Jack! I really appreciate the metrics descriptions at the beginning. Super useful. Several of the metrics are involved with above the fold content. Can you comment on possibly using faster blocks for that first content and then heavier blocks later on the page. Seems like you’d get less impact on user experience. For example if I used a slider farther down a page, would that have less impact than if it were first?

[@JackCao]

It is because of people like you I can create great content 😊 You have always been providing good suggestions such as the question you've posted. Let me find the answer for you, and if it did make a difference, it will be a great content topic 🤞

[@brunovincent1969]

I love how you use empirical evidence to prove your point, very objective advice, are you an engineer? Well done! But I have a question, what is the score without video embed and Google maps WITHOUT wprocket?

[@JackCao]

Haha! Not an engineer, but just thought this is a great way to present my case. I think without any caching or "slow blocks" the page should get more than 95 on Google PSI.

[@jeromelyles3884]

Thank you.

[@Tripwithadi]

Great content bro 🙏🏻🙏🏻🙏🏻

[@JackCao]

Thank you 😊

[@Tripwithadi]

Jack, how to properly setup the video pop up image.. On desktop and mobile? I can't seem to set up the image properly its either cropped on mobile or on desktop

[@JackCao]

You need to make sure your image is in the format of 16:9. That way it will resize properly.

[@surabhibhattacharjee685]

Dear Jack, Greetings from India. Hope you're doing well in this pandemic situation. My good wishes for you and your entire family. Now, I want to create a website, definitely with Gutenberg Editor, and I want to use a fee translation plugin like GTranslate in my website. But I'm not sure whether it'd affect the page loading time drastically as it does with Google Maps if embedded. Can you please throw some light on this ? It will be a great help for me for taking decisions. Thanks a lot and stay blessed. 🙏🏼

[@SamuelVerma]

Hey, your wprocket link doesn’t work

[@JackCao]

Thank you for highlighting! I've fixed it.

[@jimnech5066]

Jack, This is really valuable information! A blueprint for performing an important step in the website creation process. This is critical to do early-on when it is so much easier to make changes. I do have one question. Is there a reason you only displayed the test results for mobile and not for desktop?

[@JackCao]

Hi Jim, thank you and glad that the video helped! For the desktop score, if you are optimized for mobile, naturally you are optimized for desktop. The desktop rating will hardly be lower than the mobile score. 😊

[@bradzimmer239]

I installed Kaden over top an existing theme, and it’s google web speed score is horrible. Would it have made a difference to start from scratch? Thank you.

[@JackCao]

It is most likely the plugins you have installed. What plugins are you using?

[@romari2706]

As Gutenberg Blocks become more complicated and featured, I see them slowing down your website just as page builders do. Perhaps the future is Oxygen Builder which gets rid of WordPress by taking over nearly completely. Or the future is in simple websites.

[@JackCao]

That's something to ponder about. I will test Oxygen Builder and come back with my findings 😊

[@petermason7743]

Does Woocommerce slow it down?

[@JackCao]

I don't think so, however, if you use the woocommerce blocks for example the product slider, it will slow down your site a little. Just remember, whenever there is a need to draw data from other sources, it will slow down your site a little. Plus the slider uses some javascript as well, so it will add to the slow down. It is not that woocommerce slows down your site, it is the nature of the blocks used.

[@nayeemahmed163]

Please create tutorial about how to create landing page with gutenberg from scratch

[@JackCao]

There you go 😊 Lead Capture Page (Pure Kadence Theme + Blocks): kzbin.info/www/bejne/pGOrop-blpWFg9E Ecom Store (Astra Pro + Gutenberg + Woo): kzbin.info/www/bejne/oZjJi3-crqyIjZo Online Liquor Store (Home Page - Kadence Theme + Blocks): kzbin.info/www/bejne/fovOoXpjqct7hqM My Home Page (GeneratePress + UAG): kzbin.info/www/bejne/oGmQlKCYfZyhZ5Y Do let me know if you have any suggestions? (maybe which theme and plugins you want me to do a tutorial on)

[@abulhassan-a1a]

Hi Jack,New suscriber here,I have not gone through the comments but if you can put in consideration of creating a video(s) for e commerce(Kadence+Gutenberg blocks) and i would suggest pro features of Kadence like customizing Cart,Checkout,Single product,Thank-You pages,...etc. This will really help a lot of people as you definitely know that there are a lot of Page Builders victims and Gutenberg is the optimum solution Thank you very much! Abu

[@JackCao]

Hi Abu, I've actually created a tutorial (Gutenberg + Astra Pro + Woo Commerce). Can you please check it out and let me know if it is sufficient: kzbin.info/www/bejne/oZjJi3-crqyIjZo

[@mikt]

May i suggest that you tune down the background music? I find it very distracting and annoying. I would really love to watch your videos, but i needed to switch off after liek 5 minutes due to the 'elevator' music loop. Thanks for considering and keep up the good work.

[@JackCao]

I will keep your suggestions in mind when editing my future videos 😊

[@mikt]

@@JackCao That would be super awesome! But than - maybee i am the only one distracted :) Thanks thanks anyways!

[@JackCao]

@@mikt Is it the entire video or is it just the parts where it is silent? Because I think I tried to lower the song volume by quite a bit already. Maybe I need to reduce it down a little more.

[@mikt]

@@JackCao i watched it again, another day, another mood. I must say it still distracts me throughout the whole video with a rising level of annoyance the longer i hear it. Maybee if the loop would be a bit more versatile or longer in each loop. It reminds me kind of websites with sound, i would switch it off or leave. I mean - it is your content, so it is not my right to say anything - and i may just be the only one. Could you not do one video without music for the content and see if you lose something? Thanks a lot again for your content!

[@punit5601]

16:35 avoiding videos to slow down websites

[@kalwija]

Do you think twentig plugin could slow down a website?

[@JackCao]

I haven't tried that before. But is it only meant for the Twenty Twenty One theme?

[@kalwija]

@@JackCao Twenty Twenty also.

[@jeromelyles3884]

Thank you.