WordPress WooCommerce – IMPROVE SITE SPEED – Install Caching Plugin (W3 Total Cache )

64
5


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.

64 COMMENTS

  1. hello thnx a lot for your help 🙂 , please i want to ask what about memcached option is it will be more helpful as my hosting company advised me?

  2. what if you add new products or new categories in your woocommerce store?

    do you have to flush all cache and totally rebuild all cached pages?

    how can new products or categories automatically be displayed even if caching is turned on?

    thanks

  3. This was a VERY helpful tutorial! It was just the right pace,— not so fast that I couldn't keep up, and not so slow that I got bored and frustrated!! I took notes and I did have to back up many times to write down the settings (want to compare with other advised settings before I go mucking around in there). So enabling "minify" does not permanently change the code on your site? If you disable it, the cached minified code pages will be purged, but the original theme and plugin codes are untouched?

  4. Hi eMedia Coach, just wondering, did you set up a tutorial about how to use CDN? I couldn't see it in your playlist. I managed to do it once with Amazon S3, but the whole thing with AWS was so complicated and confusing with lots of different services and tiers that I cannot for the life of me remember what I did now. This would be a great addition to this video. Thank you very much. I've subscribed and will definitely check your stuff out more often.

  5. Big thumbs up, Thank you so much! Your tutorial has really helped my website. I have a really big site, and I see a huge difference. I will be watching more of your videos!!! 😉

  6. really REALLY GOOD MATE AND IM DOW FROM (oop no caps) 4. 84 to 1.80 seconds and that is google great ranking thing, right. 1.8?
    according to matt cutts the head of google web spam yes? I have 162 post 🙂

  7. I lost most of my content after I did all of this setup. Super Cach much better than this plugin and I tested with both. Super Cash faster FOR BIG WEBSITES like mine. If you have more than 2993 members DO NOT USE THIS plugin, you will lose your post, and a lot of the content. Peace!

  8. Hi, I just installed your W3 total cache tutorial step by step, it has increased my page speed but now some of my item pics have changed, some appear larger and take up too much of the screen. Can you help me ? Adam. eurobahn auto parts

  9. I regularly add parts onto my website and maybe categories and sub cats too, will I need to do anything or will they appear instantaneously to view by customers ?

  10. Hello, thanks for this tutorial. I got my site to speed up. However one problem started to occur. I'm also using the Mystile theme shown on your video. Ever since caching, my cart logo turned into the British pound sign. Also my carousel arrow buttons turn into weird symbols. It happens randomly, sometimes it acts normal.

  11. Thank u so much. I ve deleted w3 total cache a few times, and I ve read all types of negative rattings about it. I was ready to give up till I found your tutorial. 🙂 Thanks again.

  12. Thnx for this tutorial. Helped me out alot but I still have one major issue.
    Just curious if you know how to address "Eliminate render-blocking JavaScript and CSS in above-the-fold content"
    I'm using TESSERACT theme

    Thnx

  13. Thanks a lot. It improve my site speed to more than half. I have a question though. I have a notification on my dashboard that say's " The required directives for fancy permalinks could not be detected, please confirm they are available: ". Do you know what it means? Or how do I fix this? Should I just hide the message?

  14. Hi, thanks for the tutorial. Do you have a new tutorial of W3 Total Cache 2016? I have recently updated this plugin, now we cannot update page contents on the front end, only on the back-end wp admin… i like to delete this plugin and update new setting … hope you have new tutorial that I can follow …. thank you .

  15. After doing all the settings you did. When I enable database caching my php error log fills up with: [core:notice] [pid 10538] AH00052: child pid 1107 exit signal Segmentation fault (11) errors. Disabling database caching in w3 I don't get these errors. Any thoughts on why this is? Thanks! Awesome video

  16. The official woocommerce site states:

    "If using caching plugins, make sure you exclude the following pages from the cache through their respective settings panels:
    -Cart
    -My Account
    -Checkout"

    Where do I find the panel to add these pages to be excluded?

  17. Great! Mines went from 14s to 5s. Thank you so much. I think i'll try minify to bring it down even further

  18. Do you have a tutorial about how to fix W3C Errors in WordPress/Woocommerce??? EG, Error: Bad value for attribute width on element img: The empty string is not a valid non-negative integer

  19. The ippingdom is two different places, one is from Amsterdam EU in the first search and after doing the second search after optimized page you have it pinged from Dallas (Texas). its two completely geographically servers on other countries.. keep that in mind, that the W3 total dont help that much anyways..

  20. Thanks for the tip, I was not finding a tutorial to apply for woocommerce, and it had a fair loading much better than it was previously.

  21. Hello Sir, thank you for your detailed tutorial. I owe you!!

    What about these settings?
    -Cart
    -My Account
    -Checkout

    And something else, on new versions the option "Don't set cookies for static files" on Browser tab is enabled by default. Should I have to untick this option? Thank you in advance!!

  22. This is very useful tutorial, thank you.!!!!!!!!! Update please to version 2019 ( WooCommerce + W3 Total Cache + cloudflare) Don't have tutorial on youtube about this.

LEAVE A REPLY

Please enter your comment!
Please enter your name here