পেজস্পিড ইনসাইটসে মোবাইল বিশ্লেষণ

PageSpeed ​​Insights একটি পৃষ্ঠা বিশ্লেষণ করে যে এটি একটি মোবাইল নেটওয়ার্কে একটি সেকেন্ডের মধ্যে একটি পৃষ্ঠা রেন্ডার করার জন্য আমাদের সুপারিশগুলি অনুসরণ করে কিনা তা দেখতে৷ গবেষণায় দেখা গেছে যে এক সেকেন্ডেরও বেশি সময় দেরি হলে ব্যবহারকারী তাদের চিন্তার প্রবাহকে বাধাগ্রস্ত করবে, একটি খারাপ অভিজ্ঞতা তৈরি করবে। আমাদের লক্ষ্য হল ব্যবহারকারীকে পৃষ্ঠার সাথে নিযুক্ত রাখা এবং সর্বোত্তম অভিজ্ঞতা প্রদান করা, ডিভাইস বা নেটওয়ার্কের প্রকার নির্বিশেষে।

ওয়ান সেকেন্ড টাইম বাজেট মেটানো সহজ নয়। সৌভাগ্যবশত আমাদের জন্য, পুরো পৃষ্ঠাটিকে এই বাজেটের মধ্যে রেন্ডার করতে হবে না, পরিবর্তে, আমাদের অবশ্যই এক সেকেন্ডের মধ্যে উপরের ভাঁজ (ATF) বিষয়বস্তু সরবরাহ এবং রেন্ডার করতে হবে, যা ব্যবহারকারীকে যত তাড়াতাড়ি পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট শুরু করতে দেয় সম্ভব . তারপরে, ব্যবহারকারী যখন বিষয়বস্তুর প্রথম পৃষ্ঠাটি ব্যাখ্যা করছেন, তখন বাকি পৃষ্ঠাটি ধীরে ধীরে পটভূমিতে বিতরণ করা যেতে পারে।

উচ্চ লেটেন্সি মোবাইল নেটওয়ার্কে মানিয়ে নেওয়া

মোবাইল ডিভাইসে এক সেকেন্ডের ATF মানদণ্ড পূরণ করা অনন্য চ্যালেঞ্জের সৃষ্টি করে যা অন্য নেটওয়ার্কে নেই। ব্যবহারকারীরা বিভিন্ন 2G, 3G, এবং 4G নেটওয়ার্কের মাধ্যমে আপনার সাইটে অ্যাক্সেস করতে পারে। নেটওয়ার্ক লেটেন্সিগুলি একটি তারযুক্ত সংযোগের তুলনায় উল্লেখযোগ্যভাবে বেশি, এবং ATF সামগ্রী রেন্ডার করতে আমাদের 1000 ms বাজেটের একটি উল্লেখযোগ্য অংশ গ্রহণ করে৷

4G হল বিশ্বজুড়ে প্রভাবশালী নেটওয়ার্কের ধরন, আপনার আশা করা উচিত যে বেশিরভাগ ব্যবহারকারী একটি 4G নেটওয়ার্কে আপনার পৃষ্ঠা অ্যাক্সেস করবে৷ এই কারণে, আমাদের ধরে নিতে হবে যে প্রতিটি নেটওয়ার্ক অনুরোধে গড়ে 100 মিলিসেকেন্ড সময় লাগবে।

এটা মাথায় রেখে, এর এখন পিছনের দিকে কাজ করা যাক। যদি আমরা একটি ব্রাউজার এবং সার্ভারের মধ্যে যোগাযোগের একটি সাধারণ ক্রম দেখি, সেই সময়ের 300 ms ইতিমধ্যেই নেটওয়ার্ক ওভারহেড দ্বারা ব্যবহার করা হয়েছে: একটি IP ঠিকানা, একটি নেটওয়ার্কে হোস্টনাম (যেমন google.com) সমাধানের জন্য একটি DNS লুকআপ TCP হ্যান্ডশেক করার জন্য রাউন্ডট্রিপ, এবং একটি ঐচ্ছিক TLS সংযোগ। এটি আমাদের 700 ms সহ ছেড়ে দেয়।

সাব এক সেকেন্ড রেন্ডারিং অভিজ্ঞতা প্রদান

নেটওয়ার্ক লেটেন্সি বিয়োগ করার পরে, আমাদের বাজেটে মাত্র 700 মিলিসেকেন্ড বাকি আছে, এবং এখনও অনেক কাজ বাকি আছে: সার্ভারকে অবশ্যই প্রতিক্রিয়া রেন্ডার করতে হবে, ক্লায়েন্ট-সাইড অ্যাপ্লিকেশন কোডটি কার্যকর করতে হবে এবং ব্রাউজারকে অবশ্যই লেআউট এবং রেন্ডার করতে হবে বিষয়বস্তু এটি মাথায় রেখে, নিম্নলিখিত মানদণ্ডগুলি আমাদের বাজেটের মধ্যে থাকতে সাহায্য করবে:

(1) সার্ভার অবশ্যই প্রতিক্রিয়া রেন্ডার করবে (<200 ms)
সার্ভার রেসপন্স টাইম হল নেটওয়ার্ক ট্রান্সপোর্ট টাইম নির্ণয় করে প্রাথমিক HTML ফেরত দিতে সার্ভারের যে সময় লাগে। যেহেতু আমাদের কাছে খুব কম সময় আছে, এই সময়টি সর্বনিম্ন রাখা উচিত - আদর্শভাবে 200 মিলিসেকেন্ডের মধ্যে, এবং পছন্দসই আরও কম!
(2) পুনঃনির্দেশের সংখ্যা কম করা উচিত
অতিরিক্ত HTTP রিডাইরেক্ট এক বা দুটি অতিরিক্ত নেটওয়ার্ক রাউন্ডট্রিপ যোগ করতে পারে (দুটি যদি একটি অতিরিক্ত DNS লুকআপ প্রয়োজন হয়), 4G নেটওয়ার্কে শত শত মিলিসেকেন্ড অতিরিক্ত লেটেন্সি খরচ করে। এই কারণে, আমরা দৃঢ়ভাবে ওয়েবমাস্টারদের উত্সাহিত করি সংখ্যাটি ছোট করতে, এবং আদর্শভাবে পুনঃনির্দেশ সম্পূর্ণভাবে বাদ দিতে - এটি HTML নথির জন্য বিশেষভাবে গুরুত্বপূর্ণ (যখন সম্ভব হয় "m ডট" পুনঃনির্দেশ এড়িয়ে চলুন)।
(3) প্রথম রেন্ডার করার জন্য রাউন্ডট্রিপের সংখ্যা কম করা উচিত

TCP কিভাবে একটি সংযোগের ক্ষমতা অনুমান করে (যেমন TCP স্লো স্টার্ট ), একটি নতুন TCP সংযোগ অবিলম্বে ক্লায়েন্ট এবং সার্ভারের মধ্যে সম্পূর্ণ উপলব্ধ ব্যান্ডউইথ ব্যবহার করতে পারে না। এই কারণে, সার্ভার প্রথম রাউন্ডট্রিপে একটি নতুন সংযোগে (~14KB) 10 টি টিসিপি প্যাকেট পাঠাতে পারে, এবং তারপরে এটির কনজেশন উইন্ডো বাড়ানোর আগে এবং আরও ডেটা সরবরাহ করতে এগিয়ে যাওয়ার আগে ক্লায়েন্টকে এই ডেটা স্বীকার করার জন্য অপেক্ষা করতে হবে।

এছাড়াও, এটি লক্ষ্য করা গুরুত্বপূর্ণ যে 10 প্যাকেট ( IW10 ) সীমা হল TCP স্ট্যান্ডার্ডের একটি সাম্প্রতিক আপডেট: এই পরিবর্তনের সুবিধা নিতে আপনার সার্ভারটি সর্বশেষ সংস্করণে আপগ্রেড করা হয়েছে তা নিশ্চিত করা উচিত। অন্যথায়, সীমা 3-4 প্যাকেট হতে পারে!

এই TCP আচরণের কারণে, পৃষ্ঠার প্রথম রেন্ডার করার জন্য প্রয়োজনীয় ডেটা সরবরাহ করার জন্য প্রয়োজনীয় রাউন্ডট্রিপের সংখ্যা কমাতে আপনার সামগ্রীকে অপ্টিমাইজ করা গুরুত্বপূর্ণ। আদর্শভাবে, ATF বিষয়বস্তু 98KB-এর নিচে মাপসই করা উচিত - এটি ব্রাউজারটিকে মাত্র তিনটি রাউন্ডট্রিপের পরে পৃষ্ঠাটি রঙ করতে দেয় যাতে সার্ভারের প্রতিক্রিয়া লেটেন্সি এবং ক্লায়েন্ট রেন্ডারিংয়ের জন্য প্রচুর সময় বাজেট থাকে।

(4) উপরের ভাঁজের সামগ্রীতে বাহ্যিক ব্লকিং JavaScript এবং CSS এড়িয়ে চলুন

একটি ব্রাউজার ব্যবহারকারীকে একটি পৃষ্ঠা রেন্ডার করার আগে, এটিকে পৃষ্ঠাটি পার্স করতে হবে। পার্সিংয়ের সময় যদি এটি একটি নন-অ্যাসিঙ্ক বা ব্লকিং বাহ্যিক স্ক্রিপ্টের সম্মুখীন হয়, তবে এটিকে সেই সংস্থানটি বন্ধ করে ডাউনলোড করতে হবে। প্রতিবার এটি করে, এটি একটি নেটওয়ার্ক রাউন্ড ট্রিপ যোগ করছে, যা পৃষ্ঠাটির প্রথম রেন্ডার হতে সময় বিলম্বিত করবে।

ফলস্বরূপ, উপরের ভাঁজ অঞ্চলে রেন্ডার করার জন্য প্রয়োজনীয় JavaScript এবং CSS ইনলাইন করা উচিত এবং পৃষ্ঠায় অতিরিক্ত কার্যকারিতা যোগ করার জন্য প্রয়োজনীয় JavaScript বা CSS ATF সামগ্রী বিতরণ করার পরে লোড করা উচিত।

(5) ব্রাউজার লেআউট এবং রেন্ডারিংয়ের জন্য রিজার্ভ টাইম (200 ms)
এইচটিএমএল, সিএসএস পার্সিং এবং জাভাস্ক্রিপ্ট এক্সিকিউট করার প্রক্রিয়ায় সময় এবং ক্লায়েন্ট রিসোর্স লাগে! মোবাইল ডিভাইসের গতি এবং পৃষ্ঠার জটিলতার উপর নির্ভর করে, এই প্রক্রিয়াটি শত শত মিলিসেকেন্ড সময় নিতে পারে। আমাদের সুপারিশ হল ব্রাউজার ওভারহেডের জন্য 200 মিলিসেকেন্ড রিজার্ভ করা।
(6) জাভাস্ক্রিপ্ট এক্সিকিউশন এবং রেন্ডারিং টাইম অপ্টিমাইজ করুন
জটিল স্ক্রিপ্ট এবং অদক্ষ কোড কার্যকর করতে দশ এবং শত শত মিলিসেকেন্ড সময় নিতে পারে - আপনার কোড প্রোফাইল এবং অপ্টিমাইজ করতে ব্রাউজারে অন্তর্নির্মিত বিকাশকারী সরঞ্জামগুলি ব্যবহার করুন৷ একটি দুর্দান্ত ভূমিকার জন্য, Chrome বিকাশকারী সরঞ্জামগুলির জন্য আমাদের ইন্টারেক্টিভ কোর্সটি একবার দেখুন৷

FAQ

আমি একটি জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করছি, যেমন JQuery, কোন পরামর্শ?
অনেক জাভাস্ক্রিপ্ট লাইব্রেরি, যেমন JQuery, অতিরিক্ত ইন্টারঅ্যাক্টিভিটি, অ্যানিমেশন এবং অন্যান্য প্রভাব যোগ করতে পৃষ্ঠা উন্নত করতে ব্যবহার করা হয়। যাইহোক, ATF বিষয়বস্তু রেন্ডার করার পরে এই আচরণগুলির অনেকগুলি নিরাপদে যোগ করা যেতে পারে। পৃষ্ঠাটি লোড না হওয়া পর্যন্ত এই ধরনের জাভাস্ক্রিপ্টের সঞ্চালন এবং লোড করার বিষয়ে তদন্ত করুন।
আমি একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করছি, পৃষ্ঠাটি তৈরি করতে, কোন পরামর্শ?
যদি পৃষ্ঠার বিষয়বস্তু ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট দ্বারা তৈরি করা হয়, তাহলে অতিরিক্ত নেটওয়ার্ক রাউন্ডট্রিপ এড়াতে আপনার প্রাসঙ্গিক জাভাস্ক্রিপ্ট মডিউলগুলি ইনলাইন করার তদন্ত করা উচিত। একইভাবে, লিভারেজিং সার্ভার-সাইড রেন্ডারিং প্রথম পৃষ্ঠা লোড কর্মক্ষমতা উল্লেখযোগ্যভাবে উন্নত করতে পারে: সার্ভারে JS টেমপ্লেট রেন্ডার করুন, ফলাফলগুলিকে HTML-এ ইনলাইন করুন এবং তারপর অ্যাপ্লিকেশন লোড হয়ে গেলে ক্লায়েন্ট-সাইড টেমপ্লেটিং ব্যবহার করুন৷
আমি কিভাবে আমার পৃষ্ঠায় সমালোচনামূলক CSS সনাক্ত করতে পারি?
ক্রোম ডেভেলপার টুলে, অডিট প্যানেল খুলুন, এবং একটি ওয়েব পেজ পারফরম্যান্স রিপোর্ট চালান, তৈরি করা রিপোর্টে, অব্যবহৃত CSS নিয়মগুলি সরান দেখুন৷ অথবা অন্য কোন তৃতীয় পক্ষের টুল, বা স্ক্রিপ্ট ব্যবহার করুন, প্রতিটি পৃষ্ঠায় কোন CSS নির্বাচকদের প্রয়োগ করা হয়েছে তা শনাক্ত করতে।
এই সেরা অনুশীলনগুলি স্বয়ংক্রিয় হতে পারে?
একেবারে। অনেক বাণিজ্যিক এবং ওপেন-সোর্স ওয়েব পারফরম্যান্স অপ্টিমাইজেশান (WPO) পণ্য রয়েছে যা আপনাকে উপরের কিছু বা সমস্ত মানদণ্ড পূরণ করতে সাহায্য করতে পারে। ওপেন সোর্স সমাধানের জন্য, PageSpeed ​​অপ্টিমাইজেশান টুলগুলি দেখুন৷
আমি কিভাবে এই মানদণ্ড পূরণ করতে আমার সার্ভার টিউন করব?
প্রথমে, নিশ্চিত করুন যে আপনার সার্ভারটি অপারেটিং সিস্টেমের একটি আপ-টু-ডেট সংস্করণ চালাচ্ছে। বর্ধিত প্রাথমিক TCP কনজেশন উইন্ডো সাইজ (IW10) থেকে উপকৃত হওয়ার জন্য, আপনার প্রয়োজন হবে Linux kernel 2.6.39+। অন্যান্য অপারেটিং সিস্টেমের জন্য, ডকুমেন্টেশনের সাথে পরামর্শ করুন।
সার্ভার রেসপন্স টাইম অপ্টিমাইজ করতে, আপনার কোড ইনস্ট্রুমেন্ট করুন, বা আপনার বাধা শনাক্ত করতে একটি অ্যাপ্লিকেশন মনিটরিং সমাধান ব্যবহার করুন - যেমন, স্ক্রিপ্টিং রানটাইম, ডাটাবেস কল, RPC অনুরোধ, রেন্ডারিং, ইত্যাদি। লক্ষ্য হল 200 মিলিসেকেন্ডের মধ্যে HTML প্রতিক্রিয়া রেন্ডার করা।
বিষয়বস্তু নিরাপত্তা নীতি সম্পর্কে কি?
আপনি যদি CSP ব্যবহার করেন, তাহলে আপনাকে আপনার ডিফল্ট নীতি আপডেট করতে হতে পারে।
প্রথমত, এইচটিএমএল উপাদানগুলিতে ইনলাইন CSS বৈশিষ্ট্যগুলি (যেমন, < p style=...> ) যেখানে সম্ভব এড়ানো উচিত, কারণ তারা প্রায়শই অপ্রয়োজনীয় কোড ডুপ্লিকেশনের দিকে পরিচালিত করে এবং সিএসপি দিয়ে ডিফল্টভাবে ব্লক করা হয় (অনিরাপদ ইনলাইনের মাধ্যমে অক্ষম করা হয়। "স্টাইল-src")। CSP সক্রিয় থাকলে, এটি ডিফল্টরূপে সমস্ত ইনলাইন স্ক্রিপ্ট ট্যাগ ব্লক করবে। আপনার যদি ইনলাইন জাভাস্ক্রিপ্ট থাকে, তাহলে আপনাকে হয় স্ক্রিপ্ট হ্যাশ বা ননসেস ব্যবহার করতে সিএসপি নীতি আপডেট করতে হবে অথবা সমস্ত ইনলাইন স্ক্রিপ্ট কার্যকর করতে "অনিরাপদ-ইনলাইন" ব্যবহার করতে হবে। আপনার যদি ইনলাইন শৈলী থাকে, তাহলে আপনাকে হয় স্টাইল হ্যাশ বা ননসেস ব্যবহার করতে সিএসপি নীতি আপডেট করতে হবে অথবা সমস্ত ইনলাইন শৈলী ব্লকগুলিকে প্রক্রিয়া করার জন্য "অনিরাপদ-ইনলাইন" ব্যবহার করতে হবে।

আরো প্রশ্ন আছে? পেজস্পিড-ইনসাইটস-আলোচনায় আমাদের আলোচনা গোষ্ঠীতে নির্দ্বিধায় জিজ্ঞাসা করুন এবং প্রতিক্রিয়া প্রদান করুন।

প্রতিক্রিয়া

এই পেজটি কি সহায়ক ছিল?