140 বছরেরও বেশি সময় ধরে প্রকাশনার ইতিহাস সহ, Nikkei হল জাপানের সবচেয়ে প্রামাণিক মিডিয়া ব্যবসার একটি। তাদের প্রিন্ট সংবাদপত্রের পাশাপাশি, তাদের ডিজিটাল বৈশিষ্ট্যগুলিতে 450 মিলিয়নেরও বেশি মাসিক ভিজিট রয়েছে। একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে এবং ওয়েবে তাদের ব্যবসাকে ত্বরান্বিত করতে, Nikkei সফলভাবে একটি প্রগ্রেসিভ ওয়েব অ্যাপ (PWA) - https://r.nikkei.com - নভেম্বর 2017-এ চালু করেছে৷ তারা এখন নতুন প্ল্যাটফর্ম থেকে আশ্চর্যজনক ফলাফল দেখছে৷ .
পারফরম্যান্স লাভ - 2X ভাল গতি সূচক - 14 সেকেন্ড দ্রুত টাইম-টু-ইন্টারেক্টিভ - 75% দ্রুত লোডিং প্রিফেচ সহ
ব্যবসায়িক প্রভাব - 2.3X অর্গানিক ট্রাফিক - 58% বেশি রূপান্তর (সাবস্ক্রিপশন) - 49% বেশি দৈনিক সক্রিয় ব্যবহারকারী - প্রতি সেশনে 2X পৃষ্ঠা দর্শন
পিডিএফ কেস স্টাডি ডাউনলোড করুন
ব্যবসা ওভারভিউ
চ্যালেঞ্জ
Nikkei তাদের উত্তরাধিকারী ওয়েবসাইটে মোবাইল ট্রাফিকের দ্রুত বৃদ্ধি দেখেছে কারণ স্মার্টফোনগুলি অনেক ব্যবহারকারীর জন্য ওয়েবে প্রবেশের প্রধান পয়েন্ট হয়ে উঠেছে। যাইহোক, Lighthouse ব্যবহার করে, একটি অডিটিং টুল যা একটি ওয়েব পৃষ্ঠা স্ক্যান করে এবং একাধিক বিভাগ জুড়ে কীভাবে উন্নতি করা যায় সে সম্পর্কে সুপারিশ দেয়, তারা বুঝতে পেরেছিল যে তাদের সাইটটি একাধিক এলাকায় মোবাইলের জন্য সম্পূর্ণরূপে অপ্টিমাইজ করা হয়নি এবং লোড হতে খুব ধীর ছিল৷
তাদের ওয়েবসাইটটি ধারাবাহিকভাবে ইন্টারেক্টিভ হতে ~20 সেকেন্ড সময় নিচ্ছে এবং গতি সূচকে গড় 10 সেকেন্ড। লোড হতে 3 সেকেন্ডের বেশি সময় লাগলে 53% মোবাইল ব্যবহারকারীরা একটি অভিজ্ঞতা ত্যাগ করবে তা জেনে, Nikkei একটি ভাল অভিজ্ঞতা প্রদান করতে এবং ওয়েবে তাদের ব্যবসাকে ত্বরান্বিত করতে তাদের লোডের সময় কমাতে চেয়েছিল৷
গতির মান অনস্বীকার্য, বিশেষ করে আর্থিক খবরের জন্য। আমরা গতিকে আমাদের মূল মেট্রিকগুলির মধ্যে একটি বানিয়েছি এবং আমাদের গ্রাহকরা পরিবর্তনের প্রশংসা করেছেন।
তাইহেই শিগেমোরি, ম্যানেজার, ডিজিটাল কৌশল
ফলাফল
নিক্কেই চিত্তাকর্ষক কর্মক্ষমতা অর্জন করেছে। তাদের লাইটহাউস স্কোর 23 থেকে 82 পর্যন্ত বেড়েছে। তাদের টাইম-টু-ইন্টারেক্টিভ পরিমাপ 14 সেকেন্ডে উন্নত হয়েছে। জৈব ট্রাফিক, গতি, রূপান্তর হার, এবং সক্রিয় দৈনিক ব্যবহারকারীরা সবই বেড়েছে।
PWA হল একটি মাল্টি-পেজ অ্যাপ (MPA) যা ভ্যানিলা জাভাস্ক্রিপ্ট দিয়ে তৈরি ফ্রন্ট-এন্ড জটিলতা কমায়। পাঁচটি মূল ফ্রন্ট-এন্ড ইঞ্জিনিয়ার এই কর্মক্ষমতা অর্জনের জন্য এক বছর ধরে কাজ করেছেন।
Nikkei ফ্রন্ট-এন্ড ইঞ্জিনিয়াররা প্রমাণ করেছে যে দুর্দান্ত UX ভাল ব্যবসায়িক কর্মক্ষমতা নিয়ে আসে। আমরা ওয়েবে একটি নতুন স্তরের গুণমান নিয়ে আসার জন্য আমাদের যাত্রা চালিয়ে যাওয়ার জন্য সম্পূর্ণভাবে বিনিয়োগ করেছি।
হিরোইউকি হিগাশি। প্রোডাক্ট ম্যানেজার, নিক্কেই
সমাধান
Nikkei একটি প্রগতিশীল ওয়েব অ্যাপ তৈরি এবং চালু করেছে, প্রতিক্রিয়াশীল ডিজাইন, ভ্যানিলা জাভাস্ক্রিপ্ট এবং একটি মাল্টি-পৃষ্ঠা আর্কিটেকচার ব্যবহার করে, তারা একটি আনন্দদায়ক ব্যবহারকারীর অভিজ্ঞতা তৈরির দিকে মনোনিবেশ করেছে। একটি পরিষেবা কর্মী যোগ করে, তারা নেটওয়ার্ক নির্বিশেষে পূর্বাভাসযোগ্য কর্মক্ষমতা প্রদান করতে সক্ষম হয়েছিল। এটি নিশ্চিত করে যে শীর্ষ নিবন্ধগুলি সর্বদা উপলব্ধ থাকে এবং প্রায় সাথে সাথে লোড হয় কারণ সেগুলি ক্যাশে স্টোরেজ ব্যবহার করে সংরক্ষণ করা হয়। তারা একটি ওয়েব অ্যাপ ম্যানিফেস্ট যোগ করেছে, এবং তাদের পরিষেবা কর্মীর সাথে এটি ব্যবহারকারীদের PWA ইনস্টল করার অনুমতি দেয়, তাই এটি সহজেই অ্যাক্সেসযোগ্য। এবং কর্মক্ষমতা সম্পূর্ণরূপে তাদের নিয়ন্ত্রণের মধ্যে ছিল তা নিশ্চিত করার জন্য, তারা তাদের তৃতীয়-পক্ষের জাভাস্ক্রিপ্ট অপ্টিমাইজ করেছে।
সর্বোত্তম অনুশীলন
- আধুনিক ওয়েব API, কম্প্রেশন, এবং কোড অপ্টিমাইজেশন অনুশীলন ব্যবহার করে লোডিং গতি এবং ইন্টারঅ্যাক্টিভিটি উন্নত করুন।
- অফলাইন সমর্থন এবং হোম স্ক্রীনে যোগ করার মতো PWA বৈশিষ্ট্যগুলি যুক্ত করে ধীরে ধীরে UX উন্নত করুন।
- পারফরম্যান্স কৌশলে পারফরম্যান্স বাজেট তৈরি করুন।
প্রযুক্তিগত গভীর ডুব
গতি গুরুত্বপূর্ণ
গতি আগের চেয়ে আরও গুরুত্বপূর্ণ। যেহেতু স্মার্টফোনগুলি অনেক ব্যবহারকারীর জন্য প্রধান ব্রাউজিং ডিভাইস হয়ে উঠেছে, নিক্কেই তাদের পরিষেবাতে মোবাইল ট্রাফিকের দ্রুত বৃদ্ধি দেখেছে। কিন্তু Lighthouse ব্যবহার করে, তারা বুঝতে পেরেছিল যে তাদের লিগ্যাসি ওয়েবসাইট মোবাইলের জন্য সম্পূর্ণরূপে অপ্টিমাইজ করা হয়নি, গতি সূচক গড় 10 সেকেন্ড, খুব ধীর প্রাথমিক লোড এবং একটি বড় জাভাস্ক্রিপ্ট বান্ডেল। Nikkei-এর জন্য তাদের ওয়েবসাইট পুনর্নির্মাণ এবং ওয়েব-পারফরম্যান্স সেরা অনুশীলনগুলিকে মানিয়ে নেওয়ার সময় ছিল৷ এখানে নতুন PWA-তে ফলাফল এবং মূল কর্মক্ষমতা অপ্টিমাইজেশান রয়েছে৷
দ্রুত লোড করার জন্য ওয়েব APIs এবং সর্বোত্তম অনুশীলনের সুবিধা
প্রিলোড কী অনুরোধ
সমালোচনামূলক পথের লোডিংকে অগ্রাধিকার দেওয়া গুরুত্বপূর্ণ । HTTP/2 সার্ভার পুশ ব্যবহার করে, তারা সমালোচনামূলক জাভাস্ক্রিপ্ট এবং CSS বান্ডেলগুলিকে অগ্রাধিকার দিতে সক্ষম হয় যা তারা জানে যে ব্যবহারকারীর প্রয়োজন হবে।
যেকোন উৎসের একাধিক, ব্যয়বহুল রাউন্ড ট্রিপ এড়িয়ে চলুন
ট্র্যাকিং, বিজ্ঞাপন এবং অন্যান্য ব্যবহারের ক্ষেত্রে 3য় পক্ষের সংস্থানগুলি লোড করার জন্য ওয়েবসাইটটির প্রয়োজন। DNS/TCP/SSL হ্যান্ডশেক এবং এই মূল 3য় পক্ষের উত্সগুলির জন্য আলোচনার পূর্ব-সমাধান করতে তারা <link rel=preconnect> ব্যবহার করেছে।
পরবর্তী পৃষ্ঠাটি গতিশীলভাবে প্রিফেচ করুন
যখন তারা নিশ্চিত ছিল যে ব্যবহারকারী একটি নির্দিষ্ট পৃষ্ঠায় নেভিগেট করবে, তখন তারা শুধু নেভিগেশন হওয়ার জন্য অপেক্ষা করেনি। Nikkei গতিশীলভাবে <link rel=prefetch> <head> এ যোগ করে এবং ব্যবহারকারী প্রকৃতপক্ষে লিঙ্কটিতে ক্লিক করার আগে পরবর্তী পৃষ্ঠাটি প্রি-ফেচ করে। এটি তাত্ক্ষণিক পৃষ্ঠা নেভিগেশন সক্ষম করে।
ইনলাইন ক্রিটিক্যাল-পাথ সিএসএস
রেন্ডার ব্লকিং সিএসএস হ্রাস করা স্পিড লোডিংয়ের সেরা অনুশীলনগুলির মধ্যে একটি। ওয়েবসাইটটি 0 রেন্ডার ব্লকিং স্টাইলশীট সহ সমস্ত সমালোচনামূলক CSS ইনলাইন করে। এই অপ্টিমাইজেশানটি প্রথম অর্থপূর্ণ পেইন্টকে 1 সেকেন্ডের বেশি কমিয়েছে।
জাভাস্ক্রিপ্ট বান্ডিল অপ্টিমাইজ করুন
তাদের পূর্ববর্তী অভিজ্ঞতায়, Nikkei এর জাভাস্ক্রিপ্ট বান্ডিলগুলি ফুলে গেছে, যার ওজন মোট 300KB-এর বেশি। ভ্যানিলা জাভাস্ক্রিপ্টে পুনর্লিখনের মাধ্যমে এবং আধুনিক বান্ডলিং অপ্টিমাইজেশানের মাধ্যমে, যেমন রুট-ভিত্তিক চঙ্কিং এবং ট্রি-শেকিং, তারা এই ফোলা ছাঁটাই করতে সক্ষম হয়েছিল। তারা তাদের জাভাস্ক্রিপ্ট বান্ডেলের আকার 80% কমিয়েছে, এটি রোলআপের সাথে 60KB-এ নামিয়েছে।
অন্যান্য সেরা অনুশীলন বাস্তবায়িত
- কম্প্রেশন : Gzip/Brotli সব কম্প্রেসিবল রিসোর্স ফাস্টলি CDN ব্যবহার করে
- ক্যাশিং : HTTP ক্যাশিং, এজ সাইড ক্যাশিং সক্ষম করুন
- ইমেজ অপ্টিমাইজেশান : অপ্টিমাইজেশান এবং ইমেজ ফরম্যাট সনাক্তকরণের জন্য imgix ব্যবহার করুন
- অলস লোড নন-ক্রিটিকাল রিসোর্স : ভাঁজের নিচের টুকরো লোড করতে ইন্টারসেকশন পর্যবেক্ষক API ব্যবহার করুন
- একটি ওয়েব ফন্ট-লোডিং কৌশল আছে : সিস্টেম ফন্টের ব্যবহারকে অগ্রাধিকার দিন
- প্রথম অর্থপূর্ণ পেইন্ট অপ্টিমাইজ করুন : কন্টেন্ট সার্ভার সাইড রেন্ডার করুন
- কর্মক্ষমতা বাজেট গ্রহণ করুন : জাভাস্ক্রিপ্ট ট্রান্সমিশন এবং পার্স/কম্পাইলের সময় কম রাখা
তৃতীয় পক্ষের জাভাস্ক্রিপ্ট অপ্টিমাইজ করা
যদিও আপনার নিজের স্ক্রিপ্টের তুলনায় তৃতীয় পক্ষের জাভাস্ক্রিপ্ট অপ্টিমাইজ করা ততটা সহজ নয়, Nikkei সফলভাবে সমস্ত বিজ্ঞাপন-সম্পর্কিত স্ক্রিপ্টগুলিকে ছোট করে বান্ডেল করেছে, যেগুলি এখন তার নিজস্ব সামগ্রী বিতরণ নেটওয়ার্ক (CDN) থেকে পরিবেশিত হয়৷ বিজ্ঞাপন-সম্পর্কিত ট্যাগগুলি সাধারণত অন্যান্য প্রয়োজনীয় স্ক্রিপ্টগুলি শুরু করতে এবং লোড করার জন্য একটি স্নিপেট প্রদান করে, যা প্রায়শই পৃষ্ঠার রেন্ডারিংকে ব্লক করে এবং ডাউনলোড করা প্রতিটি স্ক্রিপ্টের জন্য অতিরিক্ত নেটওয়ার্ক পরিবর্তনের প্রয়োজন হয়। Nikkei নিম্নলিখিত পদ্ধতি গ্রহণ করেছে এবং 100ms দ্বারা সূচনা করার সময় উন্নত করেছে, এছাড়াও JS আকার 30% কম করেছে:
- একটি JS বান্ডলার ব্যবহার করে সমস্ত প্রয়োজনীয় স্ক্রিপ্ট বান্ডিল করুন (যেমন, ওয়েবপ্যাক)
- Async বান্ডিল করা স্ক্রিপ্ট লোড করুন, যাতে এটি পৃষ্ঠা রেন্ডারিং ব্লক না করে
- শ্যাডো ডম (বনাম iframe) এর সাথে গণনা করা বিজ্ঞাপন ব্যানার সংযুক্ত করুন
- ইন্টারসেকশন অবজারভার এপিআই দিয়ে ব্যবহারকারীর স্ক্রলে ক্রমাগতভাবে বিজ্ঞাপন লোড করুন
ক্রমান্বয়ে ওয়েবসাইট উন্নত করা
এই মৌলিক অপ্টিমাইজেশানগুলি ছাড়াও, Nikkei তাদের ওয়েবসাইটকে ইনস্টলযোগ্য করতে এবং এমনকি অফলাইনে কাজ করতে ওয়েব অ্যাপ ম্যানিফেস্ট এবং পরিষেবা কর্মীদের লিভারেজ করেছে৷ তাদের পরিষেবা কর্মীর মধ্যে ক্যাশে-প্রথম কৌশল ব্যবহার করে, সমস্ত মূল সংস্থান এবং শীর্ষ নিবন্ধগুলি ক্যাশে সঞ্চয়স্থানে সংরক্ষণ করা হয় এবং এমনকি একটি ফ্ল্যাকি বা অফলাইন নেটওয়ার্কের মতো আকস্মিক পরিস্থিতিতেও পুনরায় ব্যবহার করা হয়, সামঞ্জস্যপূর্ণ, অপ্টিমাইজ করা কর্মক্ষমতা প্রদান করে।
নিক্কেই হ্যাক করুন
140+ বছরের ইতিহাস সহ একটি ঐতিহ্যবাহী দৈনিক সংবাদপত্র কোম্পানি ওয়েব এবং PWA এর শক্তির মাধ্যমে সফলভাবে এর ডিজিটালাইজেশনকে ত্বরান্বিত করেছে। Nikkei এর ফ্রন্ট-এন্ড ইঞ্জিনিয়াররা প্রমাণ করেছেন যে দুর্দান্ত UX শক্তিশালী ব্যবসায়িক কর্মক্ষমতা প্রদান করে। কোম্পানিটি ওয়েবে মানের একটি নতুন স্তর নিয়ে আসার যাত্রা অব্যাহত রাখবে।