Every time a visitor loads one of your web pages in their browser additional supportive web files are loaded as well, like for instance CSS files, Javascripts, design images, etc.. Every time such a file is requested it creates an additional request for the browser to process. We call these requests HTTP requests. Knowing that most of the popular browsers allow about 6 parallel connections per domain you’ll understand that when your website has 6 or more supportive files to load it can already slightly slow your website down. This is because the browser has to wait for the unprocessed files to load until it's done with loading the previous files, creating a load delay.
Combine & inline your CSS scripts
Most website templates require multiple CSS files (usually in the header and the footer) to load to support the template. You should combine these files to one large file to minimize the amount of HTTP requests. It’s as simple as opening all the files and copy & pasting their content to one file. Make sure that file paths inside the CSS scripts are correct. An even better option is not using a file for CSS at all but inlining the CSS script for the above-the-fold content in the HTML head and defer loading the rest of the CSS instead, read more about that here.
Inline smaller Javascripts
When it comes to page speed, the best way to handle Javascripts is to inline them. This is usually only advisable to do with with smaller Javascripts.
Combine all Javascripts
When you can't inline your Javascripts and your website requires multiple Javascript files to load you should try and copy and paste all the Javascripts to one big .js file and call this bigger Javascript file from the HTML head. To reduce HTTP requests it’s generally a smart idea to minimize the amount of Javascripts that are loaded from your web pages. The more Javascripts a web page loads, the slower it usually gets because of the reasons explained above. Only load those scripts your web pages really need.
Minimize the use of design & functional images
You should aim to minimize the amount of images used for design or functional reasons and load only those you really can’t miss. Lots of older, or badly coded designs use images for backgrounds, buttons, borders, hover effects or other design purposes instead of CSS. The same visual effects can usually be achieved by using small CSS scripts which will reduce the number of HTTP requests. A good free online tool to create various visual CSS effects is CSS3.0 Maker.
CSS image sprites
When you really can't escape using images for your design you can combine and save all of those individual images to one bigger file by using CSS sprites. You can then call the individual images from a CSS script by using X and Y coordinates. This way the browser only has to make one HTTP request for multiple images. You can use the CSS Sprites Generator tool to create these CSS sprites. Read the documentation on how to use the sprites on your website.
Convert images to Base64 code
You can encode your functional images (like your logo) to a Base64 string, which basically means you transform an image file into script code. One you have the code you replace the original image tag with this code to display your image. This way your web pages make fewer HTTP requests. You can use the Base64 File Encoder tool for this. Just select the image of your choice and your Base64 image code will be generated automatically.
Minimize amount of plugins
Plugins can be a great asset to a website but usually require several web files to load on your web pages to function. This is why it is important to really only use plugins when you deem it absolutely necessary.
Limit the amount of social buttons
Social buttons (Twitter, Facebook, etc..) are a great way for users to share your website with other people. But social buttons can also slow your site down. The button images, Javascript and CSS files add multiple HTTP requests. Remove the buttons alltogether when you don’t need them. If you do need them, replace the images with Base64 code by using the Base64 File Encoder. Always try to limit the amount of buttons to the most important ones.
Content Delivery Network
A Content Delivery Network (CDN) makes it possible to serve your web files from different (sub)domains. This reduces the number of HTTP request your domain has to process. CDN services also usually provide a network of servers accross different locations all over the world. This makes it possible to deliver your files to your visitors with the smallest response time (first byte time) possible.
Is your web page still making too many HTTP requests?
When your website still makes too many HTTP requests from the same domain (20+ and above) you should create a subdomain and place some of your files on this subdomain. Subdomains are seen as seperate domains by browsers. Because of this you can load a higher number of files at the same time which will speed up your website. Don’t overdo it though, you should never use more as 2 subdomains to serve files as overdoing it will actually slow down your website because of too many parallel connections.
Combine & inline your CSS scripts
Most website templates require multiple CSS files (usually in the header and the footer) to load to support the template. You should combine these files to one large file to minimize the amount of HTTP requests. It’s as simple as opening all the files and copy & pasting their content to one file. Make sure that file paths inside the CSS scripts are correct. An even better option is not using a file for CSS at all but inlining the CSS script for the above-the-fold content in the HTML head and defer loading the rest of the CSS instead, read more about that here.
Inline smaller Javascripts
When it comes to page speed, the best way to handle Javascripts is to inline them. This is usually only advisable to do with with smaller Javascripts.
Combine all Javascripts
When you can't inline your Javascripts and your website requires multiple Javascript files to load you should try and copy and paste all the Javascripts to one big .js file and call this bigger Javascript file from the HTML head. To reduce HTTP requests it’s generally a smart idea to minimize the amount of Javascripts that are loaded from your web pages. The more Javascripts a web page loads, the slower it usually gets because of the reasons explained above. Only load those scripts your web pages really need.
Minimize the use of design & functional images
You should aim to minimize the amount of images used for design or functional reasons and load only those you really can’t miss. Lots of older, or badly coded designs use images for backgrounds, buttons, borders, hover effects or other design purposes instead of CSS. The same visual effects can usually be achieved by using small CSS scripts which will reduce the number of HTTP requests. A good free online tool to create various visual CSS effects is CSS3.0 Maker.
CSS image sprites
When you really can't escape using images for your design you can combine and save all of those individual images to one bigger file by using CSS sprites. You can then call the individual images from a CSS script by using X and Y coordinates. This way the browser only has to make one HTTP request for multiple images. You can use the CSS Sprites Generator tool to create these CSS sprites. Read the documentation on how to use the sprites on your website.
Convert images to Base64 code
You can encode your functional images (like your logo) to a Base64 string, which basically means you transform an image file into script code. One you have the code you replace the original image tag with this code to display your image. This way your web pages make fewer HTTP requests. You can use the Base64 File Encoder tool for this. Just select the image of your choice and your Base64 image code will be generated automatically.
Minimize amount of plugins
Plugins can be a great asset to a website but usually require several web files to load on your web pages to function. This is why it is important to really only use plugins when you deem it absolutely necessary.
Limit the amount of social buttons
Social buttons (Twitter, Facebook, etc..) are a great way for users to share your website with other people. But social buttons can also slow your site down. The button images, Javascript and CSS files add multiple HTTP requests. Remove the buttons alltogether when you don’t need them. If you do need them, replace the images with Base64 code by using the Base64 File Encoder. Always try to limit the amount of buttons to the most important ones.
Content Delivery Network
A Content Delivery Network (CDN) makes it possible to serve your web files from different (sub)domains. This reduces the number of HTTP request your domain has to process. CDN services also usually provide a network of servers accross different locations all over the world. This makes it possible to deliver your files to your visitors with the smallest response time (first byte time) possible.
Is your web page still making too many HTTP requests?
When your website still makes too many HTTP requests from the same domain (20+ and above) you should create a subdomain and place some of your files on this subdomain. Subdomains are seen as seperate domains by browsers. Because of this you can load a higher number of files at the same time which will speed up your website. Don’t overdo it though, you should never use more as 2 subdomains to serve files as overdoing it will actually slow down your website because of too many parallel connections.
