Improve Web Application Front-End Performance

Web Application Front-End Performance অনেক ইম্পরট্যান্ট একটা জিনিস, যদিও আমরা এই জিনিসগুলো অনেকটাই সময় ignore করে যাই। অনেকেই হয়ত জানি না আবার অনেকেই চিন্তা করি আমার ত প্রজেক্ট কাজ করছে এত কিছু চিন্তা করার কি আছে। কিন্তু ভাল একটা Application Develop করার ক্ষেত্রে এই জিনিসগুলো মাথায় রাখতে হবে।
৩ টা ক্যাটাগরিতে Performance Issue গুলো আলাদা করা হয়েছে।

1.High 2.Medium 3.Low

High Priority

1. Avoid iframes

Iframes ব্যবহার করার আগে দেখতে হবে অন্য কোনো পসিবল ওয়েতে এই কাজ গুলো করা যাচ্ছে কিনা । কিন্তু যদি একবারেই না করা যায় তাহলে iframes ইউস করবেন। যত সংখ্যক কম ব্যাবহার করা যায়।

2. Minify CSS

এইটা একটা কমপ্রেসর এর মত করে কাজ করে আপনার CSS ফাইলকে অনেকটা কম্পাইলার ইজি রিডেবল করে তুলে.
Without minify:

body {

color: purple;

max-width: 75rem;

margin: 0 auto;

padding: 0 1.25rem 1.25rem;

}

With minify:

body{color: purple;max-width: 75rem;margin: 0 auto;padding: 0 1.25rem 1.25rem;}

Website : https://goonlinetools.com/css-minifier/

3. Non-Blocking-CSS

CSS files can block the page load and delay the rendering of your page.

<link rel="preload" href="your style link" as="font" type="file type">

Preload is a new web standard aimed at improving performance and providing more granular loading control to web developers. It gives developers the ability to define custom loading logic without suffering the performance penalty that script-based resource loaders incur.

CSS non-blocking এর কাহিনী বলতে গেলে সহজ ভাষায় আমরা CDN ইউজ করে কোনো জায়গা থেকে স্টাইল লোড করে নিয়ে আসি। ত আসলে কি হচ্ছে সে পেইজ লোড করার আগে সে এই লিংকে যেয়ে স্টাইল নিয়ে আসে একটা CSS এর ট্রি তৈরি করে তারপর DOM লোড করে তার মধ্যে স্টাইল এড করে। এই কারণে পারফরমেন্স ইস্যু তৈরি হতে পারে যার কারণে preload ইউস করা ভাল।

4.Inline Critical CSS

Please avoid inline critical css in your html file

5.Stylesheet Complexity

Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.

URL: https://www.projectwallace.com/analyze-css

আপনি এই লিংকে যেয়ে আপনার ডুপ্লিকেট CSS এবং CSS ফাইল কমপ্লেসিটি দেখতে পারবেন এবং আপনার মত করে ফিক্স করে নিতে পারবেন

6.Images Optimization

সব সময় ইমেজগুলো কে SVG format use করার চেষ্টা করবেন কারণ একটা ব্রাউসারকে অন্য ফরমেট এর ইমেজ লোড করতে অনেকটাই টাইম লেগে যায়। যেখানে SVG ফরমেট এত ছবি অনেক সহজেই লোড করতে পারে।

7. Minify JavaScript

আপনি যদি Minify CSS বুঝে থাকেন তাহলে এইটা ও বুঝার কথা।

URL : https://github.com/terser/terser

URL: https://www.npmjs.com/package/uglify-js

আপনি যেকোনো একটা প্যাকেজ ইউস করতে পারেন এই জিনিসগুলো কে কমপ্রেস করার জন্য

8. Page weight below 1500

Ideally you should try to target < 500 KB but the state of web shows that the median of Kilobytes is around 1500 KB (even on mobile).

URL : https://httparchive.org/reports/page-weight#bytesTotal