A Complete Guide to Improve Page Speed
By Mevil Bhojani 
By Akshay Alex Generally, at the time of website development, developers mainly focus on achieving functionalities. But with the functionality, there are other aspects that need to be considered. Out of those aspects, one important aspect is the speed of the final website.
Even though your website has unique features implemented with it, if the website’s load time is high, then it affects your business in many different ways like drop off in traffic, loss of money, negative impact on SEO, etc. So, throughout this article, we will discuss the different ways through which it becomes possible to increase page speed. Let’s begin.
Reduce Unnecessary and Avoidable API Calls to Server
- Implement input data validation on both ends i.e on the front-end and backend. Due to this, you can achieve your goal to call an API in a single request. If validation is not implemented on the front-end side, then in the first request, the server will send a data validation error in the response and you have to again send the request with the correct data.
- Wherever possible store frequently required data on the frontend side. On the website, sometimes it is required to show the same information on multiple pages. So, instead of making an API call on each and every page, use the concepts like Local storage, Session storage, cookies, etc to keep data saved on the frontend side. If you are building a frontend using the latest frontend frameworks, then use state management facilities provided by the used framework. For example, if your building a frontend in vue.js then uses vuex that is the state management pattern + library provided by vue.js.
- Make the frontend design in a way that requires less amount of data from the server in a single API call. For example, you have hundreds of products in your database, then instead of showing all the products on the first page, use the pagination or lazy loading of data in your design. With that Make the backend API in a way that it sends paginated data instead of sending all the data in a single call.
- Try to reduce the 3rd party API calls from the website. If it is not possible to remove 3rd party APIs from the website then analyze the updated pattern of the API’s response data. If response data is not updating frequently then store them in your database and write a cron job that runs once a day to get and update data from the 3rd party API.
Use Minified Version of JS, CSS
Minified versions of the CSS or JS comparatively take fewer bytes to download than the original one. So, the browser will download it quickly. There are many tools available like uglify.js, CSS-minify which convert your regular JS and CSS into its minified version. Nowadays because of Node, it becomes easy to convert regular code and all dependencies into a single bundle file using tools like Webpack and Browserify.
Reduce Image Size
- Website pages which are having many images on them take too much time to load compared to pages which are having just text on them. So, in that case, either we have to resize or compress the images in a way that the quality of the image should not be compromised.
- Reducing the size will reduce image quality, but a 10% to 20% reduction in image quality won’t change its appearance on the website. Sometimes adopting new image formats, such as WebP and JPeg XR, can also help reduce image weight by 20% to 50% without sacrificing quality.
Cache Page Data
- Nowadays, mostly all the latest browsers provide the facility to cache page data. When you visit any new website for the first time, the browser will cache all the required JS, CSS, or image files in its cache. So, next time when you visit the same website, the browser will load the data from the cache instead of sending requests for each resource to the server. Browsers store the data in a cache for a specific amount of time. After that browser will clear the cache and download the latest content of the website. You can check the cached data in the browser’s console.
-
Just like the browser, the server can also cache the data. But instead of storing it on the same machine, it stores the data nearer to the server’s location.
Once a server cache the website data, next all the requests will get a response from the cache without reaching out to the server for each request. Developers can set the cache expiration time in the request header. Once the set expiration time is over, all the cache data will get cleared and on the next request of the website, the server will again store the latest data in a cache.
Server cache:
Reduce The Use of 3rd Party Plugins/Packages
Choose Hosting Plan Wisely
Database Optimization
Conclusion
Above mentioned all the tips are common for each type of website. It is not necessary that every step is well suited for your website. But you can keep all the points in your mind at the time of development. So, that you don’t have to spend more time to increase page speed once the development is about to complete. There are also many other ways that can increase your page speed. So, if you are facing slow page speed issues then analyze and find the root cause behind it by debugging your site and applying different solutions for the issues. With that, you can also use different tools like GTmetrix to analyze the page’s speed performance.
At Alian Software, our team of highly experienced developers will help you out with your website’s page speed. You can simply call us or Contact us at sales@aliansoftware.net.
Hire the best developers and
designers around!
Mevil Bhojani is the Co- Founder of Alian Software. A technical expert helping more than 100+ Fortune companies in developing cutting-edge custom software using the leading technologies by providing talented and skilled resources.
Reduce Unnecessary and Avoidable API Calls to Server
- Implement input data validation on both ends i.e on the front-end and backend. Due to this, you can achieve your goal to call an API in a single request. If validation is not implemented on the front-end side, then in the first request, the server will send a data validation error in the response and you have to again send the request with the correct data.
- Wherever possible store frequently required data on the frontend side. On the website, sometimes it is required to show the same information on multiple pages. So, instead of making an API call on each and every page, use the concepts like Local storage, Session storage, cookies, etc to keep data saved on the frontend side. If you are building a frontend using the latest frontend frameworks, then use state management facilities provided by the used framework. For example, if your building a frontend in vue.js then uses vuex that is the state management pattern + library provided by vue.js.
- Make the frontend design in a way that requires less amount of data from the server in a single API call. For example, you have hundreds of products in your database, then instead of showing all the products on the first page, use the pagination or lazy loading of data in your design. With that Make the backend API in a way that it sends paginated data instead of sending all the data in a single call.
- Try to reduce the 3rd party API calls from the website. If it is not possible to remove 3rd party APIs from the website then analyze the updated pattern of the API’s response data. If response data is not updating frequently then store them in your database and write a cron job that runs once a day to get and update data from the 3rd party API.
Use Minified Version of JS, CSS
Minified versions of the CSS or JS comparatively take fewer bytes to download than the original one. So, the browser will download it quickly. There are many tools available like uglify.js, CSS-minify which convert your regular JS and CSS into its minified version. Nowadays because of Node, it becomes easy to convert regular code and all dependencies into a single bundle file using tools like Webpack and Browserify.
Reduce Image Size
- Website pages which are having many images on them take too much time to load compared to pages which are having just text on them. So, in that case, either we have to resize or compress the images in a way that the quality of the image should not be compromised.
- Reducing the size will reduce image quality, but a 10% to 20% reduction in image quality won’t change its appearance on the website. Sometimes adopting new image formats, such as WebP and JPeg XR, can also help reduce image weight by 20% to 50% without sacrificing quality.
Cache Page Data
- Nowadays, mostly all the latest browsers provide the facility to cache page data. When you visit any new website for the first time, the browser will cache all the required JS, CSS, or image files in its cache. So, next time when you visit the same website, the browser will load the data from the cache instead of sending requests for each resource to the server. Browsers store the data in a cache for a specific amount of time. After that browser will clear the cache and download the latest content of the website. You can check the cached data in the browser’s console.
-
Just like the browser, the server can also cache the data. But instead of storing it on the same machine, it stores the data nearer to the server’s location.
Once a server cache the website data, next all the requests will get a response from the cache without reaching out to the server for each request. Developers can set the cache expiration time in the request header. Once the set expiration time is over, all the cache data will get cleared and on the next request of the website, the server will again store the latest data in a cache.
Server cache:
Reduce The Use of 3rd Party Plugins/Packages
Choose Hosting Plan Wisely
Database Optimization
Conclusion
Above mentioned all the tips are common for each type of website. It is not necessary that every step is well suited for your website. But you can keep all the points in your mind at the time of development. So, that you don’t have to spend more time to increase page speed once the development is about to complete. There are also many other ways that can increase your page speed. So, if you are facing slow page speed issues then analyze and find the root cause behind it by debugging your site and applying different solutions for the issues. With that, you can also use different tools like GTmetrix to analyze the page’s speed performance.
At Alian Software, our team of highly experienced developers will help you out with your website’s page speed. You can simply call us or Contact us at sales@aliansoftware.net.
Hire the best developers and
designers around!
Mevil Bhojani is the Co- Founder of Alian Software. A technical expert helping more than 100+ Fortune companies in developing cutting-edge custom software using the leading technologies by providing talented and skilled resources.