Gutenberg Blocks That May Slow Down Your WordPress Website

Поділитися
Вставка
  • Опубліковано 7 лис 2024

КОМЕНТАРІ • 73

  • @faithnomore101
    @faithnomore101 3 роки тому +1

    Jack is my favorite Gutenberg Block loading time comparing youtuber.

    • @JackCao
      @JackCao  3 роки тому

      Thank you! Such an honor! 😊

  • @nabulalke
    @nabulalke 3 роки тому

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

  • @nicheschool-5481
    @nicheschool-5481 3 роки тому +1

    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
      @JackCao  3 роки тому

      Thank you so much! Really appreciate it! 😊

  • @wordpressadwords7932
    @wordpressadwords7932 3 роки тому

    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?

  • @fabrictexture4767
    @fabrictexture4767 Рік тому

    Need more videos like this from u dear

  • @felipe_arbelaez
    @felipe_arbelaez 3 роки тому

    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?

  • @imdurgeshpratap
    @imdurgeshpratap 3 роки тому +1

    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
      @JackCao  3 роки тому +1

      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
      @imdurgeshpratap 3 роки тому

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

  • @robertturner2687
    @robertturner2687 3 роки тому

    Your videos are awesome!

  • @thepurpleufo
    @thepurpleufo 3 роки тому

    GREAT! Thank you.

  • @Tripwithadi
    @Tripwithadi 3 роки тому +1

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

    • @JackCao
      @JackCao  3 роки тому

      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?

  • @mgsxf
    @mgsxf 3 роки тому

    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
      @JackCao  3 роки тому

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

    • @mgsxf
      @mgsxf 3 роки тому +1

      @@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
      @JackCao  3 роки тому

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

  • @brunovincent1969
    @brunovincent1969 2 роки тому

    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
      @JackCao  2 роки тому

      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.

  • @surabhibhattacharjee685
    @surabhibhattacharjee685 3 роки тому

    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. 🙏🏼

  • @PilatesinSacramento
    @PilatesinSacramento 3 роки тому

    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
      @JackCao  3 роки тому +1

      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 🤞

  • @mountainman4135
    @mountainman4135 3 роки тому

    Great vid! Thanks again

  • @TheNettforce
    @TheNettforce 3 роки тому

    Another very useful video Jack, great schematic on the parameters

    • @JackCao
      @JackCao  3 роки тому

      Thanks Brian! 😊

  • @youcefdebih2660
    @youcefdebih2660 3 роки тому +1

    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
      @JackCao  3 роки тому +2

      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
      @youcefdebih2660 3 роки тому +1

      @@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
      @JackCao  3 роки тому +1

      @@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
      @youcefdebih2660 3 роки тому

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

    • @JackCao
      @JackCao  3 роки тому

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

  • @bradzimmer239
    @bradzimmer239 3 роки тому

    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
      @JackCao  3 роки тому

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

  • @webjumpmedia4873
    @webjumpmedia4873 3 роки тому +1

    Awesome content Jack!

    • @JackCao
      @JackCao  3 роки тому

      Thank you! 😊

  • @Tripwithadi
    @Tripwithadi 3 роки тому

    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
      @JackCao  3 роки тому

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

  • @jeromelyles3884
    @jeromelyles3884 2 роки тому

    Thank you.

  • @jimnech5066
    @jimnech5066 3 роки тому +3

    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
      @JackCao  3 роки тому +2

      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. 😊

  • @Tripwithadi
    @Tripwithadi 3 роки тому

    Great content bro 🙏🏻🙏🏻🙏🏻

    • @JackCao
      @JackCao  3 роки тому

      Thank you 😊

  • @romari2706
    @romari2706 3 роки тому +2

    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
      @JackCao  3 роки тому

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

  • @abulhassan-a1a
    @abulhassan-a1a 3 роки тому

    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
      @JackCao  3 роки тому

      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: ua-cam.com/video/kgfZLfyGUW8/v-deo.html

  • @SamuelVerma
    @SamuelVerma 3 роки тому +1

    Hey, your wprocket link doesn’t work

    • @JackCao
      @JackCao  3 роки тому +1

      Thank you for highlighting! I've fixed it.

  • @petermason7743
    @petermason7743 3 роки тому

    Does Woocommerce slow it down?

    • @JackCao
      @JackCao  3 роки тому

      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.

  • @pahtashow
    @pahtashow 3 роки тому

    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
      @JackCao  3 роки тому

      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
      @JackCao  3 роки тому

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

    • @pahtashow
      @pahtashow 3 роки тому

      @@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
      @JackCao  3 роки тому

      @@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: ua-cam.com/video/VU5VS0Po4h4/v-deo.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.

    • @pahtashow
      @pahtashow 3 роки тому

      ​@@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.

  • @nayeemahmed163
    @nayeemahmed163 3 роки тому

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

    • @JackCao
      @JackCao  3 роки тому +1

      There you go 😊
      Lead Capture Page (Pure Kadence Theme + Blocks): ua-cam.com/video/n2Hqlea0RMo/v-deo.html
      Ecom Store (Astra Pro + Gutenberg + Woo): ua-cam.com/video/kgfZLfyGUW8/v-deo.html
      Online Liquor Store (Home Page - Kadence Theme + Blocks): ua-cam.com/video/HZkpG-tfHPA/v-deo.html
      My Home Page (GeneratePress + UAG): ua-cam.com/video/j8-cmbH7n14/v-deo.html
      Do let me know if you have any suggestions? (maybe which theme and plugins you want me to do a tutorial on)

  • @mikt
    @mikt 3 роки тому +1

    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
      @JackCao  3 роки тому +1

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

    • @mikt
      @mikt 3 роки тому

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

    • @JackCao
      @JackCao  3 роки тому +1

      @@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
      @mikt 3 роки тому

      @@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!

  • @kalwija
    @kalwija 3 роки тому

    Do you think twentig plugin could slow down a website?

    • @JackCao
      @JackCao  3 роки тому

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

    • @kalwija
      @kalwija 3 роки тому

      @@JackCao Twenty Twenty also.

  • @punit5601
    @punit5601 3 роки тому

    16:35 avoiding videos to slow down websites

  • @jeromelyles3884
    @jeromelyles3884 2 роки тому

    Thank you.