Building Scalable Code that Makes Web Site load faster
As a being performance and security test lead I reviewed many codes and found the similar type of the coding practices that makes the web page slow. Following is the high-level guideline to write the scalable and better performance code
1. Used and non-used code.
Separate the code into two segments first. The used and non-used code. The page must not contain any unused code. This includes the comments. This practice will reduce the page size as well as undesired functionality from the page.
2. Minification, Compression, and CDN
All the static objects like CSS and JS must be minified. Minified code reduces the network transfer time and thus increasing the page load speed.
All the minified code must be compressed (Do not compress if the code is going to be used on the older browsers like IE9). Compression can be handled by the web server configuration as well as you can compress file manually and deploy it to the server with adding the mime type as compressed or gzipped.
If you are using the common libraries like jquery or bootstrap, it is better to use them from the CDN server as compared with hosting it on your own server and transmitting them. A number of requests to your server should be as less as possible. Modern browsers support maximum six connections to one domain so if you have 100 objects that the total serving time for the web page will be more and the site loading time will be more. If you spread the common files among different CDN servers the page load time will be more as it will let you open multiple connections for your website.
Define the priority of the objects (CSS, js) on your site. The priority of the objects must be defined as following
1. Static and Dynamic
The static objects can be served first as it will start loading the page faster as compared with the dynamic objects. The page can be split into two multiple files and then cross-referenced to multiple pages
2. Header and Footer
Once the priority is defined, the objects needs to be loaded first should go to the header and the objects with low priority should go to the footer. This will dramatically improve the page load time.
3. Async and Defer
Once the objects are placed in the header and footer you can add async or defer to make the page performing better.
Another important factor that impacts the page speed are images. From my experiences, I saw that many of the developers are using very high scale images that loads slowly and overall make the page performing slower. To make the page faster right scale images should be used along with the progressive compression. Use jpeg progressive compressed images as much as possible.
Apart from the progressive compression lazy load should be in place to load the images only when it gets focus. If the end user is not navigating to the section the image should not be loaded.
I hope all the above-mentioned points will help you make the highly scalable code. Do let me know your comments in below section if you would like to know more about the scalable code writing.