Hi everyone. In this tutorial I'm going to show you how to increase your
website's site loads paid and this is particularly important for eCommerce
stores because every second
makes a difference. Just to give you an example, here is a website: fastcompany.com
Here is a graphic of people... how many people drop off as the
site gets slower. So, its abandonment percentage across page load time and
just as another example, there is a little statistic in here; let me just find it.
Here we go.
Amazon has calculated that a page load slow down of just one second
could cost one point six billion dollars in sales each year and Google has done some
research showing that if it just slowed down its page, its search page load then
that could cost them eight million searches per day. So, that's just a very
general idea of why page loads speed is important, particularly for an eCommerce
site where you are focusing on conversions and, therefore, customer
experience. By the way if you haven't already checked out my “How to make
eCommerce store” tutorial. It's a full step-by-step instructional guide on how
to setup an eCommerce store like the one you see here. So, anyway, first things
first. Let’s login to WordPress dashboard. Now, in this tutorial I'm
going to discuss the installation and take you through the setup of what is
known as a caching plugin. Now what is a caching plugin or what is a cache. A cache
is basically a temporary storage area of your website it's a temporary storage of
your web pages and data and allows files to be served to the user much much
faster. Before I actually install and show you how to configure everything, I'm
going to do a speed test so we have something to compare
at the end of it. So, if I just go in here and google 'pingdom speed test'. You can do the
same for your eCommerce store just check your URL in there and it will do a
speed test.
there we go
So, currently, my website has taken nearly four seconds to load so what I will do is
compare that figure with the new load time at the end of this tutorial. After
I've installed and configured the caching so let's do that, let's go into plugins
add new, search for a plugin called W 3 Total Cache. Install that one
there. Don't forget to activate the plugin ok, now when you activate the plugin you
should see a tab in the left hand side bar called performance. so let's go into
the general settings for now. The first thing we want to do is come down to page
cache and, just as an overview, each one of these areas here: page cache, minify, database
cache etc. they're all going to... there is more set up behind
the scenes so we'll go into each one of these and set them up. So, this is an
overall high level. But first thing to do is let's enable what we need to show
page cache. Yes, I'd like you to enable that one and choose disk enhance.
that's the best way to set this one up.
Minify: what medication is it enables the compression of HTML, CSS and
JavaScript code to make your website loads faster. Now if you're running a
CDN then do not enable minification. if you don't know what a CDN is, don't worry,
you won't be using one and it's something I might cover in a future
tutorial. Now, when minification is enabled your site may not work. This happens if
there's a plugin that is not compatible with minification. So, therefore, to be on
the safe side, I choose not to enable this. But for those of you that do want
to test it out, I will show you the settings from minification in a second.
down to database cache, let's enable that and ensure that the database cache
method is disk. Object cache- enable that one as well and ensure the cache
method is disk, as well.
enable your browser cache. This enables the caching in your visitors' web browser
so that pages are loaded up faster if the access your site for a second time
CDN, like I said, don't worry about that I'm gonna cover that in a future tutorial
and that's all for now. So, click one of the save all settings buttons when you've
done that and that will save all of the changes you've made on the page
ok. Now, let's dig deeper. Let's go into to page cache which we've just enabled. Ok,
let's ensure
that cache front page is enabled. Enable cache feeds, enabled the cache
SSL. Leave this one disabled. Now do not enable the cache for a full pages. This is
not recommended,
so leave that blank. we do want to enable the cache request for our site and this
tick box basically says that for people that are logged in such as yourself
don't cache pages, so you want to be shown a fresh version of the side because often
you'll be making updates to your website and you do not want to be showing or
you do not want to see the older version. similarly, you can choose not to cache
pages for people with the following roles: so, you would be an administrator
of your website, if you had other people who had the role of editor/ author/
contributor than you could do that and if you don't know what that is, just have
a look at my other tutorial on setting up user roles. It's not essential, in case
you have that setup then you can use this option. If not, don't worry about it.
Now, go down
Cache preload. Yes, we want to automatically prime the page cache. Leave
the update interval and pages interval at the default, like you see there.
Enable preload the post cache upon publish events. Then go down...
leave all of this as default, don't change any of that.
And that's it. So, just make the changes
I showed you and leave everything else as default, click one of
the 'save all' settings buttons and everything on that page cache setting
area will update. You may notice a couple of notifications. It says here in order
for database caching to work with WooCommerce come as you must add this to ignored
query strings. I will come to that in a second.
The next thing is minify. Like I
said previously, I choose to disable minification. If you want to, you can
definitely enable that and test how your website works. It does create a
slight improvement in load times because it compresses HTML, CSS and
JavaScript. If you would like to use this, here are the recommended settings. So leave
the rewrite URL structure enabled, keep this one here disabled, go down and
enable HTML minify settings. enable inline CSS, enable inline javascript
enable the line break removal. Now, in this box here
ignored comment stems. just press enter and put that in: mfunc. Now, if you are running
eCommerce. Sorry, if you're running WooCommerce, then you need to enter that into
ignored comments stems in your minify settings. Leave JavaScript as default
Leave CSS as default and leave... I'm just having a low key just in case there's
anything else I need to change and there's not. So that means we can save
all of the settings. Of course, here it says it's disabled because I have chosen
in my general settings not to enable minification. But if you want to just
click that enable button and use the settings I just showed you. The next
thing database cache and we have definitely enabled that one. Ok, now to
start with
leave this one enabled. Don't cache queries for logged-in users. Leave that as is.
in the Advanced section, leave the maximum lifetime of cached objects and
the garbage collection as default. Coming down into the ignored
query stems. Now there is something that is essential we must add in this box
because we are running WooCommerce
and that is... let me just find it… sorry. _w_session_
and you'll notice that the notification that was up in the
top area before has not disappeared. Basically that notification was just to
tell us that, because we are running a WooCommerce, we must import this in the
ignored query strings of database cache settings. So, make sure you do that. And
that's all there is for database cache. After you saved that, move on to object
cache. Ok, leave the settings here as default. Actually there's nothing to
change on object cache so we're fine. Browser cache. Ok. Leave 'Set Last-modified Header'
enabled. Enable this one here 'Set Expires Header'. Enable the
'Cache-control Header', enable 'Set Entity Tag' we want to 'Set W3 Total Cache Header'
want to enable HTTP(gzip) compression we want to leave this one
disabled by default... and I leave this one as default as well, that's my personal
preference. And then click “Save all settings”. Let me just check if there's
anything else we need to change in this area here. No, everything else is all good.
Leave them all as default and then, basically we're done.
CDN is something I will do in a different tutorial. That can make a
decent improvement in speed as well, but for now, it's not essential and so that's
all there is to setting up our total
W3 total cache. Now, let's just do a website speed test, now that we've done
all of that. So, if I go back to 'pingdom speed test'
Wow! Massive, massive difference! That is under... under one second load time. Let's compare
that to four seconds before we installed and configured this cache in plugin. So, your
eCommerce website visitors are going to have a very very fast experience. Look at
this website: it is faster than 94% of all tests websites and now, keep in mind, your
speed improvement may not be as substantial as I have here. You may have
more content on your eCommerce store then I have. So, it may not be as great but,
the point is, it will be a decent improvement from your initial speed, so
there you go. I'm just showing you in the space of about 10 minutes how to
drastically improve your website load time. Please, thumbs up this video.
Subscribe to my channel, because I'll be putting out more awesome stuff in the
future and if you want to learn how to set up an eCommerce store from scratch
using WordPress, I've got a link for that video in the description below. Thanks
Thanks for watching. Please leave a comment if you have any questions.