Hey everyone in this video we are going to have kind of a quick
general overlook at some things that you can to if your website
HTML page size is larger than the average bear
of-course every website is different and the reasons why
its size might be bloated are totally different but
today we'll look at some common causes and what you can do about them
after running our website on
seosite checkup we can see that we failed this
HTML page size test with the average
size being 33kb our here
is 42.01 that is over 30% larger
than average which will affect page loading time
and that in turn leads to inpatient users clicking away from us
faster. In generally hurting our seo efforts
so we'll click on how to fix and let me give you the basic rundown on
each of these four suggestions which
are the most common problems associated with the bloated web page
now mind you this is only dealing with the size of your
website's coding this is separate than optimizing
your image sizes or other issues
this video is just about bloated code now it's also
more time-consuming and labor-intensive and we
won't go into detail here but of course one thing you
can do is to manually comb through all your pages to remove
unnecessary or redundant code
but for now let's jump in here and look at a few other things
that you can do basically they fall into two categories
you've got compression and minification
now minification is basically removing all the extra
spaces all the lines and the characters that browsers
don't actually need to interpret a file
so while your HTML page might be better for
you to edit and develop looking like this all a browser
actually needs to interpret it correctly is this
same goes for your CSS files
and your javascript files
now this is incredibly easy to do and there are plenty of online
tools out there for you to do it so you don't have to spend all
day combing through your pages and hitting
the backspace and delete Keys first of all
if you're using WordPress then you're just a few clicks away from both
minification and compression all you're gonna need to do
is install and enable a plug-in just come to plugins
add new
and search for auto optimized sort of auto and
optimize put together there
this plug-in will handle everything recovering in this video
all in one go it will minify
your HTML to make it as lightweight as possible
as well as minify and compress
your javascript and CSS files
so just click install
and activate
then visit your installed plugins and find it again
click on settings
and here you can select the options to optimize your HTML
code your javascript and CSS
save the changes and you're done
now if you don't have WordPress you'll need to be a bit more hands-on
with this and do it manually so let's cover
minification first if you google
minification tools you'll find google developers has
some great recommendations or you can
plenty of other free options out there
now if you haven't done it already be sure to backup
your site and all of its files just in case lightning strikes
and something goes totally wacky
then run your HTML pages through the mini fire tool
if you want you can always save these under a temporary name
upload them to your site's directory
and then test them to make sure they work
you should get the exact same results only with a
reduced file size therefore less
bandwidth is required for the end-user to open them up in their browser
making for a faster page loading time
now we tackle the subject of avoiding inline css
in another video so be sure
to check that out if you have a website that's not taking advantage
of external CSS
but assuming that you do it's also best to
consolidate or concatenate that CSS
into one minified file
again you can just google minify CSS and
minify javascript to get several free options
that operate all just about the same at minify
org you can actually minified both javascript and
CSS so let's go ahead and do that with our sites
CSS
and then with our JavaScript files
after minifying our Jas and CSS
and adding min to their file names
we'll upload them onto our server now from here
all we need to do is point our HTML to refer
to those files instead of our old ones and we're
set
great now we're minified this should help decrease
our page load times since our HTML our
JavaScript and our CSS is now all leaner and meaner
now for the second part let's turn to compression
if you've ever archived or unzipped a set of files with
WinRAR WinZip then you probably understand
the basic concept
you send a file or a set of files to a
program that reads the contents and then uses
expressions within an algorithm to reinterpret them so
let's say we have a word document with the sentence all work
and no play makes Jack a dull boy written 40,000
times now of course I wrote this manually
in no way did I copy and paste any of this that's how dedicated I
am and now we have our word doc that's
40 kilobytes in size and if we compress
it we get a file of 13 kilobytes
that's because the archiving program looked at all that text
and said ok instead of looking at this as
thousands and thousands of instances of the same sentence
let's simply keep the first sentence as our foundation
and then just say that it's repeated 40,000 times
so now we have a file that's much smaller in size and therefore
faster to send and the end user
that receives it all they have to do is use the same program
or a similar one to use the same
algorithm to interpret the compression
it says ok this sentence is to be repeated 40,000
times no problem here you go
and now the end user has that same original file without
having to download the entire contents
makes for a much faster process with less data transfer
it's the same principle with HTML compression
without it let's say that someone visits your site
there on their browser and they type in your address asking
your server for the main page the server says
ok no problem here you go and it sends
the content which let's say is 50 megabytes
fine now what we're doing with compression is that
by enabling compression someone types in our
URL on their browser to ask
our server for the page contents in doing so
their browser also says oh hey by the way
I can also accept a compressed version
to which our server says awesome in that case
instead of sending you the 50 megabyte version although ahead
and save us all time by giving you this 20 megabyte compressed
version here you go the users browser receives
it uncompressed as it in a nanosecond and
we've all saved time and bandwidth good for them
and good for you
now it's very likely that you already have compression enabled
one of the most common and effective methods is enabling
gzip which is an open source lossless algorithm
compression so first let's go
ahead and check if we've already got that taken care of on
SEO site checkup we can come to the free tools section
here and then come down here to the HTML compression
gzip test
enter in the URL of the website you'd like to check
and if you've got gzip enabled then you're good to go
everything i've just discussed is already in the works and
you're already taking advantage of compression
if you don't have gzip enabled then let's dive
in and look at how to do so
one method if you're running Apache is to add some
code to your htaccess file this is
located in the root directory of your website
and you'll need to be able to view hidden files
in order to see it
just open that up and add this code to it
feel free to copy and paste it from the description below
and by the way there are actually shorter versions of this that don't
bother compressing the fonts and the icons and so on
or that have these special instructions for older browsers but
you know what there's no harm in covering all the bases just save
and congrats you now have gzip enabled compression
if you're running engines on the other hand then you'll need to add
this code to your config file
and there you go you've got compression enabled
you've got your HTML your CSS and JavaScript
concatenated and minified and your website
should now be as lean and mean as possible
faster loading times happier end users time spent on your site all in all
and therefore higher click-through rates and
boosting your SEO efforts
feel free to check out our other videos so you can keep fine-tuning and getting the most
out of your SEO and click subscribe to stay updated
with new tips and tricks to get you to the top of the
search engine results pages