As far as I can tell it does this deliberately. It is also likely the reason they're promoting that people not do it, so people get used to it not happening, and therefore on search results are far more likely to click on ads.
It would be great if you could write down the index of the video under the description, so we could find the topics. For example, "What elements contribute to CLS?" 7:38 + link.
Your all genius. To be so young. Your helpful tools and teaching technology is "Amazing". I love it..Everyone that has a hand in this is doing a wonderful job and you all are a blessing to this world...and I thank you men and women very much..Google has always been my favorite. These upgrades are fantastic "Flap Smacking" Fantastic.. Keep up the wonderful work..❣️
@@LaurenceBakerAdobe i thought it was that only the mic is in perfect focus for the entire video. although perhaps it's a joke and they are pointing out the irony.
That's how I'm understanding it. Because the browser can determine aspect ratio from a height and width, the responsive styling of width:100%; will allow the browser to reserve enough space for the image.
@@manzaaLV Calculating aspect ratio based on width and height works on Chrome and Firefox, and will soon be implemented on production Safari: www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ CanIUse also lists it as being usable on Edge. So while you're right that it doesn't work on everything, that seems like a compelling list to me. Like he mentions in the video, you can also do CSS tricks if you want it fully applicable, but for me just adding height and width on an element seems like a way more scaleable solution to me.
Great video. Especially for someone like me, who is image optimising crazy. I've been looking for a video the explains clearly, how images are being served today. This video has not only answered that question but many more questions that I have around page load speed. Thank you very much
Awesome video. How would we go about using the tips at 6:00 if our images are responsive? I would assume that almost no website keeps its images height and width fixed? My solution to this was just set the image width to 100% and let it shrink/grow into the space. But this video seems to advise against that. However, the solution of fixing the width and height means either it looks messed up just before or just after break points, or it "jumps" to a different size at a different breakpoint which looks more messy than CLS?
Image Aspect Ratio: How do you apply this for all your pictures in a WordPress Theme? Is it all via CSS and if so, how does the code look like? What is Lighthouse? Where and how to get it?
We optimized all the assets, defer, etc. But Lighthouse still showing us warnings with scripts like GTM, GA, and others like hotjar, etc, there is a way to optimize those assets aswell ? Thanks!
You can make it so that it will execute after user interaction. Look for Flying Scrips (WP Plugin). If you are not using WP, you can adapt it to your CMS. I recommend applying this to anything that is not completely necessary for your web. If you do this well, you will notice a great improvement.
What if 1. 'Free Standard Shipping' data has to be fetched from the client and fetching from server is not an option for some reason 2. 'Free Standard Shipping' component is conditional and depends on a particular data from the fetch call. Then the layout shift is imminent isn't it?
If the user isn't eligible for free shipping the banner could be used for something else. Maybe put the companies name, some branded positioning copy, or throw an inspirational quote at it.
@@sadboisibit that might not be doable as well, if the brand design is too strict from the designers and product managers, and something like that might not be possible… ( which is the case with my company and product right now )
You can't build good UX on bad software engineering. Layout decisions should come from your server. In this case, use your server as a proxy to make the request and figure out whether or not to render the component.
How do I fix the CLS of Ads by Google who are dynamically inserted in the page of I don't know the tag, the class, Id of the name of the script which inserts the ad?
@@bloggermahesh5952 I don't remember, but I fixed the height in pixels of my banner (wrapper) and the CLS improved a lot, there is it, but isn't that bad
Be aware when using body {max-width: 100%}. This was causing CLS in my case. After removing it and adding html {overflow-y: scroll} I reduced CLS to 0.
Мы установили плагин Core Web Vitals и видим, что фиксируется длительное ожидание отклика при клике пользователей на неинтерактивные элементы сайта: заголовок h1 и уже выбранный пункт меню. Как указать Гугл-боту на это? Или другой способ решения проблемы. Спасибо! We installed the Core Web Vitals plugin and see that there is a long wait for a response when users click on non-interactive elements of the site: the h1 header and an already selected menu item. How can I point Googlebot to this? Or another way to solve the problem. Thank you!
Excuse my ignorance. I am new to trying to fix issues with my website. How can a person determine what the appropriate size you should make an image to insert into your page.
This metric has not been thought through. The CLS should be divided by time on site. If a user stays on the site playing a game for 10 minutes, the page may not "flicker" at all but up creeps the CLS for no reason. After a few minutes playing the game, 'boom' CLS is above 0.1 and you're in SEO trouble. Makes no sense.
Great video! Addi, since you mentioned the concept of "above the fold" several times I wonder if you know who's the inventor of this concept, introducing the benefit of creating atf CSS and inlining it. You wrote the first tools to fetch this kind of reduced CSS - are you the inventor of the concept?? I really want to know since a big part of appreciation should be sent to you then! You guys really push the web to be faster.
I heard that server push will be removed from Chrome in few months. That is sad IMHO. But preload / prefetch hints remain. They are just not actively pushed, thus work as if they were read in the same time as index.html. Better than nothing I guess.
This Metric makes sense to fight the well known mobile usability issue that is generating millions of $ by user that unintentionally click the (async loaded) Ad shifting in. One fail I see is that even error messages after a failed user interaction are getting counted as a CLS issue. Totally wrong in my opinion. How to solve this (beside: no error messages at all)? Error messages in overlays?!
19:42 what?? then what's the point of all this nonsense!? well, it's all about google's new clever money making scheme, their little tricks!, they want you to pay for traffic or to be better positioned so they can make money off of you buying advertising! if you pay them, then this is not an issue anymore no matter how crappy your website is!!
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
Man, if I ever have any interview about performance, I gonna rock that now, thanks to you, your knowledge and your generousity
Well google search does this all the time, when just im about to click first result in search, it puts ads in front of my cursor.
Autocomplete also refreshes right before you tap, so you end up hitting the wrong search suggestion
As far as I can tell it does this deliberately. It is also likely the reason they're promoting that people not do it, so people get used to it not happening, and therefore on search results are far more likely to click on ads.
Christopher Charles Saganic makes sense so lets all keep doing it.
Yes -- and i think *Adsense AutoAds* would be violating the metrics of *Dynamically Injected Content*
"do as I say, not as I do"
Some people are meant to teach, and you are one of them! Thank you, this has been informative and helpful, thank you again and again!!
Why there is a huge deference between CLS values using lighthouse vs pagespeed?
@2:19 On What Causes Poor CLS: at Dynamically Ingected Content: THEN Adsense AutoAds would be causing pool CLS too.
It would be great if you could write down the index of the video under the description, so we could find the topics. For example, "What elements contribute to CLS?" 7:38 + link.
I am a marketing coordinator and this helped a lot in seo work. Thank you very much!
Your all genius. To be so young. Your helpful tools and teaching technology is "Amazing". I love it..Everyone that has a hand in this is doing a wonderful job and you all are a blessing to this world...and I thank you men and women very much..Google has always been my favorite. These upgrades are fantastic "Flap Smacking" Fantastic.. Keep up the wonderful work..❣️
Love how only the mic is in perfect focus for the entire video :D
And your point is?
@@LaurenceBakerAdobe i thought it was that only the mic is in perfect focus for the entire video. although perhaps it's a joke and they are pointing out the irony.
Awesome, case study of chole help a lot to understand better.
Rajesh of BBT is that you!!
😂
What is a best practice to combine setting of image dimension and responsivness?
Very helpful vital tips and tricks, good to know what to do, look out for and optimize as we build a website.
So setting width and height to content still works with responsive styling like width: 100%? Or am I missing something?
That's how I'm understanding it. Because the browser can determine aspect ratio from a height and width, the responsive styling of width:100%; will allow the browser to reserve enough space for the image.
Can you elaborate? That aspect ratio calculation is not supported in all browsers as far as I am aware
@@manzaaLV Calculating aspect ratio based on width and height works on Chrome and Firefox, and will soon be implemented on production Safari:
www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/
CanIUse also lists it as being usable on Edge. So while you're right that it doesn't work on everything, that seems like a compelling list to me.
Like he mentions in the video, you can also do CSS tricks if you want it fully applicable, but for me just adding height and width on an element seems like a way more scaleable solution to me.
How can I implement the same on Wordpress?
How its possible to have 100
PageSpeed Insights and Cumulative Layout Shift (CLS) 0.4 ?
Great information, learnt new things!
Great video. Especially for someone like me, who is image optimising crazy. I've been looking for a video the explains clearly, how images are being served today. This video has not only answered that question but many more questions that I have around page load speed. Thank you very much
How do we handle CLS for conditional rendering?
Awesome video. How would we go about using the tips at 6:00 if our images are responsive? I would assume that almost no website keeps its images height and width fixed?
My solution to this was just set the image width to 100% and let it shrink/grow into the space. But this video seems to advise against that. However, the solution of fixing the width and height means either it looks messed up just before or just after break points, or it "jumps" to a different size at a different breakpoint which looks more messy than CLS?
Thanks for the video. Do you have any recommended fixes for WordPress website?
I am wrapping my head around it nowadays, reduce the number of plugins and use a simpler theme for starters.
@@HowToWithTalha yes a lot of third party plugins really slow down the site but are necessary.
@@KekeliBuckner Yeah many of them are but they load css/js resources on every page regardless of the need.
I don't see the Experience track shown at 8:00. I see Timings in my Dev Tools, but not Experience. How can I enable it?
This is a VERY informative vid, and CLEAR. Thank you.
Image Aspect Ratio: How do you apply this for all your pictures in a WordPress Theme? Is it all via CSS and if so, how does the code look like?
What is Lighthouse? Where and how to get it?
Great talk Addy!!
This video is very helpful and made simple to understand with the examples. Thanks!
it's really great insights, Thank you Addy (Y)
We optimized all the assets, defer, etc. But Lighthouse still showing us warnings with scripts like GTM, GA, and others like hotjar, etc, there is a way to optimize those assets aswell ? Thanks!
You can make it so that it will execute after user interaction. Look for Flying Scrips (WP Plugin). If you are not using WP, you can adapt it to your CMS.
I recommend applying this to anything that is not completely necessary for your web. If you do this well, you will notice a great improvement.
What if
1. 'Free Standard Shipping' data has to be fetched from the client and fetching from server is not an option for some reason
2. 'Free Standard Shipping' component is conditional and depends on a particular data from the fetch call.
Then the layout shift is imminent isn't it?
If the user isn't eligible for free shipping the banner could be used for something else. Maybe put the companies name, some branded positioning copy, or throw an inspirational quote at it.
@@sadboisibit that might not be doable as well, if the brand design is too strict from the designers and product managers, and something like that might not be possible… ( which is the case with my company and product right now )
You can't build good UX on bad software engineering.
Layout decisions should come from your server.
In this case, use your server as a proxy to make the request and figure out whether or not to render the component.
@@randomuser66438 understood thank you!
This video is gold!! Thank you
Excellent video, learnt a lot. Thank you!
It's great because tips and tricks are all what we knew but we don't know how to use them. or how not use them affect our product.
How would you work out Y (height) if you were given 640px (X-horizontal) to get 360px?
Is there any written blog for this video ?
With the cls issues i just have a load screen that i lift asap - 1 to 2 seconds unless a page is resource heavy could push it longer
Isn't Light house and Google insight give us same report?
Thank you Addy.
How do I fix the CLS of Ads by Google who are dynamically inserted in the page of I don't know the tag, the class, Id of the name of the script which inserts the ad?
bro, got any solution?
@@bloggermahesh5952 I don't remember, but I fixed the height in pixels of my banner (wrapper) and the CLS improved a lot, there is it, but isn't that bad
Very well done and super informative!
Be aware when using body {max-width: 100%}. This was causing CLS in my case. After removing it and adding html {overflow-y: scroll} I reduced CLS to 0.
I can't figure out the mean of aspect-ratio property.
The camera is perfectly focused on the microphone
Мы установили плагин Core Web Vitals и видим, что фиксируется длительное ожидание отклика при клике пользователей на неинтерактивные элементы сайта: заголовок h1 и уже выбранный пункт меню. Как указать Гугл-боту на это? Или другой способ решения проблемы. Спасибо!
We installed the Core Web Vitals plugin and see that there is a long wait for a response when users click on non-interactive elements of the site: the h1 header and an already selected menu item. How can I point Googlebot to this? Or another way to solve the problem. Thank you!
This was amazing!
Excuse my ignorance. I am new to trying to fix issues with my website. How can a person determine what the appropriate size you should make an image to insert into your page.
That is up to you!
This metric has not been thought through. The CLS should be divided by time on site. If a user stays on the site playing a game for 10 minutes, the page may not "flicker" at all but up creeps the CLS for no reason. After a few minutes playing the game, 'boom' CLS is above 0.1 and you're in SEO trouble. Makes no sense.
Great video! Addi, since you mentioned the concept of "above the fold" several times I wonder if you know who's the inventor of this concept, introducing the benefit of creating atf CSS and inlining it. You wrote the first tools to fetch this kind of reduced CSS - are you the inventor of the concept?? I really want to know since a big part of appreciation should be sent to you then! You guys really push the web to be faster.
Good detail I actually learnt something - more like these video please
I am so pumped right now. I am going to crush those hero image sliders and ajax widgets
lmao
@@jitsmapper4438 cojemos
Great case study and sharing
I heard that server push will be removed from Chrome in few months. That is sad IMHO.
But preload / prefetch hints remain. They are just not actively pushed, thus work as if they were read in the same time as index.html. Better than nothing I guess.
CrUX API sounds interesting. I am going to check it out for sure.
This Metric makes sense to fight the well known mobile usability issue that is generating millions of $ by user that unintentionally click the (async loaded) Ad shifting in. One fail I see is that even error messages after a failed user interaction are getting counted as a CLS issue. Totally wrong in my opinion. How to solve this (beside: no error messages at all)? Error messages in overlays?!
LOVE this video :)
can i ask for the container script
Do I need to be a developer to fix my website core web vital issues?
If you want you can buy plans to fix your core web Vitals. Such as webvitalsdev.com/
thank you addy
I lean CLS from this video and I have seen the most poor CLS on your youtube app. please fix it
This is informative, well presented, and explained in a simple way. exactly what i need - i just wish i could understand it :( mostly above my head :(
Are you a web developer or an enthusiast who like to learn new things :)
I have seen u somewhere, but don't know where....
Você não é o Rafa Chess???
Every time I read an article, my content is kicked out of the way by a giant Google ad.
Thank for share your informaton.
Nice video.
This is great and all, but as soon as I try to lazy load content which is not on the screen, the SEO team is out for my blood.
remember when everything should be rendered in the browser?
What about if you know nothing about coding?
👍
19:42 what?? then what's the point of all this nonsense!? well, it's all about google's new clever money making scheme, their little tricks!, they want you to pay for traffic or to be better positioned so they can make money off of you buying advertising! if you pay them, then this is not an issue anymore no matter how crappy your website is!!
Boa. Noite tudo bem.