Gutenberg Blocks That May Slow Down Your WordPress Website

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 73

  • @faithnomore101
    @faithnomore101 3 года назад +1

    Jack is my favorite Gutenberg Block loading time comparing youtuber.

    • @JackCao
      @JackCao  3 года назад

      Thank you! Such an honor! 😊

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

  • @fabrictexture4767
    @fabrictexture4767 Год назад

    Need more videos like this from u dear

  • @robertturner2687
    @robertturner2687 3 года назад

    Your videos are awesome!

  • @nabulalke
    @nabulalke 3 года назад

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

  • @webjumpmedia4873
    @webjumpmedia4873 3 года назад +1

    Awesome content Jack!

    • @JackCao
      @JackCao  3 года назад

      Thank you! 😊

  • @thepurpleufo
    @thepurpleufo 3 года назад

    GREAT! Thank you.

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

  • @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,,,,

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

  • @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?

  • @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?

  • @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 🤞

  • @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?

  • @jeromelyles3884
    @jeromelyles3884 2 года назад

    Thank you.

  • @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 😁

  • @Tripwithadi
    @Tripwithadi 3 года назад

    Great content bro 🙏🏻🙏🏻🙏🏻

    • @JackCao
      @JackCao  3 года назад

      Thank you 😊

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

  • @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)

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

  • @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: ruclips.net/video/kgfZLfyGUW8/видео.html

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

  • @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?

  • @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): ruclips.net/video/n2Hqlea0RMo/видео.html
      Ecom Store (Astra Pro + Gutenberg + Woo): ruclips.net/video/kgfZLfyGUW8/видео.html
      Online Liquor Store (Home Page - Kadence Theme + Blocks): ruclips.net/video/HZkpG-tfHPA/видео.html
      My Home Page (GeneratePress + UAG): ruclips.net/video/j8-cmbH7n14/видео.html
      Do let me know if you have any suggestions? (maybe which theme and plugins you want me to do a tutorial on)

  • @SamuelVerma
    @SamuelVerma 3 года назад +1

    Hey, your wprocket link doesn’t work

    • @JackCao
      @JackCao  3 года назад +1

      Thank you for highlighting! I've fixed it.

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

  • @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: ruclips.net/video/VU5VS0Po4h4/видео.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.

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

  • @punit5601
    @punit5601 3 года назад

    16:35 avoiding videos to slow down websites

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

  • @jeromelyles3884
    @jeromelyles3884 2 года назад

    Thank you.