In this article I will list a few things that can be done to speed up website. I will give just brief description on each topic and give links to find more details on those topics. I have used tools like Google’s Page Speed, YSlow, Audits Tab in Chrome Developer Tools.
1. Minimize the number of HTTP requests
This will help in making lesser connections to fetch the components request to render the page. Here are some methods that can be used to reduce the number of HTTP connections:
- Combining images using CSS Sprites
- Combining external CSS files
- Combining external JavaScript files
- Minimize HTTP Requests – Yahoo
2. Move all CSS to Head section
This helps in making the page appear to be loading faster. The browser would render the page progressively if the Style-sheet is in the Head section. If we load the style sheet near the bottom of the page, the browser may delay rendering of the contents of the page and the user may see just a blank page.
Following links provide more details on this:
- Put Stylesheets at the Top – Yahoo
- Put CSS in the document head – Google
3. Minify JS & CSS Files
Minification involves removing the comments and unnecessary spaces from the file. This will result in Less Data being fetched. We should minify all the CSS and JavaScript code in external as well as the code which is inline in the HTML file. We should also minify the HTML pages.
Following links provide more details on this:
- Minify JavaScript and CSS – Yahoo
- Minify JavaScript – Google
- Minify CSS – Google
- Minify HTML – Google
4. Remove duplicate files
This would result in Less Connections & Data. If we include the same file multiple times in the page, then the browser would make multiple HTTP requests to fetch these files and also load the same content again and again.
Following links provide more details on this:
- Remove Duplicate Scripts – Yahoo
5. Remove files & CSS not used.
This would result in Less Connections & Data. Even if we load some external file and not use, it will result in making an HTTP request and the fetching the data, downloading it and then parsing it. This process would take sometime which is actually not useful. So if we remove the unnecessary / unused files we can save the above time.
Following links provide more details on this:
- Remove unused CSS – Google
6. Delay loading of JS files until necessary.
Move them to the bottom of page if possible.
Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding up execution and rendering time.
The JS files block the browser until the file is downloaded and parsed. The browser cannot perform any other activity during this period.
Following links provide more details on this:
- Defer loading of JavaScript – Google
- Put Scripts at the Bottom – Yahoo
- Defer parsing of JavaScript – Google
7. Use caching, add Expire Headers to use the Browser caching
This will result in Less Connections & Data after the 1st visit to the site. We should add expire headers to files that are not frequently changed as this would result in the browser loading the resources from its Cache and not required to fetch it from server.
Following links provide more details on this:
- Add an Expires or a Cache-Control Header – Yahoo
- Leverage browser caching – Google
- Leverage proxy caching – Google
- Configure ETags – Yahoo
8. Combine external JS & CSS Files
This will result in Less Connection. When we combine multiple CSS files into one file, we reduce the number of HTTP requests required to fetch the entire CSS. Similarly, if we combine multiple JavaScript files, we save on HTTP requests. This results in lesser delays in downloading other resources.
Following links provide more details on this:
- Combine external CSS – Google
- Combine external JavaScript – Google
9. Combine images into CSS sprites
This would reduce the number of image requests, i.e. less connections. We should combine all the images that are to be loaded at the same time into one image and use CSS to display them.
More details on how to use CSS sprites can be found here.
Following links provide more details on this:
- Combine images using CSS sprites – Google
10. Compress components with gzip
This would reduce the response size by about 70% and hence the time required loading the resource. This will result in Less Data. Use this for CSS and JS files and not for images or other binary files. Also, alphabetize HTML & CSS Attributes. This can reduce the size of gzip.
Following links provide more details on this:
- Enable compression – Google
- Gzip Components – Yahoo
- Use compression to make the web faster – Google
11. Load JS asynchronously
This will help in loading multiple resources in parallel and not make the browser wait for the resource to be downloaded completely before processing other requests.
Following links provide more details on this:
- Prefer asynchronous resources – Google
12. Optimize images
Reducing the size of images can help in less data. We can do lossless compression of images to reduce the size without reducing the quality. Also, we should have the images scaled on the server according to the size which has to be displayed. This can save the browser from downloading lot of data.
Following links provide more details on this:
- Optimize Images – Yahoo
- Optimize Images – Google
- Serve scaled images – Google
- Don’t Scale Images in HTML – Yahoo
- Make favicon.ico Small and Cacheable – Yahoo
- Specify image dimensions – Google
Sources:
GTmetrix is a good website to perform the above mentioned tests on your website. It gives you analysis from both PageSpeed and YSlow.
Note: I do not take responsibility for proper functioning of the above mentioned steps under all circumstances. If you download any files, programs from my blog then make sure you protect yourself. I am not responsible for any damages to your computer, website, blog, application or any thing else. I am not affiliated with or do not endorse any of the above mentioned sites.
Pingback: Minifying CSS and Javascript automatically in ASP.NET « Lupi on Software
I’ve just used PageSpeed based on your suggestion and I got a score of 76. Is that bad or is it okay?
Hi Carrie,
That is a good score. I used PageSpeed on your site and see that most of the content that you have on your site which is showing up as should/can be optimized in the results is out of your control. However, there are a few things which you can probably fix and make you site a little faster. E.g. you can reduce the size of your header image without any effect on the image resolution. You can contact me and I can help you out in all the optimization that we can do.
Hi,
How can we minimize the number of HTTP requests in a wordpress site?
Could you please write a detail post for how to speed up wordpress site by minimize http request and other tichnicues.
Thanks
Hi Sohail,
I currently don’t have many steps to minimize the number of HTTP request in a WordPress site. I will surely try to write a post on this. In the mean time, I would recommend using less plugin, i.e. using the plugins you actually need, and not installing every plugin. The reason I say this is because not all plugins are developed in an optimized way. So always install only the plugins that you require.