Hi Jack, thanks so much for this case study. Dee Why is in my neighbourhood too! You have a great way of explaining concepts and I really appreciate that!
Glad it was helpful! I found it amusing as well. Small adjustment to the padding and margin will change the largest contentful paint. Kinda make this method a "cheat code". Haha!
I really enjoyed your video-it helped address many of my problems! However, I'm currently facing an issue with my LCP (Largest Contentful Paint) being flagged for my H1 element. Could you please advise how I can resolve this?
Create a video on the home page design with kedence Block (Gutenberg). Sometimes building pages with Gutenberg is a little tricky and needs some learning curve. Awesome video 👍👍
Actually I have a few tutorials: Magazine Site: ua-cam.com/video/_xbpzTsjiFY/v-deo.html My Home Page: ua-cam.com/video/W1zJo7M21wk/v-deo.html Taster's Club Homepage: ua-cam.com/video/HZkpG-tfHPA/v-deo.html Hope these help!
I'm thinking about moving to Kadence + Kadence Blocks + UAG forever... Do you think there is design limitations if I dump Elementor forever??? Do you think I can still be using Elementor + WP Rocket and getting PageSpeed Insights over 75?
This is well explained and doesn't drag on for like five hours. Thank god. I do a lot of webpage maintenance, and speed testing is something that is new to me, but I get a TON of tickets for... So trust me when I say thanks for sharing! - P.S I hate page builders of any type..
I have a question about Shopify store speed. How can i improve my store speed which is very low? You have explained about wordpress. Any help about improving my shopify store speed would be appreciated.
Hi Jack Cao I am fan of you. I want to ask you a question. Is It Better to Embed UA-cam Videos or Link to Them? I have %90 mobile hit i linked youtube links to buttons Page speed is very fast. I can either use embed code and page speed is good as well , lcp is good but Speed index warns me it turns red. According to seo what should i do? If i use embeds pc visitors willl watch videos from my site but i use links, they will you to youtube. But Even if there is an embed code in the article, %90 mobile users will watch video from their youtube aplications. thansk
It's a very interesting question. From SEO point of view, it decreases time on page if you put a link to UA-cam. But if you embed it, your Google PSI rating will suffer. So, here's what I recommend. You embed the video indirectly. Meaning only when the video is clicked, the page will then start to load the video. Basically, lazy loading a video embed. The alternative is to use a video popup. So, when the video thumbnail is clicked, the embedded video will popup and play. These 2 methods are the best practice for SEO as it increases time on page, and also, it does not affect the page speed much. Hope this helps.
Thank you for another awesome video. Question about removing the recaptcha. I have a contact form on my website and I used to get so much spam through it without recaptcha. I am redoing my website in Gutenberg because I want to speed things up from elementor, so I'm staging now. The initial speeds are great but I'm concerned about when I have to add the recaptcha. Do you have any advice on how to protect the contact form (which will be on one page only) but not sacrifice website speed? Thank you!
Personally, I will optimize my images with tools like Kraken.io before uploading. But of course, Smush, imagify, shortpixel will do the job as well. As long as images are optimized and compressed and they are served in webp format, it is good.
I haven't use them, but they are expensive for a high traffic site. Plus, I heard some websites are not compatible and the site broke as a result. I think they heavily delay javascripts, but some sites require some scripts to load before the entire site is displayed, and hence the site broke. But you can try the free version if you like. As long as your site don't hit 5000 views, its free, otherwise, it is a monthly fee which is more expensive then hosting. So, it really depends on your budget.
@@JackCao Hi Jack, I never heard of Live Canvas before this comment. I just had a quick look and it seems really interesting. If you are familiar with it and have time I think that would be a great video even if it helps people just know what it is and choose not to use it if its not right for their circumstances.
By the time I write this comment I still not finish watching this video but I still got question, does the web page speed load test include google tag manager/facebook pixle? because I test my own website speed load got score between 50-60 on mobile. Can you explain this situasion?
They are 3rd party codes. You may need speed optimization tools to optimize them. Https://jackcao.com/wprocket has a function to help you optimize 3rd party codes.
@@alexandrest-cyr1625 Already use but still not good. Well, maybe I just search better method..Withoud tracking code I got fast load but for business it will makes me lose potential customer. Anyway thanks for the tips.
I do love your videos. Great job. Way too many developers have gotten lazy and have been using Elementor. I can’t believe I’m saying this, but after having used Elementor and Brizy, I’d rather use WP bakery as it’s more stable. Gutenberg is awesome, but doesn’t offer the effects and functionality of page builders. If you’re looking for simple, Gutenberg is the only way to go. One thing you have taught me is keep your homepage simple. (Kiss: keep it simple stupid). Cheers.
Absolutely! Simplicity is the key. But I think you can build amazing looking pages with Gutenberg. Maybe you can point me to a page with features, and I will try recreating it with Gutenberg. 😊
I got rid of Elementor myself, but I did keep my theme plugin. Optimization + pages/posts using Gutenberg was a nice middle-ground for me. I kept the customized look and my mobile score is still optimized to 70-75. Truth be told...the score doesn't really matter as much as the user experience. 70 means the speed is good enough for actual user-experience. But if I can tweak to 80, that will be truly "fast" for user. 90's is irrelevant in my eyes. Obviously...just to have 90-95 would be nice, but there's no real point in the bigger scheme of ranking.
Hi, Jack! The problem I have with gutenberg is it can't display my shortcode but it works fine in elementor, is there anything wrong about this or have you ever met this problem? Thanks before :)
Question; do you know of a way to optimize embedded youtube vids? I recently created my first post w/ one youtube vid. And it's sucking-up resources so the mobile is at 30 because of it.
The best way to optimize YT embed is lazy loading. Basically, the YT video will only load when clicked upon. The only thing that loads when the page loads is the video thumbnail. I will do a video on this. 😁
@@JackCao Yeah...that'd be awesome. I figured lazy-loading, but my image optimizer is already lazy-loading pics. It doesn't seem to be lazy-loading vids. Either way...look forward to the vid!
Yup, that's because of the 3rd party codes that are loading on the background. I did some research on that and it seems that the only "fix" is to defer the loading of your ads. But that will affect the revenue of your site. The other alternative is to join an ad platform like Ezoic as they offer you some resources to speed up your pages. Also, have you tried Nitropack? I heard they are able to speed up sites, but they are costly.
@@JackCaoHi thanks for sharing your knowledge. I saw in RankMath video that you are trying Ezoic. How did you resolve the compatibility between Ezoic LEAP and Kadence theme?
@@JackCao Well you need ofc some plugins ... what really helps is Prefmatters or Assets Clean up . with this you can tell what page loads what JS or CSS... Also you need to know then to use inner cols. and then its not need to save on dom´s. Those 2 things help a lot to fix the short comings of Elementor. But with the Lastes update Elementor ones again made the dom elementens less and even have a good way to load google fonts and their icons!
Soooo most of your fixes were removing elements that increase load time...that's fine and dandy except for when those elements are needed in the design. Also, moving all images out of viewport may help with the initial contentful paint but visually looks horrible. I don't see how I could use any of these tips in a real world scenario.
I am afraid if everybody just cares about speed then we will basically share some plain designs and every web sites look alike. This is what happening now.
Just to put my perspective. The reason why we should be using Gutenberg is because it is flexible and it is part of the WordPress Editor. Cool web designs is now achievable with Gutenberg, but not all Gutenberg Blocks are created equally. Some are heavier and some are lightweight. Not all pages on your website needs to be optimized for speed. You need to pay attention to those pages that are ranking for keywords on Search Engines and you need to optimize those pages. You need to use lightweight blocks to create simple designs, because those pages that are ranking on Google are mostly informational posts. However, when it comes to designing for pages that do not really need to rank on Search Engines, like the Service Page, Contact Us page, Categories page, etc. You can add more design elements to those pages. It doesn't need to get 90+ on Google PageSpeed Insights for those pages. What I am essentially doing is to decrease as much bloat as possible for the blank post page so that when you create content that ranks on Google, you have no problems with site speed. If your base (Blank Page) is bloated, no matter what optimization you do, it will still fetch a poor score. So no, your website do not need to have only plain design. You just need to know where to put your focus on when doing page speed optimization. Hope this is clear. 😊
lol who doesnt know how to simply just remove everything to increase the site speed? The reason why we are here is because we want to find out how can we boost our loading speed at the same time with those plugins and functions already implemented... thats what we are looking for. It won't help us much by you simply just say... remove this remove that... and there u go, the speed increase!
It is wishful to think that you can optimize a heavy loading theme or plugin and expect it to get a 90 plus rating on PSI. The least you can do is to async javascripts which wont do much help, and the most you can do is to delay javascripts but sometimes doing that will break your site. So, the best way is to identify the heavy loading plugin and replace it with a lighter weight plugin if you really need the functionality. Let me emphasize, there is literally NO WAY to optimize for speed with heavy loading plugins or themes. If you don't heed my advice, that's totally fine. Try Nitropack if you don't find it expensive and hope it doesn't break your site. If not, then good luck spending thousands hiring a web developer who may or may not know how to optimize your heavy loading site. Peace out! ✌
![Does PageSpeed Actually Impact SEO? [New Experiment]](/img/n.gif)
Thanks a lot, Jack, for really helping my site speed. Great explanation and a great result. This is the best channel of its type on UA-cam!🤗
It's my pleasure to help you our Dr. James. 😊
FINALLY!! some one is explaining how to read the Google page speed! Thanks! Have been waiting for this so for a long time!
You're welcome! Glad it was helpful! 😊
One of the best video i have ever seen in UA-cam
Thanks for sharing 🙏🙏🙏
One of the best videos I have seen about pagespeed analytics. Very good job👍🏻 thank you for this video my friend!
Another really valuable video Jack. Funny thing is that the adds playing were from Elementor.
Hi Jack, thanks so much for this case study. Dee Why is in my neighbourhood too! You have a great way of explaining concepts and I really appreciate that!
Thank you so much. My site's speed has increased.
I've learnt about LCP large contentful paint with this video. Thank you very much Jack!
Glad it was helpful! I found it amusing as well. Small adjustment to the padding and margin will change the largest contentful paint. Kinda make this method a "cheat code". Haha!
Great video Jack. Gutenberg has come a long way.
Nice video Jack! Very well done!
Dr James Bond!! wow cool name!
And, super helpful to see how you comb through the Google page speed insights results and make adjustments to the page. 🙏
Yeah, there is no point in talking theory in Page speed optimization. Hands on is the most important. 😊
I really enjoyed your video-it helped address many of my problems! However, I'm currently facing an issue with my LCP (Largest Contentful Paint) being flagged for my H1 element. Could you please advise how I can resolve this?
Awesome tips! Many thanks for this valuable info about page speed optimization and keep em coming
You got it!
Thanks! It seems very helpful. Just one question: What is a page "burror"
any more videos on this topic ?
Create a video on the home page design with kedence Block (Gutenberg). Sometimes building pages with Gutenberg is a little tricky and needs some learning curve. Awesome video 👍👍
Actually I have a few tutorials:
Magazine Site: ua-cam.com/video/_xbpzTsjiFY/v-deo.html
My Home Page: ua-cam.com/video/W1zJo7M21wk/v-deo.html
Taster's Club Homepage: ua-cam.com/video/HZkpG-tfHPA/v-deo.html
Hope these help!
@@JackCao thanks.👍👍
Great help brother
good vidéo
I immediately hit the Subscribe button when I heard “I,m a not a fan of page builders”
How Can I show You My Problem
Plz..........🥺🥺🥺🥺 Reply me
thank you for this. it really did help.
I'm thinking about moving to Kadence + Kadence Blocks + UAG forever...
Do you think there is design limitations if I dump Elementor forever???
Do you think I can still be using Elementor + WP Rocket and getting PageSpeed Insights over 75?
can you help with our site speed problem or optimization?
This is well explained and doesn't drag on for like five hours. Thank god. I do a lot of webpage maintenance, and speed testing is something that is new to me, but I get a TON of tickets for... So trust me when I say thanks for sharing! - P.S I hate page builders of any type..
Hi Jack, Thanks for your great video. What do you suggest for fast but affordable hosting?
I think the best and most affordable hosting now is cloudways: jackcao.com/cloudways (vultr or Digitalocean)
Jack, element or 3.2 seems to be doing some optimization.. What do you think?
I have a question about Shopify store speed. How can i improve my store speed which is very low? You have explained about wordpress. Any help about improving my shopify store speed would be appreciated.
Can we make reusable products template by kadence if yes sir can you make video about it
Sure. Will work on it!
Hi Jack Cao
I am fan of you.
I want to ask you a question.
Is It Better to Embed UA-cam Videos or Link to Them?
I have %90 mobile hit
i linked youtube links to buttons
Page speed is very fast.
I can either use embed code and page speed is good as well , lcp is good but Speed index warns me it turns red.
According to seo what should i do?
If i use embeds pc visitors willl watch videos from my site but i use links, they will you to youtube.
But Even if there is an embed code in the article, %90 mobile users will watch video from their youtube aplications.
thansk
It's a very interesting question. From SEO point of view, it decreases time on page if you put a link to UA-cam. But if you embed it, your Google PSI rating will suffer.
So, here's what I recommend. You embed the video indirectly. Meaning only when the video is clicked, the page will then start to load the video. Basically, lazy loading a video embed.
The alternative is to use a video popup. So, when the video thumbnail is clicked, the embedded video will popup and play.
These 2 methods are the best practice for SEO as it increases time on page, and also, it does not affect the page speed much.
Hope this helps.
Would you do website design for a doctor practice? I would love to hire you for making my new website.
nice man
Thank you for another awesome video. Question about removing the recaptcha. I have a contact form on my website and I used to get so much spam through it without recaptcha. I am redoing my website in Gutenberg because I want to speed things up from elementor, so I'm staging now. The initial speeds are great but I'm concerned about when I have to add the recaptcha. Do you have any advice on how to protect the contact form (which will be on one page only) but not sacrifice website speed? Thank you!
Hi do I have to optimize images before I download or is it enough to optimize them with a plug-in like Smush?
Personally, I will optimize my images with tools like Kraken.io before uploading. But of course, Smush, imagify, shortpixel will do the job as well. As long as images are optimized and compressed and they are served in webp format, it is good.
Solid! 🤗
What do you think of using Nitropack?
I haven't use them, but they are expensive for a high traffic site. Plus, I heard some websites are not compatible and the site broke as a result. I think they heavily delay javascripts, but some sites require some scripts to load before the entire site is displayed, and hence the site broke. But you can try the free version if you like. As long as your site don't hit 5000 views, its free, otherwise, it is a monthly fee which is more expensive then hosting. So, it really depends on your budget.
Do you recommend LiveCanvas? HTML+css only= high speed no?
Yes, I recommend it for people who understands HTML & CSS and are comfortable working with them.
@@JackCao I don't find your link for LiveCanvas on your last video Gutenberg vs new page builders
@@JackCao Hi Jack,
I never heard of Live Canvas before this comment. I just had a quick look and it seems really interesting. If you are familiar with it and have time I think that would be a great video even if it helps people just know what it is and choose not to use it if its not right for their circumstances.
By the time I write this comment I still not finish watching this video but I still got question, does the web page speed load test include google tag manager/facebook pixle? because I test my own website speed load got score between 50-60 on mobile. Can you explain this situasion?
They are 3rd party codes. You may need speed optimization tools to optimize them. Https://jackcao.com/wprocket has a function to help you optimize 3rd party codes.
@@JackCao I use litespeed provided by my hostimg..after setting still get 50-60. But, yes if I don't use tracking code I got 90-95 score on mobile.
@@megataizack4531 You can use the Flying Scripts plugin to defer your GTM and pixel, improving your overall loading speed.
@@alexandrest-cyr1625 Already use but still not good. Well, maybe I just search better method..Withoud tracking code I got fast load but for business it will makes me lose potential customer. Anyway thanks for the tips.
Killer!🙌🙌🙌
I do love your videos. Great job. Way too many developers have gotten lazy and have been using Elementor. I can’t believe I’m saying this, but after having used Elementor and Brizy, I’d rather use WP bakery as it’s more stable. Gutenberg is awesome, but doesn’t offer the effects and functionality of page builders. If you’re looking for simple, Gutenberg is the only way to go. One thing you have taught me is keep your homepage simple. (Kiss: keep it simple stupid). Cheers.
Absolutely! Simplicity is the key. But I think you can build amazing looking pages with Gutenberg. Maybe you can point me to a page with features, and I will try recreating it with Gutenberg. 😊
I got rid of Elementor myself, but I did keep my theme plugin. Optimization + pages/posts using Gutenberg was a nice middle-ground for me. I kept the customized look and my mobile score is still optimized to 70-75.
Truth be told...the score doesn't really matter as much as the user experience. 70 means the speed is good enough for actual user-experience. But if I can tweak to 80, that will be truly "fast" for user. 90's is irrelevant in my eyes.
Obviously...just to have 90-95 would be nice, but there's no real point in the bigger scheme of ranking.
Like from India
"Like" back from Singapore 😊
Hi, Jack!
The problem I have with gutenberg is it can't display my shortcode but it works fine in elementor, is there anything wrong about this or have you ever met this problem?
Thanks before :)
Good
Is there any gutenburg block plugin that has dynamic content support for free?
Not to my knowledge. But, I will keep a look out for you 😊
it doesnt optimise my website for mobile
Question; do you know of a way to optimize embedded youtube vids? I recently created my first post w/ one youtube vid. And it's sucking-up resources so the mobile is at 30 because of it.
The best way to optimize YT embed is lazy loading. Basically, the YT video will only load when clicked upon. The only thing that loads when the page loads is the video thumbnail. I will do a video on this. 😁
@@JackCao Yeah...that'd be awesome. I figured lazy-loading, but my image optimizer is already lazy-loading pics. It doesn't seem to be lazy-loading vids. Either way...look forward to the vid!
Would love to see you optimize a page with ads... As it's always seems that ads just ruin your scores
Yup, that's because of the 3rd party codes that are loading on the background. I did some research on that and it seems that the only "fix" is to defer the loading of your ads. But that will affect the revenue of your site. The other alternative is to join an ad platform like Ezoic as they offer you some resources to speed up your pages. Also, have you tried Nitropack? I heard they are able to speed up sites, but they are costly.
@@JackCao yep I am on ezoic, and testing leap... Hope it will solve the issue
@@introvertmind I think the maximum site speed score is around 80+ with Ezoic. But do update me on your test. 😁
@@JackCaoHi thanks for sharing your knowledge. I saw in RankMath video that you are trying Ezoic. How did you resolve the compatibility between Ezoic LEAP and Kadence theme?
Hi, I need your help in my site. Can you please provide your suggestions
What's you site URL?
@@JackCao plants.com and getting low scores for mobile
@@JackCao can you please share your email id
@@rajashekhar433 jack@jackcao.com
Hi Raj, will you allow me to optimize your site and feature it on one of my videos? If yes, can you create a staging site for me to work on?
Na Elementor is 90+ possible :P but you need to know how and what to not to do !
Do share. Haven't had anyone giving me solid suggestions on what to do and what not to do.
@@JackCao Well you need ofc some plugins ... what really helps is Prefmatters or Assets Clean up . with this you can tell what page loads what JS or CSS... Also you need to know then to use inner cols. and then its not need to save on dom´s. Those 2 things help a lot to fix the short comings of Elementor. But with the Lastes update Elementor ones again made the dom elementens less and even have a good way to load google fonts and their icons!
Soooo most of your fixes were removing elements that increase load time...that's fine and dandy except for when those elements are needed in the design. Also, moving all images out of viewport may help with the initial contentful paint but visually looks horrible. I don't see how I could use any of these tips in a real world scenario.
Guttenberg doesn't support dynamic content as far as i know.
Try Kadence Blocks or Stackable. They do support.
wow
😮😮
I am afraid if everybody just cares about speed then we will basically share some plain designs and every web sites look alike. This is what happening now.
Just to put my perspective. The reason why we should be using Gutenberg is because it is flexible and it is part of the WordPress Editor. Cool web designs is now achievable with Gutenberg, but not all Gutenberg Blocks are created equally. Some are heavier and some are lightweight.
Not all pages on your website needs to be optimized for speed. You need to pay attention to those pages that are ranking for keywords on Search Engines and you need to optimize those pages. You need to use lightweight blocks to create simple designs, because those pages that are ranking on Google are mostly informational posts.
However, when it comes to designing for pages that do not really need to rank on Search Engines, like the Service Page, Contact Us page, Categories page, etc. You can add more design elements to those pages. It doesn't need to get 90+ on Google PageSpeed Insights for those pages.
What I am essentially doing is to decrease as much bloat as possible for the blank post page so that when you create content that ranks on Google, you have no problems with site speed.
If your base (Blank Page) is bloated, no matter what optimization you do, it will still fetch a poor score.
So no, your website do not need to have only plain design. You just need to know where to put your focus on when doing page speed optimization. Hope this is clear. 😊
I think you can reach up to 100%. Just remove everything.. haha
8~ 96 》》》
lol who doesnt know how to simply just remove everything to increase the site speed? The reason why we are here is because we want to find out how can we boost our loading speed at the same time with those plugins and functions already implemented... thats what we are looking for. It won't help us much by you simply just say... remove this remove that... and there u go, the speed increase!
It is wishful to think that you can optimize a heavy loading theme or plugin and expect it to get a 90 plus rating on PSI. The least you can do is to async javascripts which wont do much help, and the most you can do is to delay javascripts but sometimes doing that will break your site. So, the best way is to identify the heavy loading plugin and replace it with a lighter weight plugin if you really need the functionality. Let me emphasize, there is literally NO WAY to optimize for speed with heavy loading plugins or themes. If you don't heed my advice, that's totally fine. Try Nitropack if you don't find it expensive and hope it doesn't break your site. If not, then good luck spending thousands hiring a web developer who may or may not know how to optimize your heavy loading site. Peace out! ✌