১৪০ বছরেরও বেশি সময়ের প্রকাশনার ইতিহাসের সাথে, নিক্কেই জাপানের অন্যতম কর্তৃত্বপূর্ণ মিডিয়া ব্যবসা। তাদের মুদ্রিত সংবাদপত্রের পাশাপাশি, তাদের ডিজিটাল সম্পত্তিগুলিতে প্রতি মাসে ৪৫০ মিলিয়নেরও বেশি লোক ভিজিট করে। আরও ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান এবং ওয়েবে তাদের ব্যবসা ত্বরান্বিত করার জন্য, নিক্কেই ২০১৭ সালের নভেম্বরে একটি প্রোগ্রেসিভ ওয়েব অ্যাপ (PWA) - https://r.nikkei.com - সফলভাবে চালু করেছে। তারা এখন নতুন প্ল্যাটফর্ম থেকে আশ্চর্যজনক ফলাফল দেখতে পাচ্ছে।
কর্মক্ষমতা বৃদ্ধি - ২ গুণ উন্নত গতি সূচক - ১৪ সেকেন্ড দ্রুত টাইম-টু-ইন্টারেক্টিভ - প্রিফেচের মাধ্যমে ৭৫% দ্রুত লোডিং
ব্যবসায়িক প্রভাব - ২.৩ গুণ জৈব ট্র্যাফিক - ৫৮% বেশি রূপান্তর (সাবস্ক্রিপশন) - ৪৯% বেশি দৈনিক সক্রিয় ব্যবহারকারী - প্রতি সেশনে ২ গুণ পৃষ্ঠা দেখা
পিডিএফ কেস স্টাডি ডাউনলোড করুন
ব্যবসার সারসংক্ষেপ
চ্যালেঞ্জ
অনেক ব্যবহারকারীর জন্য স্মার্টফোন ওয়েবে প্রবেশের প্রধান বিন্দু হয়ে ওঠার সাথে সাথে নিক্কেই তাদের পুরনো ওয়েবসাইটে মোবাইল ট্র্যাফিকের দ্রুত বৃদ্ধি দেখতে পেয়েছে। যাইহোক, Lighthouse , একটি অডিটিং টুল যা একটি ওয়েব পৃষ্ঠা স্ক্যান করে এবং একাধিক বিভাগে কীভাবে উন্নতি করা যায় সে সম্পর্কে সুপারিশ দেয়, তারা বুঝতে পেরেছে যে তাদের সাইটটি একাধিক ক্ষেত্রে মোবাইলের জন্য সম্পূর্ণরূপে অপ্টিমাইজ করা হয়নি এবং লোড হতে খুব ধীর ছিল।
তাদের ওয়েবসাইটটি ধারাবাহিকভাবে ইন্টারেক্টিভ হতে প্রায় ২০ সেকেন্ড সময় নিচ্ছিল এবং গতি সূচকে গড়ে ১০ সেকেন্ড সময় নিচ্ছিল। ৫৩% মোবাইল ব্যবহারকারী যদি ৩ সেকেন্ডের বেশি সময় লোড হয় তবে তারা কোনও অভিজ্ঞতা ত্যাগ করবে জেনে, নিক্কেই আরও ভালো অভিজ্ঞতা প্রদান এবং ওয়েবে তাদের ব্যবসা ত্বরান্বিত করার জন্য তাদের লোড সময় কমাতে চেয়েছিল।
গতির মূল্য অনস্বীকার্য, বিশেষ করে আর্থিক সংবাদের ক্ষেত্রে। আমরা গতিকে আমাদের মূল সূচকগুলির মধ্যে একটি করে তুলেছি এবং আমাদের গ্রাহকরা এই পরিবর্তনের প্রশংসা করেছেন।
তাইহেই শিগেমোরি, ম্যানেজার, ডিজিটাল কৌশল
ফলাফল
নিক্কেই চিত্তাকর্ষক পারফরম্যান্স লাভ অর্জন করেছে। তাদের লাইটহাউস স্কোর ২৩ থেকে ৮২ এ উন্নীত হয়েছে। তাদের টাইম-টু-ইন্টারেক্টিভ পরিমাপ ১৪ সেকেন্ড উন্নত হয়েছে। জৈব ট্র্যাফিক, গতি, রূপান্তর হার এবং সক্রিয় দৈনিক ব্যবহারকারীরাও বেড়েছে।
PWA হল একটি মাল্টি-পেজ অ্যাপ (MPA) যা ভ্যানিলা জাভাস্ক্রিপ্ট দিয়ে তৈরি ফ্রন্ট-এন্ড জটিলতা কমায়। এই কর্মক্ষমতা অর্জনের জন্য পাঁচজন মূল ফ্রন্ট-এন্ড ইঞ্জিনিয়ার এক বছর ধরে কাজ করেছেন।
নিক্কেইর ফ্রন্ট-এন্ড ইঞ্জিনিয়াররা প্রমাণ করেছেন যে দুর্দান্ত ইউএক্স ভালো ব্যবসায়িক কর্মক্ষমতা নিয়ে আসে। ওয়েবে মানের একটি নতুন স্তর আনার আমাদের যাত্রা অব্যাহত রাখার জন্য আমরা সম্পূর্ণরূপে নিবেদিত।
হিরোইউকি হিগাশি। পণ্য ব্যবস্থাপক, নিক্কেই
সমাধান
নিক্কেই একটি প্রোগ্রেসিভ ওয়েব অ্যাপ তৈরি এবং চালু করেছে, যেখানে রেসপন্সিভ ডিজাইন, ভ্যানিলা জাভাস্ক্রিপ্ট এবং মাল্টি-পেজ আর্কিটেকচার ব্যবহার করা হয়েছে। তারা একটি আনন্দদায়ক ব্যবহারকারীর অভিজ্ঞতা তৈরির উপর দৃষ্টি নিবদ্ধ করেছে। একজন পরিষেবা কর্মী যুক্ত করে, তারা নেটওয়ার্ক নির্বিশেষে পূর্বাভাসযোগ্য কর্মক্ষমতা প্রদান করতে সক্ষম হয়েছে। এটি নিশ্চিত করে যে শীর্ষস্থানীয় নিবন্ধগুলি সর্বদা উপলব্ধ এবং প্রায় তাৎক্ষণিকভাবে লোড করা হয় কারণ সেগুলি ক্যাশে স্টোরেজ ব্যবহার করে সংরক্ষণ করা হয়। তারা একটি ওয়েব অ্যাপ ম্যানিফেস্ট যুক্ত করেছে এবং তাদের পরিষেবা কর্মীর সাথে এটি ব্যবহারকারীদের PWA ইনস্টল করার অনুমতি দেয়, যাতে এটি সহজেই অ্যাক্সেসযোগ্য হয়। এবং কর্মক্ষমতা সম্পূর্ণরূপে তাদের নিয়ন্ত্রণে থাকে তা নিশ্চিত করার জন্য, তারা তাদের তৃতীয়-পক্ষের জাভাস্ক্রিপ্ট অপ্টিমাইজ করেছে।
সেরা অনুশীলন
- আধুনিক ওয়েব এপিআই, কম্প্রেশন এবং কোড অপ্টিমাইজেশন অনুশীলন ব্যবহার করে লোডিং গতি এবং ইন্টারঅ্যাক্টিভিটি উন্নত করুন।
- অফলাইন সাপোর্ট এবং অ্যাড টু হোম স্ক্রিনের মতো PWA বৈশিষ্ট্য যোগ করে UX ক্রমান্বয়ে উন্নত করুন।
- কর্মক্ষমতা বাজেটকে কর্মক্ষমতা কৌশলে পরিণত করুন।
টেকনিক্যাল ডিপ ডাইভ
গতি গুরুত্বপূর্ণ
গতি আগের চেয়েও বেশি গুরুত্বপূর্ণ। অনেক ব্যবহারকারীর জন্য স্মার্টফোন প্রধান ব্রাউজিং ডিভাইস হয়ে ওঠার সাথে সাথে, Nikkei তাদের পরিষেবায় মোবাইল ট্র্যাফিকের দ্রুত বৃদ্ধি দেখতে পেয়েছে। কিন্তু Lighthouse ব্যবহার করে, তারা বুঝতে পেরেছে যে তাদের লিগ্যাসি ওয়েবসাইটটি মোবাইলের জন্য সম্পূর্ণরূপে অপ্টিমাইজ করা হয়নি, স্পিড ইনডেক্স গড়ে 10 সেকেন্ড, খুব ধীর প্রাথমিক লোড এবং একটি বৃহৎ জাভাস্ক্রিপ্ট বান্ডেল সহ। Nikkei-এর জন্য তাদের ওয়েবসাইট পুনর্নির্মাণ এবং ওয়েব-পারফরম্যান্স সেরা অনুশীলনগুলিকে অভিযোজিত করার সময় এসেছে। নতুন PWA-তে ফলাফল এবং মূল কর্মক্ষমতা অপ্টিমাইজেশন এখানে দেওয়া হল।
লোডিং দ্রুত করার জন্য ওয়েব এপিআই এবং সর্বোত্তম অনুশীলনগুলি ব্যবহার করা
কী অনুরোধগুলি প্রিলোড করুন
গুরুত্বপূর্ণ পাথ লোডিংকে অগ্রাধিকার দেওয়া গুরুত্বপূর্ণ । HTTP/2 সার্ভার পুশ ব্যবহার করে, তারা গুরুত্বপূর্ণ জাভাস্ক্রিপ্ট এবং CSS বান্ডেলগুলিকে অগ্রাধিকার দিতে সক্ষম হয় যা তারা জানে যে একজন ব্যবহারকারীর প্রয়োজন হবে।
যেকোনো উৎসে একাধিক, ব্যয়বহুল ভ্রমণ এড়িয়ে চলুন
ওয়েবসাইটটিতে ট্র্যাকিং, বিজ্ঞাপন এবং অন্যান্য অনেক ব্যবহারের জন্য তৃতীয় পক্ষের রিসোর্স লোড করার প্রয়োজন ছিল। তারা এই গুরুত্বপূর্ণ তৃতীয় পক্ষের উৎসগুলির জন্য DNS/TCP/SSL হ্যান্ডশেক এবং আলোচনার পূর্বে সমাধান করার জন্য <link rel=preconnect> ব্যবহার করেছিল।
পরবর্তী পৃষ্ঠাটি গতিশীলভাবে প্রিফেচ করুন
যখন তারা নিশ্চিত ছিল যে ব্যবহারকারী একটি নির্দিষ্ট পৃষ্ঠায় নেভিগেট করবে, তখন তারা কেবল নেভিগেট হওয়ার জন্য অপেক্ষা করত না। Nikkei গতিশীলভাবে <head> এ <link rel=prefetch> যোগ করে এবং ব্যবহারকারীর লিঙ্কে ক্লিক করার আগেই পরবর্তী পৃষ্ঠাটি আগে থেকে নিয়ে আসে। এটি তাৎক্ষণিক পৃষ্ঠা নেভিগেট সক্ষম করে।
ইনলাইন ক্রিটিক্যাল-পাথ সিএসএস
রেন্ডার-ব্লকিং সিএসএস কমানো হল স্পিড লোডিংয়ের সেরা অনুশীলনগুলির মধ্যে একটি। ওয়েবসাইটটি সমস্ত গুরুত্বপূর্ণ সিএসএসকে 0 রেন্ডার-ব্লকিং স্টাইলশিট দিয়ে ইনলাইন করে। এই অপ্টিমাইজেশনের ফলে প্রথম অর্থপূর্ণ পেইন্টটি 1 সেকেন্ডেরও বেশি কমানো হয়েছে।
জাভাস্ক্রিপ্ট বান্ডেলগুলি অপ্টিমাইজ করুন
তাদের পূর্ববর্তী অভিজ্ঞতায়, Nikkei-এর জাভাস্ক্রিপ্ট বান্ডেলগুলি ফুলে ছিল, মোট ওজন ছিল 300KB-এরও বেশি। ভ্যানিলা জাভাস্ক্রিপ্টে পুনর্লিখন এবং রুট-ভিত্তিক চাঙ্কিং এবং ট্রি-শেকিং-এর মতো আধুনিক বান্ডলিং অপ্টিমাইজেশনের মাধ্যমে, তারা এই ফুলে যাওয়া অংশটি ছাঁটাই করতে সক্ষম হয়েছিল। তারা তাদের জাভাস্ক্রিপ্ট বান্ডেলের আকার 80% কমিয়েছে, RollUp-এর মাধ্যমে এটি 60KB-তে নামিয়ে এনেছে।
বাস্তবায়িত অন্যান্য সেরা অনুশীলন
- কম্প্রেশন : Gzip/Brotli ফাস্টলি CDN ব্যবহার করে সমস্ত কম্প্রেসিবল রিসোর্স
- ক্যাশিং : HTTP ক্যাশিং, এজ সাইড ক্যাশিং সক্ষম করুন
- ইমেজ অপ্টিমাইজেশন : অপ্টিমাইজেশন এবং ইমেজ ফরম্যাট সনাক্তকরণের জন্য imgix ব্যবহার করুন
- অলস লোড নন-ক্রিটিকাল রিসোর্স : ভাঁজের নীচের টুকরো লোড করতে ইন্টারসেকশন অবজারভার API ব্যবহার করুন
- ওয়েব ফন্ট-লোডিং কৌশল অবলম্বন করুন : সিস্টেম ফন্টের ব্যবহারকে অগ্রাধিকার দিন
- প্রথম অর্থপূর্ণ পেইন্টটি অপ্টিমাইজ করুন : কন্টেন্ট সার্ভার সাইড রেন্ডার করুন
- কর্মক্ষমতা বাজেট গ্রহণ করুন : জাভাস্ক্রিপ্ট ট্রান্সমিশন এবং পার্স/কম্পাইলের সময় কম রাখুন
তৃতীয় পক্ষের জাভাস্ক্রিপ্ট অপ্টিমাইজ করা
যদিও আপনার নিজস্ব স্ক্রিপ্টের তুলনায় থার্ড-পার্টি জাভাস্ক্রিপ্ট অপ্টিমাইজ করা এত সহজ নয়, Nikkei সফলভাবে সমস্ত বিজ্ঞাপন-সম্পর্কিত স্ক্রিপ্টগুলিকে মিনিফাই এবং বান্ডিল করেছে, যা এখন তার নিজস্ব কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN) থেকে পরিবেশিত হয়। বিজ্ঞাপন-সম্পর্কিত ট্যাগগুলি সাধারণত অন্যান্য প্রয়োজনীয় স্ক্রিপ্টগুলি শুরু এবং লোড করার জন্য একটি স্নিপেট সরবরাহ করে, যা প্রায়শই পৃষ্ঠা রেন্ডারিংকে ব্লক করে এবং ডাউনলোড করা প্রতিটি স্ক্রিপ্টের জন্য অতিরিক্ত নেটওয়ার্ক টার্নঅ্যারাউন্ড সময় প্রয়োজন। Nikkei নিম্নলিখিত পদ্ধতি গ্রহণ করেছে এবং প্রারম্ভিক সময় 100ms দ্বারা উন্নত করেছে, এবং JS আকার 30% হ্রাস করেছে:
- একটি JS বান্ডলার ব্যবহার করে সমস্ত প্রয়োজনীয় স্ক্রিপ্ট বান্ডিল করুন (যেমন, ওয়েবপ্যাক)
- অ্যাসিঙ্ক বান্ডেল করা স্ক্রিপ্ট লোড করে, যাতে এটি পৃষ্ঠা রেন্ডারিং ব্লক না করে
- শ্যাডো ডোমে (বনাম আইফ্রেম) গণনা করা বিজ্ঞাপন ব্যানার সংযুক্ত করুন।
- ইন্টারসেকশন অবজারভার এপিআই ব্যবহার করে ব্যবহারকারীর স্ক্রলে বিজ্ঞাপনগুলি ধীরে ধীরে লোড করুন
ওয়েবসাইটের ক্রমান্বয়ে উন্নতি করা হচ্ছে
এই মৌলিক অপ্টিমাইজেশনের পাশাপাশি, Nikkei তাদের ওয়েবসাইট ইনস্টলযোগ্য এবং এমনকি অফলাইনেও কাজ করার জন্য ওয়েব অ্যাপ ম্যানিফেস্ট এবং পরিষেবা কর্মীদের ব্যবহার করেছে। তাদের পরিষেবা কর্মীতে ক্যাশ-ফার্স্ট কৌশল ব্যবহার করে, সমস্ত মূল সংস্থান এবং শীর্ষস্থানীয় নিবন্ধগুলি ক্যাশ স্টোরেজে সংরক্ষণ করা হয় এবং এমনকি একটি ফ্ল্যাকি বা অফলাইন নেটওয়ার্কের মতো আকস্মিক পরিস্থিতিতেও পুনঃব্যবহার করা হয়, যা ধারাবাহিক, অপ্টিমাইজড কর্মক্ষমতা প্রদান করে।
নিক্কেই হ্যাক করুন
১৪০+ বছরেরও বেশি ইতিহাসের একটি ঐতিহ্যবাহী দৈনিক সংবাদপত্র কোম্পানি ওয়েব এবং PWA-এর শক্তির মাধ্যমে সফলভাবে তার ডিজিটালাইজেশনকে ত্বরান্বিত করেছে। Nikkei-এর ফ্রন্ট-এন্ড ইঞ্জিনিয়াররা প্রমাণ করেছেন যে দুর্দান্ত UX শক্তিশালী ব্যবসায়িক কর্মক্ষমতা প্রদান করে। কোম্পানিটি ওয়েবে মানের একটি নতুন স্তর আনার যাত্রা অব্যাহত রাখবে।