Optimize for Core Web Vitals

[@UP209D]

Man, if I ever have any interview about performance, I gonna rock that now, thanks to you, your knowledge and your generousity

[@malipetek]

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.

[@randomuser66438]

Autocomplete also refreshes right before you tap, so you end up hitting the wrong search suggestion

[@TheSaganic0]

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.

[@malipetek]

Christopher Charles Saganic makes sense so lets all keep doing it.

[@QuotePire]

Yes -- and i think *Adsense AutoAds* would be violating the metrics of *Dynamically Injected Content*

[@arafatzahan2082]

"do as I say, not as I do"

[@Endpoint101]

Love how only the mic is in perfect focus for the entire video :D

[@LaurenceBakerAdobe]

And your point is?

[@ithinkitspickingupalittleb8011]

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

[@mutasimeltayeb]

Rajesh of BBT is that you!!

[@Developer-404]

😂

[@sebring2756]

I am a marketing coordinator and this helped a lot in seo work. Thank you very much!

[@מדינט]

Why there is a huge deference between CLS values using lighthouse vs pagespeed?

[@spacenikki]

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.

[@titusgitari]

Very helpful vital tips and tricks, good to know what to do, look out for and optimize as we build a website.

[@AyushSinghxda]

Great information, learnt new things!

[@LaurenceBakerAdobe]

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

[@milixov]

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.

[@AbhishekBudholiya]

it's really great insights, Thank you Addy (Y)

[@groovebird812]

What is a best practice to combine setting of image dimension and responsivness?

[@Roman-m3u4h]

The camera is perfectly focused on the microphone

[@shriharsha3448]

How can I implement the same on Wordpress?

[@JACKBLACK-jt8nw]

How its possible to have 100 PageSpeed Insights and Cumulative Layout Shift (CLS) 0.4 ?

[@JohnnyRogers]

Very well done and super informative!

[@TopicalAuthority]

Thank you Addy.

[@adityapoddar3798]

CrUX API sounds interesting. I am going to check it out for sure.

[@randalvc]

How do we handle CLS for conditional rendering?

[@ATLSqwerty]

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.

[@kaleemsatti]

How would you work out Y (height) if you were given 640px (X-horizontal) to get 360px?

[@Kenbreg]

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.

[@frankstuerzebecher]

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.

[@apifiddle]

This was amazing!

[@go-usa]

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?

[@Bagio1221]

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 :(

[@AmitKumar-je7rn]

Are you a web developer or an enthusiast who like to learn new things :)

[@KekeliBuckner]

Thanks for the video. Do you have any recommended fixes for WordPress website?

[@HowToWithTalha]

I am wrapping my head around it nowadays, reduce the number of plugins and use a simpler theme for starters.

[@KekeliBuckner]

@@HowToWithTalha yes a lot of third party plugins really slow down the site but are necessary.

[@HowToWithTalha]

@@KekeliBuckner Yeah many of them are but they load css/js resources on every page regardless of the need.

[@marcinlewicki5218]

Good detail I actually learnt something - more like these video please

[@Tciganskybaron]

Мы установили плагин 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!

[@verawat]

Thank for share your informaton.

[@ronaldlopez8234]

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!

[@angelgarcia7152]

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.

[@RDY_97]

I can't figure out the mean of aspect-ratio property.

[@tedfitzpatrickyt]

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

[@atuljain5107]

Is there any written blog for this video ?

[@mahathirmohammad8635]

I lean CLS from this video and I have seen the most poor CLS on your youtube app. please fix it

[@DenisTRUFFAUT]

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.

[@DavidWang]

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?

[@babaraokadam6308]

Nice video.

[@Ennzehh]

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

[@goodtobehomepetsitting1246]

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.

[@davidyang5131]

That is up to you!

[@peristiloperis7789]

Você não é o Rafa Chess???

[@aqil199]

can i ask for the container script

[@mvargasmoran]

remember when everything should be rendered in the browser?

[@sportseveryday3216]

Do I need to be a developer to fix my website core web vital issues?

[@itsmylife-status9298]

If you want you can buy plans to fix your core web Vitals. Such as webvitalsdev.com/

[@eremitamatos8696]

Boa. Noite tudo bem.

[@mahesh-waghmare]

👍

[@wrends]

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

[@26venise]

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

[@QuotePire]

@2:19 On What Causes Poor CLS: at Dynamically Ingected Content: THEN Adsense AutoAds would be causing pool CLS too.

[@damianrivas]

So setting width and height to content still works with responsive styling like width: 100%? Or am I missing something?

[@pcrackenhead]

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]

Can you elaborate? That aspect ratio calculation is not supported in all browsers as far as I am aware

[@pcrackenhead]

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

[@jimitshah4834]

Awesome, case study of chole help a lot to understand better.

[@MrJonathandsouza]

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.

[@heyimamaker]

Every time I read an article, my content is kicked out of the way by a giant Google ad.

[@Itachihandyman]

What about if you know nothing about coding?

[@domenicocolandrea]

Great talk Addy!!

[@ArihantAV]

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?

[@sadboisibit]

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.

[@ArihantAV]

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

[@randomuser66438]

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.

[@ArihantAV]

@@randomuser66438 understood thank you!

[@WPForhad]

Isn't Light house and Google insight give us same report?

[@JSB-Next]

This is a VERY informative vid, and CLEAR. Thank you.

[@rafaelangelopiad8919]

thank you addy

[@sassybritches6799]

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..❣️

[@CardinalHijack]

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?

[@ishan6241]

Excellent video, learnt a lot. Thank you!

[@arulpr]

I am so pumped right now. I am going to crush those hero image sliders and ajax widgets

[@jitsmapper4438]

lmao

[@jorgemelecio7838]

@@jitsmapper4438 cojemos

[@luis96xd]

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]

bro, got any solution?

[@luis96xd]

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

[@kiranadhikari5817]

I have seen u somewhere, but don't know where....

[@heatherduvall5616]

This video is very helpful and made simple to understand with the examples. Thanks!

[@mockrotten5586]

This video is gold!! Thank you

[@YiHungLee]

Great case study and sharing

[@codeweb759]

LOVE this video :)