5 Ways To Improve Page Load Time
If your page is taking too much time to load then you are definitely losing the edge over your competitors and moreover you are losing your potential users or customers as well. That 1 second delay will cost you more than anything else. It's better you improve your page load time on priority and use below techniques to optimize your website and increase your page speed.
Most of the modern websites use multiple javascript and css files. Minify these resources so that they take less time to reach end user's browser. Try combining various javascript files into one and also merge your css files. There are so many tools available online to do the minification. You can use this link - Minify JavaScript and CSS
You can also set up locally to minify your Javascript and CSS files. Refer this post here to do it manually. It is a simple process and just take one-click.
People are always inclined towards visual content. You need to have images to attract visitors but it takes time to load good quality images. Try compressing your images without losing their appeal. You can refer this link - TinyPng.
Load only necessary images that are immediately visible. You can also lazily load your images. There are various jQuery plugins that helps to do this. Scale your images properly and define width and height of your img tags if possible as it will be easy for your browser to render them faster.
Try enabling the cache at server end - cache resources that are frequently used. Try avoiding DB calls for repetitive data, use caching instead. This really depends on your application - but you can definitely optimize your code and try to bring your data in one DB call.
You can do client side caching as well. HTML5 has application cache which helps to load resources faster. There are other options as well to pre-render the required resources so that it loads faster or it may seem to load faster to the end user.
For better user experience, avoid too many HTTP request. There is a limit on how many concurrent connections a browser can create with your server. If you separately request each resource, page load will take time which will impact user experience. Combine your js and css files as stated in #1. Try creating sprites to avoid loading that Facebook or Twitter icon or any other icons in your site - this really helps to reduce number of calls. If your are site is image heavy, serve these images from different servers.
Use CDNs wherever possible. If you are using Bootstrap or jQuery or ReactJS or Angular or any other library, use their CDN. This will boost the performance of the webpage and most developers use these CDNs for the libraries - there will be a good chance that these libraries are already cached in your end user's browsers.
We personally followed these tips in our projects to optimize our websites and this really works. We hope that you implement these in your current projects and see the difference. We will keep sharing other ways to improve performance. Let us know if you have any query or concerns. Happy Reading.
1. Minification of JS and CSS
Most of the modern websites use multiple javascript and css files. Minify these resources so that they take less time to reach end user's browser. Try combining various javascript files into one and also merge your css files. There are so many tools available online to do the minification. You can use this link - Minify JavaScript and CSS
You can also set up locally to minify your Javascript and CSS files. Refer this post here to do it manually. It is a simple process and just take one-click.
2. Optimize Your Images
People are always inclined towards visual content. You need to have images to attract visitors but it takes time to load good quality images. Try compressing your images without losing their appeal. You can refer this link - TinyPng.
Load only necessary images that are immediately visible. You can also lazily load your images. There are various jQuery plugins that helps to do this. Scale your images properly and define width and height of your img tags if possible as it will be easy for your browser to render them faster.
3. Enable gzip Compression
What the heck is this? gzip compression is like putting your html and other resources into a zip file and sending this as a response from the server. Most of the popular browsers support gzip compression. You can do this setting in your web server. Changes required to do this compression depends on your web server. Just search gzip compression <your web server> you will have multiple results to do the required change.
This is one of the most effective way to improve performance. We did this for one of our client - earlier we were loading around 800 KB data. After enabling gzip compression, size went down to around 125 KB. Compression depends on your data but it really helps to optimize website.
4. Caching - Server Side and Client Side
Try enabling the cache at server end - cache resources that are frequently used. Try avoiding DB calls for repetitive data, use caching instead. This really depends on your application - but you can definitely optimize your code and try to bring your data in one DB call.
You can do client side caching as well. HTML5 has application cache which helps to load resources faster. There are other options as well to pre-render the required resources so that it loads faster or it may seem to load faster to the end user.
<link rel="prerender" href="http://cheezycode.com">
5. Avoid too many HTTP request
For better user experience, avoid too many HTTP request. There is a limit on how many concurrent connections a browser can create with your server. If you separately request each resource, page load will take time which will impact user experience. Combine your js and css files as stated in #1. Try creating sprites to avoid loading that Facebook or Twitter icon or any other icons in your site - this really helps to reduce number of calls. If your are site is image heavy, serve these images from different servers.
Use CDNs wherever possible. If you are using Bootstrap or jQuery or ReactJS or Angular or any other library, use their CDN. This will boost the performance of the webpage and most developers use these CDNs for the libraries - there will be a good chance that these libraries are already cached in your end user's browsers.
We personally followed these tips in our projects to optimize our websites and this really works. We hope that you implement these in your current projects and see the difference. We will keep sharing other ways to improve performance. Let us know if you have any query or concerns. Happy Reading.
Comments
Post a Comment
Hey there, liked our post. Let us know.
Please don't put promotional links. It doesn't look nice :)