Steve Dotto here.
How the heck are you doing this fine day?
Me?
I'm frankly pooped because I have been spending a lot of time lately optimizing our website,
the DottoTech website.
I rebuilt this website this past winter and when rebuilt it though I made it very slow
by adding too much stuff and not paying enough attention to speed.
Speed, as far as the internet is concerned, is crucial.
People do not stay on your website if it doesn’t perform well and our website was not performing
well.
It looked nice but it didn’t perform well.
So something a little bit different today on Growing Your YouTube Channel to 100,000
Subscribers – taking care of that homepage, your website, how to speed up or the things
that I went through to speed up my site at DottoTech.
Stick around if you’re interested in learning a little bit more about WordPress and efficiency.
This particular vlog that I do is all about growing your business online, growing your
business on YouTube and using YouTube to create an online business.
And today, we’re not going to talk about video but we’re just going to talk about
our relationship with our users and people who visit our website.
Now you might not consider your website to be quite as essential as I consider my website
but increasingly because of how we now use Facebook marketing and with the Facebook landing
pixel or for the Facebook tracking pixel so that we can know who’s visiting our website
so that we can later on re-market to them, that sort of stuff, we need our website to
be performing well and to be an engaging experience for others.
Now bearing that in mind, I went through over this past winter, I completely rebuilt my
whole website and as is my tradition, I did it myself, learning as I went and making mistakes
as I went.
But finally, I was able to rebuild the website, which is what you see here.
Now I used a theme called Themify’s Ultra theme which is from one of the good theme
companies.
Actually, the same people that make Shopify make Themify and this is what’s called a
parallax site.
If you take a look, there’s an image in the background that other content flows up
over top of.
I quite like the look of it and it’s a dramatic improvement over what our old site was.
Now as I built this site out, I made a lot of mistakes because I'm learning as I go.
I am not a WordPress expert.
I am probably like you where I know enough to get myself in trouble and then I dive in
and try and figure out exactly what’s going on.
So when I built this site, I made a few mistakes which I paid the price for over the past several
months.
The biggest price that we paid is the site was quite slow.
It was taking an excess or around 10 seconds, maybe 11 to 12 seconds on average, to load
the page and I did not necessarily know all of the nuances to speed the page up.
Then I noticed a post that came out.
I'm not sure if it’s a brand new tool but it’s a recently promoted tool for Google
which was basically to get us thinking about how well our sites perform in mobile.
They invite you—and I'm just going to put in my site here, DottoTech.com—to test our
site to see how it performs based on Google’s parameters in the mobile environment.
And along with that, they also tell you how it performs in the desktop environment.
So when I first ran this test for my site, the results came up and they come up fairly
quickly.
Look, they’ve given me poor marks but oh my gosh, those poor marks are so much better
than my previous poor marks.
Good news is that the site, the free fresh site design which basically comes down to
how Themify has designed the Ultra theme is very, very mobile friendly and it does resolve
gorgeously I think in the mobile environment.
The mobile speed is poor.
The desktop speed is also poor.
But these numbers are at least double what I was originally getting.
I was getting in the low 20s on both mobile and desktop speed and they don’t seem to
say very poor.
They just say poor so I'm still poor but I'm twice as good poor as what I used to be.
So what did I do and why did I do it?
I’ll just go through.
Now this might be something that will works for you.
This might be an issue on your site.
It might not.
These are things you’re going to have to decide and if I am misspeaking or not explaining
something 100% clearly for those of you who are WordPress experts, I apologize but please
correct us in the Comments area if there’s something that I'm misrepresenting or not
explaining properly.
But the bottom line is as I went through this score, they talked about how important these
things for this site to load very quickly in mobile, how long people will stay on your
site.
9 out of 10 people are using multiple screens, they say, on a desktop environment so your
site has to load really fast.
I'm not sure whether multiple screens make that big a difference but other reports I've
read say that if your site isn’t loading in 5 seconds in the desktop, you’re going
to lose people that are just not going to have the patience, and they’re saying here
in 3 seconds in the mobile environment.
So obviously speed is essential.
So let’s go take a look at kind of the backend of our site and see exactly what it was that
was slowing things down.
Actually, I’ll look at the front end of the site first and tell you where it began
with.
Now when you look at the speed of your site, there are some factors that the average person
isn’t going to be able to deal easily with.
There’s the CSS, there’s all of the kind of framework and the architecture that delivers
the site that you and I probably can’t do too much about.
What we can do something about is we can do something about how many requests there are
on the homepage, how many redirects there are on the homepage and how optimized the
images are on the homepage and also how many plug-ins we have, how many different resources
have to load when people come to our site.
That’s something that we can think long and hard about and deal with.
So let’s begin with the lowest hanging fruit, which are the images, which ended up being
my biggest problem because I thought there were tools built into WordPress that took
care of this situation but I didn’t exactly know how it was all working.
So we can start right here with the beauty of the parallax-themed sites, these beautiful
graphics that go in the background, which have to load, which if we don’t optimize
these images, make them as compact and compressed as possible, is going to slow down our site.
So here’s a beautiful black and white photo—I think it’s a beautiful black and white photo—that
was in the background.
This was about 90 KB in size, not necessarily huge but as I went through it, I went through
and I picked out each and every image and I recompressed it in Photoshop to make it
as small as it could be with me still being happy with how the image looked.
So I went through all of my different featured images here.
First of all, the background images and then the foreground images and resized them.
Now there are tools within WordPress that resize images on the fly and automatically
compress and optimize images for you, which does help a lot.
But having said that, you can still do yourself a favor by making sure that all of your images
before you upload them are already sized to the appropriate size for the page that you’re
going to be showing them on and are compressed to the level that you are comfortable with,
either as a PNG compression for graphic images and JPEG for photos.
Now where I made a big mistake was on these images here.
These images are the featured images on my WordPress site.
So those of you who are kind of neophytes to WordPress, when you create a post within
WordPress, you can set featured images that are going to display basically how your theme
determines each page gets laid out.
And in this particular case, we’ve got kind of a digest of all of our different posts
that we’ve created.
So it then looks in the website, it looks in the posts and it finds the featured image
and then it displays that as this kind of a thumbnail image in the display.
Now what I didn’t know and what was explained to me afterwards is WordPress doesn’t do
as good, or at least my version of WordPress here, does not do a very good job of compressing
these images.
It compresses inline images that are part of your posts but it doesn’t do as good
a job of compressing these thumbnail images.
So some of these thumbnail images that I had, because we weren’t paying very close attention
as we were uploading them, were up to half a megabyte in size.
My overall site when I first loaded it was 5.6 megabytes in size, just loading my homepage.
By decreasing the size as much as I can, both the JPEG compression and the physical size
of these images, I reduced the size of my homepage loading to about 2 1/2 megabytes
in size, which was my single biggest increase in speed as far as the performance went.
That was huge for me.
I went through and I resized each and every image.
And then I had to go in to the individual posts and I had to replace those images in
the posts.
So here’s a case that I ended up having to do work again for work that I’d done
before because, for lack of a better term, I did it sloppily the first time.
I wasn’t paying attention to what I should be paying attention to as far as the size
of those images and then I paid the price.
My site performed poorly so now I had to go through and I had to clean it all out.
So that was number one and that’s probably the easiest thing that we can all do on our
website.
It’s go through and optimize all of those images.
As a part of that, I also added a plug-in.
Now you want to be careful about how many plug-ins.
You’re kind of damned if you do and damned if you don’t with some of these plug-ins
because every time you add a plug-in, that adds extra weight to your website.
It’s basically extra code you’re installing that has to be loaded.
But what I did add here is I added this EWWW Image Optimizer which as we upload images
goes through and compresses all those images as you upload them.
It’s ideal for images within posts and basically the inline graphics that you’re working
with on your website.
One thing that it also does is it allows us to go back through our entire media library
and compress all of our older images.
So even if you’ve been bad up to now, you can improve things by installing a plug-in
like this and then going back and having it go through and recompress all of the images
that are already uploaded to the site.
Now WordPress will typically do a pretty good job now of taking all of your images that
you include in your posts and resizing them to the appropriate size for that post.
So it will create multiple thumbnails.
And we have to recognize the difference between storing images in your WordPress database,
which doesn’t really slow down your site, and displaying it on the page which is what
does slow down your site.
Now I'm not going to recommend EWWW Image Optimizer.
It was one that well-respected in the online community and I didn’t test out multiple
ones.
I can’t tell you which one is better of the different image optimizers that you can
install in your WordPress site.
You’re going to have to decide that for yourselves.
This is the one that I installed and it’s working quite well for me.
Now going on through, there’s another plug-in here which I've used a lot in the past and
was really costing me as far as speed goes.
Unfortunately, it’s a tool that I really like.
It’s called OptimizePress.
Now OptimizePress is both a theme and a plug-in that does a great job of creating landing
pages.
It’ll also do membership areas and even develop and create the infrastructure for
online courses and that sort of stuff, if you choose to go down that path.
When I first began in the online space, I used OptimizePress to develop my first courses.
So I had OptimizePress all through my site but mainly I used it to create sales pages
and opt-in pages for things like my newsletter, my webinars and also the sales pages that
I sold my product with.
OptimizePress did a great job of building those.
Its competitors include services like LeadPages and several others.
OptimizePress is very well-priced, it’s quite easy to use and I used it a lot.
Now unfortunately, it was probably also slowing down my site a fair bit, at least this is
the information that I was getting from those that know a little bit more about this topic
than I.
So I determined that I was going to take all of the pages in OptimizePress and I was going
to remove them.
But I still needed the functionality of OptimizePress.
I still needed to be able to quickly create landing pages, opt-in pages and sales pages
so I could have kind of learned to do that within Themify, which doesn’t necessarily
have all the hooks out that’s required.
By the hooks out, what I mean is with OptimizePress I was very easily able to create a page that
says, “Please subscribe to this…” whatever, this webinar and it linked back directly to
InfusionSoft, to my CRM and it automatically brought the person in, registered them and
it has allowed me to basically enroll them into my email system so that I could reach
out to them in the future.
So there was a really nice integration for my business purposes to use OptimizePress.
So what I determined we were going to do is we created a subdomain.
We created another site that’s part of the DottoTech domain but it’s not the main DottoTech
site.
It’s now Members.DottoTech.com and that’s where I'm going to host all of my landing
pages.
So I then had to go through the entire site.
I had to find each and every page that required OptimizePress in order to display properly
and I had to basically pry those out and recreate those, export those into the membership page.
This took me two days.
It took me two days of just going through and finding pages, rebuilding them and putting
them across and trying to find all of the back links so that I could direct all of the
traffic to them so that we didn’t have broken links.
When you embark on a journey like this, to be honest, you’re going to break a few dishes.
I've been getting a steady stream of emails over the last several days of people saying
Steve, I was trying to go and watch this webinar replay or trying to opt-in for this free download
and it’s broken; what’s happening?
So I had to go through and I've been fixing those for several days.
I think we’ve got most of them fixed but there’s still probably the odd one that’s
still going to pop up.
So in order to kind of mitigate the damage, what I did was I left OptimizePress installed
but not active so I could activate it quickly if I needed to go in and find a page that
we’ve lost.
But then I’ve taken all of the pages that are related and I moved them into the trash.
I haven’t actually deleted them from the trash so I can still gain access to them if
I need to see exactly what pages are broken.
I’ll probably leave them in the trash about another ten days to two weeks until pretty
much I'm sure that all of the pages, at least the pages that people visit on a fairly regular
basis are now firing correctly.
This was a huge project.
I basically was consumed by doing this and having to concentrate and focus so much energy
on this that I had no time to do other videos.
You might have noticed that we’ve produced less videos in the past couple of weeks because
this project was that big.
It was probably—I wouldn’t say it was as much work as doing the website originally
but there was a lot of learning, a lot of research as I went through cleaning it up
and it was just a very frustrating process because I was redoing work that I’d done
before, that if I’d known better to begin with I wouldn’t have hired to do.
Now if I had hired somebody to do my website, would they would have counseled me against
this?
Possibly.
I could have avoided this if I brought in professional help as we went along.
But the bottom line is now I understand exactly what happens in the website and maybe if you
paid attention, you can learn from my lesson so this won’t all be for a loss.
Once I moved everything out of OptimizePress and got it all migrated across and had all
of my images compressed, then what I did is I went through and I took a look at all of
the different extra plug-ins that we have installed and I really had a heartfelt conversation
with myself about whether or not these are tools that I'm going to continue to use.
Things like my pop-up manager, that pops up opt-ins for the website, very efficient as
far as creating new people registered to our database and signed up for our mail list but
also resources being used and the website slowing down as a result of that.
So you have to go through and I'm basically making decisions on all of these additional
features that I incorporated in the website, determining whether or not we’re going to
keep them.
The other big thing that we added is we added something called W3 Total Cache, which is
something which caches your website—and I don’t understand all the specifics but
what it does is it preloads a lot of your elements so that they fire off more quickly.
Now there are a variety of different ways that you can use caching services or caching
technology to make your website work faster, including off-loading a lot of your heavier
resources to other servers that as soon as people come to your site, everybody kind of
swarms over top of the person that’s receiving and then they send, they fire off information
from multiple sources all very quickly so that websites launch very, very quickly.
It’s a little bit too sophisticated for me.
I don’t know if it’s something that would make that big a difference so it’s something
that I haven’t yet engaged in.
But I'm still learning about it.
Certainly, those of you that are up to speed on what’s happening with WordPress will
understand what I'm talking about a little bit more.
Those of you who have very resource-intensive websites, you should do more research into
that space as well.
Bottom line is I'm pretty pleased with the way it all turned out.
As far as I'm concerned, the website looks as good as it ever did.
The lower resolution images or the smaller images seem to look just as good in all the
environments that I'm looking at them in but the site is loading at least twice as fast.
It’s down to about five seconds in loading time, which I think is well within the range
of being acceptable.
Certainly, I'm not going to spend another week trying to go to the next level of optimization
but really I wish I had done this first kind of deep dive into optimization when I first
set up the site.
But you’re concerned with so many things as far as design elements and functionality
and flow and just your overall business process in the website that dealing with the actual
technical clarity of your website, how well it loads and how fast it loads, it’s understandable
that it kind of slides into second place as far your importance goes.
But if you can, if you can, it will be certainly worthwhile making the extra energy as you
launch it and as you build it.
Having said that, now we’re up and running again and I'm back to thinking about making
videos again with the full confidence that my website is working better than ever and
still occasionally now having to apologize to people for them not finding resources they
want, figure out exactly what page was broken and fix that page.
But that’s now getting to be quite easy and actually to be honest, there are very
few emails coming my way now of broken resources but I'm sure there will be a few more.
Now there are three ways for you to stay in touch with us here on DottoTech.
The first is please subscribe to this channel and secondly, subscribe to our newsletter.
Then you’ll hear about all upcoming tutorials, webinars and free trainings that we offer
here on DottoTech.
And finally, DottoTech is a community-funded channel supported by the generosity of you
folks at the crowdfunding site, Patreon.
I encourage you to drop by our Patreon page, take a look and see exactly what’s involved
in supporting DottoTech and what perks come your way should you choose to become one of
our patrons.
That’s it for today.
Until next time, I am Steve Dotto.
Have fun storming the castle!