গুগল পেজস্পিডে "ওপরে-ভাঁজ সামগ্রী" কী?


132

সম্প্রতি অবধি, আমার সাইট (www.heatexchangers.ca) গুগল পেজ গতিতে 98% স্কোর করেছে। ওয়েব ফন্টের ক্যোয়ারী স্ট্রিংয়ের মতো আমি কিছু করতে পারি নি। এতে আমি খুব খুশি হয়েছি কারণ এটি আমার যা কিছু করতে পারে তার প্রতিনিধিত্ব করে।

সম্প্রতি গুগল অন্য কিছু যুক্ত করেছে যা পৃষ্ঠার গতির স্কোরকে প্রভাবিত করে এবং আমি এখন পৃষ্ঠা গতিতে কেবল 89% পেয়েছি এবং এই পরামর্শটি পেয়েছি:

  • উপরের-ভাঁজ সামগ্রীটিতে বাহ্যিক রেন্ডার-ব্লকিং জাভাস্ক্রিপ্ট এবং সিএসএস নির্মূল করুন inate

এটির সমাধানের পরামর্শটি আমার সমস্ত .css এবং .js ফাইলগুলিতে ট্রলিং করা এবং সেগুলির কিছু অংশ পৃথক করে এবং আমার এইচটিএমএলের সাথে ইনলাইন যুক্ত করা জড়িত বলে মনে হচ্ছে। এটি আমাকে কিছুটা বিভ্রান্তির কারণ করছে যেহেতু আমি এই ছাপের মধ্যে ছিলাম আমাদের যতদূর সম্ভব জেএস এবং সিএসএসকে HTML থেকে দূরে রাখতে হবে keep

"ফোল্ডারের উপরে" সামগ্রীটি ঠিক কী? যদি এটি কয়েকটি স্টাইল যেমন ফন্ট, পটভূমির রঙ ইত্যাদি হয়; তারপরে আমি দেখতে পাচ্ছি যে ইনলাইন অন্তর্ভুক্ত করার পক্ষে এটি খুব বড় কোনও বিষয় নয়। আমি ঠিক কী এটির একটি তালিকা খুঁজে পাইনি।


49
'ভাঁজ' যেখানে স্ক্রিনের নীচে পৃষ্ঠা লোড রয়েছে। আপনি যখন কোনও ওয়েবসাইটে অবতরণ করেন, স্ক্রোলিং ছাড়াই যে কোনও সামগ্রী আপনি অবিলম্বে দেখতে পাবেন তা 'ভাঁজের উপরে'। 'ভাঁজের নীচে' এটি দেখতে আপনার যে কোনও কিছু নীচে স্ক্রোল করতে হবে।
ক্যারিবাকোড

21
ভাঁজের উপরে শব্দটি সাধারণত সংবাদপত্রগুলির জন্য ব্যবহৃত হয়, ওরফে, উপরের বিষয়বস্তু যেখানে কাগজটি অনুভূমিকভাবে ভাঁজ করা হয়। সাধারণত ওয়েব ডিজাইনের জন্য এটি প্রথম 600px ~ বা তার বেশি (আপনি কাকে জিজ্ঞাসা করছেন তার উপর নির্ভর করে বিতর্কযোগ্য)। এটা তোলে শৈলী (হরফ, ব্যাকগ্রাউন্ড ইত্যাদি), তাহলে বিষয়বস্তুর উল্লেখ, এবং JS যে রেন্ডারিং ব্লক করা যেতে পারে ধরণ উল্লেখ না মধ্যে যে সামগ্রী অন্তর্ভুক্ত রয়েছে। আমি সন্দেহ করি গুগল ইনলাইন শৈলীগুলি ব্যবহার করার পরামর্শ দিচ্ছে, আপনি কি আপনাকে দেওয়া পরামর্শ পোস্ট করতে পারেন?
খ্রিস্টান

@ কুপ কেন একটি মন্তব্যের পরিবর্তে একটি উত্তর দেবেন না?
কলব ক্যানিয়ন

উত্তর:


113

এটি হ'ল গুগল সম্প্রতি ক্রমবর্ধমান মোবাইল ওয়েবকে আরও ভালভাবে প্রতিফলিত করার জন্য পৃষ্ঠাটির গতি সরঞ্জামটি পরিবর্তন করেছে। মোবাইল ডেটা নেটওয়ার্কগুলিতে ওয়্যার্ড বা ওয়াইফাইয়ের চেয়ে আলাদা পারফরম্যান্স বৈশিষ্ট্য রয়েছে তাই তাদের জন্য অনুকূলিত করার জন্য আপনাকে বিভিন্ন জিনিস করতে হবে।

উপরে-ভাঁজ (এটিএফ) হ'ল প্রথম স্ক্রিনের মূল্য - যা কিছু দেখার জন্য আপনাকে স্ক্রোল করতে হবে না। স্পষ্টতই, এটি ডিভাইস এবং এটির দিকনির্দেশনার উপর নির্ভর করে পরিবর্তিত হয়, তাই আপনার সাধারণ প্রয়োজন হতে পারে এবং সম্ভবত কিছু কার্যকরী সাধারণ বিকল্পগুলি খুঁজে পেতে পারেন, সম্ভবত একটি লক্ষ্যযুক্ত স্মার্টফোন, একটি ট্যাবলেটগুলির জন্য এবং একটি বড় ডেস্কটপগুলির জন্য।

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

এটি এই বিষয়টিতে গুগলের একটি ভিডিও উপস্থাপনা:

http://www.youtube.com/watch?v=YV1nKLWoARQ

প্রথম দ্বিতীয়টির মধ্যে ব্যবহারকারীদের কিছু করাতে জোর দেওয়া হচ্ছে। এটিএম কন্টেন্টের জন্য সিএসএসকে সরাসরি এইচটিএমএলে রাখার পিছনে যুক্তিটি ডেটা পারফরম্যান্সের বিষয়ে তাদের গবেষণার প্রতিফলন করে যে এটি দেখায় যে সিএসএস না থাকলে এটি প্রথম সেকেন্ডের মধ্যে হওয়ার জন্য খুব শীঘ্রই লোড হবে না।

তারা এমন সরঞ্জামগুলির লিঙ্কও সরবরাহ করে যা এর কয়েকটি স্বয়ংক্রিয় করতে সক্ষম হতে পারে। আমি তাদের এবং ওয়াইএমএমভি চেষ্টা করে দেখিনি।


@ জোশুয়া, আমি "উপরের-ভাঁজ বিষয়বস্তুতে রেন্ডার-ব্লক করা জাভাস্ক্রিপ্ট এবং সিএসএসের জন্য কিছু কাজ করেছি" <নোস্ক্রিপ্ট> ... </ ননস্ক্রিপ্ট>। তবে কেবল মোবাইলগুলিতে প্রতিফলিত হয়। ডেস্কটপে নেই। এই url এর জন্য winni.in/cake-delivery-in-banglor
V SH

2

গুগল পৃষ্ঠা অন্তর্দৃষ্টি আপনাকে পরিষ্কারভাবে বলবে যে ভাঁজের উপরের বিষয়বস্তুকে উল্লেখ করে যে কতগুলি সিএসএস খুব বেশি দেরিতে লোড হচ্ছে এবং পৃষ্ঠাটি আগে রেন্ডার করা যেতে পারে। আপনি সবুজ ফলাফল অর্জনের জন্য CSS এর অংশগুলি সরিয়ে নিতে পারেন। আমি এটি আপনার জন্য করতে পারি: goo.gl/GsRxNc

গুগলের একটি লিঙ্ক 'ভাঁজের উপরে' বর্ণনা করে https://developers.google.com/speed/docs/insights/OptimizeCSS ডেলিভারি


পার্সেন্টের অর্থ কী তা আপনি পরিষ্কার করতে পারেন? আসুন পেজস্পিডের প্রতিবেদন হিসাবে দেখা যায় যে বহিরাগত স্টাইলশিটগুলি লোড হওয়ার জন্য অপেক্ষা না করে উপরের-ভাঁজযুক্ত সামগ্রীর 55% রেন্ডার করা যেতে পারে। যার অর্থ হ'ল উপরের-ভাঁজযুক্ত সামগ্রীর 45% বহিরাগত স্টাইলশিটগুলির বিধি দ্বারা স্টাইলযুক্ত। তবে বিষয়টি তেমন নয়
এক্স-ইউরি

0

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

উত্স - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first


-1

তারা বিশ্লেষণ বা ট্র্যাকিং কোডের মতো রেন্ডার-ব্লকিং জেএসকে উল্লেখ করে যার কারণেই তারা পাদলে সেই সমস্ত "আমার আগে লোড করুন" স্ক্রিপ্টগুলি পাদদেশে রাখার পরামর্শ দেয় কারণ ব্যবহারকারীর স্ক্রিনে সাইট উপস্থিত হওয়ার পরে তারা লোড হবে।


এটা সঠিক। এগুলি পেছনের জন্য গুরুত্বপূর্ণ নয় বলে এগুলি স্থগিত বা অ্যাসিঙ্ক বোঝা হওয়া বা পাদলেখক / ক্লোজিংয়ের আগে </body> ট্যাগে স্থানান্তরিত হওয়া উচিত। মুখ্য পৃষ্ঠা শৈলী বা বুটস্ট্র্যাপের মতো গুরুত্বপূর্ণ কোডটি অবশ্যই পৃষ্ঠার উপরের অংশে লোড করা উচিত বা আপনি FOUC (আনস্টাইলযুক্ত সামগ্রীের ফ্ল্যাশ) অনুভব করতে পারেন, সুতরাং এই গুরুত্বপূর্ণ উপাদানগুলি সম্পর্কে যা করা যায় তা কেবল তাদের হ্রাস করা এবং মার্জ করা to রেন্ডার ব্লকিং হ্রাস করার জন্য কম ফাইলের মধ্যে। এই মন্তব্যটি কাউবয় উইলির মন্তব্যের পক্ষে সমর্থন যা যথাযথভাবে ডাউনভোটেড।
তাহি রেউ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.