Following the general guidelines on this course will help Google find, index, and rank your site. Learn the top 25 variables to help you master your site and beat your competition!Sign Up to Watch
- Okay, so, the next variable that contributes to Google compliance is something that I'm super excited about, and I don't completely understand it, so I'm excited to learn from Jason and Clay here. Externalize CSS. Okay, so we want to externalize the CSS. Clay, Jason, what is externalized CSS, and why is it important? - Before I get into this, and I'll let Stewart kind of lead the way here, I just want to make sure we're all getting it, is that the problem with learning a new skill is there's jargon surrounding it, you know? So you start, you get motivated, you want to learn, you want to get into it, and then you have this layer of jargon where you don't understand any of the jargon, and so you just stop. You're just like, I don't understand word one, I don't understand word two. It's like when you're reading a book that was written a long, long time ago; sometimes you get lost in the language. Or, if you're watching a rap video, and you don't have an urban dictionary, you know what I'm saying? You can't translate stuff, you know what I'm saying? So, it's a deal where it's hard to understand what people are saying, or what they mean, the context, and so, I just want to start off by saying that CSS, okay, stands for a cascading style sheet. And we're just going to read it off here to you, okay? A cascading style sheet is a Web page derived from multiple sources with a defined order of precedents where the definitions and style elements conflict. What, and so, Stewart, I'm going to turn it over to you, and I'm going to let you kind of talk about what is a, what is CSS, what does it mean to have an externalized CSS on your side, and just kind of walk us through what to do in as common of terms as possible. Kind of keep it for the layman, like me. - Man, I know what a CSS is, but that definition doesn't exactly help define what it is, right? - I don't like it, either. - So, CSS is, basically, what that is is what your website looks like, it's the code, it's the nerd stuff that makes your website look the way it's supposed to look. That's all it is. - That's all it is, so repeat it one more time in maybe a different way, if I'm watching and I'm like ewlhhhh? - CSS is the way, it's the style sheet that determines how your website looks. - Style sheet, what does that mean? - It's like a programming language, specifically about colors and fonts and where images are and things like that. - [Clay] Got it, okay, I get it now. - So if HTML is the structure of my website, CSS is how it appears to me? - [Jason] It's sort of the R2D2 to the C3PO, does that help? -Now, why is it important to make sure that I have this done properly, and how can I check to see if I am doing it properly? - Well, Google, again, is about loading, what it's all about is loading pages fast, and having the code set up in the best way possible, so-- - So, when you find a website, it doesn't take a nuclear half-life to pull up website. We've all been on a website where it's like-- Somebody's still on modem right now-- Do you know what the most annoying sound in the world is? - [Jason] No, but I think you're going to-- - I'm sorry, back to you. - That's very nice. Okay, so, externalized CSS, let's get into that. - [Clay] Yeah, are you going to get it together over there? Because a lot of people are trying to learn right now, and just because you're taller than everybody doesn't mean you can do that kind of thing. So, back to you, sorry. - Okay, so, how do I make this non-nerdy? Let me make this non-nerdy. - [Clay] Make it nerdy, but I'll try translate. - Slighty nerdy, okay. So, CSS can be done two ways; it can be internal to the page, it can be external to the page. Internal means I can view source, and I'd see that CSS in that HTML code. Oh man, somebody's head just exploded, I can hear it. - [Clay] Okay, I got it, I got it. - So, internal is not good. Internal, when you view source, you should not see a lot of CSS code. External is where it's put on a file and the page loads it. Man, that's really hard to describe in a way, though. - So, you want it to be external? You want it? - Yes. - Because you want Google to quickly see it? - [Stewart] Correct.
- Okay, so, is there a tool that I can check right now to check to make sure that my site has the right external CSS? - There's a couple of ways to do it. So, the nerdy way is to actually... I'm in Chrome right now, so I'm gonna right click, view page source. And so, we tend to follow this rule because it's important. So, you'll see right here. Boy, this is kind of hard to understand folks, but this link right here, where it says, "/css/home" and then a bunch of numbers, ignore the numbers. That is a CSS file. So, our web developing team is top-notch. They know what they're doing, so they've put this code. I'm gonna click it. Oh my gosh, that's scary looking, but that's CSS code. That's what that is. - [Clay] What happens is, if you look at it long enough, you can see, like a unicorn that's talking to like a frog. Have you ever been to the mall, you've seen one of those things where you look at it and you can just look right through... Is that weird? - [Stuart] A little bit. - So anyway, you're saying, so that right there is what we should be doing, right? - That is how you do it. - How can I tell if I'm doing it wrong, bro? - Well, can I show you one more tool here? - [Clay] Yeah, show me one more tool. - So, I Googled something called PageSpeed Insights. In this, we need to put the link up there. This is going to kind of blow your mind, but you wanna run your website through this, and this is kind of an episode in and of itself here, but you wanna run your website through this, and it's gonna break down, it's gonna show you what's wrong with your site in this whole external, internal CSS. This is the human way to do it, not the nerdy way to do it. So, it's gonna show you, and I'll just say, if you run a report on this, and you get a low score and it's like a lot of things are red on this following thing, you need to call someone who knows how websites are built. - There's two things, Thrivers. One, we will do the tests for you. Just send us your URL. Two, we will check it out, fix it for you. We have an unbelievable team that will do that for you, and we have a ridiculously low cost for you because we want you to be successful. Imagine, Thrivers, that you have... I have five kids, but those of you watching, imagine you have a child, or maybe you already do have a child. You want your kid to win, right? You and I both know that we want the kid to... whatever tools and assets and things we need to give our kid to have them be successful in life, we'll do it. So, sometimes, it's ballet class, sometimes, it's sending them to church camp. Whatever you gotta do, you wanna make your kids successful. Thrivers, we care about your success, so we will help you. Just takes a little bit of effort, send us your site, we'll run this for you. Stuart, when they run the report, you can see clearly if you have some screw-ups on there? - [Stuart] Absolutely. - The only time that I have seen where people have very, very, very massive scripts on their website is every time. So, every time. So, what happens is, you're talking to a web guy right now, and the web guy is, you know how everybody knows a guy? "Hey, I need someone to renovate my attic. "Do you know a guy?" Marshall's like, "Yeah, I know a guy." You say, "Is he licensed?" "Well, he gets it done, boom, you know?" All of a sudden, next thing you know, you hire the guy, he comes in, he disappears, you pay him, he disappears. He comes back four weeks later. "Hey, where were you?" "I was, uh, you know?" - [Marshall] Lobster fishing. - "Lobster fishing, I was out lobster.." So the thing is, Thrivers, your web guy might be kind of not doing the right moves here. Might be doing not-the-best. The only way to know is to run a test. So, we will help you. In the rare case, one out of ten Thrivers, probably, will run a report, and you'll find out your web guy's on fire. You just go up to him, and you just hug him, "I love you so much." Thrivers, we need to figure this out. If we had this wrong, what could happen? Well, it's a Google tool, so Google's not going to like it if you have a very low score. It's going to penalize you, and that means, like blacklist, okay? If it's really bad, Google's gonna ignore your website. If it's not quite as bad, it's gonna rank you lower. That's not good. - What does it mean as it relates to externalized CSS? What does it mean to make sure that you have, and remove, inline formatting? - Inline formatting. What that means is, let's just boil it down to sloppy coding is kind of the best way to put that. If your web guy is not doing things exactly the way he should, it's gonna be inline. And again, you really need a set of professionals like us to look at that, because this kind of crosses that line of really hard to do if you don't know what you're doing. - So, I'm gonna show an example. If you can switch over to my monitor real quick, here, to my drawing device? This, right here, would be poor code. It's massive. This is bad. Bad code right here, not good. This, right here, is good code. Bad code is massive, as a general rule. It's just big, there's unnecessary, massive quantities of code. For the same website, the user can't tell, but there's so much more code. Good code is short, it's concise, it's clean, it's simple, it's precise, am I correct? - [Stuart] Yeah, that's a good way to put it. - [Clay] So, we're gonna help you, Thrivers. Don't freak out. We're gonna help. We have a whole team of people. I mean, if you go to YouTube and you Google the Thrive15 headquarters, let me tell you what. You are in for a treat when you come on here for a workshop. We have a whole team devoted to just helping you, so let's get it done. Let's fix it. Send us an email right now, what are you doing? What are you doing? Send us an email. Marshall, back to you. - So, we're talking about externalize CSS. You want to move that onto a file of its own, so that you're not having huge pages that are taking forever to load. We want to increase the speed of those pages so that Google ranks it higher. Google-compliant websites. - We can help you, Thrivers. It's just easy. I mean, don't be overwhelmed. We will help you do this, okay? So, action item for everybody right now, send us your URL. If I don't have 1,000 URLs in my inbox tomorrow, I am upset.
Send us your email address, and our team of elite minds will get right on it.