This is the third post in the development best practices series. In previous two posts, the first post ( JavaScript Development Best Practices ) was focused on overall perspective of the best practices. With second post ( Front End – Planning and Building “a performance driven and SEO friendly website” ) , I attempted to cover the detailed aspect of one of the topics mentioned in the first post. In this post, I will continue to expand the topic and intend to cover “Lazy loading of CSS and/or JS“, “Image sizing and resolution“.

Lazy loading and rendering/handling of CSS and/or JS

Please evaluate your needs of using third party libraries carefully. If you must use third party CSS or JS, you must download the required CSS/JS preferably. If not, then import only the required function or component from the library. The reason of this recommendation is that the whole library will eventually increase the size of your build ( in case you are using react/ angular etc.) or a web page. The one aspect which could significantly impact the speed of a web page is the way a developer handles CSS and JS. There are abundant third party resources which can make the life of a developer easy. While this may reduce the work and efforts at the developer side initially, however, these resources should be considered carefully. When I say carefully, I mean to say that a developer should select the required component only as there could be hundred of components which could be available. For example, when using fonts, it would be only couple of font types which are required and to be used. However, a developer can either download these fonts into the assets ( “please note that assets is just a name”, it can be any folder having your static assets) folder or can refer these directly from the Content Delivery Network (CDN) ( which I don’t refer personally due to dependency). The same is true for third party CSS libraries like bootstrap and material as these have been used widely among the community. The second important aspect is that a developer should load the relevant CSS and JS only on the pages where it has to be applied. This means that the size of a page can be reduced by not calling such scripts from a common header appearing across pages. OR this should be handled carefully by using logic to load only relevant part at relevant pages. The third aspect to this is that a developer must minify the content of their CSS and JS. There are so many online tools available which can do this task for you. However, if you are using react, angular and such framework, then while creating a production build, these frameworks take care of minification of the code. The minification of the CSS and JS is basically reducing the white spacing between the code with their core functionality intact. This reduces the size of the CSS and JS significantly.

Image sizing and resolution

“How to lazily load the images” was described in other article. Let us see how an appropriate strategy to handle images and their resolution can help us in page speed and therefore increase chances of better ranking at search engines. Let us consider this with an example. Let us say that a user has an option to upload his profile image over our website. He uploads a high resolution image ( 1900+ W (width) * 1000+ H (height) ) which is huge in size ( say in MBs). There are “N” number of implications of allowing a huge image size and resolution (unless this is a logical/business requirement). This image has to be shown at various places like the user’s profile page with size no bigger than ( 80 W *60 H), user photos with different size requirements of the same image. Now, the interesting part starts here. Imagine a developer has saved this image as uploaded by developer i.e. same quality, resolution, size and format ( jpeg, jpg, png etc). This would have a huge impact on the overall speed of the page because the same image is being rendered at all the places with different size and resolution requirements. How to handle this?The developers must define and assess the resolutions and sizes to be shown at various places. Thereafter, write the code to create different sizes and resolutions of the same image to be used at different places i.e. call the smaller sized image at the user profile page ( in above example). The format of the image also plays a significant factor in the image handling strategy. The WebP format for the images is compatible with almost all the latest version of all the leading browsers. In case a browser doesn’t support then a developer can validate the browser and load another format. The WebP format provides the compressed images required for website or specifically for web. Further details around this can be found at https://web.dev/uses-webp-images/ .

Conclusion

Both the strategies mentioned above play a significant role in getting better rank over serach engines.

Once again, I would to request your feedback and encouragement to write down further about my experiences and knowledge about different topics. If you have any specific question about the topics in this article, please feel free to share your feedback.