okay howdy everybody hope everyone's doing well
today can we get some confirmation in the chat whether or not audio and visual
is good we've been on a roll lately haven't had too many uh audio and visual glitches knock on
wood but um yeah hopefully everything's good hopefully everybody's having a wonderful
day and uh we're going to learn about some vital metrics
today literally yeah got a cough
here only one minute late yep Mother Nature was calling Mr Cole I had to uh I
had to answer so uh sweet all good
excellent sound I know I look good Sean but you know we don't need to say that all the time I appreciate it keep it
between us um okay
um today we're going to be talking about some core web vitals and uh I know I've
talked about page speed uh in previous live streams not sure when the last time I did one was it was probably couple
years ago um and there's it's always nice to do a little rehash
um I'm going to emphasize today on some of these metrics that Google is calling
core web vitals I'm sure you've seen it if you looked at any sort of page speed reports or some you know SEO reports um
because P our page performance seriously uh is affecting
our SEO rankings okay um Google is upfront about that if your website is
slow um then other websites in your Niche that are faster are going to rank higher okay so um yeah it's not the only
ranking Factor obviously we still need to do all the other SEO stuff as well
um you know good header tags good title tags good descriptions good content lots
of traffic right um this is just what we're talking about today is just going to be one small sliver of that um and
talking about what these metrics are and what we can do okay um color for shirt
thank you Mr Francis um okay I just what kind of spurred this today um let me share my
screen um yeah I found this super nice simple
very simple website it is web vitals.com if you want to go check it out for yourself
okay um and uh yeah it just has a nice little definition of all the web vital
the current web vital um metrics okay um Josh is in town he's he's actually in
Paris if anyone is in France and uh wants to meet up with Josh he's open to
meeting with you his wife won't mind anyway okay back to web vitals um
yeah I thought this was just a nice little website that kind of showed off what each particular web vital metric
was and a nice little definition so we're we're I today I'm going to Define everything first and then we're going to
go look at some real world scenarios okay we're going to dissect my websites and you can see how bad some of my stuff
is uh okay let's just do that I'm going to embarrass myself by the end of this live stream I know it okay so uh let's
do largest contentful paint um this is going to uh the metric of how long does
it take for the largest um basically main element of
your web page to load whether or not that is a banner image or maybe it's a
huge thing of text you know what whatever is the largest text or image element on page load how long does that
particular element take to load okay and I think this has a nice little um example here so boom so this
is the largest contentful paint and how long did that take to load basically um
it was a little you know fictitious simulation here just to kind of give you an example um and yeah if it takes a
long time to load I believe uh do they show you the metrics
here I believe on Google it says I think if it's O if it's over two seconds or is
it 2.5 seconds I think if it's over 2.5 seconds you get a uh you get dinged so
whatever that uh particular element is whether or not it's an image a video
whatever needs to load fast okay so super important I know
especially those people that want like this big ginormous video to All play on page
load you got to make sure that you know that's not hurting you I know it looks
cool but it might be hurting you okay so um yeah it could be affected by this largest contentful
paint okay so there's that we we'll look at some real world scenarios of this
um next is actually you know I'm going to yeah we'll go over this one interaction to next paint this is kind
of a I'll be honest a new one that I actually wasn't even aware of um that it
was a metric and it's not even something that's reported on like page speed insights
okay but what this is is essentially um let's say
um a lot of this has to do with JavaScript based web apps where um a lot
of actions uh don't get get triggered with JavaScript okay and essentially um
it has to do with how uh fast things are interactive so we'll we'll click on if you go to the web vitals.com you can
actually see this live is right right they have little you know expand to click does it respond fast okay um is it
slow you click on that it takes a little bit longer to to to load okay um and the
slowest this is the bad one right so um you know fast is good it's basically um
something has to after if you click on a page something has to respond within I believe it's 100
milliseconds if it is if it responds or does whatever action you want within 100
milliseconds you're a okay okay um if I I think it uh obviously this is 1 second
so maybe this the medium I wish this site actually showed you like what is uh
you know good warning and bad um that would be nice thing um so anyway um
within 100 milliseconds so yeah that's what this inp is uh again it's if an in
if a user interacts with an element okay how long does that element take to actually
respond how does Google uh actually measuring this I don't know okay it's pretty interesting um and it's not
showing up in a lot of their page speed reports so um yeah I'm not sure how
vital this one particularly is but it obviously is a uh a approved metric from
Google okay um next one is
cumulative cumulative layout shift I hate this word cumulative cumulative
layout shift okay um what this is is you know if you go to a web page and um as let's
say most of the time has this has to do with images um and if you're in image loads and it pushes other content on the
page down and you know you basically you see the layout shifting around based
when other things are getting loaded on the page that is bad okay and that is what cumulative layout shift is so as
you see when we go to this page uh all that stuff is pushing this content down
because it's loading okay um so that is a bad thing we don't want that we want um it's fine
if things take a little while maybe to Lazy load but as long as it doesn't shift everything around on the page um
we should be good to go okay and there are some strategies that we can um you know facilitate for that as
well next is first content paint okay um
and this is this measures um the time from when your page actually starts
loading to when any of the part of the web page is first loaded okay so um maybe that first let's
click on it I'm sure they have an example here okay so if you notice that that um
um that web page don't know if you noticed it over the the live stream it took a little while to to render and pop
back right so um I think they purposely did that so the web page loaded but we
didn't see anything for a little bit of time okay that's what that first content full paint is um it's basically the
amount of time that it takes for the user to see anything on the page okay
and the the last one is time to first bite okay and yeah this one has to do
pretty much all with server okay this this has to do with um a request happens
on the server how long does it take for the browser to receive the very first
bite of information okay um so yeah this has to do with how fast your server is
um are you using a CDN are you using something like cloud flare to help performance right um yeah I think this
there isn't much to do with in terms of the website code okay um it could have
to do with some PHP maybe you have some PHP taking a long time to render a page or build a page out right but um
hopefully some of that data can be cached especially if you're using something like Cloud flare which would be awesome okay but it is all um most of
this has to do with server performance okay if you're on a very very cheap web uh you know shared hosting company um
your time to first bite might you know just purely be because
the server has too many websites the server is overloaded and it can't serve the content fast enough to the website
visitor okay um so yeah there we go that is time to first
bite um maybe later on I I I I do want to dive into some uh real world test
cases okay um and hopefully at at the end I'll go through and kind of uh you know iterate
about what can you do about this stuff right um some of this stuff can be
controlled by you some of this stuff you don't have you might not have much control over okay to be perfectly honest
with you there's a lot of here that um if if you're just you know a especially
if you're a beginner web designer um and you don't know the intricate es of
various things there might not be much you can do okay um but I will help you
as much as I can um in today to kind of give you some hints on what we can
do okay um so first off let's dive into
page speed insights and there's actually two ways I I'm using a browser called
Arc okay it is based on Chrome um but but I know a lot of people use uh Safari
as well if you're using Safari um you'll have to go or Firefox you'll have to go
to page speed insights Okay Google's pagp speed. web.dev okay if you just
Google for page speed um it'll be probably most likely the top result
okay um but if you are using a chrome-based browser okay you can visit
any web page okay and if you were to open up the Devin spect so I'm going to just do open up the dev inspector okay
there is going to be a lighthouse tab okay and this is essentially page speed
built into the browser which is interesting now there's pluses and minuses to both using the page speed
website versus using the lighthouse plug-in and uh for fun actually I'm
going to load um run Foundation stacks.com through both Lighthouse and
Page speed insight and we'll see the difference okay um so right now I'm going to do is I'm going
to say analyze uh page load speed uh inside Lighthouse and it's going to run its
little
report and here we go oh interesting I I have to admit I ran this about a half
hour ago and my performance was like 76 or something like that uh and I was like
wait what um so kind of crazy um that that does prove a I was actually kind of
hoping it was going to do that again um but just to kind of prove a point that
um these tests are spot in time tests okay
um now I've done a live stream previously where I actually got this homepage to load hundreds all the way
across I have screenshots I have a video to prove it okay but um a Google um over
long periods of time Google changes these tests right they add some new things technology changes right so what
is 100 today might not be 100 six months from now okay and also
um yeah uh I got a I literally had a 76 on performance half hour ago and and I
didn't do anything different I don't know maybe my internet connection is slightly faster now who knows okay okay
but just to let you know that these test scores do fluctuate so it just gives you a hint of what you could potentially
improve on okay uh now my whole point is I was going to I was hoping that uh this
was going to be lower because I was going to go on page speed insights and load it and it should have been faster um but let's go ahead and I'm going to
run this uh website through Page speed as well let's go to page speed
insights we're going to analyze that okay um now with page speed insights what's
kind of nice is it actually gives you mobile and desktop at the same time and while this is running we're actually
going to go back and uh we dive through some of this stuff okay
um now if we analyze some of these results um something that I've noticed
um that Lighthouse tends to do um let's
find maybe maybe it actually didn't uh oh yeah okay so like here it gave me a
warning about reduce unused JavaScript right and um if we look at these I mean
three of the four files here are from extensions that I have installed in Chrome it's kind of not fair like it's
it's reducing my score based on extensions that I have installed on my browser okay so yeah not really fair uh
you can't exclude it uh from this check boox but I noticed it I don't know this particular extension that I have which
not sure which one it is um it doesn't remove itself so yeah I I'm getting
dinged from my score um which something I don't even have control over and it's
only local to my Mac okay so yeah a little unfair um so but you have to take
we will dive through all of this stuff um in in a little bit but you have to take a lot of these results with a grain
of salt um and again some of these things you will have control over other things you won't you'll have to rely on
people like me or other developers um to ship quality
products okay um okay let's uh look at page speed insights oh funny enough so
when I ran this earlier um page speed gave me almost I think it was 96 96 96
100 but then Lighthouse gave me the low score now now page speed insights gave me the lower score and uh very
interesting I was expecting this test to be the opposite numbers um but what's
nice about page speed uh this doesn't let's go to desktop oh see look 99 96
100 okay so it they dinged me a little bit on mobile on desktop I am uh almost
at full hundreds which is nice okay uh but what's what's cool
about this if we go to reduced I mean if you look here reduce unused JavaScript it doesn't obviously I don't get dinged
for the uh um extension stuff so that's why my best practices score is 96 here
whereas inside here my best practices score is 78 right so that's way um one
reason why your Lighthouse score will be different than your page speed um
insights score a little bit of tidbit there um just a quick pause if you have any
questions make sure you put those in the chat happy to answer anything or you know go over anything um so anyway let's
let's look at this you'll notice that that in here we have a lot of our core web vitals okay inside the page speed
insights okay um it what kind of cool it actually shows you um this is actually
new um it kind of shows you the points that you get to get to 99 so cumulative
layout shift I got 25 points um SI o speed index okay which isn't a core web
vital on that website which is interesting um so but essentially I assume that's just the speed of the
website uh first content full paint um largest content full paint and then time
to first or total blocking time I think total blocking time has to do with um
time to first bite okay um so anyway so that's kind of gives you a summary of of
what took up that score you can see what all your points are here if we do expand
view this does give you more information and I I think if you click on these here
um it does give you more documentation from Google but I think it gives you the um here we go this is what I was looking
for um it gives you the actual score range right so first content full paint
if you are below 1.8 seconds you get green which is funny because I know for
a fact like a year or two ago this wasn't 1.8 it was like 2.5 right so
Google is upping the ante here here um so that you know making sure that you know your site has to be uh very fast
now um to get that uh that green score okay so here we're getting 1.8 to 3
seconds is orange if you're over 3 seconds you're red that is bad okay so
yeah if you want more information about what um each of these are again I'm not
I won't go through you can actually go ahead and read all of these stats if you want um I do think this little uh kind
of knowing what gets you green orange and red is is useful though
okay um largest content full paint let's see what the metrics are on that that is
oh oh this one was 2.5 maybe I was getting mixed up with uh the other one okay so um maybe this didn't change uh
because I I did remember a 2.5 I guess that was on the largest contentful paint
um so 2 to 4 seconds you get orange over 4 seconds you are bad okay you're a bad
boy um total blocking time what's the metrics on that um less
than 200 milliseconds you get green 2600 is orange red is slow okay interesting
you know I'm going to run this on uh well actually here let's we'll continue down this okay um let's look at some of
these I know these aren't core web vital but I know a lot of people have questions about all of these bad boys
okay um so what can we do with a lot of this stuff um properly sized images okay this
is going to be a big thing I think the number one performance hit on any website is going to be your images
1,000% I um I'm not going to dive too much into into that um I have an entire
live stream dedicated to that um so go ahead and watch that okay um here uh
these used to be pgs I know these images that they're pointing out here they used to be pgs I converted them to P which is
awesome um apparently now I can do better compression with webp than I
could when I originally did this and it thinks that I can shave you know some some you know sizes off this these
images so um yeah I've done good where I I am loading up a webp image instead of
a PNG um but obviously Google thinks that I can reduce the size even farther
than what I'm doing okay by just a little bit well apparently by 300
kilobytes they're suggesting so that's something I can go into um or you know I could do in the future um try to
compress these webp images uh a little bit better if you want super great uh webp
compression uh I told you I wasn't going to go into this but uh just go
to oh man I just drew a blank now no
oh I just drew a blank what is Google's um image compression tool oh no
tools squoosh there it is squoosh doapp it's a web app um this
gives really good compression especially for WPS so if I wanted I could take those images drag them in here here and
you know get a slightly smaller version that I can then add to my website and um
and improve so squish um there are other great apps I said I wasn't going to go
into this but image shrinker is a great one um if you want to compress uh svgs
jpegs and pngs okay great app image shrinker it's
free it's my go-to I have to admit I use image shrinker uh for anything that I
don't need to webp for if I need web Peas I go to squoosh it's essentially what I do okay um all right
there we go back to our regular regularly scheduled program so properly sized images this is
100% in your boat you can fix this okay go watch my live stream um make sure
they're properly sized to the correct Dimensions make sure that they are compressed and the correct format there
we go okay reduced unused
CSS um this this is one of the categories of you most
likely have there's nothing you can really do about it okay um yeah there's not much you can
do about it for some reason they're they're complaining that my uh my font CSS from my is unused but I kind of need
that for my fonts on the website so I'm not sure why it's saying that um yeah
kind of odd now um it saying that hey you can reduce your um Foundation stacks.com Foundation CSS file by 23
kilobytes okay um that could be true um you know there could be unused CSS maybe
you know that's kind of the one of the let me let me zoom out
here okay so I I I do get asked about this every now and then where people are
like hey uh you know page speed is saying that the foundation CSS file has
unused CSS what can we do about that well there's a couple things okay uh
well not much that you could do but let me explain the situation okay
um you're using a tool okay Stacks um and that Stacks has the benefit of a fun
to use Dragon drop interface um with developers that um try to make hopefully
try to make the best products possible for you now there's some exchanges for that um
where um I as a developer have to make a tool that um Can Can Work under various
modes and settings and whatnot right um I don't know what settings you're going
to click there's some things for performance reasons I load an entire library for you where some you might use
some of the features but maybe not all the features um so yeah you you might there might be some unused CSS or unused
JavaScript on your website because of that okay um if you were to hand code a website if I were to hand code a
foundation website I could easily pick and choose exactly what I want and and get that unused CSS probably down to a
few kilobytes maybe even less who knows okay um but hey that takes an immense
amount of work even if I were to hand code a website okay um so yeah I'll be
honest even if I hand code websites which I do sometimes okay um I don't
take the time to optimize these every little kilobyte of of CSS because a lot
of times you just you load in a particular library and you have a suite of utilities that you can use and
sometimes you use them sometimes you don't now another thing about this page speed Insight is um there are let's say
the the foundation CSS file it um
I might use one part on one page and I'll use five other parts on a different
page but page B doesn't know that it doesn't know that hey the browser's going to load this Foundation CSS file
and it caches it so it only downloads it one time and
um on page a I might use one component on page B I might use two components but
even though the other two components when I'm on p on the homepage on page a it downloads the CSS for the other ones
even though it's not loaded but when I go to page two all that CSS is already loaded so things are even zippier and
quicker right so yeah that's why you know a lot of this reduce unused
JavaScript in CSS um it is right but it is also wrong right so just to give you
a little bit bit of feedback there hopefully if you guys have any questions about that let me know um but yeah um so
that's kind of the story around that um yeah a lot of times Frameworks will be
uh you know it will you load unused code on one page that might be used on
another page but we benefit that from caching in the browser back in okay I see a
um I see a question about total cms3 support for webp total cms3
old uh 9 resources does give us a
time it wants it to be one one year yeah see I don't know I I disagree with that
with Google Google wants yeah so what Google wants is uh they want all of our static
assets to be cashed for one year okay I don't know that just feels
so long for me um yeah I have mine set to 31 days um and yeah so I'm going to
get dinged with that um and you can change that if uh use something like cloud flare or uh HT access files you
can change your I actually think it actually labeled it out in this thing it gave it some HT access
rules yeah um so yeah uh oh that's the header that you would need to do uh do
they give you any they don't give you any rules right you can control that in HT access file um if you use something
like Cloud flare which I've mentioned um you know a couple times today um you can you can customize that there as well um
but yeah apparently it wants one year so I don't know I disagree with that I
don't know it's kind of crazy so there we go one year that's what Google
wants um but I'd improve my I'd improve my score if I did that even though I'm pretty happy with these scores myself
right that's pretty awesome um avoid Legacy JavaScript um all so yeah I'm using some
some JavaScript extensions in some of these uh JavaScript libraries I'd have to dive
into that this is something that isn't uh pretty much nothing you
can take care of right this is all the developer stuff and these are all pretty
minor things that I'm seeing right now um just saying I I could probably use something other than date. now and I I
use Babel to compile the JavaScript but H I'm not sure why it cares about that
pretty minor things uh oh I guess it says I could reduce this Javascript file by 7 kilobytes if I didn't if I didn't
use those things okay um maybe in Foundation 7 that's all
stuff I'll look into um avoid document. write yes um this will go away in Stacks
Pro okay um found the foundation theme um does some magic I'm going to call it
magic okay um to overcome some uh limitations in the rapid Weaver
API that thank God we don't have anymore in Stax Pro um so yeah this document. WR
error will go away it's a pretty minor thing anyway because document. WR happens at the very bottom of the page
which document. WR pauses page rendering but at that point when Foundation does
it all your pages rendered already anyway so it's a little bit minor but um
yeah it'll be gone on Stacks Pro I don't need to do that anymore which is nice uh we talked about reduce unused JavaScript
already same thing as the CSS okay um avoid layout shifts we should talk about
uh what a layout shift is I just I I do want to go over some best practices things you can do common things that I
see happen um and how to get over those things okay
um I'm not going to take the time to go over mobile it's going to be the same uh same a lot of things these largest
content full paint um I apparently this text is rendering slow for some reason not sure why um maybe it's the font file
I don't know um yeah okay reduce and a lot of it's the same reduce unus
JavaScript avoid Legacy JavaScript reduce JavaScript blah blah blah blah blah a lot of the same things cash
policy oh what's this A lender uh oh eliminate render blocking
resources um apparently this CSS file takes a little too long to load it
thinks um it's 27 kilobytes we kind of need it or else you're going to get a lot of other problems so yeah not really
anything we can do about this one um I mean what Google what Google wants us to do here it and it's not really something
that is realistic uh for a website built with
Stacks is um here let me let me back out
here to fix that problem okay um I'm going to get a little geeky here here
okay and so what Google's uh suggesting that we do is instead of loading our CS
our Styles inside CSS files at the top of the page like before any of our content what Google wants us to do is
they want us to um do inline styles for everything that is quote unquote above
the fold okay and what that means is so above the fold is anything in the browser view before you
scroll so um Google says okay what we should do is to make the fastest website
possible is instead of loading CSS files only load the CSS needed for that very
top portion and then after that very top portion is loaded then you load the rest
of your CSS that is a very complex thing to do
um in a interface such as Stacks um it I
want to say it's close to Impossible um I I've done a little bit of work to
actually attempt um to do this and I got kind of close but there's other
drawbacks to that um because of doing on the fly right so yeah I mean I think
that is a very decent solution if someone were hand coding a web page um
there's some technologies that could uh make that better and easier but for an interface such as
Stacks um at least for now now um there really isn't much you can do about that
uh we need to load the CSS files up front because it contains all the CSS for the entire page um yeah the above
the fold inline styling of everything um yeah um it it's a very
tricky problem to solve especially for a uh for a website builder such as Stacks
so anyway there we go
okay um so yeah you eliminate uh render blocking resources at least for this particular one
um yeah we need it need to have it sorry um yeah uh
there are things I I I do plan I don't know if it'll be the foundation 6 next or in Foundation 7 but splitting up the
framework so you can pick and choose what you want um something I'd like to do that'll come after sta Pro ship after
total total CS 3 ships we'll start planning on the next version of foundation 6 um which will be backwards
compatible um I think I've talked about a little bit before so 100% backwards compatible I I just want to um you know
make changes that are too big to make um in an existing version right so um yeah
there we go not going to get dive into that but um so some of these errors can be potentially reduced with that uh you
know what I have planned okay um let's dive back I'm going to dive
back into this this just so we see the core um statistics and some common
things that I see happen Okay on these oh almost
forgot remember how I said page speed insights is a moment in time okay it is
right now there is the ability um Google does track um some of these Statistics
over time for you okay um there's some caveats though um and it's all in the
Google search console now um they only I don't know
when they they start doing this but um your website has to be of a certain am a
certain size it has to have a it has to be around for a certain amount of time it has to have a certain number of page
views for Google to start tracking this for you right you know a lot of today I
did Foundation stacks.com and if we go into there Foundation stacks.com doesn't get enough traffic
for um Google to do this so it just says hey go try page speed
insights okay um but Weaver space does get enough traffic um so if we go to
Weaver space um you'll see that uh actually I'll be honest I didn't even I didn't even know this this actually
existed in here uh until very recently as well and um this is where I have egg
on my face because I have a bunch of bad scores here so I have I have a little bit of work to do um so here if we go to
my they have a desktop and a mobile report and if we open that report you
can kind of see uh I have a lot of bad poor uh content layout shift uh a lot of
it has to do with content layout shift I have some bad content layout shift
on basically all of my product pages okay so um yeah uh it's interesting it
shows over over time um so yeah there we go um I I'll talk about what what I
could do there U so you guys can kind of learn from that but um I just want to show off that if you do have again I
don't know the threshold on when Google does this um but yeah um all I've seen
when I tried to research what what qualifies your site for this it just says if your site has enough traffic if
it has enough influence or whatever then it starts tracking it for you um yeah I
don't know exactly what those thresholds are but it's nice that Weaver spaces hit them okay so there we go so you might
have these or not have these I don't know okay but check that in your Google search
console sweet almost forgot about that one
um all right I was going to go over web vitals largest contentful paint um what
can we do to um let's say you're getting dinged on this
um the big things here okay are going to
be image size big one okay um image size
if if you're using a large video uh what's the size of the poster image in that video okay maybe it's not the video
but the poster image because that's the first thing gets downloaded okay is that poster image um yeah and if it is a
autoplay video make it as small as possible if it's an SVG again make sure
that it's um yeah uh compressed SVG some svgs are quite large so um it's possible
that actually um you know I was building a that camping website and I was trying to create an
SVG and it was like 2 megabytes and it was it was insane um so sometimes a PNG
can be smaller than an SVG okay so um yeah uh sometimes uh you know
one version of an image can be better than another you know and traditionally svgs are great and you might think those
are what we should use but not always sometimes that SVG can be really big depending on how detailed it is now for
that particular example I completely scrapped the SVG and I redid it from scratch less detailed and I got it down
to 50 kilobytes okay which is maybe something for another live stream okay
um but yeah content full paint especially those
images properly optimized as small as possible um and that will reduce uh this
largest contentful paint okay all right next up oops what did I do there we go
um all right next up um interaction to next paint
um a uh there isn't much in terms of metrics here uh that as you
saw even in page speed insights this wasn't there so um yeah even even if
there were I'll be honest not sure what what you can do I don't have much
experience with how Google is interpreting this um so yeah I would I'm
leaning towards this developer thing this probably not much what you could do it could be potentially uh multiple
stacks on a page conflicting with each other right slowing something down down
um but for the most part I'm going to say um yeah if you have any delays in
your settings maybe there you have a stack that has like a delay animation thing or something like that maybe make
sure it's not more than 100 milliseconds okay so just
saying um I'm going to skip CLS that'll be a big one actually uh let's go to
First content full paint um what can we do here um this one
is going to be a a lot about the a lot of its speed of your
website okay um because it's it's the the speed at which something um gets uh
displayed fast as as fast as possible and to do that you want to use something
um you know either a CDN would be preferable um I use cloudflare I think
it's amazing I'm not affiliate with them I think their free account is the best thing the best deal on the internet okay
um I know some people do not like them but something that um yeah can help
speed up your website Cloud flare can do it it's free um and I think it's a
really really good DNS manager as well so there we go it also has the cheapest
domain registration on the internet as well um so check that out um I I moved
all my domains over there and saved hundreds of dollars a year um with that
so anyway right again not affiliate with them at all but yeah first content full
paint you want to get that that data to the server to the to the browser as much
as possible and yeah CDN will do that to
you okay um next up is okay
communative cumulative layout shift most of the time this has to do
with images okay um so I I was planning today
not to dive into Stacks at all today to be honest with you but um we're we're going to dive into it just a little bit
okay um so I'm going to open up uh let's just open up a new project okay so um in
in Stacks okay um there's a couple things that that we need to make sure happen Okay um
now if you're using the one of the default image Stacks you
you'll probably be okay okay uh because uh one thing we need to make sure happens is that the image has width and
height tags set okay um so if you use the image
stack um that will that will get the job done however there's a lot of more advanced image Stacks out there okay um
either from my starter pack there's a picture stack okay and here you can
sizing attributes it's actually required okay now if you're using Foundation okay uh if you're using my
Foundation Stacks the P there's a picture stack there as well okay and I
Pro you know I might have this on by default in the future but uh it is off by default okay um and there's a reason
there's some reasons you might not want to have it defined okay um but
here you can Define your aspect ratios okay so this is where you define if you add an image here put in the width and
height uh of the image right now I'll be honest if it's a square image here's a
little a little hint you can actually just do something like one to one okay it it's the aspect ratio of the width to
height the ratio of that that really matters okay um but yeah for old for
older browsers it it mattered the actual value for new browsers it doesn't but you know you might as well if you just
put in the actual dimensions of the image um you'll be fine okay and you'll notice even right here in edit mode um
what this does is it reserves the space on the web page for the
image okay if I turn off this sizing you'll notice that it goes small it does
it doesn't know okay but if I Define the sizing um it B it basically uh even before the image is downloaded it will
reserve the space on the web page for that image okay so that way um when all all
your content is loaded right uh or when the image is loaded doesn't shift anything around on the web page okay
hopefully that makes sense and if you're using something like
my um uh man I just drew a blank again today
what is it um rain check where oh filter's down here
right R oops if I can type oh I need to go
to there it is so if you're using my rain check stack um you know you're
going to want to make sure uh a I wouldn't do this on anything above the fold right um because yeah this will
this can dynamically load and and it can potentially cause layout shift
okay um other things that you can do um is if we add um there is a Swatch
actually also called um aspect ratio okay and um this aspect ratio
Swatch uh actually here we need to make sure that we uh set my them a foundation here there we go now everything looks
nicer um so yeah the aspect ratio Swatch will um reserve space for stuff as well
right so let's say I have um a container that is set to 16 by9
okay which is this aspect ratio um if if I want to make sure that that particular
thing is always that size and after the content loads I know it's going to be fine um yeah the aspect ratio Swatch can
definitely help with with l layout shift and to reduce that or completely eliminate it in some cases okay so um
there we go there's a couple little tips about um Stacks again the biggest thing
is images okay make sure um in your images that you have the width and
height set okay um if it is you know going to be a large image that could
potentially shift content around in the layout
okay sweet okay
um last thing is first time to bite um and I'll be honest my my answers for
this are going to be the same thing as kind of first content full paint um maybe one other thing um make sure you
have a good quality hosting company okay um you get what you pay for the you know
$10 a year shared hosting companies um if you want to make sure you have a fast website they're not
going to do it for you okay um so yeah a good quality host um is is a good
thing um and use something like cloudflare or some other
CDN um there's even some image only kind of um CDN such as cloud andary and
there's a couple others out there um that you know you can you know have a
CDN for your just your images or something like that right but um yeah I don't think you need to go if you use
cloudflare man I I just think cloud Flare's best thing out there I I know I I really really really love it and uh I
know some people don't though so there are alternatives out there the Easy Button free account on Cloud Player
there you go Chile dog is good uh yeah uh yep Greg does a great job he's super
security conscious um and he's got nice fast servers okay
so yeah
um is my uh I do have a dedicated server um so yeah uh I do I don't run on any
shared hosting I run a VPS um I don't have it I mean yeah I run a VPS all my servers all my websites run on a VPS um
100% I don't if you have a business or if you just don't have like a small little dinky hobby website um you you
could use shared hosting but if you use shared hosting there's a lot of risks to that uh I personally would always use a
VPS if you can afford it okay I think and you can get vpss out there for
like less than $100 a year okay so we're not talking tons of money okay you can
get a small VPS um on some some hosting companies for you know 10 or less
dollars a month um a lot of times you'd have to pay yearly for that right you don't pay monthly um but I think it's
definitely worth it to get a VPS okay uh yes Fernando I was an hour ahead
sorry um I should have put that in my email I forgot to put I put it in the email last night but I forgot to mention
it in the email this morning so sorry about that Fernando you'll have to watch the
replay okay everybody um that kind of does it uh I thought I man I thought I was going to be quick today and uh we we
are at just under an hour I thought I was going to be a lot quicker uh VPS it pay $60 a month yes uh that is
a nice highquality VPS that is probably much faster you have a lot of dis space um again there are cheaper vpss uh but I
pay I pay about $60 a month for my vpss as well so um yeah it all depends on
what you need excellent thank you very much everybody um hopefully we'll see you guys on Friday um and uh yeah cool
Hangouts happen every Friday at 1:30 p.m. Pacific which is 1 hour from right now but on Friday I know I see a lot of
people in the chat are regular uh visitors over there on Friday so hopefully we'll see you then I might
have a goodie or two to show off um depends on how much uh energy I got this afternoon and uh tomorrow but um been
working on um new theme for Stacks Pro migrating uh the writer theme from an
old Nick Kate's theme um and that's going to be uh one of the first uh themes in Stacks which is fun and
exciting and I've also been working on I think I teased I think I teased it already uh feeds API which is a stack um
I I worked on that a little bit uh this week uh added some API key settings and whatnot and um yeah I might have that
ready and shipped by Friday actually um I I did the work last night just got to do some testing um for that last feature
and um yeah more information on that if you're curious on Friday I'll I might ship it by Friday I might try to get
that out the door I'm definitely a product um only for people that really need some advanced stuff um so it's
definitely a product for not everybody so sweet Bill hopefully see you on
Friday okay um take care everybody I won't eat up your ear anymore I appreciate it take care have a wonderful
week get your summit tickets so you can play around with Stacks just like me and uh we'll see you soon