Easily Speed Up WordPress: How To Optimize Your Website & Make It Load Fast
- December 20, 2023
- Posted by: MainInstructor
- Category: BASIC Go JavaScript PHP
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703065334_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Easily Speed Up WordPress: How To Optimize Your Website & Make It Load Fast
Hey this is Lois from oxygen and today I’m going to teach you how to get your WordPress websites to load fast and this is going to be easy you don’t need to write any code you don’t need to be a performance optimization expert you don’t need to tweak your server
Configuration you don’t need to mess with your database and you certainly don’t need to buy any plugins you just follow along with me step by step and in 60 minutes you can have a fast website so here is the website that I’m going to be optimizing this tutorial and you’re
Just gonna follow along with me step by step and do these same things to your website and before the optimization we have a fully loaded time of 5.1 seconds which is terrible and a total page size of 13 point 6 megabytes which is also terrible and after optimizations we got
A fully loaded time of 435 milliseconds which is lightning fast that’s less than half a second and a total page size of 386 kilobytes now we didn’t change this page at all it’s the same page same content on the page we just optimized it and it’s not 35 times smaller and loads
12 times faster now before we get started I want to explain that we’re gonna focus on actual load time and I also wanted tell you what you’re gonna learn in this tutorial so speed is measured by a clock by a timer not by a letter grade because a good letter grade
Doesn’t necessarily equal if fast load time in this chart here we got a on page speed and a on yslow but we’ve still got a fully loaded I’m a 6.8 seconds and a page size of nearly 12 megabytes so what we want to do is make the page load fast
For the end user that’s what actually matters because in the modern era fast load times are absolutely essential Google now is saying that speed is actually a ranking factor so a slow loading web site could be penalized by Google and rank lower just because it loads slowly and according to internet
Marketing expert neil patel 40% of people abandon a website that takes more than three seconds to load if that doesn’t motivate you here are some statistics from Google from Google that says is page load time goes from one second to three seconds your balance rate goes up
By 32% one to five seconds bounce rate goes up by ninety percent one at ten seconds bounce rate more than doubles in fact it more than doubles at six seconds so if you don’t want people bouncing off your website then according to this these stats obviously every website is
Different you can cut your bounce rate in half simply by reducing your website load time so that’s obviously huge now in this tutorial we’re gonna focus on three simple steps to get fast load times so the first thing we’re gonna do is eliminate unnecessary bloat from our
Pages when you build a website with WordPress often you have a lot of plugins installed and WordPress itself loads up some extra bloat that is typically unneeded on most websites so we’re just gonna go through your page see everything that’s loaded on your page and then eliminate anything that
Doesn’t need to be there and then we’re gonna reduce the file size of your actual page so once we eliminate the unnecessary stuff we’re gonna say okay what we have here now is actually needed how can we optimize this how can we compress this so that it takes less time
To get to the user and then we want to make sure the page is delivered to the end user quickly by the web host so we don’t want the user going to your website calm and then your web host sits around for two or three seconds before
It actually delivers that page to the user we want that happening instantly so I’m going to teach you how to read a waterfall chart so you’re gonna basically see each thing that’s loaded by your page and then you’re gonna see how much time each thing takes to load
So things loaded by your page might be the page itself images on the page fonts used by the page tracking scripts plug-in Styles plugins scripts that sort of thing and you’re simply gonna go through this list see how much time each thing takes to load and then anything
That’s not essential we’re gonna remove in anything that’s slow we’re going to optimize so it’s gonna be simple and straight forward and this way we’re not gonna waste days chasing a perfect score but get us loading website you’re gonna invest minimum time and you’re gonna get a fast
Website so one last thing I want to do before we get started is plug oxygen-oxygen is the visual builder that is made by my company and if you don’t want to build a website with bloat on it start with oxygen because when you build a blank page with oxygen
You’ve only got 23 kilobytes of stuff loaded by that page whereas if you put a blank page with beaver builder your start with 325 kilobytes with Divi nearly a megabyte with Elementor 604 kilobytes and these numbers are without jQuery and without Google Fonts just to be totally fair but I mean you’re
Starting with big big numbers using these other tools so you’re gonna have to clean a bunch of crap off your pages if you do that for example here’s the everything loaded on a blank page built with element or just a heading in a button right we’ve got it’s loading font
Awesome even if you’re not using it it’s loading code for animations if you’re not using it use the default front end styles for our 270 kilobyte switches ridiculous um it’s loading this jQuery Swiper library for a slider but if you’re not using a slider you don’t need
This so this is stuff that you’re gonna have to eliminate by following the steps in this tutorial um and you won’t be able to eliminate some of this stuff like these front end stars you’d actually actually have to go into the stylesheet and tweak the code manually whereas with beaver builder again bunch
Of stuff you don’t need magnifico pup what if you’re not using it um you know just unnecessary stuff a blank page with Divi same deal I mean 596 kilobytes for the styles I I don’t know what is in there uh two hundred and fifty two kilobytes of custom Jess Divis the toughest to
Optimize out of these four and then a blank page with oxygen is there’s the only stuff that’s there is stuff that you put on the page ok let’s get started the first thing we’re gonna do is find and eliminate unnecessary bloat here is the site that we are going to be
Optimizing right now it takes 5 seconds to load and we’re going to get it down to 0.5 seconds half a second so we’re gonna make it load 10 times as fast as it does now and this homepage is relatively straightforward it doesn’t look like it would take 5
Seconds to load right we got a hero section some basic content couple images and if footers isn’t really straightforward but it’s still taking five seconds to load so the first thing we’re gonna do to get it to load faster is we’re gonna eliminate plug-in bloat and we’re gonna eliminate WordPress
Bloat so there’s some extra stuff loaded by WordPress vid is often not necessary on your site so we’re gonna eliminate that and also any plugins that you have installed they might be loading things on various pages of your site they aren’t absolutely necessary so go ahead open up your own website log
Into the WordPress admin panel and follow along with me and step by step I’m going to show you exactly how to identify and eliminate the bloat on your site now before getting started if you have any optimizations plugins active like Auto optimized you’re gonna want to disable that for this stage of the
Tutorial you can re-enable it later but the thing is we need to see each thing that your site is loading in a waterfall chart that way we can remove the unnecessary stuff so let’s go ahead and get a waterfall chart and find II bloat
On this site so we’re gonna go to G key metrics dot comments GT MEP r IX comm this is my favorite performance testing tool and then you’re just gonna go ahead and paste in the URL to your site and you want to make sure it ends with this
Trailing slash here you don’t want to just the dot-com dot pro dot whatever you want to make sure it ends with that trailing slash so we avoid getting a redirect in the performance report so once you paste that and just click analyze and this is going to load your
Site and see how much time it takes to load and give you a list of everything that’s being loaded by your website so here is our performance report and we’re getting a fully loaded time of 5.1 seconds so we want to make this faster so the first thing we’re going to do is
Go over to the waterfall tab that’s right here and click that and then scroll down and this is gonna give you a waterfall chart this is a list of everything that’s being loaded by your site when a user goes to your site com here is everything that gets loaded so let’s go
Through this list and find the unnecessary bloat that’s being loaded here that we could disable so you’re gonna see it’s gonna say get and then it’s gonna when you mouse over you’re gonna see a URL to the resource that it’s actually retrieving then over here you’ll see the size and then over here
On the right you’ll see how long it takes so okay we request our web site dot whatever that’s fine of course we need that next thing we’re loading web font j/s from google where well we’re using google fonts so that makes sense the next thing we’re loading is you’re
Gonna have to look at the URL and read this WP dash includes slash CSS slash disk slash block library slash style dog min dot CSS so this is a file that’s loaded by the new wordpress blog editor known as Gutenberg and we’re not actually using Guttenberg on this site
We’re certainly not using it on the home page here this was built with oxygen so we don’t need to load this file the site so remember that we’re gonna disable that next thing we’re loading is BB press dot CSS so a lot of times you can tell from the file name that it’s
Totally obvious where this is coming from obviously the BB press plugin we have installed this is a forum plug-in it but this doesn’t need to be loaded on our home page this should only be loaded in the form section of our websites where you go ahead and disable that next we’ve
Got you’d have to read the path here WP content slash plug and slash easy digital downloads so obviously coming from the easy digital downloads plug-in these styles are probably necessary to handle you know check out form download buttons etc but since we don’t have those on the home page of our site we
Can disable this on the home page of our site next up we’ve got some files from oxygen these are necessary because we are using oxygen on the site we’ve got jQuery which is tip necessary but sometimes it’s not you can try disabling and see if your site still
Works it’s usually necessary for things like you know dynamic JavaScript type stuff next thing we’ve got is this request to stripe comm so that definitely shouldn’t be there now we have this plug-in installed easy digital download stripe payment gateway and this is so we can process credit cards through stripe
The thing is though we need to process the credit card after the user buys the thing goes to the checkout page enters their credit card number we don’t need to be loading any stripe code on our homepage because we’re not doing any credit card processing here on our
Homepage so we’re gonna definitely want to eliminate that um next up we’ve got Google tag manager so we’re using that to track our analytics so that’s fine then we’ve got some images that are on the site we’ve got something from Google Fonts while we’re using google fonts although we’re gonna optimize these
Later um then we’ve got another file from bebe press so again often you’re gonna have to read the whole URL and kind of figure out where it’s coming from easy WP content / plugins / whatever the name of the plug-in is that’s the plug-in that’s loading that file then
We’ve got another file from easy digital downloads we have something at WP includes that means it’s WordPress default stuff this is probably not necessary on most sites so I’m gonna show you how to disable that then we’ve got all of our font files right fonts G
Static com um then we’ve got more stuff from stripe we’ve got a lot more from stripe down here so we’re gonna disable all of that we’ve got Google Analytics which makes sense we’re using Google Analytics on the site um use a lot more stuff from stripe so let’s go ahead now
And clean up all of these unnecessary assets that are being loaded on our site so the way we’re going to do that is we’re gonna install a free plugin so go to your WordPress admin go to plugins click add new and then you’re gonna search for a plug-in called an asset
Cleanup so in search plugin just type in asset here we go and this is the one you’re gonna install asset cleanup page speed booster make your website load faster bla bla bla so Install Now and what this plugins gonna do is let us disable all the stuff
We saw in this waterfall chart that’s unnecessary from loading on certain pages of our website where it’s not necessary so let’s go ahead go over to our home page and clean this stuff up so let’s go to pages home edit so now that we’ve opened up our home page for
Editing we’re gonna see the asset cleanup box now if you don’t see this box because you’re using Gutenberg editor then you may need to install the classic editor plugin because asset cleanup may not yet be compatible with Guttenberg maybe by the time you’re watching this it will be Gutenberg still
Very new it was just released so if you don’t see this box install the classic editor plug-in you’ll see the box once you make your changes then you can disable classic editor go back to using the Guttenberg block editor anyway in the asset cleanup box it’s basically
Just gonna give us a list of all the styles and all the scripts that are being loaded on this page and we’re simply gonna unload the ones that aren’t necessary so here we have BBP default and if you look down at the source this
Is for BB pressed is what we saw on the waterfall chart we don’t need it on this page in fact we don’t need it on any page of the page post type we only need this on our forum so let’s just unload on all pages of this post type next up
Easy digital download styles well we may need to run a checkout page but we certainly don’t need it on our home page let’s unload it on this page or we can unload it everywhere and then make an exception to load it on our checkout page for example if you only need us on
The checkout page unloaded everywhere then edit your checkout page and make the exception so I’m going to choose unload on this page oxygen while we’re using oxygen on this page so we’re going to keep these oxygen styles and then down to scripts here is the stripe j/s script unload on
This page BB press editor unload on this page um easy to do downloads Ajax unload on this page or you can unload everywhere unload on all pages of post type that’s up to you you’ll you don’t have to make this decision based on the way your website works and what these
Actually do so okay now that I’ve done this let’s go ahead and update this and then the next thing we’re going to do is we’re gonna remove some default wordpress blog that’s the things like the gutenberg block styles for not using on this page and that sort of thing so
By default asset clean up doesn’t show those so you have to go to asset cleanup settings and scroll down and you’re going to disable this option hide wordpress core files from the asset list well we don’t want to hide wordpress core files we actually want to show them
So we can disable the ones that are necessary so you turn this option off then while we’re here we’re gonna unload some common things that wordpress loads the almost nobody needs so do we need emojis no we’re not using emojis on this side if you’re using emojis in your blog
Posts then sure leave this enable but otherwise why are we loading JavaScript for emojis by default WordPress very silly so disable this on jQuery migrate so this allows older jQuery code to work with the latest version of jQuery but the thing is unless you’re using a really old theme or plugin or something
You know it’s ancient you probably don’t need this so we’ll disable that and we’re not using WordPress as a blog here so we’re not letting users leave comments on our site so no reason to load this either so let’s go ahead and unload that and now let’s go ahead and save changes
And now we’re going to go back to the homepage and take a look at any wordpress blow that’s being loaded here in the asset list and disable it so WP block library we don’t need that this is for Gutenberg but we’re not using Gutenberg anywhere on their site so
Unload everywhere and you may be able to get away with disabling jQuery it depends what we’re using on this site the mobile menu actually collapses into a toggle and we’re using jQuery for that so we’re gonna leave jQuery enabled but if you don’t need jQuery may as well
Disable it no reason not to test and now we’re here’s WP embed this is for embedding things like YouTube videos Twitter cards etc and your blog posts if you have a blog where you’re posting YouTube videos or Twitter cards you’re gonna want to leave this enabled at
Least on your blog but we don’t so we can unload it everywhere or if we did have a blog at least we can unload it on all of our pages and leave it enabled for blog posts so let’s go ahead and save this and now let’s go ahead and run
Another performance report so I’m gonna keep this one open so we can do a before and after go to GT metrics calm again GTM ETR IX and paste in your URL making sure to include the trailing slash and analyze and one thing to note is that if nothing has changed
Then you may need to clear your cache in your web hosting control panel so keep that in mind if you run another performance report you don’t see any changes you don’t want to clear your cache and then go to your website at least once to regenerate it and then run
The report anyway here is our report and look at this we’re now down to a fully loaded time of 3.3 seconds whereas before we’re at five point one seconds so we’ve shaved almost two seconds off the load time just by eliminating some unnecessary plug-in and WordPress bloat
In fact let’s go ahead and refresh this page and you’ll see the page works the exact same way looks the same works the same nothing has changed all we did is unload some stuff that’s being loaded by this which is totally unnecessary so again fully loaded before 5.1 seconds
Fully loaded after 3.3 seconds next up we’re going to optimize the images on our site so on this side I’ve got our logo image I’ve got the hero section background image the photograph for this testimonial it’s image of a clock and in the logo in the footer so
Let’s go ahead and take a look at the performance report and see what needs optimising so let’s go over to the waterfall tab and what we’re gonna do here is look for excessively big files so this fourth column here is gonna give you the file size of each request so
We’re gonna go down here and look for big file so here’s one eighty six point five kilobytes for avatar seven jpg so we might want to think about compressing that here’s a huge one nine point one megabytes four o’clock dot PNG so we can definitely think about shrinking that
Down and here’s another one three point nine megabytes for this image of a clock here in addition to looking at the sizes you can also look for long gray bars on the right side the length of the gray bar is the amount of time it takes for
Something to download so anything with a long gray bar you might want to think about compressing if you can so another place you’re gonna look to see which images could be optimized is in the page speed tab so that’s gonna be over to the left of the waterfall tab click page
Speed and then you’re gonna look for serve scaled images and this may not be at the top of the list so you may have to scroll down the list and find serve scaled images and then once you click on that to open that it’s gonna tell you
About images that you could scale down so let’s take a look at this one o’clock dot PNG is resized from two thousand by three thousand to five hundred by seven fifty so if we click this image and take a look and zoom in will see that this
Image is just absolutely enormous but on the site we’re displaying it at a much smaller width so what we can do is actually scale this down this looks like it’s something that’s fresh off a digital camera or a really high resolution image from a photography website or right off your iPhone
We obviously don’t need it to be this big we want to scale it down so let’s go ahead and do that WordPress actually in the media library has a built-in way to resize images so you’re gonna go to your WordPress admin panel go to media and
Then you want to find the image that you want to resize so that’s this one here but if you have a million images in your library it might be hard to find so you just want to copy the file name your clock dot PNG paste it into your search
And then you’re gonna find the image and let’s go back to the performance report and take a look at the recommendation it says we’ve read it’s resize from 2,000 to 3,000 to 500 by 750 so that means we’re displaying this in 500 pixels wide by 750 pixels tall on our actual page
Now if we want the image to be retina friendly in other words high a high resolution displays high pixel density it’s usually about double so we want to resize the image to be double this recommendation so we can make it 1,000 by 1500 if we really want to preserve
The detail so let’s go ahead and do that so in the media library we’re gonna click edit image and then under scale image over on the right side for new dimensions we’re just going to enter a thousand for the width and that’s gonna automatically give us an appropriate
Height click scale and that is done it’ll say image saved and here’s a scaled image now one thing to note is that you’re then gonna have to possibly update the page that you’re using this image on to point to the new image because it actually is going to change
The URL so I’m gonna go ahead and copy this image URL and then I’m gonna edit this an oxygen I’m gonna give it the new URL to the new clock dot PNG image and then I’ll go ahead and save this page now let’s continue optimizing the images so the next recommendation and serve
Scaled images is for Avatar 7 jpg it says we’re resizing it from 750 by 750 to 120 by 120 so let’s go ahead and take a look that’s right weird it’s absolutely huge right here if we take a look on the site much smaller so let’s go to our media
Library and find that image so we’ll just clear our search here and click Edit image and we could resize to 120 by 120 but because I want this to be high resolution even on retina screens I’m gonna make it to 40 by 240 double let’s scale that done so that’s now scaled
Down and again you may have to update the URL depending on how you’ve loaded the image in your site let’s paste in the new URL and as you see it looks the same and let’s go ahead and continue optimize your images so the next two recommendations is for our logo it says
We’re resizing it from 300 to 121 well we want our logo to be absolutely pixel perfect so we could shrink this to 242 but we’re only gonna save 5 kilobytes for the logo the white logo in the header of the logo in the footer 4 or 5
Kilobytes we could do it but really it’s not worth it at this time so let’s go ahead and skip these let’s go ahead and save the page now and run another performance report and see how much butter we do so to copy the URL go to GT metrics com paste and include the
Trailing slash and run the report so here’s our new report we’ve shaved off about 7 megabytes previously we’re at 13 point 5 megabytes now we’re at 7 megabytes but there’s still a lot more we can do to these images so if you look here it’s surf scaled images it’s caught
These four images but there’s one image it hasn’t caught remember in the waterfall tab we found this massive image right here Big Ben clock JPEG it’s three point nine megabytes well the reason it’s not picking this up is because it’s used as a background image and the performance testing tool it just
Missed it but we still know about it because we see in the waterfall so let’s go ahead and is this so let’s find that image here it is right here and if you look at the mentions here it says it’s five thousand five hundred and ninety nine pixels wide
So if we actually open this up and zoom in that’s absolutely enormous and that’s got way more detail than we need for this hero section in fact because this is a background image we don’t even need to make it look perfect on Retina displays and you can barely make this
Out behind the overlay color so we’re actually going to scale this down to a much smaller size so for a hero section image I like to use about fourteen hundred pixels for the width because that’s gonna look good on most screens especially if the background if you
Really need the image to be high resolution you could consider going up to maybe two thousand pixels but fourteen hundred is pretty good so let’s go ahead and resize this image I’m gonna go at an image and new dimensions fourteen hundred scale and what you choose for the dimensions for an image
Like this really depends on how good you want the image to look who’s gonna be looking at the image is a site primarily viewed on mobile phones is if you don’t large desktop screens so that’s really up to you but is a good general rule 1400 is a reasonable starting point for
A hero section image so okay we have scaled the image down let’s go ahead and get the URL to this image and paste it in this is a background image so I’m just going to go ahead and paste that URL N and as you can see it looks almost
Exactly the same very little discernible difference so let’s go ahead now and save this and go ahead and run another performance report so GT metrics comm paste in our URL and here is our report so now we’re down to two point eight megabytes so big difference from thirteen point five
Megabytes that we started with now let’s go ahead and take a look at the waterfall chart and see if we can make further optimizations so here’s the waterfall chart and we’ve still got this big gray bar here for this clock dot PNG image this image is still 2.3 megabytes
Well the reason for that is because it’s a PNG instead of a jpg PNG is meant for things that need to be absolutely pixel perfect something like an icon or a logo or an illustration but not for a photograph for a photograph JPEG is much
Much better so what we’re going to do is convert this image to a JPEG so to do that I’m going to use my this tool called PNG – JPEG if com PNG to jpg com and what we’re gonna do is just upload our PNG so first thing I’m gonna do is
Actually download that so here’s the image copy the URL into my browser and let’s go ahead and save this image and now we’re going to go to PNG – jpg com watch out for the ads because they’re often gonna look like upload buttons you wanna click this upload button right
Here upload your image 2.3 megabytes converting compressing download here’s our downloaded image and if we open it up it looks basically exactly the same right here’s the PNG here’s the JPEG can you tell the difference I can’t tell the difference so let’s go ahead and upload
This JPEG image now so let’s go to this image here browse upload select files downloads here’s our JPEG look at that 260 kilobytes as opposed to 2.3 megabytes so we saved big on that let’s go ahead and save and now let’s go ahead and run another performance report
The GT metrics comm paste in your URL and look at this we’re down to 821 kilobytes for the size as opposed to row we start with 13.5 megabytes let’s go ahead and take a look at the recommendation here on serve scaled images and it says we’re doing pretty
Well we could save nine point seven more kilobytes if we scaled images done further now one thing this isn’t detecting though is that we have used these high-resolution retina images here right this image is 1000 by 1500 does it really need to be high-resolution retina for this photograph I’d say no if you’re
A photographer then sure yeah but on this website for the purpose of this image don’t so let’s actually scale this down by half 500 by 750 couldn’t paste that in let’s go ahead and save the page and let’s go back to our performance report let’s take a look at the waterfall tab
Again and is there anything that sticks out this clock image yes which is why we just shrunk it down a little bit further but other than that no it looks like we’ve got the images that we need to get so that is excellent let’s go ahead and
Run a final performance report now and see the resulting size of the page the GT metrics com and here is the page with the images optimized so we’re now fully loaded 2.5 seconds total page highs of 630 kilobytes as opposed to previously 3.3 seconds 13.5 megabytes now you also have to understand that
With this performance testing tool it’s using a very fast connect so while we only save point eight seconds on the performance testing tool somebody on a cell phone is out of range Airport Wi-Fi or slower internet connection could be saving you know 10 seconds 30 seconds loading this page now
If you have a ton of images to optimize you may not want to do this process manually so there is a plugin called short pixel and if you install that in WordPress you can set this to go through your media library and compress everything now it’s not a hundred
Percent perfect but it’s gonna get you 98% of the way there and then you’re gonna want to do what I showed in this video with the performance report checking the waterfall for anything it may have missed anything that you could scale down further that sort of thing
And that way you’re gonna go from something like this to something like this now the next thing we’re gonna do is remove the unnecessary font weights that we’re using on this site so if you look at the waterfall chart you’ll see that we’re loading a ton of font files
Here from fonts G static com 1 2 3 4 5 6 7 8 9 10 11 do we really need to be loading 11 different font styles on this site I don’t think so so let’s go ahead and disable those so I’m using oxygen here but if you’re using another theme
Visual builder whatever you’re using they typically have a way to manage fonts so what you’re gonna want to do is just only use the fonts that you actually need so here I’m using source sans Pro for the headings and open sans for the text but on this site I really
Think it’s gonna look just fine if I use open sans for both and indeed it does you’d really have to be militant about design to care about the difference here and then in terms of weights so there are ton of weights right there’s 300 which is light weight regular way italic
600 just semi bold semi bold italic um we’re gonna only check the weights we actually want to use here so I’m going to say 300 regular and 700 and that’s gonna stop any of the other font files from being loaded even if you’re using them some are like even
If we went like this and we chose like a way to 400 or start way to 500 or 600 that way it wouldn’t be loaded because we haven’t it chosen it here now other builders don’t have this feature but what you can do is just go through your
Pages and make sure you’re only using you know a few weights for your font and you can also can choose not to load italic fonts you can let the browser simulate that right so this is what browser simulated italics looks like whereas this is what real italics looks
Like do we really care about the difference not really we’re not writing a book here so let’s go ahead and save this page and then run another performance report and see how we do with the fonts optimized so look at that we’re now down to 2.1 seconds and 502
Kilobytes which is a massive improvement if we look at the waterfall we’ll see instead of loading seven different font faces we’re loading just three so that’s much better okay now that we have optimized our site by removing unnecessary blow compressing images optimizing fonts etc let’s go ahead and
Check our web hosting provider to make sure that they’re delivering that optimized site to the user as quickly as possible when the user goes to your site com they shouldn’t have to wait for the web host to generate the page and send it to them they the web host should have
Something called caching enabled which means the saved copy of the page has already been generated and the user just gets that page instantly from the web host with no waiting so here’s how we’re gonna check that so we’re gonna go to the performance report when you go to
The waterfall tab and we’re gonna look at this first request get your site comm and this should be happening in 200 milliseconds or less if this takes any more than 200 milliseconds and you got a big purple bar here that means that your web hosting provider probably doesn’t have caching
Enabled so either need to get them to enable that or switch to a modern web hosting provider like WP engine where it’s enabled by default so in this example if you mouse over the purple bar here you’ll see this box pop up and on the right side of the box you’ll see
Blocking DNS lookup connecting sending waiting and receiving you want to look at the number to the left of waiting in this case it’s one point three two seconds that means when the user goes your site com they have to wait one point three two seconds before your web hosting provider actually sends them
Your page now this is bad obviously we want the web hosting provider to send a cached copy of the page immediately so okay we don’t have caching on this site the next thing we’re going to do is check for gzip compression so to do that go over to the Page Speed tab and
Another recommendations list you’re going to look for the gzip compression recommendation now you’re either gonna get an A on this so you can get a green bar over here or you’re not and if you don’t get an A it’s possible that you could be loading some tracking scripts
Like hot char Google Analytics whatever they may not be compressed but it could be that your host doesn’t have gzip compression enabled so you’re going to open this recommendation and you’re gonna look at the URLs that need to be compressed and if those URLs have your
Site com in them that means your hosts does not have gzip compression enabled so you either get them to enable that or move to a modern web hosting provider like WP engine that has that stuff enabled by default so the next thing you’re going to check is your PHP
Version we want to be using PHP version 7 so go to your WordPress admin panel go to plugins add new and install WP space server info no space between server and info this to plug-in right here and we can deactivate this in a minute that’s just to check our PHP version
So once that’s activated you’re going to go over to dashboard WP server info and look for PHP and the value should be version seven point something right here we’re running five point six we don’t want that it’s not as fast PHP seven is newer it’s faster so you want to be
Using a modern web host with PHP version seven so anyway here’s our performance report on the sandbox installed Scott no caching no gzip PHP 5.6 and what I did is I just copied this exact site using all in one WP migration exactly is is copied it over to WP engine and let’s go
Ahead and run a performance report with this same exact site same site same everything nothing’s changed we just move it to WP engine let’s go ahead and run a performance report for it and see how we do and look at this fully loaded time four hundred and thirty five milliseconds that is less
Than half of a second total page size with gzip compression has been compressed down to 386 kilobytes incredible so let’s recap where we started we had a none optimized site fully loaded five point one seconds thirteen point six megabytes that in 41 requests then we removed unnecessary plug-in bloat unnecessary WordPress
Bloat and we got down to three point three seconds thirteen point five megabytes 26 requests then we optimized our images and optimized our fonts and we went to a fully loaded time at two point three seconds and a total page size of 502 kilobytes with 18 requests
And then we said okay when you optimize the site as much as we can within reason let’s go ahead and move it to a web hosting provider that’s going to give it to our users quickly so we move it to WP engine now we’re now at 435 milliseconds
386 kilobytes this is a fast loading web site and another thing you notice as if we started out with bad grades you know an F and a D here these grades are ultimately meaningless by the way a lot of people take stalking and maybe your clients do and I didn’t chase the
Grid I don’t care about the grades I’m sure some people who went to school and got a is Seabees graduates think oh no I need a good grade but what you really need is results and notice by chasing the results we also got the good grades automatically I quit school so I don’t
Really care about grades I care about results and we’ve got a four hundred and thirty five millisecond load time on the exact same site looks the same works the same everything about this thing is the same for all practical purposes and we went from this to this in one hour no
Buying plugins no tweaking server configuration nothing advanced okay that is how to build a fast loading website step by step if you want to make building bloat free the fast loading website it’s easier on yourself I highly recommend you check out oxygen that is the visual builder made by my company
Because it is designed to be clean and lean and blow free right out of the box unlike some of our competitors that load over a thousand kilobytes of CSS and JavaScript on an otherwise blank page oxygen generally speaking is only going to load what you actually put on your
Pages so that’s gonna make your site’s cleaner leaner smaller and faster so if you’re interested in something like that check out oxy builder com to learn more again this is Louis from oxygen and thank you very much for watching
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
So WPengine do the stuff from 2s to 435ms?
helpful
This video is such a positive and uplifting message. It's exactly what I needed to hear today.
While my website gets at least a B report on GTmetrix, it fails miserably (F) on Google Console website test.
Best optimization video ever ! It's not sorcery anymore !
Thanks a lot Louis.
I like how the link changes ;)))))))
great tutorial man
Best tutorial
Ok first off, I'm torn about this video. Presentation/delivery is top notch. It's hard to ignore that most of the performance gain was due to the extremely heavy images on the site, which were likely planted to dramatize the amount of page size reduction. I bet this is the largest factor in speeding up the site. Also, gtmetrix has changed a lot since this video was created and many display elements are gone or renamed. Is it expected that non-developers should be able to identify what css classes are currently used on their site simply by looking at the url on the waterfall? I've got wordpress css, Astra css, Elementor css, woocommerce and more running on my site. In addition to fonts from all of them. I think the ONLY effective measure (that I still need to learn) is how to use all of these page builders properly from the beginning, so that we don't end up with all of this crap loading on our index page to begin with. Or maybe we should just use Oxygen instead…..
Will stay tuned to your channal! Cheers!
I love it Sir can you help to edit
This is by far, the best website optimization tutorial ever. Simple, it goes straight to the solutions. Great video and sound quality. This is THE example of tutorials that should be made. Thank you very much.
Not one negative review? On YouTube? I find that sort of uncanny. Anyway, I tried this tutorial and it is definitely not for non-coding myself or probably not for people who are actually conducting business and may not have the time to analyze lines of code trying to figure what is necessary or unnecessary. With the exception of a few obvious ones, I have no idea what code I need to keep and what is safe to eliminate. I quickly decided it is not nearly as simple as this video touts. Now I know how to see the code, I just don't know what to get rid of and what to keep.
you should make a new video with the latest version of wordpress and oxygen and the other builders. measuring though the same page made with the different builders to make the difference noticeable.
RE Is the fetching taking too long? Please do the following:
Check your internet connection and the actual page that is being fetched to see if it loads completely.
If the targeted page loads fine and your internet connection is working fine, please try managing the assets in the front-end view by going to "Settings" -> "Plugin Usage Preferences" -> "Manage in the Front-end"
I cant see that?
Your tutorial shows how to edit the Home page when using the option " A static page".
However, how would I adress the issue since i am using the option "Your latest posts"?
Your video is outdated.
quality stuff
I really like this wonderful and efficient tutorial. It's very clean, easy and simple. Super
Does this plugin support Astra Theme ?
What a brilliant video, thank you
Great video. Any updates in 2021?
The best even after almost two years. many thanks
شكرا
You can use compress files from existing web hosting using w3 cache plugins
HI, i hope you find this comment asap.
when i unload the css and js using Asset CleanUp Plugin my site's full layout gets destroyed. I'm unloading all the js and css files from the audit report from Lighthouse. Can you tell me what is the issue?
Slowed my site down from E 51%/2.8 to F 26%/3.9. How can I reverse it back to my original time? HELP
You are a legend! Really helpfull and clear explained thankyou
what do you think about Siteground?
KNOWLEDGE
wow! just wow with your tutorials
Thank you for a great video. The only problem now in April 2021 is that GTmetrix doesn't look the same as in this video so it is hard to find those areas to fix. Especially the information about what images to resize. The PageSpeed tab is replaced with a Summery tab.
"I dont care about grades , i dropped out of school" – said every developer ever lol. Thanks!