Hey, everybody in this video I'm gonna cover what exactly HTTP requests are
And why having too many of them can really be a factor in slowing down your page loading times
Now HTTP stands for Hypertext Transfer Protocol
and it's what takes place when someone types in your URL into their browser and pings your server
to request a file like a page from your website and it's what takes place when
the server sends them that requested file
Thing is the initial HTTP request
doesn't end there an HTTP request takes place for all the files needed to create the web page
The HTML file the JavaScript and the CSS files image files
Flash content everything each of these components is only delivered from the
server by way of an HTTP request
And 80 percent of the visitors response time
takes place here as all of the requests for files are being submitted to the
server and as the server is receiving those requests and sending the files that have been requested
And generally speaking for mobile users this can be
very frustrating with slow load times since often enough the user has to wait
until all of the assets are fully downloaded before the page is rendered in their browser
And the last thing you want is a frustrated visitor
Most polling data on the subject indicates that people
expect a web site to load in less than two seconds
and if a web site takes more than three seconds to load
than a whopping forty percent nearly half of all users will jump ship and abandon
so obviously this is no small issue and one of the most effective ways
you can speed up your site's load time is to reduce the number of HTTP requests
that are required to render your site now keep in mind that there's no special
number here there's no optimal number of HTTP
requests to be sending for any given site in fact there are plenty of very
large sites out there that require many many files to render and this includes
high definition images which are generally the bulkiest component and so
of course finding ways to optimize and reduce the file sizes of those
components such as high-def images is obviously one of the first topics you
need to explore when optimizing your site
But also you shouldn't ignore this issue of how many HTTP requests are needed because this is
also something that you can optimize and it can have a dramatic effect on how
fast your website's pages are able to load for the end-user
So let's jump right in and look at a real case here
After running our site on SEO site checkup we can see that we've got a
warning here for having too many HTTP requests
Now the great part about this test is it gives you a snapshot
here of where your general issues might be now of course again every website is
going to be different so if you have loads and loads of images then that
might be an area to look into optimizing which I'll address in a second here
But in this particular case with 19 JavaScript files and I can click on this
to see what and where they are located
I might have a think about what I can do here
And by the way having many JavaScript files for instance it's not a
crime in and of itself in fact if you're using WordPress for instance and you
have a lot of plugins then you're probably gonna see a high number of files here
But when it comes to both CSS and JavaScript files it's definitely
worth considering if you should combine them into one file called concatenating
as well as minify them
Now I go into much more detail on how to do that in
our video on how to optimize your page size but basically first you should have
a quick think about whether or not it's worth it
For instance let's say that in
these 19 JavaScript files only one of them is actually used for my main page
Maybe all the others are only used on specific pages
within my website that don't get that much traffic anyway
Well in that case then it wouldn't make
much sense to concatenate them since then I'd be creating a much larger file
that takes much longer to download for no real reason
I'd be having the end-user download all those JavaScript functions
that they're not going to need for most pages of my site
So in that case it wouldn't make much sense
On the other hand and for a lot of cases you might find that most of the
pages on your website call up the same JavaScript files let's say that twelve
of these files are necessary for every page on my site then in that case it
would make sense for me to combine them into one javascript file
Just cut and paste the contents into one file then point the HTML to that java script file
And congratulations you've just killed the need for 11 HTTP requests
And again there's much much more on this in our video on how to
optimize page size but furthermore by minifying the script you can make the
load even lighter and thus make your page load even faster
And the same exact thing goes for your external CSS style sheets instead of loading up five
different sheets every time if you concatenate or combine them into one and
then point your HTML to it you can save for HTTP requests and this is not nothing
And now let's quickly talk about HTTP requests for images this is an
issue for many many websites so let's go over
some ways that we can optimize this here
One trick is to make use of CSS sprites
essentially this is combining several images into one and using CSS to call it up
Thus eliminating the multiple HTTP requests that they would normally require
But before you go running off and putting all your images into sprites
hang on hang on there's a bit more to it than that and more to consider it
First of all they're not ideal for every situation very broadly speaking using
sprites is really best for background images or for buttons and logos etc for
instance let's say we have four menu items on our site each with a different image
instead of four HTTP requests to bring in these four images we can create
a sprite with all four images split them into a four column grid
and then offset the index of each one to tell the browser where to place it
This way it takes just one HTTP request to conjure the contents of the one sprite sheet
Or same goes if you have a button let's say that actually contains three images
One image is for its primary state another when the user hovers their mouse over it
and a third when it's clicked
That's three HTTP requests required for this one button
plus at times a user may experience that the hover image is not
appearing if it hasn't been loaded yet
On the other hand by using a sprite
that's not going to happen since just one HTTP request will pull in all three
images within the sprite
Or let's say that your website uses three different
background images on three different pages
you can actually combine all three images into one sprite saved as a single image file
Then in your CSS
you can create a general class that applies to
all three like to repeat or not to repeat
Then create three different
classes one for each image and use the height and position parameters to
determine which part of that one combined image you want to use for the background
Then in your HTML by applying one of these three classes to a page you
can then set the background to be technically speaking one part out of
three of that combined image
And again this requires only one HTTP request for
the server to send this combined image to the end users browser
and then it's cached and faster to upload
So hopefully you understand the concept using sprites
is an old trick but it can still be very useful in some cases reducing your HTTP requests and load time
That said there are many cases where you definitely do not want to use these sprites
Obviously not in cases where you want users to be able to download a single image
If using a sprite they'll only have the option to
download the entire sprite as a single image
You also want to avoid sprites in
cases where the image sizes vary quite a bit
This will tend to create a very
large sprite and increase the file sizes of the images
Resulting in yeah sure maybe just one HTTP request to get the sprite
But overall a much larger file size than it would have originally
So you always have to weigh the balance
between the number of HTTP requests you're making and the size of the files
that you need to be sent by your server
Now another method for reducing HTTP
requests when it comes to images is to use data URIs to embed images into your
HTML or CSS
Instead of having a link to an external image source
which would require another HTTP request to send for and to get it
with data URIs it basically works like this let's say you have this image which of course is
actually composed of code just to illustrate the general idea here I'll
open up this image in notepad which by default is ANSI encoded here
Now with data URIs you're encoding this as ascii or as a base64 string
which would look more like this
and in your HTML
Instead of linking to
the external image in your images folder on your server
You'd be embedding that
string of code directly into your HTML
So let's say that you have 10 image
links in your HTML and you replace those with data URIs
Your HTML code is going
to be larger of course but in this case just one HTTP request is needed to fetch
all that content from the server
And on that note a good thing to know is that
most web browsers are configured to only make a certain number of HTTP
connections to a server at the same time
Usually this is limited to 2 connections
So by embedding data URIs and keeping that data inline the other available
HTTP connection can be freed up to download other assets for that site
Now the format for embedding images as data URIs is this
And to get that string of
code you can Google data URI generator and find plenty of free options
Just upload your image and generate the string of code
Copy and paste into your HTML
But again before you go running off and encoding all of your images with
this newfangled trick let's quickly talk about some of the pros and cons
when it's best to use them and when it doesn't make much sense
Generally you're always going to want to weigh the pros of less HTTP requests
against the cons of an increase in file size of your HTML or CSS and other factors
you should note that base64 encoding will usually add up to
about 30% more file size compared to its binary version
That said if you're utilizing gzip compression which you
absolutely should be doing anyway then base64 will only end up adding about 2
to 3% an increase in size
now if you're going to be replacing an image often
enough then of course you might not want to go through the hassle of encoding it
as a search string and replacing it in your HTML every time you want to update
Also it also it should be noted that data URIs are very widely supported by
browsers except for Internet Explorer versions 5 through 7
So in my case with
all of the websites that I run I check out my Anna Lynn
regularly and very very rarely do I see users with those old versions of the IE
browser so personally I just let this slide
But depending on your traffic you can make your own determination about that
If it's a concern for you then I'd
recommend only using data URIs on images that don't really matter if they don't show up
Or you can make an Internet Explorer specific style sheet
and have links to the external images there
and by the way I've only been talking about using data URIs for images here
but for the record that can actually be used for anything
but for now let's just keep this limited to images where they are generally applied to
In fact they are generally only applied to very small
images like a few kilobytes or less
for images of symbols icons and so on
This is because one disadvantage of using data URIs is that they're not cached by
the browser so every time a page is loaded the browser has to decode that
string again in order to render the image
But let's say that you have a
website with 100 small icons each with a very small file size
If you have links
to those icons in an external folder on your server then that's 100 HTTP
requests which takes time
So you'd have to weigh that against having a larger
HTML file but one that contains encoded icons
And perhaps the extra time it
takes to download that page is in the end much faster thanks to requiring 99
less HTTP requests
You can also embed these data URIs in your cascading style
sheets not just in your HTML
But again you probably want to limit this to small image files only
if you apply it to a large image it will take longer for the
user to download that stylesheet into their browser and in the meantime unless
you have two separate style sheets that is one for your regular style
definitions and another one containing your data URI images then all the other
assets that are being downloaded to render the page will have to go without
any style element until that data URI image has been downloaded
And when it comes to mobile browsers
the pros and cons of data URIs share a very delicate balance
On the one hand mobile browsers tend to be a bit slow
and decoding these data URIs
Furthermore mobile browsers also tend to have limits
on the overall size of files being cached
Now these limits are likely
trending to be larger but it's still something to be aware of
and then however on the flip side HTTP access over cell networks usually have a high
latency per HTTP request and HTTP response
So in that way embedding the
code string of data URIs into HTML or CSS to save on the number of HTTP
requests can be a very very good thing on mobile browsers
So long as the new file size of that HTML or
CSS doesn't outweigh the performance benefits
So it's true across the board obviously but again especially with mobile browsers
this battle between pros and cons is even more contested so if you want to
give this a go and try it out it's highly highly recommended that you do
some testing in a mobile browser environment and make sure that you're
not losing more than you're gaining
and lastly one more thing to consider
especially if your website is getting a good deal of international traffic is to
use a CDN or content delivery network
Not saying it's not worth it if most of your traffic is in your local country
but it will make an even bigger difference globally
now without a CDN let's say that my server is located in Dallas
so someone from New York hops onto my web site and all that content
the HTML the CSS the JavaScript files images everything all of that has to
travel from Dallas to New York
Typically through to open HTTP connections on the user's browser
So there's a bit of a log jam and let's say this takes five seconds that's not good
but if I'm using CDN I'm using a network of servers to host my content
and the network will send the data from the closest server to the user
so my guy in New York he types my URL into his browser
and those files are coming from a server in upstate New York which is much much closer to him
and to go one further
it's even possible to use more than one CDN
So that in this case
my guy can get the content delivered to him from to nearby servers
and in that case over 4 HTTP connections instead of 2
so now all those assets come in one second instead of five lightning fast
and there you go that's what HTTP requests are in a nutshell and some tips
and tricks on how to reduce them to make your website load as fast as possible
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