Improve Web Application Front-End Performance
follow these and get faster load
Md Abdul Ahad Linkon Software Engineer | Researcher in Machine Learning Im a dedicated software engineer from Bangladesh, specializing in the MERN stack and proficient in both front-end and back-end development. With a BSc in Computer Science and Engineering (CSE) from IUBAT - International University of Business Agriculture and Technology, I have a solid foundation in software engineering principles. Their expertise extends to database management with experience in SQL and NoSQL. Currently, I'm conducting research on Convolutional Neural Networks (CNNs) for drought detection, exploring innovative machine-learning techniques to address environmental challenges. Combining practical software development skills with advanced research in machine learning, Linkon is committed to leveraging technology for impactful solutions.
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
