Build & Design a Professional WordPress Website - Optimize Your Website for Better SEO | Part 5 | Robin & Jesper ✓ | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build & Design a Professional WordPress Website - Optimize Your Website for Better SEO | Part 5

teacher avatar Robin & Jesper ✓, Teaches Digital Marketing & Social Media

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction - UI vs UX vs CX

      8:26

    • 2.

      Speed Test Your Website

      7:35

    • 3.

      Image Loading Speed

      17:09

    • 4.

      PNG to JPG Conversion

      10:01

    • 5.

      Eliminate Rendering Blocking JavaScript & CSS

      10:48

    • 6.

      Reduce Server Response Time

      11:36

    • 7.

      SSL SiteLock CDN

      5:23

    • 8.

      SSL CDN Compability

      6:15

    • 9.

      Cloudflare CDN

      10:22

    • 10.

      Home Site URL Connections

      4:03

    • 11.

      Leverage Browser Caching

      9:41

    • 12.

      Further Optimizations

      13:09

    • 13.

      Support

      3:22

    • 14.

      Mobile Design UI

      13:39

    • 15.

      Tablet Design UX

      7:39

    • 16.

      Tablet Design UI

      7:59

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

141

Students

1

Project

About This Class

Welcome to the fifth part of "Build & Design a Professional WordPress Website - Optimize Your Website for Better SEO".

In this Part of the course we're going to optimize your Website to get faster loading speed, secure it and make it mobile friendly to get better SEO.

We're going to go step by step and learn....

Introduction: UI vs UX vs CX
Speed Test Your Website
Image Loading Speed
PNG to JPG Conversion
Eliminate Rendering-blocking JavaScript & CSS
Reduce Server Response Time
SSL & SiteLock CDN
SSL & CDN Compatibility
Cloudflare CDN
Home & Site URL corrections
Leverage Browser Caching
Further Optimizations
Support
Mobile Design UX
Mobile Design UI
Tablet Design UX
Tablet Design UI

and... Remember to sign up for Part 6!

See You Inside the Course.

Love

Robin & Jesper

Meet Your Teacher

Teacher Profile Image

Robin & Jesper ✓

Teaches Digital Marketing & Social Media

Teacher

We're passionate about teaching! There's no greater joy than watching beautiful testimonials of people achieving their goals and dreams. That's why we STRONGLY believe in full and constant support. With ALL of our courses you can expect:

If you're interested in learning Digital Marketing - Social Media Marketing or Creating a Something Awesome..

We're at your service!

Love

Robin & Jesper

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction - UI vs UX vs CX: hi and welcome to the optimization section off the course. Now, this is a super important section where we're gonna talk about things such as page loading speed. Now, if your page loading speed is too slow, your visitors aren't even going to stick around to experience your website. So it doesn't matter how well you have decided. And now, similarly, if you have a really fast loading speed But you have a terrible design, visitors aren't going to be staying anyhow. So the important part is to optimize everything and find that wonderful balance to make sure that everything works. So in this lecture, we're gonna go ahead and go through some really important acronyms, what they are, how to use them and how to relate to these expressions and keep them in mind while you are designing your website overall, right, So so far we have done the home page. Now we're gonna optimize it and these optimize stations, we're going to keep in mind throughout the rest of the course. So we always know what's important and what to focus on. So let's get started now, One expression that you're gonna hear ah, lot as you do your research and as you continue to develop your website and your website editing and designing skills is something called you. I also known as user interface. So user interface is basically what we have been doing. It's the designing. So if we have a look at our website right now, a part of the user interface is all of this that we are looking at, such as the background in here, for example, such as the font that reusing the colors that were using the fact that we made these sticky menu and gave it a shadow. The colors on here, the fact that we've been thought about having this dark having this light and then doing this Ah, little bit dark. You're doing this a little bit lighter. This is all a part of the design, how it's gonna look and how it is experienced with the different colors. And that is a part off the user interface. So we could summarize the user interface as a part off the aesthetics. Right? How the website looks. But then there's also something else. There's something that's called used, experienced as usual acronym that you x right. We can see those in the bold. So the user experience is basically how your website operates, right? So a part of the user experience is, for example, what happens when they come to the home page. What is the next step? That they're gonna do the subject that we have to learn more button that's gonna take them to the start here, page the order off these pages, the fact that we have a sticky menu. So whenever they are scrolling down, they can instantly access these pages. That is all a part of the used to experience, how the website operates and how they can access different things. Basically, how the website feels, and also part of the user experience is does your website fill Aggie? Does it load slowly? For example, if I scroll up, do things get blurry? Doesn't take too long for this color to appear. All of these is a part of their experience. Now, if this feels clunk it, for example, or Laghi that's really gonna downplay the experience off the website, right? If we have a slow loading speed that's gonna downplay a big part of the user experience off this website so we could summarize the user experience as how the website operates, how the pages are laid out, why they are laid out that way. The search function, the way they were put the sections, why we have put the sections that way. So we realized that user interface and user experience they kind of blend together, but they're not the same. So where's user interfaces about the design itself? User experience also has a part of the design, but it's more about how it also operates so that it operates quickly, effortlessly and in a thought out manner, for example, that we have the learn mawr bottom that it takes them to the start here page that we have a sticking menu, etcetera. That is all a part of how the website operates and therefore a part of the user experience . And then we also have something that is acronym S C X, also known as customer experience, and the customer experience that is much more about your business, how people are perceiving your business, right? So, for example, if you have such things, such as you have on email, open or you have a lead generation, or perhaps you're offering free things on your website. They're getting a really good feeling from the whole experience on your website from your business that Issa part off the customer experience. Now, we could summarize this as being the some off the user interface, the user experience together with your business. Right. So if you have a really good looking website, you have a great user experience on that website and your business is offering a great solution to their problem. Then you are gonna have a very high customer experience, right? So we could summarize that as the overall business experience that your customers that your visitors are having off your business and that your business is of course represented by your website. Now we're gonna go ahead and focus on the user interface and the user experience because this is a WordPress masterclass course, right? The customer experience is gonna come naturally as your start developing your business because different business is gonna have different tools, different needs. But we're gonna make sure that the website fulfills everything with the design and everything with the user experience, the way that we just have and will continue to do so now. The result of optimizing everything will be, for example, that we're gonna have improved S E o. So when our pages are loading quicker, that also means that the search engines are gonna be happy you're gonna rank higher. It also means that customers are going to stay on your website. Now that is called retention. And when you have a high retention in other words, customer sustained for a long time on your website, search engines are gonna like you even more. And that means you are going to rank higher and rank higher in rank. How you're you're going to get more and more and more visitors, and that is what this is all about. And finally, once you have a great user interface, great user experience and finally the custom experience really peaks. Then you are gonna have conversions now, conversions. That is just a word that literally means change. So a conversion for a block could be that you have a visitor turn into a reader. Now, if you have an e commerce, that could mean that you have a visitor turn into a buyer or you could have, for example, a visitor turn into a lead, etcetera etcetera, Depending on what you want them to change into convert into that is gonna be the result, right? That is what we've been talking about. The purpose off the website of the home page and everything. And because we are doing courses, we wanna have people come to our website, get accustomed to us, get warm and by our courses. So when someone buys one off our courses, that is gonna be a conversion for us. And in order to get that, we need to nail the user interface. You I, the user experience ux and the customer experience the c X. So, guys, not when we know this we're gonna move on to the next lecture. And because we've been doing so much user interface to designing In other words, we're going to start off by improving the user experience and looking at how our website is performing with the loading speed, for example. So this is super important. See you in the next lecture, where we're gonna optimize the U X and then go deeper into do you. I see you there 2. Speed Test Your Website: All right, guys, in this lecture, we're gonna go ahead and learn how to speed test our website. Now, this is very important because the loading speed off your website determines how your visitors experience your website, remember? Used to experience. Now there is some pretty crazy statistics that show that if your website takes five seconds or longer to load, then up towards 70% off your visitors will leave. And similarly, if your website takes two seconds to load, then up towards 34% off your visitors will leave that, guys, that's one two seconds that people are not willing to wait for it to load. That's insane. So we need to keep up making sure that our website loads quickly. Otherwise, if we're gonna lose all the traffic, they are not going to experience all this beautiful design. Right? So we're gonna go ahead and use a tool called up time, and this will off course be in. The resource is you can just go ahead and access it. They're and we're gonna go ahead and see how long it takes for a website to load and see what is delaying it. If it's taking long Now what I'm gonna do here is actually used to Tab. So I'm gonna use one for the website that I have created, right, And then another tab with the same up time where you can go ahead and check your competitors loading time or simply someone who you have based your design off because that's going to give you a good hint off what you are missing out when it comes to loading times when it comes to often mice ations. So what I'm gonna go ahead and do is go ahead and grab our u R l like that. I'm gonna cope it, and then I'm gonna go ahead, remove this and just paste it in. There we go, and I'm gonna click on start testing. I'm gonna leave that random location, start testing, and I'm gonna go to Pat Flynn's website were actually gonna use his website because we've been shaking him out so much and based in a lot of for the science on his website, I'm gonna go and grab his Ural. Copy it. Go back here, remove this, paste it in, and then click on. Start testing. I'm gonna leave this on random to That's not completely fair, but it isn't. Anyway, we just want a comparison chart. Chances are here, some much higher budget and people working for him to optimize his website to the next level. Now, we probably don't have that. We still want something to compare to. All right, guys. So the results are in, and honestly, it's not looking too good. So looking at this, we can see that are loading time based off of Sidney, Australia now, But anyhow, are loading time is over four seconds. Now, this is milliseconds, So that means that every 1000 is a second. So the loading time for a website is 4.2 seconds. Now, remember how much traffic we lost at two seconds? Can you imagine how much we're gonna lose the three? And now, even four. We're almost at five seconds. Which means we're probably touching that 70% off lost traffic. This is a massive deal breaker, and we're gonna need to optimize this. We see that we have a lot of requests, requests being that there certain things that needs to load between the CSS and JavaScript . We don't need to go in detail on this. Just that there's a lot of things going on on our website. There's probably not helping with the loading time and the total size for our website is 2.7 megabytes. Guys, that is too big now. Honestly, the goal is to get below one megabyte for your site. Okay, so 2.7 that is just too big. And we're gonna have to fix that. If you make it really professional, you might even manage to go on the under 500 kilobytes. Now that 0.5 megabytes, we can see that we have a low performance grade for the four out of 100 based on the previous statistics. But our mobile use ability is really high, and that is thanks to the Ocean WP theme and off course elemental, which is already making it mobile responsive for us. So thank you for that. And then we see where this test is based. So let's go ahead and shake out Pat Flynn's website. Now we can see that he has such a much faster loading from a much, much, much faster loading time right, so he's loading time is 0.3 seconds, almost 0.4 seconds, but anyway, it's below one second. It is also worth noting that he is loading from the US while we are loading from Australia . So there is some difference, but still the difference is massive. He is a lot less requested that also helped. But look at this. This is vital. The total size of his website is 630 kilobytes. Now that 0.6 megabytes. So we need to drastically lower decisive our website to speed it up. Looking at his performance grade, we can see that he doesn't top the scales here either. He doesn't have 100 out of 100 guys you don't want necessarily to top the performance scale because the higher your performance is, usually the more your design has to suffer, right, because the more high quality pictures your using, the more interactive featured, you're using all of these things that take time to load. So what do you want to do is find a balance between user experience and the user interface . So 73 might actually be a really, really good number because we know that his website is beautifully the sign and there's a lot of wonderful features going on here. So the fact that he can have all of this wonderful descendants the load so quickly that is amazing. Remember this when you're doing the test, you don't want to go too much in the performance and make the design suffer. It's all about the balance. Here. Mobile usability is going ranking really high as well. So let's go back to our own website here now. The interesting thing is that if we scroll down, we can actually see what is the problem on our website. Right. So what we see here is that we have an issue with optimizing our images. They're not optimized. In other words, we have something called render blocking JavaScript and CSS in the above the fold content, remember, above the fold, that is gonna be all of this. And everything here is down below the fold. And then we have reduced server response time and leverage, browse or cashing What? We're gonna go ahead and do guys in the upcoming lectures there is to go through all of these and correct them and make sure that our website loads much, much faster and optimize everything Okay, because this is gonna make our user experience suffer a lot. Is going to make our S CEO suffer a lot. Basically, you're not gonna be able to have a sustainable business with this sort of slow website. Okay, so we need to correct this. And honestly, it's quite exciting to do. This is a vital step. Don't miss out this section in the course. See you in the next lecture, guys. 3. Image Loading Speed: All right, my friends, in this lecture, we're gonna go ahead and do some problem solving together like we have for a while. Now, we're gonna go ahead and optimize our image loading speed because we are not looking so impressive right now. By the test, we just did. So, as you can see, if you scroll down below, we get some a couple of recommendations going on here we have in the performance section. We have the optimizing images, eliminating render blocking, reduced service bones, time leverage, browser cashing, and then one at mobile usability size tap targets appropriately. Now we're going to go through them, but we're gonna do it step by step. So let's start with this one. Optimizing images. So if I click here, it's actually gonna tell me about approximately how much space I could say if I was just a tad bit smarter. And also which of the images they are actually costing problems so we can see. For example, we have the these are marketing 17 courses in one image is actually it could be reduced by 97%. That's huge. And also we have the Amazon. It could be reduced by 97%. We have the Shopify image 97% And these are all these images that we have just put up right now they're taking a huge amount of space in needlessly Now. We also have other images like it says they're sky people and person, and these are actually the background images that I just decided not to name. But I remember the names off them. So these are the background images that could be optimized just as well. And then finally, we have the cropped image edit, and this is actually the name of our logo. But as you can see, this is only going to say it was 4.9 kilobytes. So I'm not going to bother with optimizing this one. But everything above here we're gonna go ahead and optimize each and every one of them and then run a new test and get this size down right, because these his way to be wanna be under one megabyte and definitely below two seconds for the loading time. So let's go ahead and go to our home page. And if you are here and you want to start editing with L a mentor or we need to do is click on edit with L. A mentor. So what we're gonna do now is that we're gonna start optimizing all of these images were using. And we're talking this background picture, this background, all of these three and this background image, right? And we are gonna do that by putting them all into a folder so that we know where we have them. And then we're going to go to this website called image compressor dot com. Also known as often my sil, How I love that name. So this is, of course, in the resource is now all we're gonna go ahead and do here is click on upload files like this, and then we are gonna go to all of our images, select them and click on shoes. So it's actually a really handed process, and now it's gonna start compressing the images for us in this second. But the beautiful thing here is actually that we can customize our own compression, right? So, for example, we have Amazon right now that's selected in here. And if I scroll down, I can see the way the original looks and the way it looks while it is compressed. I can also see how many percent I'm saving what the new sizes. But here is the interesting thing here. I can see the amount of colors being used right now and also notice that there's not a lot of cultures going on right now. So what I'm gonna do is actually pull this down to say, Let's do 80 collars and we can tell that there is no difference whatsoever in the images. But there is a difference in this size, so I'm gonna continue. Let's move down to 70 right? And there's still no noticeable equality. Really, That's changing here. So I'm gonna go down even further. Let's go down to say 55. I'm pushing the limits lightly here. Let's do 53 it's still looking fine. Gonna go even further. Let's do 40. Okay, so I have actually compressed this big time right now. Even if I assume in there still no noticeable loss of quality, I'm gonna go really crazy, actually, and go with 20 and it's still looking. OK, but if I assume in there yeah, as we can see, the white is actually starting to suffer a little bit. So I'm gonna move up to say 40 and we get a nice or white there. So I'm going to stick with this one with the four to college because this is just gonna be a thumbnail size anyhow, so I'm gonna click on apply. So we're just gone from 68 to 76% compression. Really Good. Now, this is just a thumbnail, so you can get away with MAWR quality suffering here. But this one is a super important image because this is our background image. So we need to be a little bit more careful here. So we have the quality right now and just to show you what happens if you go too far, if I would pull this down to say, you know, let's go with 35 you can see that there's quite a decently noticeable lack of quality going on in here now, especially if I sue mean it gets more prevalent and because this is a bit more sensitive off a case, because there's gonna be a big background image. We don't want to go too far here. Like you can see, it's all blurry in the background here Let's try out 60 and see what happens. So six is looking pretty good. I'm gonna sue. Meaning you can see that there's definitely a little bit of loss of quality if assume in like this. But I am actually going to go and increase it to 65. I think this is looking really nice. So what you want to do? You can also see there's a little bit off the caller's fading else. I'm gonna go to 70 here. So what you want to do here is just keep on eye on the quality. Make sure that the loss isn't too big rights, especially on this important images. We're gonna go ahead and apply them, and we're gonna do this for all of the images. And then we're gonna make sure we're gonna upload them on our home page and have a look so that there is no noticeable suffer off quality. Of course, we don't want to sacrifice actual image quality, noticeable quality in order to get better loading speed. There's gonna be this nice balance, but we want to get under one megabytes in size, so I'm gonna continue optimizing these images. Let's pull this down to about, let's say 65 then soon in, we can see that there is a definitely a change of qualities. I'm gonna go with 70 on these ones, and then I'm gonna apply, and we're gonna see what kind of results these yields. Now you can, for example, see, we've gone from 252 kilobytes to 71 kilobytes. There's a huge, huge, huge difference. So we're saving a sawn off size. And now, if we would ever go too far, which we're gonna notice when we're uploading, all we need to really do is go back your upload, their original, and then be kinder on the compression itself. So I'm gonna go down to 70 on this one s. Well, there would go. I'm gonna hit. Apply. This is a thumbnails. I don't have to be quite a sensitive Let's go with and check out, say, 59. You can see that there's some quality suffering right there. But once again, this is going to be a thumbnails. I believe this will be fine. I'm going to go ahead and use this from 501 kilobyte to 116. That's huge. And finally I'm gonna do Don't Shopify. And this is also a very simple image, even though there's more going on in the background. So I'm going to scroll down. Let's do 60. There we go, and I'm gonna just hit apply here. So now when I am all done, I have applied it on everyone and we can see that there's no real noticeable quality loss. Nothing big. I'm gonna download all of these by simply clicking on download all. And then I'm gonna go ahead and extract them. So here are all of the images right now that I just used. And here is the image compressor. It is a sip file. I'm just gonna double click on it. And here I get the new fouls. It's just in this folder called Image Compressor. Right, So this is really, really good. Now we're gonna go ahead and go to the website. We're gonna re upload all of these, and then we're gonna run a new test and see the results. Okay, so let's start with the background picture here. I'm gonna click up here. We're gonna edit this section, move over to style, and then we have the image right here. I'm going to move over to upload file. I'm gonna go to select image compressor. It's right in here. And then we're gonna use this sky image again and we can see that the size is now 134. And remember, we still have smashed that is compressing the files for us so as to upload is in section 131. It applies this life compression to that. But look at this comparison. We have 131 kilobytes here and the previous, even with smushed compressed was 422 is a huge difference, guys. And that is because we're using the lossy compression right? With smart, we can Onley use lossless compression unless we buy that plug in. And of course, if you want to make your life a little bit faster and easier, you can buy smush the premium. But honestly, it's not that big of a bother to use this tool. I think it works Superb. So this looks really nice and gonna go ahead and click on insert media and here we have it . So let me go ahead and click on preview changes here and here we have it. And as you can see, there's no big difference in quality. So if I just to show you the difference between them, I'm gonna go ahead and compare them side by side. So if I open these two up, this is the original image, right? This is the one that was 422 kilobytes, and then this one is the one that is almost four times smaller in size as you can sell. If we look at the shadow down here while I'm jumping in between them, there is a slight difference in color on ever so slight difference in color. And you can notice these asked, Well, when you are looking at the background right, but there is no big deal going on it. This is well worth saving all of the size, saving all of the loading time. So, basically, even though we're using lossy, it's basically no loss off actual quality. So let's continue optimizing. I'm gonna go ahead. I'm going to scroll down to here, click on editing this section, move over to style, going to go down to image here, click on the image, and I am going to upload files, Select. And then I'm gonna click on the image with the girls sitting here. Now, this is 76 kilobytes. And if you have a look on the previews, this is 293. So this is a huge, huge, huge difference. Now, my math is too bad to give you a proper calculation. How much better it is, But there's a big, big difference going on. Right? So from 293 to 74 in Ghana, could it can insert media here and there we have it. There is no noticeable loss off quality going on here either. Now, I'm gonna go ahead and I'm going to upload them all. And then we're gonna check the page out, right? So I'm gonna do the same. Appear, go to section, go to style. I'm gonna click on the image here, upload files, select images, click on shoes. So this is 71 kilobyte. The previous was 252. Huge difference. Click on insert media. There we go. Now I'm gonna go ahead and change these ones. That's what I'm just gonna Kulick here and I'm going to click on this image and then upload select files and then I'm going to upload the correct one and shoes and the insert media. I'm going to continue doing this on all of them, all right? So I have just changed all of these three as well. Now there's one more thing that's super important for you to know about that I did not do when I was using these images earlier. And that is, if you click on the immature, you can see that I am using the full image size. There's no reason to do that whatsoever, because we are compressing it to such a small size. So when we were looking at the test and it said that you can save afterwards and have a 97% reduction, what it meant by that is that I can actually, instead of using a full image, it takes a lot off size and space. I can just go ahead and click on medium, for example, and there is no loss off quality whatsoever because I'm actually having this small size. But it is cropping itself by using this feature so it automatically gets even smaller Now you're gonna notice if you go too far. Because if I used the thumbnail here, for example, you can see that That just ruin the image. Right? But if I used the medium 300 times, 300 or medium large or I used a large, you can tell that the only real difference is the loading time, because the quality is pretty much the same. So I'm gonna go with medium 300 times, 300 because that is all that we need. Same here. Medium 300. Same here. Medium. 300 times, 300. And now we've updated everything. I'm gonna go ahead and click on update right here and now I'm gonna go down and click on preview changes, and we're going to see how the website looks and as you can see, did you see that loading time? That was a big, big difference. Guys like we just ended up here like that and I'm loving this, and if you scroll down, you can see that there's no real lost off quality. Actually, this image might be having a little bit lots of quality, but not too bad, in my opinion, scrolling down this is no noticeable loss off qualities. So the only thing that you might want to do would be to increase the quality off this image , because here it is a bit more noticeable. But this one has no noticeable loss of quality. What so ever going on? So I am super happy with the results of this. But what we're gonna go ahead and do now is run a new speed test and compare the results. So I'm gonna open in new tab, go to up time that come free tools, speed test. And now I'm just gonna ride in our website and then start testing. All right, guys. So the results are in. And as we can see, there is quite a difference in the results right now. So the previous results, we were looking something like this. We're looking at a loading time at 4.2 seconds. Now we're looking at a loading time at 2.3 seconds. That is almost half still too much, but drastically different right now, if we're looking at the total size, it's actually 1.1 megabyte. That is a massive difference from 2.7 now, in my opinion, 1.1 megabyte is still a bit too much because I want to be below one megabytes. So what I am going to do is actually put these through the compression. A couple of them, for example. I'm gonna compress this further while also compressing this a little bit further while actually maybe increasing the quality off this one, and then I'm going to run a test again and make sure that I am below one megabyte. Okay, but this is how you optimize your images. Make sure that your website loads much faster, but there's still more issues going on, right? So if we look down, we can see that we have the eliminate render blocking that is up next, and we're going to go through that in the next lecture. So if I now go ahead and go down to optimize images, we're gonna be able to see what the issue is, because apparently we can save a lot of space stealing. If we're saving this much, we're gonna go down quite drastically on the total size. So as we can see, we could still have a huge reduction in the digital marketing, the Amazon logo and the Shopify logo, right? We're not going to bother about this from because it's safe, so little. But here we could actually save over 100 over 100 over 200. So what I am noticing here is that these are actual P and G's. Right? So what, I'm gonna go ahead and do before we move on to eliminate Render blocking is that I am going to go ahead and show you in the next lecture how you can turn PNG images to J pig in order to save ah lot of size and we're going to go well below the one megabytes. Okay, so if you already know how to do this and you're fun with the image of the my station, you can move on to the next lecture. But if you do have P and G false and you need to resize down even further to get below this than join me and follow me in the next lecture, and we're gonna take care of this size problem, Casey, in the next lecture, guys 4. PNG to JPG Conversion: all right. In this lecture, we're gonna go ahead and convert our PNG files into J pig. Now, if we scroll down, we noticed at the optimized images here that there is ah lot off size to be reduced still. Now, we're not gonna earn in this much reduction because we are not using the full size off these thumbnails, right? Remember these air full scale when they're uploaded, but at the way that we are using them for our products or for our courses, we actually make them 300 by 300. But needless to say, there's still a lot of space that we can save. So we're gonna go ahead and turn our PNG files, which are these three files into J pack. Because usually that can even make the size about half. So we really need that at this point because we want to go under one megabytes. So I'm gonna go ahead and go to the PNG to j pig dot com site. This is in the resource is off course, and I'm gonna click on upload files, and then I'm gonna choose my file, which is the Amazon, the digital and the Shopify ones. click on shoes and then I'm just gonna go ahead and click on download. All OK, so I have added in the sip file and just gonna double click on it like that, they would go. And now I can remove the sick file, and I'm gonna go ahead and grab these images, put it in the same folder down below here, going to remove this folder, and I am actually going to go ahead and remove these PNG images right now because we don't need them. Here we have our new J pig. And if you have a look at them for example, this one and this one, I'm just gonna open them up. You can see that there is literally no loss off quality. What so ever Now the only thing I'm noticing is actually, there's some sort of difference. If you look super closely at the gold on the chip back, there seems like something is going on when I'm changing. So this is an extreme minor, especially considering we're gonna use this is 300 by 300 so we don't need them. We're gonna go ahead and remove the PNG ones Amazon and there we go. They're gone now. I'm actually gonna put these through the compression once again because with the J peg would notice if we compress them down even further insights We're gonna go ahead and do that right now. So I'm gonna go back to the image compressor or optimize Cilla as it also known as I love that name. And I could I can upload files right here. And then I'm gonna choose these, which are now in J pig there. And then the Shopify one okay and lengthy can choose. I'm going to scroll down, and now we can lower the quality quite a bit already. So I'm gonna just try it out. Maybe clicking on 25. We can see that they clearly is a loss off quality. But we have to remember, this is gonna be 300 by 300 so there's gonna be a very, very little change to this. So I am a 25. You can see the original turned down to 52 which is a huge difference. I believe the previous will sit around 100 so have really lowered the size by making this into a J peg and quality 25. Now, again, you can actually see that there is a lost off quality going on. There's no doubt about that. But we're gonna use this as a thumbnail, so I believe that this will be just fine. I'm actually going to use this 25 quick and apply. Gonna do the same thing here. We're gonna move it down to 25 see what happens. Yes, there's a loss of quality here as well. But I'm gonna apply this because they will be so small. Same thing here. Click on apply. And if it's just too bad, if it's not working out, then he's pulling the original once again and redo the process. Not gonna click on download all. Here's the sip file. I'm gonna double click on this sip file right here. And then we have the image compression, right. Gonna remove this one. I'm gonna pull these ones out and put them in. Let's put it down below here. And I don't want to mix these up, so I'm just going to give them a new name quickly. All right, so now they all have a new name. That's really nice. I'm gonna go ahead and go back to the website. I'm gonna go to our home here, and I'm gonna click on edit with L. A mentor. Now should also let you know that I took the liberty to use the previous background pictures and actually compressed them a little bit further. I believe that I used in the beginning 70 or 75. Now I went down and compressed them to 60 and still comparing the original with the compress, which you can always do. There's still no loss of quality in anyone off the pictures. Not even actually this background that I thought had a loss. It did not. So that's great news. So we're gonna go ahead and I'm gonna click on this one in here and then click here, click on upload files, select files. Gonna be a little bit easier to find now because it has a new name, right? So now this one is actually 26 kilobyte. That's super tiny, and we can see that compressed with smarts, which happens automatically. It becomes 25 kilobytes and we can see the previous one. I had 116 right, because it was a PNG. So we've saved a lot off size by doing these guys a lot of size. So I'm gonna go ahead and click on insert Media. And as you can tell, there's no loss of quality because it is so tiny. I'm gonna do the very same thing here, click on it, upload file, select file. I'm going to go to the shop if I j pig compressed. Now, this one is 12. It might become 11. Nope, it's still 12 and the previous one was 82. So huge difference in size going on here, and I'm gonna do the same one with this Amazon, which is the last one upload Find the J pig compress, which is 14 might become 13 is like a gamble, you know, just guessing like this. No, it's still 14. The previous one was 75. Huge size difference. Now 14 75. They're not big amount, but this kind of managing on a lot of images that's going to save you a lot of space. If you think 14 to 75 on my math is not that impressive. But I think that saving, like four times or five times decisive, is a huge difference. in that sense. So as we can see, there's no actually visible loss of quality because they are so small. I'm gonna go ahead and click on updates. So this was our results the first time we did the test. Then we redid the test. We had 1.1 megabyte. Now we're going to do the test one more time and compare it to the last one when we have optimized the P and G T J pig. I'm gonna go to up time, click of free tools, go to speed test, and I'm gonna write in our website, then start testing. And remember, we remain looking at this size right now and check this out. Guys, really, really good news. This size is absolutely incredible. So we have now gone down to 465 kilobytes while in before we were actually at 1.1 megabytes . So we did have a big reduction after all, from turning them from P and G to J peg, even with the compression and everything going on. So this saved us up a lot off space, and we have optimized our entire front page right now and look at the loading speed were actually the loading at one second. That is half off the two second rule. Now, there's still a lot of good stuff to be done. For example, we still want to eliminate the render blocking JavaScript, which we're gonna do in the next lecture. But even if we Onley did this right now, we had a loading speed of one second and a total site off below 0.5 megabyte. Then that would be incredible. Once again, looking at Pat fully and he's bigger. But there is also more stuff on its website. But this this is beyond incredible. So even though he has a bigger size is still loading faster and that is because he s less request and he has taken good care of his website and we are doing the same thing. So we're gonna continue and further optimize our website. But we managed to get the total size down by optimizing our images and by looking at your own right now, you might still have this one. Words has optimized images because there's still some work. Should we want you to be done, for example, we still have the logo that we could compress them. Interestingly, it's still saying that we could be saving some space on these images right on the people images, even though it is so small, it says, we could be saving space on the digital on the Amazon and on the Shopify, and that may be true. We could probably compressed it further and further and further. But honestly, this is a really, really good size. Like I told you earlier on, if you could get it 0.5 megabytes, that is gonna be incredible. This might be hard to keep if you continue to expand and add more things your home page, but it's still a really, really good size. You want to be below one megabyte. If you can go to Syria 10.5 megabytes, that is incredible, and you don't want to go crazy on this, either. Remember, it's all about the balance between the user interface and the use of experience, and I think right now we have compressed them more than enough, and I'm super happy. So two things to remember one. Turn your P and G's to J pick and to compress them all. If you have smashed this is gonna be easy smushed the premium version, that is. But if you don't, you might as well just use the tools. And the resource is just takes a little bit more time, but it is completely free. So let's move on. Install the next problem, see in the next lecture guys. 5. Eliminate Rendering Blocking JavaScript & CSS: Alright, guys. So in this lecture, we're gonna go ahead and move onto the next issue we have with our website in order to make it perform better and load faster. Now, the next thing for us to move on to its under the performance tab and it is this one and it says eliminate render blocking JavaScript and CSS in above default content. Okay, so let's break that down. Water this now JavaScript is a computer. Language is the language that the computer and the web browser understands. And JavaScript is basically what executes the many off the effects on our website that this sign off our website, right? See, Assessor, the coach we've been using to do different changes on a website like we've been using a certain code for our mail poet form. We've been using a code for a sticky menu, etcetera those r C s s codes which are codes. Now. The problem with this is that they are rendered blocking. So what does render blocking me? It means that these need to execute before the website can load properly, right? And they take their time to execute. And because it takes a while it increases the loading speed. So what we want to do is eliminate the render blocking JavaScript and CSS in above the fold content. And the reason we only want to eliminate it in above the full content is because when you load a website doesn't really matter how long it takes for all of this to be loading or any of this because the only thing that you'll be seeing on your website or on your mobile if you're loading the website there on your screen is gonna be the above the full content. So everything here you want to load as quickly as possible. So let's go ahead and eliminate those JavaScript is and those see assesses. So what we're gonna do is move over to our dashboard because we're gonna use plug ins for this, and then we're gonna keep testing to make sure we get the responses that we want. Now we're gonna move down to plug ins and click on add new plug in, and we are going to search for auto team mice. It sounds kind of like out to optimize, but it only has a single Oh, so it's hoped auto optimize kind of a mouthful. So here it is. It has over 900,000 active installations, and it's going to be helping us with the the JavaScript and CSS. So we're gonna go ahead and install it, and then I'm gonna click on Activate. And now we're gonna move over to settings. And this is where we start activating the different functions. So we're also able to to optimize the HTML even though we don't have any issues with that optimize stations, General attempt to be good. So you can decide for yourself if you want to activate this or not. Now then we have the JavaScript options and the CIA says options. So I'm gonna go ahead and click this one in, and I'm gonna go ahead and click this one in as well so that they get optimized. Then I'm gonna click on save changes. Now, if we look back and we look at our test results right here and I click down here, we can see that there are four JavaScript, their booking and 18 CSS. Resource is now because there are so many seasons. Resource is the auto optimized generally isn't enough on its own to take care of all of them. So what? I'm gonna go ahead and do as well. It's move over once again to plug ins and click on Add new. And now I'm gonna search for auto theme eyes again. I mean, I that word, it's really hard to say. And now I'm gonna use their older plugging called critical CSS. Now, what this is going to do is take care of even more CSS and even more specifically the above the fold CSS. So I'm gonna go ahead and click on Install now and then I'm gonna click on Activate Perfect . It is installed. Now, in order to get to it, all we need to do is go to auto, optimize in here and click on settings again because it's the same company who's been doing it is gonna be added in. You can see here it says critical CSS. But it will also be added in the main and this is where we have the main features. So now we are in here and we have the critical CSS added and it will be added in the main. If you don't see these changes, all you need to do is click on the refresh button up here and it will solve itself. Now, there is one thing specifically want to doing here, and that is to scroll down. And we're going to see that there is something here. This is in line above the fold CSS while loading main off to my C says Onley after page load. So we want, specifically the above the fold, content to have their CSS optimized and the way that a lot of plug ins does this, even though this is a bit of extra information, is that they prefer to put the CSS in the footer. And we know that the photo is all the way down, right? So that means it's gonna load later. But it doesn't matter because what is important is that the above the fold section loads as quickly as possible because the second that lows that second, your website becomes available and visitors can start using, and that's gonna take a couple of seconds, and by then the rest of the website will already have been loading itself and functioning. So what? I'm gonna go ahead and do here, actually, in order to get the CSS from above the fold. It's used a website called Side Low City. And I'm gonna put this Of course, in the resource is so you can easily just grab it. Now all we need to do here is right, our website like that. And then click on generate critical path. See assessed. And this is going to give us all a for above the fold CSS. Which is that is gold. Honestly, And now we just scroll down and we're gonna have it all in here. You just need to click on this one's It's all gonna select itself, right? Click, And I'm gonna cope with this. Okay, Now, I'm gonna go back to auto Optimize in here, and I am going to paste it in. There we go. And now I'm going to scroll all the way down and click on save changes. Settings has been saved. So what do you want to do now? Well, off course, we want to do a new test to make sure that it is loading properly and that we have less request and we can see that these issues are disappearing. I'm just gonna write in our website here and then click on start testing And as we can see , there's a lot of really nice improvements going on. Look at this. We request have gone down to 31. Do we see the previous one now? The previous one had 60 requests going on, and now this one is having 31. Now the total size will see has gone down as well, but I've noticing that this is loading slightly different sizes. What's important to know is that it is under one megabyte, right, and it's quite well below one megabytes and the loading speed has improved as well, which is amazing, and it's loading from London UK. Incredible, absolutely incredible stats. Right now, our performance great is up from 56 to 63. But most importantly, let's go down and check this out. We can see that the only issue right now is that we have one blocking JavaScript and that is the G choir. It dot gs, and actually this one generally is the themes JavaScript. So the theme wants to be loading itself before we actually execute and show the website, and there are ways around this. But honestly, in my experience, this is not a problem. If you have a theme that really wants to use this JavaScript and not defer it. We can use this one. So I'm gonna leave this, and I am actually super happy with these stats. Now, guys, if you've installed these plug ins and you are still having javascript, which are issue right here, there is one more thing that you can do. Now. If you don't have that issue, you can move on to the next lecture. But if you do, stay around and I will show you. So we're gonna go back in here and we're gonna move over and installed yet another plug in . I mean, if there's a problem, there's a blogging, right? So we're gonna click on add new, and now we're gonna search for a sink. JavaScript. And here we go. And we are going to click on install. Now. We don't actually need this. This is for demonstration purposes, right? And then I'm gonna click on activate, and then we're gonna move over to settings, and then all you need to really do is go ahead and click on enable facing javascript and then scrolled down and save settings. Okay, Now, before we move on there's a couple of things that I want to show you. There are two different ways off using the racing JavaScript. Either you queued a sink or you could defer the JavaScript and the differences with the casing that is going to allow the JavaScript to execute a soon as they have loaded. In other words, whenever there is something on your website loading, you're just gonna let that show up on the screen before everything else is done right? The problem with that is that if the wrong things air loading too quickly, your theme is gonna breaks. You're going to see, like, this really ugly version off your website for about maybe half a second, and then all of the effects under the science and everything is gonna be applied. And that is not a great thing. So for some people and some themes and website, the A think it's not gonna work. Well, that's when you can use to defer and the deferment that means that you're gonna collect all off these loadings together. And when all of the most important ones for the great looks are all done, then they will execute. You get this greater look on your website now. The problem with that is that sometimes that is a little bit slower, but you never want to break your theme on the loading. So how do you know which one to use as quite simple, actually, because we already have this up Time to do the testing first off so we can check these out here and all you really need to do is go ahead and grab a private tab and shake out your website. Go to your website. If the A sink isn't working, then go with the differ. Just do what works, right. You're going to see if your website, if your theme is breaking. If it is, it's not working right. So, guys, that is it. This is how we solve the problem off the render blocking JavaScript and CIA says in above the fold content. So our website is getting better and better, faster and faster. Let's move on to the next lecture, okay? And if you have any questions off course, and, as always, will be in the Q and A C in the next lecture 6. Reduce Server Response Time: All right, guys, Welcome back Now, we've come quite far already. By now we have taken the time to optimize all of our images to save the plenty off size. We've also gone ahead and eliminated our render blocking JavaScript and CSS for the above the fold content. Now, next up, as you can see, it's reducing the server response time. Now, these Air Putin higher Kim. Meaning they want this on top, further to the left. That's the one with the biggest priority. The biggest issue, if you will. So currently, we're not having a very good server response time. If we click on it, we can see that it is at 0.78. And of course, this is also going to depend on where you are trying it from right now. We're trying it from London, and if we go back and we tried the earlier one and we check out this is our very first test , a lot has happened from since then. We can see that it took up towards 1.1 seconds. Now that's a long time to wait to even get your server going, or rather, to have a response from the server. So let's go more in depth to what this actually means, what we can do about it. So let's get started. So why do you say server response time? Well, in order to know what it is, we need to know how. What? It's measured now it's server response. Time is measured by something called titi FB. Time to first bite, right? So whenever your user is coming to your website, it's gonna measure how long it takes before they receive their first bite. The first information, right then you know, it goes from by kilobytes, megabytes, gigabytes, etcetera. So when they received their first bite, that is when the server has considered giving a response. And for us, right now it's 0.8 seconds and we've had up towards 1.1 2nd before the user even gets any response to get to download anything. And that's a long time, guys. So let's go through why this is and what we can do about it. So the most common issued, if we see in the easiest way to resolve it, is by having a look at the host server. Resource is right, so a host is gonna have several different servers from where you put all of the stuff from your website on. And the more space you have on that server, the more you can be using, for example, demanding plug ins. Adding mawr off your items, etcetera, etcetera, and that is gonna dictate how long the response time is. Now we're using blue host, right? And if we have a look at their website, we can see that a pair who go to hosting there are three different sections going on now. We are using shared hosting right now, and I'm going to explain the difference between these three and why they matter. And I'm gonna explain in a way that I learned and I think it's really, really handing. So shared hosting is basically like having on apartment right now. The more people that there is in the apartment, the less space you get because you're all sharing that same space. Shared hosting is the same way. So you basically have a server and they're just gonna put a bunch of people into that server and less people. There is the more space stories for you and your website. The more people there is the less pastries for you and the slower the response time is going to be, and then we have the VPs. Now, VPs is like living in a dorm. You're gonna have your own room, your own space, and it's up to you how much you decide to use that space. But you're always gonna have a certain amount of space available. Now, this is very similar with VPs because you have a server and you're gonna have a certain amount of CPU, a certain amount of ram, and it's gonna be up to you how much the use of it. Then there's gonna be a limit, but you're not dependent on someone else using it. So it doesn't matter how many people actually in the house, because you still have your own space. And finally we have the dedicated hosting, and that is basically like owning the entire house yourself, right? It's all you. There's no one else that you get all the space, you get all the availability for yourself. But as you can imagine, that's what Anyhow, there's mortgages. There's rent, etcetera, etcetera, and similarly, when you own the entire server, there's gonna be more costs So there is a higher keep for how much these three costs and shared hosting off course being the cheapest because you're all sharing VPs being more expensive and dedicated hosting being the by far most expensive. Now these are usually only needed the VPs and dedicate er, if you have a lot of traffic going on and dedicated, it's mostly if you have an extreme amount of traffic going on. Imagine these huge e commerce website. They might need the dedicated hosting. And also, if we're going to the shared hosting, which we have right now, we can see that there are upgrades. Now, even with the pro upgrade, we get a high performance going on, meaning if we have over over here, it says lower servant densities. So your website has more resource is available, and that's really what it's about. The available resource is for you and your website that's gonna dictate the server speed. Okay, so this is what Madison most when it comes to your server response time. But of course, we're not only limited to the horses, plenty of things we can go through, but let me go through and go deeper into why this is and also what we can do about it now. The reason this is the way it is is because Blue Host is a part of something called the E. I G. Endurance International Group. And basically, that's a big, big, big company that owns a lot of hosting company like host Gator, etcetera, etcetera. You have a look at their, Wikipedia said. You can see that they own. I think it was like 83 different hosting companies right now, and that is huge. But it also means that there's, ah, lot off people that is being packed into quite small servers, which is what they are doing. But we have to know that there are huge benefits to Blue Host. I'm gonna show you how to optimize the blue host servers further with what we have, and then you're going to get to see what the other benefits off blue hosts are now. I love Blue Host have been using Blue House for a while, even Pat Flynn, which we've been mimicking so far I've been learning from He's using blue host and that is because they have so many more advantages. Not all about the speed guys. So the other thing, we also can go ahead and do, which we already have done is optimized stations such as fixing our catch. Meaning we're putting all of our stuff into a catch. And then putting it to the user's computer so that they don't have to download, for example are header are images are bottoms or decides etcetera. Each time rather is gonna be on their computer, so the loading speed is increased. Also making the images smaller compressions, etcetera. Just making your website more lightweight. Okay. But perhaps the biggest thing and most important thing that we can do to speed up the response time of our server is to move our server closer to the Yusor. And we're going to do that through something called CD and content delivery network. Now, for the content delivery network, you might know about this already, but they are so also important. And there are three major ones that I want you to know about. Now, if you're using blue host like we are, you're gonna have something called site looks cdn already available to you in the blue host panels. I'm gonna show you how to activate that What on SSL is How is the cell works, etcetera in the next lecture. But there is one thing that you were going to show you how to activate now perhaps the biggest one when it comes to a free CD M is Cloudflare. So in the upcoming election, I'm gonna show you how to use Cloudflare as well. If you want to use that service which you're probably going to want to and I'm going to explain why in a little bit and then finally we have Max Cdn, which might be the most popular cdn off the mall ability. They have the most dedicated servers around, but they also cost. But I want you to know that if you're planning on spending money on this, I recommend Max Cdn. So, in other words, by having this different content delivery networks, we're gonna put our website into different servers around the world. So if you have someone who is from a certain part of Asia, for example going into your website, then they're gonna load your website from that Asian server which is going to be so much faster than loading it from. For example, Utah, I believe blue hostess situated in Utah in America. And this is how we're going to speed up our website by using all of these different servers . So it goes without saying that the more dedicated service they are, the higher the content delivery networks, the better it usually is. Cloudflare has by far the most when it comes to a free cdn, and Max Cdn has by far the most I believe just and end of the story. But they also cost. So we're gonna go ahead and set that up in the upcoming lectures, and that is severely gonna improve our server response time. Now there's one more thing that we're gonna go ahead and check out that it's so important and often overlooked. And that is our home and side. You are l And what I mean with that specifically it's how we ride it out. So, for example, we might have our http And then we have the colon forward slash forward slash robin and jesper dot com. But if we are using on SSL, which we will because it's so so important for S CEO and also for security, it's gonna look like this is gonna look like https Colin Colin forward slash forward slash robin and jesper dot com. But that also means that if someone goes to the regular http side, they first need to be redirected to the H T. T. P s site. Right? And this redirection is going to cost us valuable server response time, and we don't want that. So whenever we are riding out their website and putting it on the web, we need to make sure that we're putting out the proper u R l. Okay. And what 80 DP is an 82 P s we're going to go more into in the next lecture. But https, I can say I can talk a little bit about because that is gonna be about the security off your website. You need that security for a CEO for obvious security reasons, and it stands for the S actually stands for security and come from the SSL More about that in the upcoming lecture. But we also have more things such as If you are using w w w dot Robyn and jesper dot com, or it's gonna be www dot your website dot com, But you have actually set your website to just simply robin and jesper dot com. It's the same thing here. That means that if someone goes into your website using the double use, they first need to be directed to the u. R L without the W's and that it's also gonna cost a server response time. So to reduce this, what we need to do is make sure that we are giving out the correct your l. For example, if we're linking from our Facebook, if we're linking our content or different websites, etcetera, and make sure that we are ranking with the correct your else, and we're gonna go through how to do this in upcoming lecture. So in the next lecture, I'm gonna show you how to get the https, which you probably have already. But if nothing gonna show you how to get it and also how to activate this site, look, C d m. Okay. So see, in the next lecture, guys, 7. SSL SiteLock CDN: All right. Welcome back in this lecture, we're gonna go ahead and make sure that you have your ssl activated and also how to deactivated should you want that. And also, I'm going to show you how to activate this site. Look, cdn. Now, if you are not using blue hosts as your host, you can go ahead and skip this lecture and move onto the next one because this is Onley gonna apply to the blue Host users. Okay, So skip to the next one, we're gonna go through SSL and CD and more in depth and then find an alternative solution. So we're going to start off E at blue Host that come here and then we're gonna click on a log in because we're gonna go and check out to see the S S. L So here we are. And now we're gonna go to market place, and then we're going to click on Adams and down below here, you're going to see something that's called SSL certificates. Now, if I click on here, I'm going to get into this site and you can see that it says also SSL is on. That means that we have our SSL activated again. If you're still confused with SSL is don't worry about it. We're going to talk more about that in the next lecture, but know that it's super important for security s sale and basically to rank and be safe. So I know that this is on. And that should also mean that if I go to Robin and jesper dot come, I'm gonna get this little pad look going on here And if and that also means that I am secured because the padlock is the cell means that I have on Http its websites. If I click here, you can see that it says h T T P s. Now, if I didn't have this, it would either just say, http or it might just look like this and there would be no padlock. Now, let me show you an example. Now, there is a website here called white Trainer. If I go in, the first thing you're going to notice is that there is no pad look going on. And if I click kid, there's no http s. So they are not using a SSL certificate, which means that it's not gonna be safe and it's not going to rank properly as well as it could. We're gonna go more in depth into these in the next lecture and show you why and how it works. So that is for the S s L. Now let me show you also help to activate the site. Look, see them Because that's one of the wonderful features that comes with Blue Host First would get the free SSL, which is awesome. It's really, really good. And we also get a free cdn. So what we want to do is actually be at our home rights here. And then we're gonna go ahead and go to the dashboard. And now we're gonna move up to Blue Host and we're going to click on performance. And then we're gonna move to C. D. M. Now. Since I've been playing around with this before, it says we're setting up your cdn. This is not true. I've actually deactivated it. But for you, it's actually going to say acted on our affair, activated, deactivated things going to stay on and off. But this is super important for you to know. Unless you have actually bought on SSL, you cannot activate this And the reason for that is that the SSL that we have here, the free SSL is Onley gonna work for your website through Blue Host. Okay, so because we're using the blue host server, we can use on SSL certificate. But if we're using a CDN, that means we're going to be using someone else's servers. And if we're using someone else's servers, we are no longer using blue host servers And if we're no longer using blue host servers, we do not get the free SSL certificate. OK, so that means that if you click this on, you're gonna lose to SL. You're no longer going to be https and that is not worth it, guys. But this is perfect. If you have actually been in the game before and you already have an active SSL, then you can go ahead. You can activate this because the site look cdn. It's actually very powerful and very secure. But for the rest of us mortals who are still using this one, the free SSL, we're not gonna activate this site. Look, Cdn, what we're gonna go ahead and do is actually used a another cdn that's called Cloudflare now the Cloudflare Cdn is amazing because with them you get accompanied has CD ins all over the world. They are free, free forever. It's called a free forever plan, which means that they are free and they're going to stay free. And also, amazingly enough, they're also going to give us a free SSL. So that is going to solve our problem because, well, we also get to see the end from Cloudflare. And because that is a free SSL, we need to use the Cloudflare servers and because for using their CD and we're going to be using their servers, I hope this makes sense, guys. But what I'm trying to say is that cloud for is going to solve all of this is going to give us the SSL and it's also going to give us the C. D. M. But before we move on on how to do that, I actually want to go more in depth into SSL and see the end, why they are so great, their culpability and then let's move on to set this up. It cost guys, this is make it or break into understanding the value of your website and security, how it works and how you're protecting your customers to see in the next lecture 8. SSL CDN Compability: Welcome back, guys. In this lecture, we're going to talk about SSL What it is, what we use it for, how it works. Also about Cdn and wide SSL. CD and comp ability is so important now. First off, what is SSL and what makes it so important that people are willing to pay for it? Well, let's start by defining what SSL means now. SSL means secure sockets layer and basically that's a fancy name for saying that it is a security protection between the client and the server. Right? There's going to be protecting the client and the server transfers. Now, the best way to really explain this in depth is to actually show you what I mean. So let's say that we have our client in the client. Could be your users using your website. It could be you using a website. You looking into your own website, etcetera, etcetera. So let's say that you have a long game. People have their password and they're used your name and everything. So what they're gonna do is that they're gonna log in and therefore send their user name and their password, and it's going to be sent from them from their computer to the servers, right? And then the server's gonna fetch it, and it's gonna lock them in. Now here's the problem. You see that when Mr Hacker pops up in the picture, which unfortunately has become a commonplace today, he's gonna be able to assume in on that thing, is gonna be able to sue me in on the transfer itself between the client and between your website. See your user name and password and suddenly you or that client has been hacked and that is terrible. Now you don't want this to happen, especially not when you having some form of e commerce. Or if you're handling sensitive information or just for your own, log into your own website that can break your entire website. Now, of course, thankfully, we have backup in everything. But this is not something that you want to happen, especially not knowing that people might be sharing valuable information of their private information with you with their log in credit card information, etcetera, etcetera. So here is the solution. Guys, encryption and encryption is exactly what SSL offers. So now when we're using SSL, it looks like this Since that we have our clients who is staying going to be logging into your website, right? It's gonna have his user name and it's passed forward, but not when it's sending the information towards the server. It's actually going to go through on encryption, right? This is the SSL encryption, So that means that when the transfer's happening between the climb and the server, it's no longer going to say used to 123 You pass for 123 right is not going to say the user name and the actual password. Instead, it's gonna look something like this. It's just gonna be random digits and numbers impossible to know what it actually says and what it actually means. So then it's going to be received by the server with this really strange information. But thanks to the SSL, that means that when the server gets this information is gonna be decrypted. And that means that the server can get the real information and use it and log that client in safely. So now should Mr Hacker appear, apparently there's only one hacker in the world in this story. Should the hackers appear, that means that they're gonna assume in on that encryption, right? And if they go ahead and grab the encryption, they have no idea what it means that they can't do anything valuable with it. And this is why SSL is so important. And it is so valuable for security for yourself, for everyone who uses it, you need to have your website SSL secured. Okay, so then let's move on to see the end. Now, the thing with the SSL encryption is that the encryption is going through the blue Host service because we're using Blue Host and we're getting a free SSL is only gonna work through the blue host servers. But with Cdn, you're going to be using a bunch off different servers. And unless you're paying for your SSL certificate, you won't be able to apply that into the other service that you're using. Because of all of these different servers, they're gonna be all around in the world, right? So that means that your website in your continent, material that people be visiting on your website, they will be uploaded in different parts of the world. So, for example, if someone is seen Norway in the Europe or someone is in Australia or New Zealand, etcetera, etcetera. Then there's gonna be a closer server. Most likely then we're blue hostess and they're gonna be a faster page load. They're going to get the content much faster. You're gonna have a much better use through experience. But we needed to be encrypted still. And the free SSL does not offer that with the CD him. But here is the solution. And this is why this is so perfect. And that is Cloudflare. Now, Cloudflare has this really amazing offer. They have well for being a free cdn. They are by far the widest. And I would say best Cdn offers out there right now. Now, of course, if you're using Max Cdn or something like that, you can get more about the amazing thing with Club for is that it's completely free and free is always in the budget, right? But they're not on Lee offering amazing CD and they're also offering a free SSL certificate . So what that means is, and because we're getting an SSL from Cloudflare, that means that we get to have on SSL a secure encryption, secure transfers while also using C. D. M. And it's not going to cost us a thing. So that is the amazing thing here. So in this distance story would get a beautiful solution to the whole problem. So what, we're gonna go ahead and do right now is in the next lecture. We are going to set up our Cloudflare Cdn works. We're gonna set up our Cloudflare SSL, get this party started and then make sure that our loading times are improving in our server response time is improving. Okay, so see in the next lecture, guys. 9. Cloudflare CDN: All right, my friends, there's nothing to but to do it. Let's set up the Cloudflare CD, and okay, now, before we do this, we're gonna do a couple of preparation steps. And the 1st 1 is that if you do have a cash installer like we do WP super cash and it has CD and support, we're gonna go ahead and de activate that. There's gonna be in seedy in here, and then we're gonna turn this one officer that we don't have to CD and supports. That's kind off collides together, and we already know that this one isn't working very well. We could see it on a loading speed. And we're not getting any support from the other sea and CD ends on the Urals. So we're gonna deactivate this and install a more powerful one. I'm gonna click on save changes. They would go. And now we're also going to go over to Blue Host that come, we're gonna click on Logan, can just follow my steps there, and we're gonna go over to marketplace and then Adams and scroll down until we have SSL certificates. And now we are going to disable our SSL now doesn't feel very good since looking at the previous election are does it? But don't worry, We're gonna installed a new one and things were going to be even more secure in just a couple of minutes. So we're gonna go ahead and disable this one. There we go. So now we're ready to get started with Cloudflare, right? Were removed. RSL We've also removed any form of other cdn supported might collide with this one. So we're gonna move over to Cloudflare dot com. I'm gonna put this in. The resource is off course, and all you're gonna need to do is go ahead and click on Sign up here. But for me, who already have an account, I'm gonna click on log in. And once you've signed up, we're gonna end up in the same place anyway, and we're just gonna go ahead and add our site and I'm gonna write the site in which will be Robin and jesper dot Come like that, I'm gonna click on add site, and then now we're gonna change your DNS records. In other words, we are going to change so that the DNS In other words, the information is going to be sent through their service and not blue host on because they're sent through their servers, we get to connect with their see Dan, which is gonna be all across the world. Okay, I'm gonna click on next year. I'm gonna choose the free plan. As you can see, we have the global seed in, which is amazing and also the free SSL certificates. I'm gonna click care and we can confirm plan and we get to do this for one free website which is more than good enough for us. And then we're gonna confirm So we're going to get to this page here and there's nothing that we need to think about because this is all happening Automatic. It even says automatic here, which is perfect. And what is happening is that they are changing their I, p or rather R i p to point towards their servers. So now all off our information that will be sending rather than going through blue hosts are going to go through Cloudflare. And that is what's being set up right here. So we're just gonna leave this be acid is and click on next. Now, this is where we have to get our hands a little bit dirty. But this is actually super simple. We need to change our name servers. So what we're gonna do is change or blue host name servers into the Cloudflare name servers . So the 1st 1 here, we're just going to click on copy so it gets covered, and then we're gonna go to blue Host. I'm gonna create a new tab here and log into blue hosts and then click on Logan. And then I'm gonna move over to do mains down here, and you can see it's his Robin and Jesper, and this hurts a little bit in the heart Doesn't know SSL. We're gonna fix that in a minute, and I'm gonna click on Manage, and then we're gonna go to name servers and here are the names service. You can see this the end, this one dark blue host dot com. And it's the in this one, the blue house that come the day you're asking us to change, so they want to have the end, this one into this one that we already copied, Right? So we're just gonna go here and we are going to click on use custom name servers and we're gonna change this one into this. There we go. And we're gonna do the same with this one. We're gonna cop it, go back, change the 2nd 1 and pay sitting just like that. And when we are done, we're gonna hit save, which is awfully far out to the right. My face is in the way, but it's down here in the in the right. I'm just gonna hit, save like that. So now it's been saved successfully. Really, really nice. We are going to go ahead and go back and click on continue. And now we're actually all done. All we need to do Well, it's not just already, do you? But we actually need to wait afterwards 24 hours before this change takes place. Now, in my experience, this can take as little as half on our John our But it can also take much longer. So we're just gonna have to wait and see the changes. Now, before we move on and do that, we're going to change and get our SSL right. So we're gonna move to crypto. That's right here. All of this is already set up we're gonna move to Crypto now. The first thing we have to change within the crypt of option is our SSL, and thankfully, we're gonna get our SSL back. Or rather we have already. So it is from the beginning, set to full and there are four different ones going on. The 1st 1 is off, which probably doesn't need an explanation. You turn it off, then we have flexible and flexible. This one is quite problematic because this means that there will be no security between your server and the Cloudflare. But there will be security between Cloudflare on your visitors, right? So they're still gonna be a security gap in between her meaning, you can get away with much less restrictions as the seller, wise and security wise. But the visitors is still going to see your website as secure. So it's kind of a fake SSL, if you will, and I don't recommend it for obvious reasons. It's not that secure, at least not from your and it's much more secure than than it is off. But it's not secure enough, then the next one we have is full and that it's actually full on its secure from your end to cloud flare and from cloud for it to the user. And this is the way you wanted to. You want all the way to be secured now? We also have full strict And what strict means is that you need some sort of certificate. So, for example, because blue Host is using a service called Let's Encrypt, we already have a certificate on our servers. Our servers are considered secure on because we're using Blue Host. We have the let's encrypt, and then we have the certificate and we can use to full strictness. So I strongly recommend that we go ahead and use this full strict because it is the safest . But if you are not using blue hosts, chances are you might only be able to use one off the other. Maybe even just flexible, then flexible is still gonna be better. But I still recommend that you check with your host your servers and make sure that you can go ahead and get on SSL certificate because it is so valuable. We learned that from the previous lecture, right, So we're going to keep it a full streak because we can, and we're thankful that we can. Then we're gonna scroll down and we wanna check some things out. And the first thing is always used https. And that's a part of it being strict, right? So if someone is coming in with http, you always want to redirect them to http, as we always want to use this secure encryption. Remember, the S actually stands for secure, and here we have automatic https rewrites. Basically, it changes all of the content researchers and links. It said on the site from Http to https. And we want that to be armed. That's great. Want everything to be encrypted and secure, and that is it for that. So next up, no one, everything is set up. We have our SSL and we have also set up Cloudflare for the Cdn justice. Or this is gonna take a world might take up towards, well, a couple of hours. But I'm going to cut to that so you don't have to see all the boring part. Then I'm gonna show you how you can see that it is actually working and functioning. All right, so it's been about two hours and it's been up and running for that time. Now what we're gonna go ahead and do is go to this website called What's my deena's dot net ? It's in The resource is and we're gonna write in our website. We're gonna right then, Robin and jesper dot com. And then we're gonna change this A and we're gonna go to end this, which is name server, and that we're going to click on Search because this is gonna allow us to see how far we have come. And we can see that we actually have some servers that has turned to the Cloudflare servers like the one in Ashburn. We also have the one in Cambridge, in Brazil, in Amerigo, Paris, etcetera. But we also have a couple that doesn't and not yet like in London, for example. We can see that because these are the ones that we put in manually and these sort of ones from Blue Host, which figures? Because they say blue host right now, in order to check or SSL and everything as well. And to get more information, we can use this check for Cloudflare dot celestic dot com. This is also in the resource is we're gonna go ahead and write in our website, which is http s column forward slash forward slash Always https. From now on, guys Robin and jesper dot com and then click on Scam. And here we can see that it has checked eight global locations and we have found Cloudflare in four the before England, Denmark, Russia, us not found in China, Germany, Spain and Netherlands. So it's still going to need a little bit more time. But the great news is that it is actually working. It also says that were used in the clothes lower cdn, which is fantastic news. It means it's working clearly. And it also says that we are using the clerk layer SSL, which means that that is also working, which is amazing news. So everything is working. Guys, we can really be really happy about this. We're gonna give it a couple of more hours and then we're gonna move on to the next lecture , check one more thing out, and then we're gonna do a new test that up time and check out the server response time. Okay, great job making it this far. See, in the next lecture 10. Home Site URL Connections: All right. So before we move on and we do the up time test to check the server response time, I want to show you something that's actually really important in the long run. And that is about the site and home your l Right. So if you go to your home page for us, that's Robin and jesper dot com here, and you click. You're gonna notice that we have https off course, always Asian to PS. And then we have Robin and jesper dot com. Now, notice that it does not say w w w dot Robyn and jesper dot com. Should I go in there? I'm just gonna be straight thrown back into this robin and jesper dot com without the double used and you might choose to use that you might choose not to use step. But at least I'm gonna give you the options off which to choose. And then we're gonna talk about the advantages and disadvantages. So what we're gonna do is we're gonna go to the back Jennifer website. We're gonna go to the dashboard here, and then we're gonna go down two sittings, and we're going to click on General and then we can see that we have board. Press address your l and site address, Ural. And if you would like to have your website as www dot your domain name dot com, this would be the place to changes settings and general. And here we have it. OK, now, there is no particular benefit of using the W's or using without. There are many major sites that use without, and many major size did use with. Okay, so it doesn't really matter which one you use. That's gonna be up for you to decide. But I want you to think off two things that's important, one that when you're writing whatever cited you choose, always make sure that you use that one. So, for example, if you are using the one that were used in without the W's, then when you are writing to people and linking it when you're putting it on your social media, when you're doing your digital marketing, for example, you want to make sure that you are not using that doubled using here because that's going to do a another redirecting. That's just gonna make the page loading speed slower, and we don't want that, okay, And that might sound like a minor. But in the long run, that's gonna become a major. So we want to make sure that we're always using the same. And the second thing would always using the same is that if you use this one for a while and then you decide to go with W w w like that, then the problem might be that Google sees that. Okay, here comes another side doesn't recognize your original site. And the problem with that is, if it ceased to identical sites, you're probably gonna be banned from Google search engines. And that means very little or no traffic. So we don't want that to happen. But in the early run, like we are right now, it's completely fine to go ahead and go in and change it. Right now, there's no benefit to using one over another. Just make sure that you pick one and you stick with it. I actually prefer this one. But the benefit off using the W's can, of course, be that a lot of people when they speak and they reference someone they used to double use , but it any rate as you start ranking in the Google search engine Cosco improves. This is gonna be your original. Cited Improved anyway, So they're gonna land here right away. The more important parties for your social media for a digital marketing. If you're doing any ads or anything like that, you want to make sure that you are always using the correct address. And if you want to change is this is probably the time now early on to changes and make sure that you change both off them. If you only change one of these, your website might break. And that's no fun, really isn't. So just change one off these. So then we're gonna go ahead and move onto the next lecture and do the speed test and then move on to the next issue and sold off one as well. And then I'm gonna show you what you can do if your site breaks. I know we have our backups and everything, but there's more things that you can actually do if it would break to see in the next lecture. Guys 11. Leverage Browser Caching: All right, guys, welcome back. Now, if you've been following me from the previous lecture, you will also have set up your cloud for see the end by now. If not, go ahead and do that. If that is what you're looking to do to optimize in this section. Now, before we go ahead and do a speed test in a loading page test, I want to talk about the next issue we're facing. What it is, what we can do about it. And then we're gonna go ahead and test our new Cloudflare Cdn for the server response time and also check out how to affect the leverage browser cashing. Okay, So what is Leverage browser cashing? Well, basically, it is the cash we know what a cash is already, right. It's about leveraging a browser cache, meaning we catch a lot of the things such as to see you, says javascript. Ah, lot of for images or backgrounds, etcetera to the browse or to the user to their computers. Everything will load much quicker now, the issue that we have right, and it's a small issue because you can see that it's actually in the lowest part in the priority list right here is that if you scroll down, there is no expiration dates or expiration time. Rather, it specified. And this is usually not really that big off a problem, because we're gonna go ahead and set up a match anyway, so that's gonna take care of this problem. But what it means is that it does not have a date or a time for when is gonna expire. So if you're updating your side, it does not automatically remove itself from the cash. And for some, a lot of people use different times for the cash, depending what kind of website, depending on how they wanna leverage etcetera. But what is important to know is that you're still going to get the updated side if you take care off the cash on your website. Now, if we have a look at Pat Flynn here on his website smart, passive income. This is the first test that we did earlier on in the section. You're going to see that he ought also has this leverage browser catching as an error. If you click on it, he actually has the same thing. Is we the expiration not specified on a lot of the things in here, but anyway, his website east performing very well and is loading super quickly and it's a small size now, the most important of all this off course, the loading time itself. And we're not here to get hung up on all the numbers, getting everything perfect. We want to have a great loading time for the user experience and for the S e o. Right. But what I want you to do is actually go to your cash plug in. And if you've been following along, you should be having the WP super cash. And if you don't, that's fine, too. There are a lot of cash it plug ins out there and I wanted to go down to this one in the advanced section. So you go to set things WP Super Cash advance and then go to this one is at 304 not modified. Browse or cashing indicate when a page has not been modified since it was last requested. So what this is going to do is that it's always when they're entering our website, they're gonna check their catch towards the current cash on the website to see if they are matching just to shake. Okay. Is there anything that is updated that needs to be updating Or if it is the same, if it is the same that nothing needs to be done. If something is up there is gonna update us. It's just something that's really worthwhile to have activated. So we're gonna click it in. We're gonna go down and click on updates. Status. And now, with this tiny difference that we have made with this tiny update, we're gonna go ahead and we're gonna do a new speed test to our website. Now, off course, There are a lot of more things that we could be doing in here. You could actually go into your HD excess files and sit certain expiration times for each off these files, and I'm gonna show you how to do that as well. Now, you could also go ahead and go to your HD access file and write in a certain code to set an expiration date. But that file is very sensitive. If something goes wrong, it's gonna break your website. I've been using it before, but I have not really seen any difference in performance in my websites be so I don't really bother doing that anymore, So we're not going to be touching that. It's just unnecessary work and also slightly risky work. We're gonna go ahead and we're gonna do another speed test, so I'm gonna click on start testing. All right, So the numbers are in, and as we can see, there's a really nice improvement going on. The loading time is improved. The requests are lowered. This size now just is a disclaimer. None of these is an exact science. If you run multiple tests, you might have noticed it goes a little haywire, also, depending on where the test is coming from. But it gives you a very good estimate that, as we can see in the previous tests, are loading. Time was hovering at 80.8 2nd and close to 0.9, and now it's hovering at 0.6. This is incredible. The requests are lowered. We can see 31 to 18. The size is likely increase. But again, these this might not. This is not pitch perfect. This is not pitch perfect. None of this is. But a total score has gone up to 71 from 63 on. This is just really, really great guys. Now, if we scroll down, you're going to notice that the leverage browser catching it's still a problem going on here. But it's gonna be until we set on expire time. And in my opinion, looking at these fantastic scores, I don't think we need to. And I don't think you should worry too much about perfecting these either. Now, this one is off course. Super interesting. Look at this. Now we're still getting a reduced server response time warning. But before that one was actually in the top off, the higher kit was the biggest current problem. Now it's at the bottom, even lower than leveraging browser cashing. So if I click on this one, we can see that the server has responded in 0.3 seconds and this is fantastic. Where is before? It was responding in 0.78 seconds. Right? And if we look all the way from the beginning, when our speed was loaning at 4.2 seconds, almost 4.3, remember, this was from Sydney, Australia. We also had a server response time of 1.1 2nd So almost over its second. We had to wait before the server responded and anything happened. And that was the time to first bite. Remember that. So right now, guys, we actually have a fantastic website going on. And if we compare ourselves with Pat Flynn, you're gonna notice that his loading speed is off course faster. And chances are that he is using expert to properly utilize his website, minimizing the image sizes even further off course maybe is using dedicated servers or VPN hosting while we were using the shared hosting in the most basic plan. And to be honest, we're doing really great even for that he has a zero point almost 0.4 and we are at 0.6 and the point is to be under two seconds. So we're doing really fantastic. Total size now our performances at 71 he is at 73 again, these are just abstract estimates from this side up time that come and nothing here is perfect. No need to go all crazy to perfect this. He also has these things going on. But one of his problem is not serve a response time. You can see he says green, and you're gonna get green if you serve. Response time is better than 0.2 and we're gonna have to upgrade either go from blue Host to, for example, site ground, which really fast host or improve our hosting at blue host to maybe a VPN or pro plan, or just be really happy that we're paying very little money for a fantastic service. And our website is working perfectly fine, guys, but as always, the actual proof is in the potting. Right? So if we go ahead and we were gonna load Robin and jesper dot com like this, we're gonna notice that it loads really quickly off course. But if you know what is that smart, passive income it past planes website it lows faster. But these two, while there is a difference, the difference is not huge. Both websites are loading really, really quickly and this is fantastic. If you're on the two seconds, you can have a fantastic website. Fantastic s you happy visitors. You have a great you i user interface and great, you X Now in the next lecture guys. What? We're gonna go ahead and do is actually look at all of these other estimates going on in here right now for me right now. And chances are for you to they might be green, but they may not be. So let's talk about what all of these other things are. And if they would have this warning sign what to do about them now? One last thing. I want to tell you about that. As always, this sort of tests are not perfect. And different tests give different results. We have the we have a test from Google and we also have the Ping dum test, and those are going to give you different suggestions. Different results. But as always, guys don't go crazy on this. The main point is to have a good score, a beautiful user interface, beautiful user experience, and then you are all good to go. We don't need to have perfect scores in everything. Look at Pat Flynn. He has an amazing website, amazing business going on, and he's doing 73 out of 100 not 100 out of 100. So let's talk about these other things, and then we're gonna move on. Okay? See, in the next lecture, guys, 12. Further Optimizations: All right, guys, welcome back. Now let's do some further trouble shooting for when your speed testing your website. So we've gone through a couple of issues already in the performance tab, right? We have done the first eliminating the render blocking JavaScript and CSS in the above the fold content. Now that's a mouthful we have optimized or images have gone through leveraging browser cashing, which we know is more often expiration time than actual cashing time. And we have also looked at how to reduce the server response time. And we have reduced the response time and gone through some options for further reducing it . Should we want to do that? Now let's look at the other couples here. Now there's more. That's green for us. And the reason that they're green is because a lot of these we have gotten four free. As we've been building up our website. Now, the 1st 1 is called me unifying html, and you're going to notice that we have magnifies Gmail men. If I and CIA says on down here magnifying javascript. So what is meant if I ng well, basically men, if I ng is when you are shortening the code, right? Because HTML, CSS and JavaScript are all different types off codes on what men, if eyeing the code does is that it saves up space by making it unreadable for humans but still completely readable for computers. So all of the spaces that the making the codes for humans like us to understand and be able to program they removed that So they remove size and they remove all off the white. The unnecessary space compress it. Basically, it is a compression, but the computers were still able to use it. But I assume it's it just looks like a big mess. So let me show you what I mean. So here we have a very simple code for changes in the color position on off the input feels when you are doing a form for male port, for example. So this is how a normal coat looks like when you mean if I it, we're gonna remove all off this space All of this wasted space over here. So what we would be doing then, while magnifying is going on and going in like this going in like this and going in like this and this so if you are doing any form of coding or programming and you get a bunch of code and it would be looking like this and let's say that there is a lot of code and eventually is going to be looking like this, but with a bunch of different inputs, that is just gonna be one big mess, right, because there's no spaces. But with the magnifying dust is that it does save the space by using it all in one line, says Quicker to execute. And the file itself is smaller and it works much better, or at least much faster for the computers. But a human is not going to be able to code. But you don't need to co this because you just need to execute it. So that is what magnifying is. And the men, if I ng we get from our plugging from our cash plug, it's right and the cash plug ins you could basically be using any. But we are using down in the setting say we are using the WP super cash plug in which Dustin unifying for us. But the WP super cash not only magnifies, but it also cashes it into a static file, so it puts all of those files all of them unified falls in the cash and then services. So it is one step further from unifying. So it makes all of the files very tired and very much compressed, puts it in a cash and then puts it in the user's computers. It loads faster. OK, now, if you don't have a catch, all you need to do is go to plug ins, add new and search for cash, and there are a lot of really wonderful cash plug ins Now, honestly, I've used to W W three the fastest cash, super cash, or to optimize, and they all work. I'm sure this one works as well. They all really work. But the one that I find most effective and easiest that I prefer is the WP super cash, which is why we are using it. We get a lot for free, like them unifying here Now. The next thing is to enable compression and decompression is basically when you have a file and you make it smaller. So men, if I ng is a form of compression for the HTML for the CIA, says for the JavaScript. But most importantly, what is the heaviest on our website are the images, right? So we've been spending our time optimizing our images big time by going for P and G to J peg and also by compressing them into a lower resolution file. So we save a lot, a lot off space and increase or loading time, and that is compression. And we have it enable also through plug ins like Smush, for example. So whenever we upload any form of image to our media libraries, much automatically compresses it. Then we also have the avoid landing page. Redirect. So if you have an issue with the compression, what you can do is go ahead and download a plug in like smushed. It's gonna compress. And also make sure that you do compress your images and actually use a cash plug into men. If I your files, for example, and cash all of your files to improve the loading speed and used as much compression as possible on all the fast, it can be compressed Now. Next up is avoid landing page Redirect. Now a redirect is when you get sent from one page to another So, for example, let's say that you were going into http Roman and jesper dot com. But then this page actually redirects you to the h t T. P s version off the page. Right? So that would be one redirect. But now this page also redirects you to the W W part off the page and then these spaces to really directs. And then this one re directors to the forward slash home. So now we would be having three unnecessary redirects that's going on on our website, but we could use to be sent from the first to the last without all of these middle redirects. Right? So this can sometimes happen when we get an issues with our SSL. Remember the SSL. So we go from http to https, But then maybe there's something wrong with https is going to send you back to http etcetera or any form off loop issue going on. Or maybe the page has just been set up in such a way that there are a lot of free directs. But if you're having this issue or there's something broken or you've been changing the URL , all you need to do is go ahead and go to the plug ins and go to plug ins, Add new and search for something called Redirect. Now, in here, there's gonna be this plugging called redirection. You can just install it and start using it right away. It's super simple to use is gonna ask you for the input. So when a person writes this your l they will be sent to this euro. So you just right into your l that you want people to use and then where you want them to be sent super easy. They will be redirected where you want them so you don't need any mid middle hand redirects , if you will. So super easy to use. And then we also have prioritized visible content on what this means is that we are prioritising loading and rendering the above the fold content. Okay, so when our pages being downloaded, what it's gonna be downloaded first and foremost is going to be the from the above the fold section on our page, this section you see how fast that loaded now everything down below, most likely loaded after all of this has been loaded already. And that is because when people come to our website so that this page gets loaded right away, right? So that is prioritizing in these content to be unloading first now everything that is below where most likely will have loaded slower. But that doesn't matter, because when people visit our site, we want to make sure that they are seeing all of this right away. And then everything down below can take its time to be loading. And that is what they mean with prioritising visible content. So So if you're having an issue with this, most likely the problem is going to be with your cash plug in or rather, lack of cash plug in because the cash plug in is going to make sure that you prioritise automatically loading off the most important files in the abduct, the fold section and everything that it's not important will be loading lower down because it takes longer, but they don't need to be loaded. So if we scroll down, we also have mobile usability, and we're getting ah lot for free here for two reasons. One, we're using the Ocean WP theme, which is already mobile, friendly and mobile adapted, but also because everything you do in L. A mentor is also very mobile friendly, so it's extremely giving and you get a lot for free by using these tools. Now we actually do have an error here that says size tap targets appropriately. If I click on it, it says the Taft or your privacy policy is close to one other tap targets final. And most likely it means that in the footer our privacy policy and terms and conditions links or to close on the mobile version. But that is fine because we haven't gone going ahead and adapted our website to the mobile responsiveness and to the tablet responsiveness. Yet right or website is responsive for tablet and for mobile, but we haven't redesigned them specifically for them yet. We're gonna do that in an upcoming lecture, so this will be taken care of itself soon. And then we have used legible font sizes, and this is more fun opinion off up time, which they are asking you to uses certain fun size and certain amount off words per column . So the general your site will look good and we do fill up this criteria. But this is more an opinion than anything. Then we have this ice content to view port, right? And this one. Make sure that you don't have to soon in on your cell phone when you're using it in order to read the content because that takes away from the user experience big big time. So when you enter a website on your cell phone, you want to make sure that you can just go ahead and scroll. Everything will be served readable, accessible, and it looked really good. But if there is no content that it's been size to the View port, you're gonna have to soon in on your screen all the time. And that kills user experience. So this just mean that it is sized appropriately and once again, Ocean WP and off course elementary. Thank you. And here that you need to configure the View port. How far out, or how far in you wanted to be soon and then this one, to be honest, is quite random. It says Avoid plug ins. Now, if I go ahead and click on this, it takes me to a developer at Google that comes site that doesn't even seem to exist. I'm not sure why you would want to avoid plug ins. I think this one is very, very random. But if we do look at Pat Flynn here and we scroll down, he actually has a small error here, and that is his media player that he has, or rather is a flash player. But this one, honestly, you don't need to be concerned about right unless there is some plugging it is taking a huge amount of space or that is crashing your Web site. But generally this one, it's not gonna matter. This nothing you need to do about it. But guys, if you are not using Ocean WP and you're not using elemental ER, which you should, in my opinion than what you can do to make your website more mobile responsive, it's actually to go here and go to your dashboard plug ins and then click on add New and then just search for a MP. Now a MP stands for accelerated mobile pages was gonna make it much faster on your phone and also gonna make it mobile friendly. Now, honestly, I haven't used this one or this one because I basically always use elementaries. I don't need to use this because elemental makes it mobile friendly as it is. But if you don't want to use elementary for some reason and you're also using a theme which is not mobile friendly by default, you can use one of these to plug ins is gonna make it mobile friendly for you. OK, so these are all of the possible errors now, as you're using other tests such as Google's Page Speed Inside and Ping DM, for example, which are other tools to be measuring your website performance loading speed, etcetera. You're gonna notice that you're probably going to get different results first and foremost , and also you're going to get different recommendations again. I recommend that you don't go too deep into this because you want to make sure that your website is fast. It is effective. It is a high user experience, high user interface. But don't go overboard aiming for the perfect score because in the end, the sort of obsession tends to just hurt the website. Focus on what's important and don't major in the minors, right? Look at the big problems, fix them, make it better, get the seed and get the cash, etcetera and then move on. This is my recommendation, guys. Now let's move on to the next lecture in the course. And of course, if you have any questions, will be in the Q and A, but we're gonna address something very important in the next lecture as well. So see you there. 13. Support: All right, guys, in this lecture, I want to talk about something really, really important. And this is primarily gonna be for those of you who are using Blue Host, right? If you're not using blue Host, chances are this isn't gonna apply to you can move on to the next lecture. But if you are using Blue host, I want to talk about supports. Now we've been talking about blue hosts not being the fastest host with the fastest servers . Right. And this is definitely true. And if you're aiming for pure speed, you can go for site ground, for example, which we know are faster than blue host. But one of the most amazing things, which is the primary reason why we love Blue Host so much is there support? There are more reasons, of course, like their SSL, and they're listening krypton certificate. But the support you get from Blue host for paying just a couple of bucks a month is absolutely incredible. Now I cannot begin to tell you how many times I have broken a website on blue host servers on Lee to go to the support to have some guy spend sometimes hours with me help me regain this. I tell me what I did wrong and then fix the errors for me and guys. I'm taking up hours and hours off someone else's time by paying a couple off bucks a month . Do you know how much it's gonna cost? If you're gonna have one on one support with someone and you're gonna pay from our that can be, like 70 or 80 bucks on our and here you're paying a couple off box a month and you can have basically as many hours as you want. So I strongly recommend when there's any issue with your website, go to the blue host support. Now, if you have any questions for your business, how to take it to the next step for this sign Or, you know, going moving forward than off course will be in the Q and A and you have the 24 hour rule were always going to reply to within 24 hours. But for these technical matters, I can so strong the recommended blue host support and it's also very easy. All you do is your clickable again. You go ahead and log in and then you click on the question mark up here and then you move over to chat. You can call, of course, but I like to shut. And then you write in your name, your domain and the domain name here. Next, you get to describe your issue, and then you will be put to the shot with someone might take a couple of minutes. Depends on how many people are using the service, and this might seem like a no brainer. But honestly, ah, lot of people get this service, but they don't use the support properly. And once again, I spent so many hours in the support it has helped me so much with issues learning, understanding. I cannot recommend this enough. And this is why I strongly recommend not only to use blue host but also used their support . Okay, so don't panic if you have any problems with your website. If there's something that you're not understanding, it's not working. Go ahead and use the blue host support. Now, Blue Host can only speak for the Blue Host services. If there's plug ins, etcetera, etcetera, you're gonna want to talk to us in the Q and A instead because they can't be responsible for all those things. But what I'm trying to say is you have a lot of support. Your blue hose, which are really experts for the technical matters. Everything. Blue hose. And then you have us in the Q and A for everything about the plug ins for the business sign , etcetera, etcetera. So take away message guys used to blue host support you bought If you bought Blue Hose, you got it included. Make good use of it. You will not regret it. Okay, See him the next lecture. 14. Mobile Design UI: All right, my friends, let's go ahead and make the user interface Absolutely beautiful for all of the people visiting our website on their mobile. Okay, so the first thing that we're gonna go ahead and do it's changed the size off our logo because we remember from previously that it was just too big. We're getting two rows when it came to the menu and the logo. So what I'm gonna do is click on customized up here, and then I'm gonna click up here, which is gonna take me to header and then logo. There we go. And now I'm gonna go ahead and see how the website looks on our cell phone writes I click here down here below, and we can see that we're having this issue, right? So the logo is just too big. The menu get put on the row underneath and we get all of this wasted space and all of the space is absolutely pressures when it comes to everything, but even more. Some cell phones, because the screens are so small. So as you can see on the desktop, this size is actually 280. And if I move over here to cell phone. You can also go down there. This is also gonna be on 280. But that is gonna be too big for us. So we're gonna go ahead and change this up a little bit. You can see that if I am a 280 like before is just too big. We're gonna go down. We're gonna go. There we go. So let's go with, say, 200. Now we can see that we have are our logo and our menu side by side. And we're saving so much space. Now, look, look at this once again. If I increase we get all this wasted space, go back down to 200 looking much better. So I'm super happy with this. I'm just gonna go ahead and click on Publish. There we go. Now let's head back into L a mentor. Alright, guys, who are back in l. A Mansour. And the first thing I'm gonna go ahead and do is go down to the bottom again, click a responsive mode and change it to mobile mode. There we go. And I am super happy with this right now with the logo and the menu looks perfect. We can even click on the menu. Let's see how this looks. Looks really nice. To be honest, I'm loving that. So we're gonna go ahead and do some changes here, like we can see right now that I think that this text right here needs a little bit more space. I'm gonna go ahead and change that up. So I'm gonna click here, and then I'm gonna move over to style, and we're gonna move over to typography, and then we're gonna move down to line height right here, and we're just gonna go ahead and expand this a little bit. Something like this. There we go. You can see that it's growing. They're exchanging the entire interface. Maybe that's a bit much. There we go. So we still want to keep in mind these things that we have the learn more button that is easily accessible, which is really, really nice and oh, so important. At the same time, the menu has become a little bit harder to reach because, remember, the thumb doesn't as easily go up there. But here, you have to make the choice. You're gonna have the menu easy to reach, and that's gonna be costing like, 15% of the screen. In my opinion, that's absolutely not worth it. So it's much better to put the menu a little bit higher and give them more off the content . Right? So there we go. Now there's some more space in between here. I am liking that, maybe even a little bit less. Actually, the line height may be a bit more. They there is our sweet spot. There we go. So I'm going to scroll down and see if there's anything else that I am not a big fan off. So we can see here, for example, that this text is getting quite crammed upright, but it's still very important information. So what I would like to do is change the look on this entire section. So I'm gonna go ahead and click on on the edit section here, and I'm gonna go ahead and remove some off the padding because you can see there's a lot of wasted space here. It's a lot of wasted space here, and that looked really good on the desktop, but that doesn't look quite as nice on the cell phone. That is just wasting pressure space. So what I'm gonna go ahead and do is check out how much of the padding is actually on top here right now so that we can keep this padding the space in between the the different sections, but then removed the padding to the sides. Okay, So in order to do that, I'm gonna click on the padding and then go to desktop and we can see that it is said to 50 . And what that means is that these even though there's no numbers, these are also automatically set to 50. That is how the Automatic Mobile Responsive Mode works. It just sets the same numbers. Now, the website is beautiful, even on a cell phone, but it nuts completely optimized. So what I'm gonna do is unlinked these values and then I'm gonna leave the top on 50 like that. So we still have the same amount of space going on going to remove that Syria like that. And then I'm just going to click on and write one one in here and one in here, one in here. Now, this is already looking much better, but I still think that the padding is a bit too much here for the cell phone. So I'm gonna go ahead and decrease that to let's say 25 might look a little bit better. So if we go down and we look at the top, we can see that this is the best. Actually, pops up here on the top, and I am liking this. So you get into this entire screen, right, and we get this text down below. Now, there are two things we can do. Either We can leave this the way that it is and we can get. This is the best and most takes on our phone. Or we can actually increase the size off this background now scrolling down. I'm actually really happy with this. You can see that there's much less space wasted here, and we still have this wonderful quote still here. Now, I'm still gonna want to cover this entire above the fold section with this background, So I'm gonna move over here, click on the section and then move over to the minimum height, right? And I'm going to be increasing it a little bit just like that. There we go. So now we can see that it's covering the entire first partier. Now, this is affecting the rest of the decides. Now we might want to go back here to this takes, go to typography and change the line height a little bit. There we go, looking better and maybe a bit more spacing in between these columns. Right? So let's move over to style up here and let's move over to typography and play a little bit with the line heights. There we go. Something like this. So this is starting to look really good right now. I might want to use even bit off more. There we go. Business made easy letters show you how. Okay, now, if we look at the background, we can see that the moon is actually covering up. That takes a little bit. What we could be doing is changing the position off the background as well to see if we get a better look. But I'm actually quite happy about this. So we're gonna go ahead and scroll down and we can see that the quote hair still looking really good. Now we're removed the space in between. Actually, we added a bit much here maybe, but I think it's good. It's also going to depend on the resolution on the cell phone. So we're going to scroll down. It says, get digital marketing hacks for free, right? Get the lazy marketing hacks. And this is actually looking really good already. Now, there are a couple of things that you might want to change. Now, just clicking here kind of updated this part. There are changes happening because we are moving around the different bits. And I am liking this big time that we have this full $99 value right here. Sign up down below, and we'll have it sent to you. Okay. Looking really good. Super happy about this. What I might want to do, because now we have her back, which is quite dark, set up against our dark takes, which works really well up here. But not so good down here. For example, we might want to actually make this part bold. Right? So I'm just gonna go in here, I'm gonna select this, and I'm gonna make it bold. So now it's a little bit easier to read and to see, and I am digging this design there. We go, and this form is looking super nice. We know that it's actually side by side on the desktop on on the mobile version there down below, where we know also that the thumb will easily reach to click on my first night on email and also easily reach to click. Send me the hack. So this is actually really good design? Yes. We're gonna go ahead and scroll down and these air looking absolutely dreadful. This is This is not good. And this is because of the padding that we're using in the padding. They make a lot of sense on the desktop. They look beautiful on the desktop, but they don't translate well to the cell phone version. So what I'm gonna do here is start editing these a little bit. So I'm going to start by clicking on the editing, the section up here, and start playing around a little bit with the patty. I'm gonna move over to advanced. And now we are in the cell phone mode. And first we need to shake what the padding currently is on the desktop and we can see that it's set to 70. Right? Okay. It's set to 17. Now, let's move over. Back to cell phone. 70 might be a little excessive here, so I am going to only these once again because I do want the padding on the top. And I'm gonna set that to 50. Or let's go with 20. Let's go with Let's go with 40 this time. Okay, so we're gonna set this before. They were also gonna change this size a little bit, so it looks better now for these ones. We might want to set them to one. We could see that they change themselves when we are linked. So these are actually started to correct themselves a little bit. If we scroll down, we can see that we're getting one course covering the entire screen at a time. And honestly, guys, this is looking quite nice. This is quite solid. So all I really needed to do and with this butts and as well. So all I really needed to do was to on link this and that changed the padding for the cell phone version and everything is looking much better already. So I am definitely digging this now. What we could do is or should do, even is changed. The headline here The Header because he's looking absolutely dreadful and what we're gonna start off by changing is the size because they're not looking good in this size right now. So let's go ahead and play around a little with this. Do you wanted to have a one row or two Now? I wanted to be on to, like that best selling courses. So now it's gonna make a lot more sense, right, because you can read it and there's less space in between these, and that looks much better. I prefer to go with 50 or 70 in the padding when it comes to desktop around 22 14. When it comes to Mobile completely depends on the design, but here I think it looks really good like this. So we have the best selling courses, and then we're gonna have the course is rolling in like this. The buttons or there is one course at a time. We have a little space on the sides, but this is just a good part off. The design is looking magnificence scroll down. We have the view, all courses that is covering pretty much the entire screen and then down below had the privacy policy in terms and conditions. So, guys, right now I'm actually really happy with this design, right? This is looking really good. Really nice. We have mainly changed the spacing between the letters and the padding. So when it comes to breaking your design, it's usually gonna be the padding. And this is gonna be very individual for your website. What do you think? Looks nice, etcetera. Now I'm doing this very intuitively, meaning there's no plan behind what I'm doing. Or rather, there's no preparation to what I'm doing. I'm just deciding to what I think looks nice and asked, I go and I continue to signing the website. I may come back and do some changes, but right now I actually think this looks really good. We have the free on its own row, which I think looks quite nice. But what we could also do it's changed this header, go to style typography and play around a little with the size, for example, is gonna look good if they are on three roast. What about two rose, two roses too small, three rows Looks OK, but actually I think this might be a little bit better. So I'm going to keep them on three rows like that. They would go, and I'm really liking this. So, guys, this is how you do it. All you need to do is first of all, if you have a problem with the menu, do like we did in the beginning of the course, then move over to L. A mentor, go down to responsive mode and change to mobile. And then the primary things you're gonna want to change our want, the letter spacing, spacing in between the letters like we did in the beginning here is gonna be to this size off the takes, the headers, etcetera, and three the padding. Now the padding is a big breaker off beautiful designs. So when you link the padding is just gonna change up the entire decide big time. So I'm really happy with this guy's. And now, don't worry, this is not going to be affecting your desktop design whatsoever. What happens in cell phone mode stays in cell phone mode. OK, mobile motives for mobile mode and desktop is for desktop, right? So nothing has changed in here. We still have this nice beautiful. This sign. What we're gonna go ahead and do now is move over to the next lecture. We're gonna talk about the tablet design. Okay? Which is also very important thing to do. But by far, primary ones are desktop and cell phone, with an extra emphasis on cell phone. Because more than half of your traffic will be coming from there. If you have any questions, will be in the Q and A so see in the next lecture, guys. 15. Tablet Design UX: Alright, guys, let's talk about the tablet designed for user experience. Then in the next lecture, we're gonna go ahead and focus on the tablet designed for the use or interface. But first thing is first. What's so special about a tablet to sign? Well, as we know it, Tablet looks like this about now. They do common varying screen size that we can have really small tablets. We can have really big tablets. We can have vertical, and we can have horizontal tablets. What is interesting to know, though, unlike the other devices such as Mobile is generally and desktop is that they have two very common modes off using them. Now. The 1st 1 is actually called the portrait orientation, and that is when you're keeping it in this kind of vertical mode like we see in the picture . Right now, the second way that you can also be using it is putting it to the side like this, and this is called the landscape orientation. And this is also very important to know about, because depending on how they are using their tablet, that's gonna affect the design off your website. Now it's worth knowing that when it comes to mobile users. About 90 think it's 93% of all users actually use it in the portrait mode, meaning they keep the phone upright with their one hand like this. Now, when it comes to the tablets, the scores are a little bit different. First of all, the smaller the tablet is, the more likely it is to be used in a portrait mode, right, so the bigger the screen gets then, more commented, is that people use it in a landscape orientation. Now there are two common manufacturers. That's android, right? The android versions of the tablets and then we have Apple and apples tend to be much bigger generally than Androids. So Apple users are the only users who actually use more landscape than they do the portrait . But here's the caveat, guys that most by far the most habit being solder actually android tablets. So that means also that the most common mode off using their tablet is the portrait mode. So we're going to keep this in mind for our design now. On Lee, 4% off the traffic to a website comes from the tablet is worth knowing that when people calculate their mobile traffic. They generally include the tablet traffic in the mobile survey, right? So the previous lecture we went through with the mobile traffic that's usually gonna have the tablet included. But the tablet traffic is general is so small that it doesn't make a big difference is still over half of all the traffic. It's using mobile, meaning your cell phone rather than just the tablets or the desktop. But I've never seen a study that ever shown that more than 10% of the traffic worth tablets . So we know that a very tiny portion off the traffic to your website general come from the tablet. But here's where it gets very interesting because they have the double retention time on tablets compared to the Mobil's right. And that makes sense because people who go to a website on their cell phones they're much more inclined to be searching for something scrolling through and then going back. So the bounce rates are much higher on mobile than on tablets, generally on tablets. People are actually looking for entertainment or they want to read something. They are more settled. Which brings me to the next point as well, which is that 60% of all of the people who use a tablet they actually mount their tablet right? That means that they put their tablet on something so that they can use both of their hands on the other 40%. They're still going to beholding the tablet and then using their older hand to be using the Talbot and scrolling through and clicking etcetera. So that means that about 100% of all tablet users used both their hands. And that makes a lot of sense considering the size off these things. But this is good for us to know, because that means that unlike on cell phones, people are gonna have an easier time to reach all of the places on the screen where it's on a cell phone. There's gonna be easier and harder places to reach on. This doesn't mean that you have completely free range with the designs. They're still gonna be more unless accessible. This signs where you put your call to action buttons where you put your important information, etcetera in order to optimize your website for conversion on cell phones, on tablets and on desktop, they're all three different devices and interfaces and, of course, user experiences. Now, with a tablet, unlike a cell phone, you actually have much more space, right? But the one thing to keep in common here that it's a very common mistake when it comes to user experience. This sign for tablet it's the people put too much junk on their website. For this design, less is still more. Now You have to be really careful when you are focusing on user experience and user interface for a cell phone, because you don't have that much base here. The stories differently actually have a bit more space, but it is easy to put too much junk in the screen, getting a content and information overload. Keep it clean, keep it really nice and clean and think of it like a more accessible part off a cell phone . But you still need to make it look different and look good, But don't clutter it. Don't clutter it. Don't put too much unnecessary stuff. Keep it clean, keep it accessible and prioritize your content. And finally, even though the majority off the uses are used in the portrait orientation, meaning they keep it vertical on their tablets when they're using it, you still need to make sure that do you account for the landscape orientation? And what I mean with that is that, for example, you might think that creating a list like this is a good idea because it looks really nice . You can you scroll through the list with your content and it does look nice. Now, the problem with this list is that when you go from a portrait mode into landscape mode, it just doesn't look that nice anymore. We can see that there is a lot of waste of space to the right that is either gonna be a filled with nothing or B is gonna be filled with a bunch of content that's just gonna be content overload. So this kind of list, the sign is just not going to work now. If we use another design a classic block design, for example, where you have your big content in the front and then you have smaller pieces down below with, for example, your recent posts with your articles with tutorials or your products, whatever it is to you offering, there's gonna look really good in a landscape mode right, because we can see it looking really good there on the screen as well. And if you flip it over to portrait, it's still gonna look really good. It's just gonna look a bit different. It's just gonna general, if it a bit more and be a bit smaller, but it's still gonna look really good, and you might want to change the sign. There s well. So instead of having six different products pop up, maybe only when I show six, because you want to make them bigger, etcetera. But the point is, you need to make sure that you account for the landscape mode asked. Well, so don't use the list design. Now let's move on to the next lecture, and we're gonna adapt our website for tablets, even though it's just 4% of traffic, 4% when you're having thousands and thousands off visitors, that's going to get big, especially when we know that we have doubled the retention on the website. For those users, and retention we know means how long people are staying and interestingly mobile users. They prefer to stay for about four minutes on average, while tablet users there happens to stay two up towards eight minutes and above very interesting statistics. So let's move on to the next lecture and start designing for tablets. 16. Tablet Design UI: All right, guys. So in this lecture, we're gonna go ahead and focus on the user design on our home page and website for tablets . Okay, so you know the drill. We're gonna use elementary. We're gonna go ahead and go down to responsive mode and click on Tablet. And here we are Now, I'm not gonna go crazy on this one. I'm gonna be very intuitive. And actually not mixture too much if it doesn't need to. Because remember, we're gonna have a lot of pages to be optimizing and to be designing, especially for desktop and very much especially for mobile and tablet off course. You want to make it look good, but still 4% off your traffic, right? So make it look good, but don't go crazy here for the design. Don't major in the minors is my opinion. So let's go ahead and check this out. Now, I am actually quite happy with this one. I do enjoy the design. We're getting straight to the point. In the beginning, we have to learn more. We have the next section popping in. There's nothing that I intuitively really want to change. So I'm going to scroll down and check out the wrist. I think this looks really good and nice to now this one. I'm not as big off a fan of. We can see that there's a lot of space going on in here. We can see that There's a lot of space going on in here, so to me, doesn't make too much space. What I'm gonna go ahead and do is actually listen the size off this background image. Now, I think it's really nice and beautiful because it is covering the entire screen like this. But I still think that there is a bit too much space in between the sections. So I'm gonna go ahead and click up here, and then I'm gonna move over to style. There we go. And then I'm gonna go ahead and move over to lay after stay at layout, Rather, and I'm going to start playing around with the minimum height. Right. So I'm gonna go ahead and see what looks good, Something like that. There we go. So now when we're scrolling through this, we can see that it's not covering the entire screen like it did before, which is really beautiful. A special on desktop and on mobile, in my opinion. But we also have to account for the if we're using the portrait or the landscape mode Now, I want to be a little bit more straight to the point here. So as we scroll down, we actually move over. We have the email open that we move or to the best selling courses. So maybe a little bit bigger. There we go. So we don't have this same crazy amount of space, but it's there we go. OK, that's the sweet spot. So not doing anything to create to hear the text is looking good. Everything is looking the way it should. Really happy about that. Now what? We could also go ahead and do like we did in the mobile version is make this part bold. Right? So we're just gonna go in here and click on the B, make this part bold because we're on towards her back in here. So this suddenly is easier to read. Really digging this so scrolling down? Would you have our courses right here? Well, it's looking quite nice, to be honest. Now, I think there is a bit too much white going on around these. So I'm gonna go ahead and remove the padding for the white ones, which is appearing in the columns. So what I'm gonna do is click a pair for the edit and edit this column, and then I'm gonna move over to advance in here. And now, in order to properly edit this, what I need to do is know what the original sizes organically come desktop here and we can see that the padding is 50 right? Patting his 50. So let's go back to tablet. If I write 50 nothing is really going to happen because that's the original. It just doesn't show up here. Now, I'm probably gonna want to use about half, so I'm gonna write 25 something like that. So it doesn't take quite as much space they were go. I'm liking that design, so I'm just going to click on this one. Go to advance, move over to padding and write 25 here. Swell. Do the same here. Over here. Advanced padding 25. There we go. A bit more clean. I'm digging this look much more much. Nice. Straight to the point. Now I would prefer there to be a little bit more space in between these courses. So what I'm gonna go ahead and do is actually increased the margin between the courses and the easiest way to really do that. To be honest, is click here to edit the middle column. I'm gonna go to advance, and then I'm gonna check out their regional. That margin is 30. Okay, I know that's gonna go back. Make sure I'm still here. And now I'm going to write something like safe 50 50. Might be good. Okay, maybe even 70. There we go. So I think 70. Well, maybe that's over doing it a little bit. I'm gonna do 50 like that. I'm I think this looks quite nice. So there's a bit more space going on. And also, this box is getting a bit smaller, so I'm gonna apply that to all of the columns. They're go Gonna right margin 50. And I'm going to write the margin in here as well. Fifties, I'm hitting two birds with one stone. This terrible expression, by the way. And I am making a bit more space in between while also making this smaller. So I am digging this. I think this looks really nice. I think there needs straight to the point. I'm a big fan of this. Looks very nice to be honest and proud to see it. So this has been my tablet designed for the user interface. Now it's gonna be up to you how you decide to do your decide. It's a completely individual. Just keep the user experience in mind, right, Because they're gonna flip this over. It's gonna look different, but we're not using list. For example, this is still gonna look fine. This is still gonna look fine with mice. Have them on the same row. We'll see. But anyway, nothing is gonna look too crazy because we have kept the design in mind. Now, the final thing I want to show you is that if you move over to a tablet to sign, or maybe even to a mobile design, what might happen sometimes is that the if you're using multiple columns would in a section they might switch places. Now, there's nothing actually in sight off this column, right, Because if you remember, when we were at the disc abortion, we were actually using a an extra call them in here in order to put this more to the left. So this columnist empty and that is perfect for desktop. If you go to tablet, it just puts down below here. Okay, Now, because we're using a tablet and were used in cell phone responsiveness. Is these stack? Right? We can see they stack because this is on the top. This is on the bottom. So if we had any content in here, I'm just gonna just for show here, let's say that we had this texting here, but they were stacking in the wrong order, right? We did not like this. All we would need to do to stack this properly is go to edit section a pair and then over to advanced and then down at responsive here. And there's something that says reverse columns for the tablet this time. So if you would be feeling these ones out, then they would be reversing for the tablet and for the mobile. Right? So now we can see that this one is actually on top. This one is below, and all we would need to do it's just reverse these and put these often they're gonna change back to their original position. And again, this is because the responsiveness is going to stack a lot of your content, which looks beautiful, to be honest, very fluid design. It helps us a lot, but they don't always stacked the way we want to. Great job guys. Now we know about the user experience and user interface for desktop, for Mobil's and for tablets. It's time to move on and start editing and designing more pages on our website. And now we're going to start using templates and explore how we can customize these to create pages easier, faster and off course and make them look absolutely stunning. So see in the next lecture, guys.