Gutenberg Blocks That May Slow Down Your WordPress Website
VloĆŸit
- Äas pĆidĂĄn 30. 07. 2024
- Ever wonder if Gutenberg Blocks may slow down your WordPress Site?I mean, they are awesome, they are fast, and easy to use. But, I realise at some point that pages built with Gutenberg Blocks can't get a 90+ rating and I am curious which are the Blocks that are causing that to happen.
đ WP Rocket (Latest Discounts): jackcao.com/wprocket
đ Read Blog (More Detailed Info): jackcao.com/gutenberg-blocks-...
đš My Recommended WordPress Tools:
â Web Hosting (for Beginners): jackcao.com/bluehost
â Web Hosting (for Speed): jackcao.com/siteground
â Best WordPress Theme: jackcao.com/kadence
đ Subscribe for more WordPress Related Content: jackcao.com/subscribeââ
đ Gutenberg Blocks Used in the Video:
đ Kadence Blocks: jackcao.com/kadence-blocks
đ UAG: ultimategutenberg.com/ââ
đ GetWid: getwid.getmotopress.com/ââ
đœ More Helpful Videos:
â 11 Gutenberg Block Plugins: âą Top 11 Gutenberg Block... â
â Will Multiple Gutenberg Blocks Slow Down WordPress Site: âą Will Multiple Gutenber...
â Site Speed Case Study: âą Case Study: Speed Up W... âââ
â Build a Fast Loading Home Page: âą Build a Fast Loading H... âââ
â Improve Site Speed (9 tips): âą How to Speed Up Your W... ââ
__________________________________________________________________________
AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, Iâll receive a small commission. I won't put anything here that I haven't verified and/or personally used myself. And, you will never pay anything more than what it cost if you buy the product directly from the source. From time to time, I may even provide you with some discount codes to help you save money.
__________________________________________________________________________
#gutenbergblocksââ #pagebuildersââ #wordpressââ #jackcaoââ #wpblocksââ #wordpressblocksâ #gutenberg
Lightweight: Testimonials grid, accordion, circular progress barr, tabs block, counter block, content timeline, image & text slider,
Medium weight: Testimonial carousel, video popup,
Avoid: Maps, Post carousel, video embed
Awesome content!
Thank you!
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.
Thank you so much! Really appreciate it! đ
Your videos are awesome!
Great vid! Thanks again
GREAT! Thank you.
Need more videos like this from u dear
Another very useful video Jack, great schematic on the parameters
Thanks Brian! đ
Jack is my favorite Gutenberg Block loading time comparing youtuber.
Thank you! Such an honor! đ
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?
Awesome content Jack!
Thank you! đ
Thank you.
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?
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 đ€
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?
Great content bro đđ»đđ»đđ»
Thank you đ
one question Jack am a designer which guntenburg blocks are good for portfolio grids?
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?...
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.
@@JackCao Thank you, very... Good advice as always,,,,
Jack, do you ever test about cumulative layout shift? What kind of block affect it the most?
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?
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. đđŒ
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?
Nope. Most Kadence blocks are lightweight. But, just avoid those heavier blocks as mentioned. They are heavy even from other block developers.
@@JackCao I just watched your other video on speed test with multiple blocks, that answers my initial question too. Awesome stuffs, keep'em coming
@@mgsxf If you have more questions in mind, please share it and I will experiment with them đ
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.
That's something to ponder about. I will test Oxygen Builder and come back with my findings đ
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
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.
@@JackCao Thank you, but if I do not use any page builders it's challenge for me because I don't understand a code
@@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.
@@JackCao I choose Astra theme for my website eCommerce I have an example ecommerce but cannot put site link
@@youcefdebih2660 sure please show me what features you need for your ecom site. (The example site)
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
You need to make sure your image is in the format of 16:9. That way it will resize properly.
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?
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. đ
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.
It is most likely the plugins you have installed. What plugins are you using?
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?
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.
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
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: czcams.com/video/kgfZLfyGUW8/video.html
Hey, your wprocket link doesnât work
Thank you for highlighting! I've fixed it.
Please create tutorial about how to create landing page with gutenberg from scratch
There you go đ
Lead Capture Page (Pure Kadence Theme + Blocks): czcams.com/video/n2Hqlea0RMo/video.html
Ecom Store (Astra Pro + Gutenberg + Woo): czcams.com/video/kgfZLfyGUW8/video.html
Online Liquor Store (Home Page - Kadence Theme + Blocks): czcams.com/video/HZkpG-tfHPA/video.html
My Home Page (GeneratePress + UAG): czcams.com/video/j8-cmbH7n14/video.html
Do let me know if you have any suggestions? (maybe which theme and plugins you want me to do a tutorial on)
Does Woocommerce slow it down?
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.
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.
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.
I have done a few live site optimization in my channel if you are interested
@@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.
@@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: czcams.com/video/VU5VS0Po4h4/video.html
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.
â@@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.
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.
I will keep your suggestions in mind when editing my future videos đ
@@JackCao That would be super awesome! But than - maybee i am the only one distracted :) Thanks thanks anyways!
@@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.
@@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!
Do you think twentig plugin could slow down a website?
I haven't tried that before. But is it only meant for the Twenty Twenty One theme?
@@JackCao Twenty Twenty also.
16:35 avoiding videos to slow down websites
Thank you.