today i'll be showing you guys a really
unique optimization strategy that will
actually change how your website loads
for your visitors today i'll be showing
you guys a free plugin that will
pre-load and pre-fetch pages on your
website without users ever going to
those pages i'll also show you how this
reduced the average page load time by up
to 38
before we jump into this plug-in we
first need to understand how website
servers work normally a visitor comes to
your website the server loads the page
and then the visitors start to navigate
your website if a visitor clicks on an
internal link on your website the server
will then start to load the second page
it's pretty standard right you guys go
to a website you click on something and
then the page loads now let's take a
look at what happens differently once
you guys install this free plugin now
let's imagine a visitor comes to your
website the server loads and then they
start browsing the website as usual the
plugin will then preload the html code
of the next page before the user has
clicked any of the links as a result
once the user clicks on the link to the
next page it's already pre-loaded for
that user this will be the same concept
as caching except the user doesn't have
to go to the next page beforehand so as
a result to go to the next page it's
much faster than typical servers where
they have to load it from scratch this
can drastically increase the speed of
the user experience on your website now
this website optimization strategy it
won't show up on pingdom and it also
will not show up on g2 metrics the main
reason why is because you're creating a
faster user experience by having the
pages automatically loaded before the
user even clicks on it but you guys can
measure this through the google
analytics through the actual user
page speed when they actually navigate
the website so here we go now before we
go on any further i first want to
demonstrate how exactly this plug-in
works just so that you guys get a better
understanding of it right here's my
website dearwilson.com and also another
uh demo website uh just you know the one
that i used and also we're gonna test
apple.com and i'm gonna show you the
difference between all three of these
websites right so this plugin is
installed on darrelwilson.com it's also
installed on uh derralfoo.com where i
have a food ordering tutorial coming out
very soon and this is the actual website
that we actually use
now here we have apple right now it's
important to know that uh right here if
we go to apple uh you can see that
there's 70 requests right and the page
is loaded and if you just go to the next
page right here if i hover over this
link it will then take them to the next
page however if we install this free
plugin some of that changes for example
you can see here how my website has 106
requests yeah maybe i need to work on it
you know but uh
yeah so let's say for example i hover
over the web hosting you will then see
that the request jumps into 107. now why
has this happened well this plugin has
already preloaded this page so when a
user
clicks on this specific page it takes
them directly to that specific page
because it's already loaded in their
cache so now let's go and take a look at
apple's website right if we go over here
to apple and we hover over something you
can see here how the requests don't
change because the next page is not
loaded already for the actual user for
example we'll go over here and we'll
actually hover over the main menus right
you'll see here at the bottom of the
page how it has already loaded the page
right so now at 99 requests and the next
page has already been loaded so as you
guys can see that the pages are already
being loaded by the actual server
without me having to actually click on
the actual link and if i do decide to
actually go and click on the actual main
menu the page loads at a much faster
rate also on my inspect elements i
actually disabled the cache so what's
also really unique about this plugin is
that if you actually click on the actual
page
it'll actually retrieve all the
information from the actual cache so
every page will load in about like like
less than one second right and then i'll
go ahead and hover over the contact us
and then you can see right here the
actual plugin down here at the bottom
you can see that it's already loading
the page for the user so with this
plug-in you can actually propagate pages
and pre-fetch them before the user has
even clicked on the actual page right so
let me go ahead and show you guys a
little bit more about this plug-in and
just show you how all of it works
and again if we go to apple's website
nothing loads you know there's no
prefetch and nothing's being loaded so
let me go ahead and introduce you guys
to this plugin all right so i'm back
here in my wordpress dashboard and we're
gonna go to plugins and click on add new
and over here
we'll type in flying pages
and here we go this is the plugin that
you guys will need right here it is
called flying pages there's about 20 000
active installs really really good
ratings you guys can check it out for
yourself but once you guys install this
plugin it'll then give you some more
options right so uh over here we'll go
to the
plugins all right install plugins and
i'll just find the actual plugin here
and then right here you'll see flying
pages and just click on settings and
i'll go ahead and explain these options
right here so here are the options for
the actual plugin right you have delay
to start pre-loading max request per
seconds preload only on mouse hover
mouse hover delay and then also ignore
keywords and then disable for log admin
so let me go and explain to you what all
these options are right now the first
option right here is delay to start
preloading this means when you hover
over something what is the delay that
you want for your server to start
sending requests and to start loading
the page uh preferably you probably want
it at zero right so that means uh as
soon as the mouse goes over it the
server is gonna start generating that
page for the actual user right but you
guys can always change this if you want
but i would recommend to leave it at
zero seconds next you guys have the max
requests per seconds now this really
depends on the strength of your server
okay so i believe by default they have
that three requests so let's say for
example you guys have a a very powerful
server and you don't mind sending more
requests at one time you guys can say
well you know five requests 10 requests
sure but by default three requests is
pretty optimal and i think that's enough
for pretty much all cloud web hosting
right now this is a very important
option and i want to make sure that you
guys do have this checked right
so preload only on mouse hover so let's
say for example the user goes to your
websites and then they hover over
something right you're going to tell the
plugin i only want you to load whatever
the user hovers over right and that
makes sense if you have this unchecked
right here
depending on how strong your server is
you can actually load all of the links
on your website instantly right
will that have a strain on your server
yes yes it will because what your server
is going to do here is that it's
basically going to start
pretty much caching your website it's
going to start basically
getting everything ready for that
specific user so it's going to start
loading all the pages for that user now
this will have more strain on your
server however this can have a very fast
user experience for that user basically
saying the website's already pre-loaded
for them it's like going to a cached
website for the very first time right
i'm sorry a cache website for like the
second time everything loads a lot
faster so this will have the same effect
but just know that if you leave this
unchecked
it's going to start loading everything
and that can have a strain on your
server so i would leave this checked
just to get started out and then here
you have the mouse hover delay so the
delay to start pre-loading links on
mouse hover here they have 50 ms 1ms you
know 150 ms you can leave it at 0 or 50
ms this is just a delay on when you want
stuff to
start preloading for your actual uh
visitors and then here you have ignore
keywords and i'm actually glad they
added a few things in here like the
actual check art i'm sorry checkout and
the the webp because these actually
weren't here before and they had an
update and they finally added them in so
that's actually pretty cool it's also
funny this plugin is actually used by
elementor.com
if you guys actually check out
elementor's plugin use they do use this
plugin on their website as well
and then also here you have disabled for
login admin so this helps to reduce the
server load since most of the cache do
not serve cached pages when logged in
anyways right so
i would just leave that checked by
default right and then i'll click on
save changes
and then the next option here is just
making sure you have https and also a
caching plug-in and then over here we
have fax now this actually does work
with um wp rockets and it also works
with lazy load as well so you guys can
actually use a caching plug-in in fact
they do actually recommend uh wp rockets
and they do actually recommend a very
strong server like cloudway so if you
guys are using like shared hosting or
something like that with this
i wouldn't recommend it because that can
be too much strain and they don't give
you enough resources on those servers
generally for shared hosting right i
know a lot of guys watch videos and they
go with like shared hosting from
hostgator and it's like it's a nightmare
you know it's like the worst thing they
can do right and then also we have
optimize more now let me let me make
something clear here so this plugin will
preload the pages right so it'll make
sure the pages are pre-loaded however
depending on the contents of that next
page some of that stuff will have to be
loaded when the user goes there for
example javascript you guys know that
javascript will actually load once the
user goes to that specific page however
there are additional plugins and i'll
probably be making a follow-up video
here where you guys can actually reduce
the javascript on those other pages as
well for example woocommerce they do
load a lot of unnecessary javascript and
so does elementor so with this add-on
right here you guys can actually
delay
the javascript that is being loaded onto
other pages
just creating a faster user experience
right i'm going to go ahead and inspect
the element right here right but you
guys also might want to do this under a
new browser just to make sure that the
caching before doesn't store the plugin
being activated or not right so i'll go
ahead and open this in a new window so
once the page is fully loaded it'll tell
you at the bottom right here it's
finished loading and also we have 100
requests now to see if this works or not
on the right side i'm going to go ahead
and hover over something right here main
menu and there you go you see at the
bottom of the page here how the flying
pages has automatically loaded the about
us and also the shop page now this says
main menu but this is actually my
woocommerce shop page okay so i just
renamed it in the menu but uh yeah sorry
if that looks weird but yeah you can see
here how the actual page has already
been loaded by the actual server
and we can go ahead and click on this as
well
and there you go so we have our page
and uh yeah so it's creating a much
faster user experience also you guys can
disable the cache here i have done that
just because i wanted to actually see
the speed performance but um yeah you
guys can also disable the cache if you
guys choose to do that so as you guys
can tell with this plugin you guys can
drastically decrease the load times when
users are loading the next page let me
go ahead and show you guys my website
here i'll go to darewilson.com
daryl darylwilson.com
[Music]
and then i'll show you guys the same
thing on my website so i'll go ahead and
right click right here we will inspect
i'm actually redesigning my website and
we're actually planning on selling
template kits so if you guys do want to
check that out go ahead and check them
out later all right they'll be up in
about uh one month it's a lot of work
we're doing it's it's it's a lot of work
so over here
we go to the actual network so now it's
loading pretty much everything right
it's loading uh all of our stuff right
here right
and it has finished loading now over
here if i hover over web hosting right
now we're at 101 requests if you hover
over this it now goes to 102 and then
you can see here uh flying pages there
at the bottom has already loaded the
page right there right and then we do
the same thing for the reviews right so
now it's already loaded the reviews and
i haven't even clicked on the actual
page so as you guys can tell this
plug-in it really changes the game you
know you can really
increase the speed of your website not
just through normal optimization but
just through smarter techniques all
right now let me give you all a
comparison of when we had the plugin
installed on our website versus when we
did not now the orange line represents
when we did not have the plugin
installed on our website and the blue
line represents when we did have the
plugin installed on our website now the
very first day you guys can see that
there was a decrease of around 11
percent of low time for our users now
keep in mind you know we didn't optimize
the website we didn't change anything
this is strictly through the user
experience of page loads on the actual
websites the very next day we saw a
reduction of around 36
of the average load time this date right
here i'm not sure what happened you know
it looks like google just didn't record
this day so that's a little bit out of
my control but on average our average
low time has been decreasing so you can
see that it's gradually getting lower
the very next day it looks like there
was pretty much no change so the average
page size didn't really change at all
and then the next day you can see that
our users
on average their page load time is
around 1.5 seconds previous to around
4.75
so as you guys can tell we're better off
using this plug-in and overall our our
average page load time is a lot lower
with the plug-in than without it now let
me show you guys another plug-in that
can even make your page load time even
lower than this
now i also do want to touch base on the
actual other plug-in which is the
javascript plug-in for example if you
guys notice sometimes you go to other
pages
plugins like woocommerce and stuff they
might start to pre-load javascript
without you even needing that javascript
so let me go and show you guys how you
guys can disable javascript using this
other plugin
so i do like their family they got like
a family of plugins and if you guys
actually combine those plugins together
you can have a blazing fast website as
long as the first home page loads
quickly uh the overall experience can be
really really good so over here we have
plugins so the plugin itself is called
oh there it was uh flying scripts there
it is so this is the actual plugin so
let me just go ahead and show you guys
how to use this plugin just in case
you're interested in it so over here
i'll also click on install now now once
you activate the plugin you'll then see
the flying scripts right here and you'll
click on settings now again let me
explain how all this works right so
usually you go to a website a lot of the
javascript will actually load on the
website all at one time this can cause
the website to load slower and can also
cause more strain on the server because
you're trying to force everything to
load at one time however you guys can
also spread it evenly over a specific
amount of time which is what this plugin
does so let me give you guys an example
right here and here you guys can
actually enter the url of the javascript
that you guys want to get rid of so
let's go over here to our website right
here and i'll go ahead and inspect the
elements i'll go ahead and go to our
network and i'll then refresh the page
here so
all the javascript will load
right now one popular
piece of javascript people tend to
disable on woocommerce is the cart
fragments because what the car fragments
does is that it actually loads products
onto the page automatically without you
having to refresh the page so that's
what that javascript does some users
tend to get rid of it because it does
slow down the website just a bit but
let's go ahead and find it right here so
this is the actual cart fragments right
here and what i want to do is i want to
go ahead and take this piece of
javascript and i'm saying you know what
let's load this later you know we don't
need this on the website right now
let's load this later right so let's go
back over here to our website and i'm
going to now paste that now when do you
want this piece of javascript to load
well let's do 10 seconds 10 seconds
right yeah 10 seconds all right so let's
go ahead and
save changes here and now what i'm
saying to this website is i want to have
this piece of javascript load a little
bit later just not right now so what you
can do is take large pieces of
javascript and just spread them evenly
you know over five seconds or three
seconds or 10 seconds just so that the
server doesn't have to load everything
at one time you'll also get a better
page score
with gt metrics doing this because
because you're loading less at one time
right so let's go ahead and
refresh the page here now here is the
cart fragments right you guys can see it
right here but what i'm going to do is
i'm actually going to
refresh this page
and then you see the cart fragments
right now if you go to the bottom of the
screen here you're going to see it up
here in about five seconds right so it's
going to appear right below text editor
just give it a few seconds here maybe
three oh there it is all right so yeah
so as a result this piece of javascript
uh just loaded a little bit later
because again we want to reduce the
strain of the server and spread out
whatever's being loaded just so that we
have a faster running website and
everything's not loading all at one time
right so uh yeah that is an introduction
to the actual uh flying what is it
called the flying scripts now if you
guys do want to know who the developer
is uh his name is guijo vergashi or i
think that's how you pronounce it giggle
for garchy or something like that now
the great thing is all these plugins are
completely free there is no pro version
whatsoever these plugins and i really do
like the innovative of these plugins
right it's not about uh stripping out
the fat it's just being really clever
and you know finding an alternative of
how to speed up the website versus just
trying to reduce the size of it so i
really do like how this developer is
really innovative and creative on
speeding up websites so you guys can
actually download all of these plugins
they're completely free
if you guys do want to buy him a coffee
you guys can also buy him a coffee and
there's a lot of people here buying this
guy's coffee right there's a lot of
people here that are saying hey you know
this is really cool
uh thank you so much i'm gonna buy him a
coffee you know i'll buy him a coffee as
well so you guys will see my name up
here as well and um i suggest that you
guys do the same so what did you guys
think of these products you know i do
like the fact that these products are
very creative on how to speed up
websites and not necessarily just trying
to reduce bloats also the question
remains you know if you guys have this
plug-in and a strong server does that
mean that the page builders can pretty
much all load at the same time because
it's already pre-loading and
pre-fetching all that info but let me
know what you guys think in the comments
below also let me know about what you
guys think about this plugin and yeah
make sure to like this video and until
then i will see all of you party people
in the next video guys take care