153

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

তবে এখন আমি নিজেকে চেকলিস্টের বাকি একটি হলুদ বিন্দুতে ঝকঝকে দেখতে পেয়েছি: "উপরের-ভাঁজ বিষয়বস্তুতে রেন্ডার-ব্লকিং সিএসএস বাদ দিন"।

আমার সিএসএস যেভাবে সেট আপ করা হয়েছে তা হ'ল একটি গ্লোবাল _.cssফাইল রয়েছে যা স্টাইল যুক্ত রয়েছে যা সাধারণভাবে পৃষ্ঠার কাঠামোর ক্ষেত্রে প্রযোজ্য হয় বা পুরো সাইটের জুড়ে এক বা দুটি বেশি জায়গায় ব্যবহৃত হয়। বেশিরভাগ পৃষ্ঠাগুলিতে একটি নির্দিষ্ট সিএসএস ফাইল থাকে (উদাহরণস্বরূপ, party.phpথাকে party.css) সেই নির্দিষ্ট পৃষ্ঠায় নির্দিষ্ট স্টাইল থাকে। সমস্ত সিএসএস ফাইল অনির্দিষ্টকালের জন্য ক্যাশে করা হয়, যেহেতু আমি /t=FILEMTIMEফাইলের নামগুলিতে সংযোজন করি (এবং পরে তাদের .htaccess দিয়ে মুছে ফেলি ) যাতে ফাইলগুলি পরিবর্তন করা হয় তখন আপডেট হয় guarantee

যাইহোক, গুগল উপরের-ভাঁজ সামগ্রীগুলির জন্য প্রয়োজনীয় সমালোচনামূলক স্টাইলগুলি অন্তর্নিহিত করার প্রস্তাব দেয়। সমস্যাটি হ'ল ... ভাল, এই স্ক্রিনশটটি একবার দেখুন: http://prnscr.com/1qt49e

আপনি দেখতে পাচ্ছেন ... সমস্ত লিখিত সামগ্রী উপরে রয়েছে! লোকেরা স্ক্রোলিংকে ঘৃণা করে, বিশেষত এমন একটি গেমের সাথে যা অনেক পৃষ্ঠা লোড করে invol সুতরাং আমি সাইটটিকে একটি স্ক্রিনে ফিট করার জন্য ডিজাইন করেছি (যথেষ্ট ভাল রেজোলিউশন ধরে)) সুতরাং এর মানে হল ... সমস্ত শৈলী উপরের-ভাঁজ সামগ্রীতে প্রযোজ্য! তাহলে ... কোন সমাধান আছে কি? বা আমি অন্যথায় নিকটে-নিখুঁত স্কোরের সেই হলুদ চিহ্নটি দিয়ে আটকেছি?

css pagespeed

— নেট দ্য ডার্ক অ্যাবসোল
সূত্র

এটি বিদ্রূপজনক যে স্ক্রিনশটের জন্য যে উপরের-ভাঁজ সামগ্রীটি লোড হতে দীর্ঘ সময় নিচ্ছে :) আসলে আমার জন্য, স্ক্রিনশটটি শেষ পর্যন্ত কখনই লোড হয়নি

— অনুপম ২

@ অনুপম সম্ভবত মুছে ফেলা হয়েছে। Prntscr ঠিক স্থায়িত্ব জন্য বোঝানো হয় না, এবং আমি আশা করিনি এই প্রশ্নের হতে বেশ এত জনপ্রিয়।

— নিট দ্য ডার্ক আবসোল

হ্যাঁ, সব ভাল, একটি হালকা মন্তব্য ছিল

— অনুপম

182

এর আগে একটি সম্পর্কিত প্রশ্ন জিজ্ঞাসা করা হয়েছে: গুগল পেজস্পিডে "উপরের-ভাঁজ সামগ্রী" কী?

প্রথমত আপনার খেয়াল করতে হবে যে এটি ' মোবাইল পৃষ্ঠাগুলি ' সম্পর্কে ।
সুতরাং যখন আমি তোমার প্রশ্ন ব্যাখ্যা এবং সঠিকভাবে স্ক্রীনশট, তারপর এই হল না আপনার সাইটের জন্য!

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

আমি আপনাকে দিতে পারে সর্বোত্তম পরামর্শ হ'ল:

আপনার সিএসএসে প্রতিস্থাপিত উপাদানগুলিতে প্রস্থ এবং উচ্চতা সেট করুন, যাতে ব্রাউজার উপাদানগুলির বিন্যাস করতে পারে এবং প্রতিস্থাপিত সামগ্রীর জন্য অপেক্ষা করতে না হয়!

অতিরিক্তভাবে আপনি কেন কেবল একটির পরিবর্তে বিভিন্ন সিএসএস ফাইল ব্যবহার করেন?
অতিরিক্ত অনুরোধটি ডেটা ভলিউমের স্বল্প পরিমাণের চেয়ে খারাপ। এবং প্রথম অনুরোধের পরে সিএসএস ফাইলটি যাইহোক ক্যাশে করা হয়।

সবসময় যে বিষয়গুলির যত্ন নেওয়া উচিত সেগুলি হ'ল:

যতটা সম্ভব অনুরোধের সংখ্যা হ্রাস করুন
আপনার সামগ্রিক পৃষ্ঠার ওজন যতটা সম্ভব কম রাখুন

এবং কীভাবে গুগলের 100% পেজস্পিড ইনসাইটস সরঞ্জামটি পাবেন তা সম্পর্কে আপনার মস্তিষ্ককে ধাঁধা দেবেন না ...! ;-)

সংযোজন 1: এখানে পৃষ্ঠা যার উপর Google আমাদের শো, যা তারা জন্য সুপারিশ করা হয় নিখুত সিএসএস ডেলিভারি ।

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

ইমহো গুগল একটি নতুন "হাইপ" শুরু করছে (যখন এখানে স্ট্যাকওভারফ্লোতে আমার সম্পর্কে সমস্ত প্রশ্ন রয়েছে) ...!

— Netsurfer
সূত্র

9

দুর্দান্ত উত্তর। সমস্যাটি হ'ল গুগল আপনাকে ধীরে ধীরে পেজ দিলে আপনাকে দণ্ডিত করবে। অতএব তারা দুর্দান্ত বা সম্পূর্ণ নির্বোধ হোক তাদের ধারণাগুলি মেনে চলতে আপনাকে প্রয়োগ করে। :(

— স্টিভ হরভাথ

10

@ নেটসার্ফার গুগল থেকে আসে না এমন কিছু হ'ল "পবিত্র গ্রেইল" এলএলএল। আমি 100 অর্জনের জন্য আমার মাথা আঁচড়ান, তবে এই মন্তব্যটি পড়ার পরে 92 এ থামলাম।

— 09

44

আপনার আরও জোর দেওয়া উচিত, এই সত্য যে গুগল তাদের নিজস্ব পরামর্শ অনুসরণ করে না ।

— মিঃ স্মিথ

2

অতিরিক্ত অনুরোধগুলি এইচটিটিপি / 2 এবং এসপিডিওয়াইয়ের সাথে সমস্যা কম হয়ে যাবে, উইকিপিডিয়া থেকে , "এইচটিটিপি / 2 এর প্রথম খসড়ার অতিরিক্ত কর্মক্ষমতা উন্নতি (যা এসপিডিওয়াইয়ের একটি অনুলিপি ছিল) হেড- এইচটিটিপি 1-এ (এইচটিটিপি পাইপলাইনিং ব্যবহার করা হলেও), শিরোনাম সংক্ষেপণ এবং অনুরোধগুলির অগ্রাধিকার অবলম্বন সমস্যা।

— যুক্তিযুক্তদেব GoFundMonica পছন্দ করেছেন

3

আমার পৃষ্ঠাটি 72 মোবাইল এবং 80 টি ডেস্কটপ থেকে উঠিয়ে দেওয়ার চেষ্টা করা হচ্ছে তবে একই সমস্যা ছিল। আমি আমার সিএসএসকে কোথাও কম রাখতে এবং FOUT দেখিয়ে ব্যবহারকারীর অভিজ্ঞতা হ্রাস করতে অস্বীকার করেছি!

— প্রকাশ্য

14

গুগল পেজ গতিতে (মোবাইলের জন্য) আমি কীভাবে একটি 99/100 পেয়েছি

টিএলডিআর: আপনার <style></style>ট্যাগগুলির মধ্যে আপনার সম্পূর্ণ সিএসএস স্ক্রিপ্টটি সঙ্কুচিত করুন এবং এম্বেড করুন ।

আমি প্রায় এক সপ্তাহ ধরে এই অধরা 100/100 স্কোরটি তাড়া করছি। আপনার মতো, শেষের আইটেমটি "ভাঁজ সামগ্রীর উপরে রেন্ডার-ব্লকিং সিএসএস" মুছে ফেলা হয়েছিল।

অবশ্যই একটি সহজ সমাধান আছে ?? নাঃ। ফিলামেন্ট গ্রুপের লোডসিএসএস সমাধানটি চেষ্টা করে দেখলাম । আমার পছন্দ অনুসারে খুব বেশি .js।

asyncসিএসএসের জন্য বৈশিষ্ট্যগুলি (জেএসের মতো) সম্পর্কে কী বলা যায় ? তাদের অস্তিত্ব নেই।

আমি হাল ছেড়ে দিতে প্রস্তুত ছিলাম। তারপর এটি আমার উপর ছড়িয়ে পড়ে। যদি স্ক্রিপ্টটি লিঙ্ক করা রেন্ডারটিকে অবরুদ্ধ করে রাখে, তবে আমি যদি পরিবর্তে আমার সম্পূর্ণ সিএসএস মাথায় এম্বেড করি তবে। সেভাবে অবরুদ্ধ করার মতো কিছুই ছিল না।

আমার স্টাইল ট্যাগে সিএসএসের 1263 লাইন এম্বেড করা একেবারেই ভুল R তবে আমি এটিকে ঘূর্ণি দিলাম। আমি প্রথমে এটি ব্যবহার করে সংকুচিত করেছি (এবং এটি পূর্বনির্ধারিত):

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ এনপিএম পোস্টসিএস প্যাকেজটি দেখুন ।

এখন এটি স্থান-কম CSS এর মাত্র একটি দীর্ঘ লাইন ছিল। আমি <style>your;great-wall-of-china-long;css;here</style>আমার হোম পৃষ্ঠায় ট্যাগগুলিতে সিএসএস প্লপ করেছি। তারপরে আমি পৃষ্ঠা গতির অন্তর্দৃষ্টি দিয়ে পুনরায় বিশ্লেষণ করেছি।

আমি মোবাইলে 90/100 থেকে 99/100 এ চলেছি !!!

এটি আমার (এবং সম্ভবত আপনি) সমস্ত কিছুর বিপরীতে। তবে এটি সমস্যার সমাধান করেছে। আমি এখনই এটি কেবলমাত্র আমার হোম পেজে ব্যবহার করছি এবং একটি পিএইচপি এর মাধ্যমে প্রোগ্রামিতভাবে সংকুচিত CSS অন্তর্ভুক্ত করছি।

YSSV (আপনার মাইলেজ পরিবর্তিত হতে পারে) আপনার CSS এর দৈর্ঘ্যের জন্য মুলতুবি রয়েছে। গুগল আপনাকে ভাঁজ সামগ্রীর উপরে খুব বেশি পরিমাণে ডিং করতে পারে। তবে ধরে নেই; পরীক্ষা!

আমি এখনই কেবলমাত্র আমার হোম পেজে এটি করছি তাই লোকেরা আমার সবচেয়ে গুরুত্বপূর্ণ পৃষ্ঠায় একটি দ্রুত রেন্ডার পেতে পারে।
আপনার সিএসএস ক্যাশে হবে না। যদিও আমি খুব বেশি চিন্তিত নই। দ্বিতীয় তারা আমার সাইটে অন্য পৃষ্ঠাতে আঘাত সিএসএস হবে ক্যাশে পেতে (নোট 1 দেখুন)।

— elbowlobstercowstand
সূত্র

4

আপনার উত্সর্গ এবং গবেষণার জন্য আপনাকে ধন্যবাদ, তবে আমি ব্যক্তিগতভাবে এটি করার স্বপ্ন

— দেখব না

2

তাহলে কোন বক্তব্য নেই, এমন স্কোর অর্জনের চেষ্টা করা যা সত্যিকার অর্থে কিছুই সাহায্য করবে না?

— ল্যারিবুড

আপনি আপনার স্কোর উচ্চতর পেয়েছেন তা পরিষ্কার, তবে এখন আপনার সাইটের প্রতিটি পৃষ্ঠার আরও ওজন থাকবে weight তবুও, ভাল খুঁজে।

— এডওয়ার্ডএম

@ এডওয়ার্ডম ধন্যবাদ! পোস্টে আমার নোট 2 দেখুন। একবার তারা দ্বিতীয় পৃষ্ঠায় আঘাত করলে সিএসএস ক্যাশে হয়ে যায় এবং ওজনের সমস্যা চলে যায়।

— এলবোলোস্টারস্টারকস্ট্যান্ড

1

@ ল্যারিবুড উচ্চতর স্কোরের পয়েন্ট? আমার জন্য আরও টাকা গুগলে আমার ওয়েবসাইট যত বেশি থাকবে, কেউ তার উপর ক্লিক করে গ্রাহক হওয়ার সম্ভাবনা তত বেশি। কারণ Google পৃষ্ঠা গতি ব্যবহার র্যাংকিং নির্ধারণ করতে , আমি আমার স্কোর উন্নত করার সিদ্ধান্ত নিয়েছে।

— এলবোলোস্টারস্টারকস্ট্যান্ড

9

কিছু টিপস যা সাহায্য করতে পারে:

আমি গতকাল সিএসএস অপ্টিমাইজেশনে এই নিবন্ধটি জুড়ে এসেছি: সিএসএসের জন্য প্রোফাইলিং ... অপ্টিমাইজেশন সিএসএসে
প্রচুর দরকারী তথ্য এবং কী সিএসএস সর্বাধিক পারফরম্যান্স ড্রেনগুলির কারণ।
আমি গুগ ক্রোম (ক্যানারি) দেব সরঞ্জামগুলিতে "লুকানো গোপনীয়তা "গুলিতে jQueryUK এ নিম্নলিখিত উপস্থাপনাটি দেখেছি: ডেভটুলস এটি করতে পারে । টাইম টু ফার্স্ট পেইন্ট , বিভাগগুলি পুনরায় রঙ করতে এবং ব্যয়বহুল সিএসএসে বিভাগগুলি দেখুন ।
এছাড়াও, যদি আপনি প্রয়োজনীয় জেএস-এর মতো কোনও লোডার ব্যবহার করছেন তবে আপনার সিএসএস লোডার প্লাগইনগুলির একটিতে নজর থাকতে পারে, যা প্রয়োজন-সিএসএস নামে পরিচিত , সিএসএসও ব্যবহার করে - এমন একটি অপটিজার যা কাঠামোগত অনুকূলকরণও করে, যেমন। অভিন্ন বৈশিষ্ট্যগুলির সাথে ব্লকগুলি মার্জ করা। আমি এটি কয়েকবার ব্যবহার করেছি এবং এটি কেস থেকে কেস ক্ষেত্রে যথেষ্ট পরিমাণ সিএসএস সঞ্চয় করতে পারে।

প্রশ্নটি বন্ধ: আপনি যে সমস্ত ছোট আইকন লোড করছেন তার জন্য স্প্রিট তৈরিতে আমি দ্বিতীয় @ এঞ্জিনো। ফাইলের আকারগুলি এত ছোট এটি প্রতিটি আইকনের জন্য কোনও সার্ভার রাউন্ডট্রিপকে সত্যিকার অর্থে ওয়ারেন্ট দেয় না। ব্রাউজারটি করতে পারে এমন সমষ্টিগত HTTP অনুরোধগুলির মোট সংখ্যাও মনে রাখবেন। সুতরাং বৃহত সংখ্যক ছোট আইকনগুলির অনুরোধগুলি হ'ল "রেন্ডার-ব্লকিং" are যদিও একটি খালি পৃষ্ঠা আপনার সাথে তুলনা করে, আমি পছন্দ করি কিভাবে উদাহরণস্বরূপ duckduckgo লোড হয়।

— ঘন
সূত্র

দেখে মনে হচ্ছে হাঁসডাকগোও তাদের পাতার স্কোর সম্পর্কে চিন্তা করে না, এখানে

— চেতনাবানা

6

দয়া করে নীচের পৃষ্ঠাটি দেখুন https://varvy.com/pagespeed/render-blocking-css.html । এটি আমাকে "রেন্ডার ব্লকিং সিএসএস" থেকে মুক্তি পেতে সহায়তা করেছে । " রেন্ডার ব্লকিং সিএসএস " সরানোর জন্য আমি নীচের কোডটি ব্যবহার করেছি । এখন গুগল পেজ স্পিড ইনসাইটে আমি CSS রেন্ডার ব্লক করার সাথে সম্পর্কিত সমস্যা পাচ্ছি না।

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

— আমুক সাক্সেনা
সূত্র

1

আমি যখন উল্লিখিত ফাংশনটি ব্যবহার করি এটি পৃষ্ঠাস্পষ্ট স্কোর হ্রাস করে। আমি যে ফাংশনটি লিখেছি তা হ'ল: jsfiddle.net/kvfzbxxo আপনি কি আমাকে সাহায্য করতে পারেন?

— আরশো

আমি নিম্নলিখিত ইউআরএলে এই একই ফাংশনটি প্রয়োগ করেছি এবং দয়া করে এখানে " হোয়াইটেক্যাশব্যাক.ইন " গতিটি দেখুন আপনি উত্স ইউআরএলটি দেখতে এবং পাদলেখের "লোডসিএসএস" ফাংশনটি পেতে পারেন। এটি আপনাকে বুঝতে সহায়তা করবে যে আমি কোডটি কীভাবে প্রয়োগ করেছি। পৃষ্ঠার পরে সিএসএস লোড হওয়ার সাথে সাথে পৃষ্ঠাটির গতি বাড়াতে হবে।

— আমুক সাক্সেনা

আমি এই কোডটি ব্যবহার করেছি: jsfiddle.net/sbpa1hun .এখন সিএসএস ওয়েবসাইটে লোড হচ্ছে না।

— আরশো

আমি উল্লেখ করেছি যে এই কোডটি যুক্ত করার পরে: jsfiddle.net/sbpa1hun যা আপনার ওয়েবসাইটে ব্যবহৃত হচ্ছে, আমার ওয়েবসাইট সমস্ত স্টাইল হারিয়েছে। এটি পৃষ্ঠার গতি ক্রিজ করে তবে সিএসএস আর কাজ করছে না! আপনি আমাকে কিছু সাহায্য করতে পারেন কিভাবে? আমি পৃষ্ঠা গতিতে প্রায় 40 পেয়ে যাচ্ছি। তবে আপনার কোড যুক্ত করে আমার প্রায় 70 টি পাওয়া যায় But তবে CSS কাজ করতে পারছে না।

— আরশো

1

আপনি যদি jsfiddle এ এটি করার চেষ্টা করছেন তবে এটি কাজ করবে না, দয়া করে আপনার ওয়েবসাইটটিতে এই কোডটি ব্যবহার করে দেখুন, jsfiddle বাহ্যিক ওয়েবসাইটগুলির জন্য সিএসডি লোডিং ব্লক করবে। কারণ আপনি জাভাস্ক্রিপ্ট ব্যবহার করে বহিরাগত উত্সগুলির সিএসএস লোড করছেন। সুতরাং আপনার ওয়েবসাইটে এটি করার চেষ্টা করুন। এছাড়াও jquery ফাইলগুলি অন্তর্ভুক্ত করার চেষ্টা করুন, সেগুলি আপনার স্ক্রিপ্টে অনুপস্থিত। জেএস ফাইল অন্তর্ভুক্ত করার পরে, এটি কাজ করতে পারে। এছাড়াও দয়া করে নোট করুন, https সাইটগুলি jsfiddle এ কাজ করতে পারে। আপনি এই ত্রুটিটি পাচ্ছেন: "ব্লক হওয়া মিশ্রিত সক্রিয় সামগ্রী" Blocked আপনার প্রথমে এটি সমাধান করা দরকার।

— আমুক সাক্সেনা

4

আমিও এই নতুন পেজস্পিড মেট্রিকের সাথে লড়াই করেছি।

যদিও আমার স্কোরকে ১০০% পর্যন্ত ফিরে পাওয়ার কোনও ব্যবহারিক উপায় আমি খুঁজে পাইনি এমন কয়েকটি জিনিস রয়েছে যা আমি সহায়ক পেয়েছি।

সমস্ত সিএসএসকে একটি ফাইলে একত্রিত করা অনেক সহায়তা করেছিল। আমার সমস্ত সাইটগুলি% 95 -% 98 এ ফিরে এসেছে।

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

— Glipt
সূত্র

2

স্মেশিং ম্যাগাজিনের পেজস্পিড টেস্ট বিকাশকারীদের

— মো।

1

এর জন্য 2019 এর সর্বোত্তম সমাধানটি হল HTTP / 2 সার্ভার পুশ ।

আপনার কোনও হ্যাকি জাভাস্ক্রিপ্ট সমাধান বা ইনলাইন শৈলীর প্রয়োজন নেই। তবে, আপনাকে এমন একটি সার্ভারের দরকার যা HTTP 2.0 সমর্থন করে (যে কোনও আধুনিক সার্ভার সংস্করণ হবে), যা নিজেই আপনার সার্ভারকে এসএসএল চালানোর জন্য প্রয়োজন। যাইহোক, চলুন এনক্রিপ্ট সহ যে কোনওভাবে এসএসএল ব্যবহার না করার কোনও কারণ নেই।

আমার সাইট https://r.je/ এ মোবাইল এবং ডেস্কটপ উভয়ের জন্য 100/100 স্কোর রয়েছে।

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

আপনি লিঙ্ক শিরোনাম সেট করে HTTP / 2 টিপুন ব্যবহার করতে পারেন।

অ্যাপাচি উদাহরণ (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

এনজিআইএনএক্সের জন্য আপনি সার্ভার কনফিগারেশনে আপনার অবস্থান ট্যাগটিতে শিরোলেখ যোগ করতে পারেন:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

এই শিরোনাম সেটটি দিয়ে ব্রাউজারটি একই সময়ে এইচটিএমএল এবং সিএসএস গ্রহণ করে যা সিএসএসকে রেন্ডারিং রোধ করা থেকে বিরত রাখে।

আপনি এটি টুইট করতে চান যাতে সিএসএস কেবল প্রথম অনুরোধে প্রেরণ করা হয় তবে লিঙ্ক শিরোনামটি "রেন্ডার ব্লকিং জাভাস্ক্রিপ্ট এবং সিএসএস নির্মূল করুন" এর সর্বাধিক সম্পূর্ণ এবং সর্বনিম্ন হ্যাকি সমাধান solution

বিস্তারিত আলোচনার জন্য, আমার পোস্টটি এখানে দেখুন: HTTP / 2 পুশ ব্যবহার করে রেন্ডার ব্লকিং সিএসএস নির্মূল করুন

— সমাধি
সূত্র

আমি ভুল বুঝতে পারছিলাম, তবে সার্ভার পুশ কি আপনি একবারে পৃষ্ঠাটি লোড করার পরে সিএসএস পাঠানোর কারণ হিসাবে এটি একবারে ক্যাশে হওয়ার আগে একবার না করে দেবেন?

— নিট দ্য ডার্ক আবসোল

হ্যাঁ, কুকিগুলির মতো কয়েকটি কৌশল রয়েছে যা এড়াতে সহায়তা করতে পারে। নির্বাচিতভাবে এখানে চাপ দেওয়ার অংশটি একবার দেখুন: nginx.com/blog/nginx-1-13-9-http2-server-push

— টম বি

0

আপনার সিএসএস ফাইলগুলি থেকে স্বয়ংক্রিয়ভাবে ইনলাইন স্টাইলগুলি তৈরি করতে একটি প্যাকেজ ব্যবহার বিবেচনা করুন। লারাভেলের জন্য গ্রুন্ট ক্রিটিকাল বা ক্রিটিক্যাল সিএসএস একটি ভাল ।

— tsveti_iko
সূত্র

-1

হাই jQuery জন্য আপনি এই জাতীয় ব্যবহার করতে পারেন

অ্যাসিঙ্ক ব্যবহার করুন এবং কেবল = "পাঠ্য / জাভাস্ক্রিপ্ট" টাইপ করুন

— রাজীব
সূত্র

"উপরের-ভাঁজ বিষয়বস্তুতে রেন্ডার-ব্লকিং CSS মুছে ফেলুন"

গুগল পেজ গতিতে (মোবাইলের জন্য) আমি কীভাবে একটি 99/100 পেয়েছি

মন্তব্য