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"

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

[@mutasimeltayeb]

Rajesh of BBT is that you!!

[@Developer-404]

😂

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

[@מדינט]

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

[@QuotePire]

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

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

[@sebring2756]

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

[@jimitshah4834]

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

[@groovebird812]

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

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

[@JACKBLACK-jt8nw]

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

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

[@shriharsha3448]

How can I implement the same on Wordpress?

[@titusgitari]

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

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

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

[@AyushSinghxda]

Great information, learnt new things!

[@randalvc]

How do we handle CLS for conditional rendering?

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

[@JSB-Next]

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

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

[@kaleemsatti]

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

[@ishan6241]

Excellent video, learnt a lot. Thank you!

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

[@heatherduvall5616]

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

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

[@domenicocolandrea]

Great talk Addy!!

[@WPForhad]

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

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

[@atuljain5107]

Is there any written blog for this video ?

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

[@AbhishekBudholiya]

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

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

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

[@Roman-m3u4h]

The camera is perfectly focused on the microphone

[@JohnnyRogers]

Very well done and super informative!

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

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

[@RDY_97]

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

[@mockrotten5586]

This video is gold!! 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

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

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

[@adityapoddar3798]

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

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

[@TopicalAuthority]

Thank you Addy.

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

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

[@YiHungLee]

Great case study and sharing

[@aqil199]

can i ask for the container script

[@api-first]

This was amazing!

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

[@kiranadhikari5817]

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

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

[@mahathirmohammad8635]

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

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

[@codeweb759]

LOVE this video :)

[@heyimamaker]

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

[@peristiloperis7789]

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

[@rafaelangelopiad8919]

thank you addy

[@marcinlewicki5218]

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

[@babaraokadam6308]

Nice video.

[@verawat]

Thank for share your informaton.

[@mvargasmoran]

remember when everything should be rendered in the browser?

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

[@Itachihandyman]

What about if you know nothing about coding?

[@mahesh-waghmare]

👍

[@eremitamatos8696]

Boa. Noite tudo bem.