Every time a visitor loads a web page in their browser additional asset files are loaded as well, like for instance CSS files, JavaScript files, 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 a website has six or more asset files to load it can already slightly slow the 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.
You can use the HTTP requests checker or the page speed test to check how many requests your web pages make. You can also see which type of requests the web pages make (images, CSS files, etc.):
When a web page makes too many HTTP requests you should minimize the number of asset files the page loads by replacing and removing as much of them as possible. Learn how to do that below:
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 number 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.
When it comes to page speed, the best way to handle small JavaScript files is to inline them. Please note that this really is usually only advisable to do with smaller JavaScript, not with larger files.
When you can't inline JavaScript and your website requires multiple JavaScript files to load you should try and copy and paste all the JavaScript files 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 number of JavaScript files that are loaded with a page. The more JavaScript a web page loads, the slower it usually gets because of the reasons explained above. Only load those scripts a web page really needs.
You should aim to minimize the number 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 CSS 3.0 Maker.
When you really can't escape using images for a 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.
You can encode functional images (like a 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.
Plugins can be a great asset to a website but usually require several web files to load on a web page to function. This is why it is important to really only use plugins when you deem it absolutely necessary.
Social buttons (Twitter, Facebook, etc.) are a great way for users to share your website with other people. But social buttons can also slow a website down. The button images, JavaScript and CSS files add multiple HTTP requests. Remove the buttons altogether 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 number of buttons to the most important ones.
A Content Delivery Network (CDN) makes it possible to serve web files from different (sub)domains. This reduces the number of HTTP request your server has to process. CDN services also usually provide a network of servers across different locations all over the world. This makes it possible to deliver files to your visitors with the smallest response time (first byte time) possible.
When a web page still makes too many HTTP requests from the same domain (20+ and above) you should create a subdomain and place some of the files on this subdomain. Subdomains are seen as separate 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, and you should never use more than two subdomains to serve files as overdoing it will actually slow down your website because of too many parallel connections.
We can help with that! We have professionally optimized the speed of thousands of websites. Because of this we know how to get the best results quickly while keeping our prices low. Get an instant price quote for our services now.