Transcript

00:00 hey everyone Jorgen here and I just want to apologize you'll notice that this episode we talked about holidays and
00:06 eggnog and it's March right now well we recorded this episode back in
00:11 December and I unfortunately over the holidays had a hard drive crash and we
00:17 thought we lost these episodes forever but luckily I was able to finally dig up a copy in some old Time Machine archives
00:26 and I'm glad that I was able to find them because they're really valuable and I hope you enjoy them so without further
00:33 ado let's jump on in
00:45 boom hey Greg how you doing today bud I'm hanging in there how are you sir
00:50 fantastic getting ready for the holiday seasons are you already I'm already exhausted
00:58 awesome awesome you havenít had any parties yet every weekend for the last couple weeks rent
01:05 so it man I mean to hang out with you more yeah it's been it's been very tiring I
01:10 think next week next weekend might be my first we cannot and then it's family parties for three-four days
01:17 yeah cool very cool what's your favorite holiday drink Greg Wow okay favorite
01:26 alcoholic and non-alcoholic both
01:31 non-alcoholic they got like a good eggnog yes yes that's the classic you like it
01:39 at one time you know this time of the year so like to indulge a little bit for that and then do you know why okay I
01:46 have to why is eggnog only in the holiday season why I mean it's delicious
01:52 drink why don't they have it year round probably no probably because it would cure your drink in here it's for your
02:01 own good good okay those built-in safety mechanism I mean what's your favorite
02:08 alcoholic drink well that's tough I like
02:14 a good IPA double IPA good whiskey and I
02:20 would some brandy in your eggnog do you do that you know no I don't tend to my
02:26 my dogs are purely purely just ignore okay okay yeah but we have a farm that
02:32 delivers a smoke and we ordered a nod from them so it's like farm-fresh egg
02:38 nog oh wow look yeah you don't eat him you get like a great meal or is it still
02:44 homogenized your pasteurized oh it still pasteurized yes yes but yeah
02:50 firm fresh eggnog got a good I can get try to spoil that with any any kind of
02:56 spirits sooner very cool probably probably my skateboard my favorite drinks is probably the Bloody Mary a nice spicy
03:03 Bloody Mary Bloody Mary is always good yeah for me during the holidays like it is eggnog across the board
03:09 like I love eggnog so I try whenever I go to the store and if I see a brand I haven't tried yet I gotta try it so this
03:17 year there's been all kinds of new new eggnogs out there in the markets and they haven't tried all of them I do have
03:24 to say so I love almond milk you know throughout the year and I love eggnog and I found almond milk nog right now
03:30 Mike Oh gotta try this nah sorry that this does not go no sorry almond milk
03:36 eggnog that that doesn't work you know it wasn't horrible but no sorry ain't
03:43 happening for me so yeah the almond milk nog is thumbs down if you ever see it in my personal
03:49 book and I love almond milk and eggnog so yeah wasn't my thing like that I love
03:56 a good brandy in my eggnog I do I think it's yummy and obviously like
04:02 some people hate this but like I make my I've an espresso machine I make eggnog lattes every day now like
04:09 during the holidays man in the morning some eggnog two shots of espresso man I am a happy
04:14 guy like love that so much I'd probably
04:23 be 15 pounds heavier Oh another great holiday alcoholic drink is
04:29 a nice hot chocolate with some peppermint schnapps in it like that that
04:36 is some yummy stuff right there that is holiday in a cup yes if you want to go
04:41 all out you do chocolate eggnog warmed up with some peppermint schnapps that is
04:47 you know I have to say I like chocolate one eggnog that's really good I haven't ride it with the peppermint schnapps so
04:53 if that sucks I haven't tested that at all maybe with some brandy though that could be yummy I might have to give that
04:59 a shot I'm sure you just you're just mixing everything together
05:05 you gone off the rails are you drinking one of these now do not come prepared
05:15 are we talking about today so you know what Greg I thought we'd do something interesting today you know and
05:21 so you users all over the place always talk on the forums every couple months
05:28 it's I ran my page through my website through Google PageSpeed and I have all
05:33 of these errors what do I need to do and you know I've responded to countless
05:39 number of those over the years with all my answers to all the various things and my initial disclaimer of guys these
05:47 websites while the information can be useful please don't take it as gospel right um cuz I mean even if you weren't
05:54 like google.com through these things right I mean even Google themselves ranks bad in a lot of stuff right so um
06:03 you know you just please don't take these as some people take these numbers so seriously that they're they get
06:10 extremely angry in their posts and don't I mean take these as you know definitely
06:17 a guidelines of things you could potentially look at you know look at fixing to make your site better okay but
06:24 so what I thought was cool today was both Greg and I have put our URLs into
06:31 Google's PageSpeed insights and we're gonna talk about the results so I put in
06:36 the Weaver space website and Greg we put in chili dog software calm for your site
06:42 and we're just kind of go through the errors and talk about whether or not hey you know you can ignore this and how can
06:49 you fix some of these errors and you know maybe we're not gonna hit every error that you that you might see um but
06:55 hopefully we'll hit a number of them right so um yeah I didn't want to add one thing Joe probably the most
07:03 important part of this exercise and these results in the thing that you can
07:09 absolutely control is your SEO you know right content right good content right
07:15 meaningful content right unique content that's the most important stuff yes yep
07:22 valid point very valid point well what are your thoughts just in general about these PageSpeed tools and there's more
07:28 than just Google page there there's tons of different you know page and analysis you know ones there's also ones that
07:35 like analyze your your syntax I hate those even more like I really hate those ones but um yeah what's
07:43 what's your general thought you know about the PageSpeed analysis tools I
07:49 think they're interesting they're you know they give you some insight into
07:54 your into your site and like how you're doing and stuff like that I think they're a lot more progressive than they
08:00 need to be they're pushing the envelope almost too aggressively and you know if
08:07 you look at some of the results from Google they get a sense that maybe a little bit of bias based on technologies
08:14 that Google is pushing mm-hmm you know so it's like all these formats have a
08:20 background in history with Google itself you know that's good god mm-hmm you know just takes me back
08:27 to the whole hog OGG format quite you know from from
08:34 yesterday rusty here yep so that's kind of like so you know keep that in mind
08:39 you don't need to jump on this you're gonna eat otherwise you can constantly be updating your site with
08:45 trying to tweak this publicist update this you know you have to slow down about a percent working what's important
08:52 and if you're building a site for people you know can be given the give them a
08:57 good baseline I think they'll be more unhappy again work on the SEO right
09:03 content well you know work on the user experience work on conversions you know
09:09 those kind of things so don't spend all the time optimizing first machines because the machines aren't necessarily
09:15 paying off paying all the bills Thanks amen amen yeah so cool so Greg what you want to
09:25 tackle some of the things let's look at chillydog software when you go through the first error that's on that's in your
09:31 site I first Oh before we start actually I do want to say beforehand before we started guys me and Gregg ran our our pages
09:38 through Google insights and we were getting wildly different numbers based
09:43 on just re running the test in terms of the score the errors were pretty consistent but the the score that we got
09:50 was was wildly different like I went from scoring 26 on mobile for Weaver
09:56 space all the way up to 97 and all I did is rerun the test so yeah it guys again
10:04 take the errors um you know or the warnings as good advice for things you
10:09 might want to look into but don't take that score to as religion so Greg why
10:16 don't you go first so we're looking at opportunities yeah I know maybe just
10:22 kind of go down the list of various you know that the things that you're seeing or warnings or something like that what do you think yeah sure sure and and look
10:29 at the opportunities the biggest opportunity for me is serving images images in next-gen next-gen formats oh
10:36 yes yeah I could do a JPEG but you know
10:41 the nice slider that I have on my chili dog hopper home page has transparencies in it and it's gonna be a bunch of work
10:49 for me to try to those transparencies in a JPEG with I looked it up it was it was
10:57 messy you had to do CSS had a bitmap into all the stuff so JPEGs a nice and
11:03 easy I get the nice transparency get a nice drop shot I want everything like that so I'm okay with that I don't I don't
11:11 never heard anybody complain about the speed in my site so and I like the effect on the homepage so yes I think
11:18 that I agree with you hundred percent like Google doesn't realize that you're using pngs because you wanted
11:24 transparency right they don't they ain't you don't know that right in these tests so um you know suggesting that you use
11:31 you know JPEG 2000 or web P is a little far-fetched because um you're especially
11:38 web P because a I think only chrome supports it right now anyway right so that means you'd have to have some you
11:45 know it it's image stuff where you know only that you know web Pease image is served to Chrome and then some other image is
11:51 served to all the other browsers to me I mean that seems like for the small savings you're gonna get their point two
11:57 seconds they're recommending on your site like hey I don't think it's gonna be two point two seconds but even that
12:03 like the the loopholes you have to jump through to accomplish that I don't I
12:09 think far outweigh you know this is interesting for me it says two point four seconds but you know yes and it's
12:16 not easy to generate images you know web P or other format right now the tools aren't there and this goes back to you
12:23 know that being a technology push you know web PB and Technology push by Google Play and those are sweet peas
12:30 even gonna serve mine in two years you know right right so it's easier for me
12:36 to generate a PNG using you know tools that already exist on the Mac yep in it
12:42 works it's a standard just works great across all the browsers you know most of my users are Safari you know using
12:50 Safari so everything looks great so why make it more work for myself there so
12:56 yes how about you Joe what's your let's see um so I also had the let's see
13:02 actually my first one is this is an interesting one because I know this one always gets people right and this is
13:09 eliminate render blocking resources okay so what does that mean everybody right
13:16 essentially what that means is traditionally when a browser loads a web
13:22 page it basically loads it sequentially right so it goes via the code and then it goes
13:28 into the head and then it starts loading all the the CSS files and JavaScript files that are linked now for CSS and
13:38 JavaScript files those are called render blocking resources okay what that means is basically when the browser hits a
13:46 align in the HTML that says load this CSS file it stops rendering the rest of
13:52 the page and only continues rendering the page once that CSS file is downloaded and loaded into the browser
13:58 right and then and then it next time if it's another CSS file same thing and then if
14:03 it keeps going in and hits a JavaScript pile same thing right so on my site um
14:09 it is a referencing I only have one I have one render blocking resources for
14:15 fonts on my Weaver space page and I did that on purpose
14:21 um so the reason I did that is I I didn't want something called flower right which is I wanted to make sure
14:28 that my fonts were loaded on before the page before all the content was loaded
14:33 so that the content wasn't loaded and then all of a sudden the font was downloaded in the background and then it
14:39 magically by everything changed right that's something called flaut flash of
14:44 onion wait flash of unused content or unstyled content that's what it is flash
14:51 of unstyled content is what flower stands for so I purposely did that so
14:58 that when we were space loads the font will load so that everything kind of loads nicely now there are other I only
15:06 have one render blocking resource on my page but a lot of other users tend to have a lot of them right because all the
15:13 stacks javascript files and whatnot tend to be loaded in the head on your page right now if you're using my page speed
15:21 stack that's a part of foundation that will actually take all the JavaScript from the head and throw it all the way
15:27 at the bottom of the page so that um that will help you with that so if you're seeing eliminate render blocking
15:33 resources um and you're using at least my foundation stacks um check out the
15:38 page speed stack that's inside SEO helper so that um you know you can eliminate some of those things it's my
15:44 knowledge that's the only way to do to eliminate those if you're using another theme or I don't have any suggestions
15:52 for you I think that you know this is one of the realms of you know hits that
15:58 you have to take because you're using something like rapidweaver what are your thoughts Greg
16:03 I agree I agree just I think it's how
16:10 rap career has been built over the years and unfortunately it's how that we
16:17 burned the themes API so to maintain all that compatibility over the years all
16:23 dealing with all the add-ons and all the stacks it's kind of dragged forward
16:28 um I think stack developers are much better and conscious about these things now and you know rap believer does and
16:38 combine all the JavaScript and CSS powers together or I guess taxes doing
16:44 that too right so the number of files are a lot smaller yeah so they're a lot better than they
16:49 used to be but as you said the trade-offs you know you're doing that as
16:56 part of foundation which is nice assuming you're doing it correctly note
17:02 over here Greg okay okay but yeah I
17:08 think it's it's gonna be you know if you're using and using an off-the-shelf theme it's gonna be what it is it's not
17:15 gonna be the end of the world you know SCS urx does flag it too because I try
17:20 to push I'm trying to push be progressive a little progress about this because it has been a while so I kind of
17:27 want people to be better about it I agree you know when when people
17:32 complain and complain in the forms are complained to room a quarantine developer than enough finger people will
17:38 change things so um yeah cool what's
17:45 next up on your on your list I had a good one um I have a go in it sir static
17:51 assets with it in with in addition to cash policy and that's saying that
17:58 Google wants my images my CSS my JavaScript to be cast on the local users
18:06 local machine so you know you can add an expiration date to these assets so that
18:12 when a visitor views your paid the first time they download the assets but subsequent time they'll just use their
18:19 local cache copies so they're not reira questing that information from the server again I get that this speeds it
18:25 up some of my items listed there come
18:30 from actually cart loom which I have no control over it would you know it might be nice we can have someone have some
18:37 control over that so you know yeah dad's lift something maybe maybe you know
18:43 optimize that a little bit most of my other images and resources are served with a four-hour TTL some of them are
18:51 sort of the one-day TTL which is TTL is time to live right Joe time to live
18:58 genteel which just says after four hours the user will then request that asset to
19:05 see a bit changed so if they visited my site clicked around went back to the home page everything seems a lot faster
19:11 because they using local cached copies and not requesting those assets for my server you know honestly I think for
19:17 four hours is great even Google Analytics is coming across as a to our
19:23 TCO which is you know a lot slower than what I have said and I said mine I said
19:32 mine do CloudFlare you know people if you don't use CloudFlare that's this is the mod expires stuff alright so if
19:40 that's what you want to look for an ear of HT access and mod expires I'm sure I'm sure hosting companies support that
19:49 so I wouldn't really worry about that you know teach obviously chillydog does and maybe I'll make a Weber tip for this
19:54 sometime but yeah I don't agree with their definition of long expires
20:01 I had them if you go to their home page long expires is one year that's crazy
20:07 yeah I you know I I have the same error on my site in it I have some of these assets it to 30 days and it's still
20:14 telling me it's not long enough seriously 30 days like that's a long time like April page says one year yeah
20:24 so if I if I took an image updated I'd have to change the name of the
20:30 which was that effect mica Co it's like just to get somebody to render that think that's a little ludicrous Google
20:38 yeah yeah and we you said I Greg I I use
20:44 I use CloudFlare as well to manage almighty TLS they make it super easy but if you're not using cloud flutter you
20:51 can do that in your htaccess file as Greg said yep yep let's see next up on
20:57 my list I have deferred unused CSS as a
21:02 thing so what does this mean guys essentially so I ran this my test under
21:08 for mobile experience okay and what Google wants us to do for mobile
21:13 experience is at the top of your page they want you just to load just the CSS
21:19 for what people can see on page load so we say they want you to take all the CSS
21:25 for everything that's below that right so that that people don't see on page load and load it later
21:31 that's what Google wants you to do okay good luck to anyone that is not freaking
21:37 hand coding their websites to ever do that because that is just seems completely impractical to me I
21:43 understand that the desire to have this because I mean it makes sense right only
21:50 load the styles of the stuff that is visible on page load and then you know
21:55 defer the loading for everything else on the page until after the page loaded makes sense right for from a performance
22:04 perspective but from a reality perspective man that is determining that
22:10 only what's at the top of the page is very difficult like that's tough so I'm gonna put this
22:17 in the other camp of it's not really much you could do about that unless you
22:23 want to hand code your website and even most tools that hand coders use don't
22:28 even do that right so while yes I I understand the premise
22:33 I think this is just an impractical warning from Google from for ninety percent ninety nine percent probably
22:40 other people out there what do you think Craig yeah I agree that seems like a lot of
22:46 wasted time and effort because they remember thought for every page to write
22:52 so every page you're gonna figure out what's at the top and what is the the bare-bones minimum CSS you need to load
22:57 at the top and then defer all the other CSS to the bottom of the page that seems man that that's that's crazy yeah yeah
23:04 rapidweaver and stacks are really geared towards that that kind of level of optimization so maybe something it's not
23:12 even rappy I mean like any any web tool that you're gonna use separate won't
23:17 have that yeah you know angry what's nice time for you Greg deferred cross
23:26 screen images so yeah this is saying any
23:32 images that the user doesn't see on the page load I should load dynamically in the background when they're when they're
23:39 coming to view yeah that's a good idea
23:45 honestly I don't see how much cheaper troll practically were focus is gonna have over this because you know we're
23:52 building a collection of add-ons uh yeah I know I try to consciously optimize all
23:59 my code all the time yep but you know if you're not putting you should not be
24:04 putting huge images on your on your page you should not be putting huge videos on to your page so if you're being
24:11 conscious about that I think that's a bigger impact and trying to lazy turn a
24:17 hack and lazy loading images or all the dynamic content all the content we're
24:22 building right so idealistic to it idealistically is great practically if
24:32 you do what I said about the images and the videos I don't care that it's 2018 and not 1992 and 1995 an 18 megabyte
24:41 video on your page not the greatest idea you know 10 megabyte image is not great
24:49 2 megabyte image is better why that's still not great oh you better wrap
24:55 I know I'm being I'm being generous it wasn't last trying to be you know trying to be kid been cool
25:01 give me I like I like under one I liked under one megabyte you know I like 500k
25:08 Mach toggles under 300k for most images I try to like you know that's my goal I
25:14 do have some images that are slightly larger but my thing is for large images like if you have smaller images even
25:20 obviously as small as you can get but like 300k I think is my kind of trying
25:27 to be progressive and nice to people honestly 250 150 150 greg one thing here
25:33 one one only this is this is like name name name that tune how about what's the
25:39 lowest number of notes that we can get to still see the image and make up the image yeah I mean the images on my the
25:50 images in my page 238 187 152 so 230 is
25:56 the highest biggest biggest image of my page son now one thing like you know not you said this was properly sized images
26:03 what was no this was defer image loading okay got it yeah yeah okay um here's one for I have
26:08 one for properly sized your images okay so some things that I've done is
26:14 I've so right now I'm not on a Retina screen but a lot of times I'll use the
26:20 same image across multiple pages and I know on one page I scale it down but I
26:26 know I know it's most likely gonna be cached on the browser so I still use it um so that it doesn't load another image
26:33 so there are some reasons that I I scale images down from smaller than they
26:39 actually are with CSS and this is primarily the main reason because I want to make sure that
26:45 my overall strategy which Google doesn't know is that I know I'm gonna be using that images on on other pages that this
26:53 users most likely going to be visiting and it's a lot faster if you use the cached version than downloading even a
26:59 smaller more optimized version for another page right so there's that plus
27:04 one thing you think of is for Retina screens which a lot of us have now uh I actually
27:12 recently you know a year ago got a retina map Pro um it was my first retina desktop display and I've started
27:19 noticing fuzzy images right and the reason for that is the reason for that
27:26 is that the reason for that is it's not
27:32 twice as big as the content area yeah exactly Thank You Man brain fart I need another eggnog yeah where you've had two too
27:40 many so yeah one pixel on a Retina display is for is technically four pixels right so
27:47 even though it's 600 pixels wide from a you know technical perspective it's
27:53 actually you know 1200 by 1200 pixels right so so yeah so if you use a second
27:59 or a pixel wide image on a Retina display it may it might be fuzzy right
28:05 so um so yeah there is a case you know in terms of that for also using retina or you know larger images than what the
28:11 viewport has so but like Greg said make sure your images are compact and small
28:17 and if you really don't need an image to be 2,000 pixels wide don't make it that
28:23 because chances are it's gonna be really huge so what's next up for you great and
28:28 the same thing but at a comment and something you said about the resizing is CSS it'd be interesting to know because
28:36 reciting in CSS is computationally intensive right and browsers typically
28:41 use the CPU not the GPU right all right unless using like WebGL or something like that
28:46 um so you know I'd be interested in gauging the change in your some of the
28:54 other stats if you rendered a smaller image instead of using the CPU to resize
29:01 that because that's opposed I would probably fall into the critical rendering death interesting good I'd you
29:07 know I hadn't thought about that yeah so which is I think they talked
29:13 about the critical rendering path a lot in here that's kind of what that is it's you know we talked about earlier how
29:20 browsers load the page and renders the content they've rendered from top to bottom so yeah this
29:27 particular one said I would save 0.04 seconds if I did that I think I think
29:36 you think must be cached or something like that what was the name what was
29:41 that test properly sized images I like a
29:47 point three seconds okay I got point three seconds on that one for your homepage interesting that I did get an
29:55 eight point seven seconds for you for the minimized main thread work which may be related I got two point five seconds
30:06 on that for me interesting yeah see just interesting so me and Greg
30:13 both ran our own sites so we could see the results locally and our results are wildly different yes they got crazy yeah
30:21 yes he's tile and layout I got two seconds other two almost two seconds rendering almost a second interesting
30:31 yeah hey Greg you know we're kind of running a little long why don't we do this we're gonna split this off right
30:36 now and then we're gonna continue in a part two of this episode and then done
30:43 does a cliffhanger right there folks okay so so we resume this next time
30:51 seemed same bat-time same bat-channel yep actually Greg I'll edit this part
30:56 out right now but why don't we just keep going and then I'll make two episodes okay okay is that sound okay all right
31:02 sure yeah okay cool okay so you want to go to like ten or whatever that is yeah
31:08 why do we do quick outro really quick okay so Greg where can people find you
31:14 on the interwebs chili dogs offer chili dog hosting and at bar chard on Twitter
31:21 sweet I am at Joe workman everywhere um as always guys if you are liking the
31:27 show give us some reviews on iTunes and please send us some feedback if you have questions or topics you'd like for us to
31:33 talk about on the show email us at feedback at weave radio.com where you can also go to
31:39 weaver radio and check out all of our past show archives you can subscribe to us at your favorite podcast player where
31:46 on all of them so until next week guys we will see you soon bye Cheers
32:04 you"}]