By Mevil Bhojani 
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
The caching website’s page data will help to load the website content in a faster way. There are two types of caching:
Browser cache:
- 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.
Server cache:
- 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.
- 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.
Reduce The Use of 3rd Party Plugins/Packages
In the frontend or backend development, 3rd party plugins play an important role to implement different features with less amount of code and time. But with the advantages, it also has one drawback and that is, it increases your final project size. So, if not necessary then try to avoid the use of 3rd party plugins. For example, in Node.JS to allow CORS requests 8 to 10 lines of code is required. So, in this case, it is possible to avoid the use of external packages that are designed to allow CORS requests and developers can manually add this functionality to the website.
Choose Hosting Plan Wisely
Right now to host websites, many options are available. For example shared hosting, dedicated hosting, cloud hosting, etc. If you have enough budget and requirement to load a website quickly then choose dedicated hosting or cloud hosting. In dedicated hosting, you have access to a separate server only for your website. While in the case of shared hosting many websites are hosted on a single server. So, if there is more traffic on any of the hosted websites on the same server, the performance of your website may reduce. Cloud hosting is a trend nowadays because of its pay as you go characteristic. In cloud hosting also you will get a separate server for your website.
Database Optimization
For any website, database operations are always heavy compared to any other operations. Thus, proper database design/structure makes a significant difference on website performance. Database optimization reduces the database system response time and requirement of complex queries to get required data. There are various ways available for database optimization like remove unused tables, use indexes for your database, validate your database design against DBMS normalization techniques like 1NF, 2NF, 3NF, BCNF, etc.
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.
Akshay Alex is an experienced technical Copywriter. A professional in the art of composing technical articles and e-books that are informative and interesting to the audience.
