এস3 এর মাধ্যমে অ্যামাজন ক্লাউডফ্রন্ট থেকে জিজেপড সিএসএস এবং জাভাস্ক্রিপ্ট পরিবেশন করা হচ্ছে


194

ক্লাউডফ্রন্টের বৃহত্তর ব্যবহার করা আমার সাইটটি দ্রুততর লোড করার উপায়গুলি এবং আমি যে এক অন্বেষণ করতে চাই সেগুলি সন্ধান করছি।

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

অন্যদিকে, সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি আমার নিজের সার্ভারে হোস্ট করা হয়েছে, কারণ এখন অবধি আমার ধারণা ছিল যে ক্লাউডফ্রন্ট থেকে তাদের জিপিপ দেওয়া যাবে না এবং জিজপিং থেকে প্রাপ্ত লাভ (প্রায় 75 শতাংশ) যে পরিমাণে ছাড়িয়ে গেছে তার চেয়ে অনেক বেশি সিডিএন ব্যবহার থেকে (প্রায় 50 শতাংশ): অ্যামাজন এস 3 (এবং এইভাবে ক্লাউডফ্রন্ট) জিপিপি বিষয়বস্তুর জন্য তাদের সমর্থন নির্দেশ করার জন্য ব্রাউজারগুলি দ্বারা প্রেরিত HTTP স্বীকৃতি-এনকোডিং শিরোনাম ব্যবহার করে স্ট্যান্ডার্ড পদ্ধতিতে জিপ্সড সামগ্রী সরবরাহ করা সমর্থন করে না, এবং তাই তারা Gzip করতে এবং ফ্লাইতে উপাদানগুলি সরবরাহ করতে সক্ষম হয় নি।

এইভাবে আমি এখনও অবধি ছাপে ছিলাম যে একজনকে দুটি বিকল্পের মধ্যে বেছে নিতে হবে:

  1. সমস্ত সম্পদ অ্যামাজন ক্লাউডফ্রন্টে সরান এবং জিজেপিং সম্পর্কে ভুলে যান;

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

সেখানে ছিল এই সমস্যাটি সমাধানের জন্য সমাধান নীচে উপস্থিত, কিন্তু মূলত এই কাজ করে নি । [ লিঙ্ক ]।

এখন, মনে হচ্ছে অ্যামাজন ক্লাউডফ্রন্টটি কাস্টম উত্সকে সমর্থন করে এবং আপনি যদি কাস্টম অরিজিন [ লিঙ্ক ] ব্যবহার করেন তবে জিজেপড বিষয়বস্তু পরিবেশন করার জন্য এখন স্ট্যান্ডার্ড এইচটিটিপি স্বীকার-এনকোডিং পদ্ধতি ব্যবহার করা সম্ভব

আমি এখনও পর্যন্ত আমার সার্ভারে নতুন বৈশিষ্ট্যটি প্রয়োগ করতে সক্ষম হইনি। উপরের সাথে আমি যে ব্লগ পোস্টটি লিঙ্ক করেছি, এটিই কেবলমাত্র পরিবর্তনের বিশদটিই পেয়েছি, বোঝা যাচ্ছে যে আপনি কেবল জিজিপিং সক্ষম করতে পারবেন (বার ওয়ারারআউন্ডস, যা আমি ব্যবহার করতে চাই না), যদি আপনি কাস্টম উত্স বেছে নেন, যা আমি বরং এটি করব না: আমার ক্লাউডফ্রন্ট সার্ভারে কোরস্পন্ডিং ফাইলগুলি হোস্ট করা এবং সেখান থেকে তাদের লিঙ্ক করা সহজ find সাবধানে ডকুমেন্টেশন পড়া সত্ত্বেও, আমি জানি না:

  • নতুন বৈশিষ্ট্যটির অর্থ ফাইলগুলি নিজস্ব ডোমেন সার্ভারে কাস্টম উত্সের মাধ্যমে হোস্ট করা উচিত , এবং যদি তাই হয় তবে কোড সেটআপ এটি কী অর্জন করবে;

  • সিএসএস এবং জাভাস্ক্রিপ্ট শিরোনামগুলি কীভাবে কনফিগার করবেন তা নিশ্চিত করার জন্য যে তারা ক্লাউডফ্রন্ট থেকে জিজেপ দেওয়া হয়েছে served

উত্তর:


202

আপডেট: অ্যামাজন এখন gzip সংক্ষেপণ সমর্থন করে, সুতরাং এটি আর প্রয়োজন হয় না। আমাজন ঘোষণা

আসল উত্তর:

উত্তরটি হ'ল সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি জিপ করা। হ্যাঁ, আপনি যে অধিকার পড়া।

gzip -9 production.min.css

এটি উত্পাদন করবে production.min.css.gz। অপসারণ করুন .gz, এস 3 এ আপলোড করুন (বা আপনি যে কোনও মূল সার্ভার ব্যবহার করছেন) এবং স্পষ্টভাবে Content-Encodingফাইলটির জন্য শিরোনাম সেট করুন gzip

এটি উড়ানের দিকে ঝাঁপানো নয়, তবে আপনি খুব সহজেই এটিকে আপনার বিল্ড / স্থাপনার স্ক্রিপ্টগুলিতে গুটিয়ে রাখতে পারেন। সুবিধাগুলি হ'ল:

  1. যখন ফাইলটির জন্য অনুরোধ করা হয়েছে তখন অ্যাপাচের জন্য সামগ্রীটি জিজপ করার জন্য কোনও সিপিইউ দরকার নেই।
  2. ফাইলগুলি সর্বোচ্চ সংকোচনের স্তরে (ধরে নেওয়া gzip -9) গিজিপ করা হয় ।
  3. আপনি সিডিএন থেকে ফাইলটি পরিবেশন করছেন।

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

কেবল মনে রাখবেন: আপনি যদি ক্লাউডফ্রন্টে ক্যাশে হওয়া কোনও ফাইলে কোনও পরিবর্তন করেন তবে এই ধরণের পরিবর্তন করার পরে আপনি ক্যাশেটিকে অবৈধ করে দেওয়ার বিষয়টি নিশ্চিত করুন।


37
আপনার লিঙ্কটি পড়ার পরে, আমি অবশ্যই বলব যে ব্লগ লেখক অবহিত। "তবে, যদি ব্যবহারকারীর কাছে এমন ব্রাউজার থাকে যা জিজেপ এনকোডিং সমর্থন করে না, আপনার সাইটের জিপ করা স্টাইলশিট এবং জাভাস্ক্রিপ্টগুলি কেবল সেই ব্যবহারকারীর পক্ষে কাজ করবে না।" এই ব্রাউজারটি সম্ভবত আপনার স্টাইলশিট এবং স্ক্রিপ্ট ফাইলগুলি চালানোর জন্য খুব পুরানো হবে। এই ব্যবহারকারীরা এক শতাংশের একটি অংশ তৈরি করে।
স্কাইলার জনসন

3
আপডেট: আমি এটি কাজ করে। এটি প্রদর্শিত না হওয়ার কারণটি হ'ল আমি বিষয়বস্তুর ধরণটি পাঠ্য / CSS এ সেট করতে ভুলে গিয়েছিলাম। আপনি যদি এটি করেন তবে আপনি ভাল, যদিও কিছু কারণে মনে হচ্ছে আপনি এখানে বর্ণিত কারণে S3 (যা গুগল স্পিড রেটিংয়ের সাথে সহায়তা করবে) এর একটি "স্বীকৃতি-এনকোডিং: ভেরি" শিরোনাম যুক্ত করতে পারবেন না: [লিঙ্ক ]। এছাড়াও, আমি সম্পদটি ক্যাশে করার জন্য ক্যাশে-নিয়ন্ত্রণ স্থাপন করেছি, তবে মনে হচ্ছে এটি ক্যাশ করছে ...
ডোনাল্ড জেনকিন্স

32
গুগলের মাধ্যমে এটি সবেমাত্র পাওয়া গেছে, এবং আমি দুঃখিত এটি বলার অপেক্ষা রাখে না যে এটি ভাল পরামর্শ নয়। যদিও ডেস্কটপ ব্রাউজারগুলির 1% জিজিপযুক্ত সামগ্রী পরিচালনা করতে পারে না, বেশিরভাগ মোবাইল ব্রাউজারগুলি এটি করতে পারে না। আপনি লক্ষ্য করা দর্শকের উপর কতজন নির্ভর করে; তবে বেশিরভাগ পুরানো নোকিয়া এস 40 এর উদাহরণস্বরূপ বগি গিজিপ সংক্ষেপণ রয়েছে। সঠিক উপায় হ'ল "কাস্টম উত্স", যা একটি অ্যাপাচি / আইআইএস ওয়েবসভারকে নির্দেশ করে যা সামগ্রী সংক্ষেপণ করে এবং যথাযথ HTTP শিরোনাম সরবরাহ করে। এখানে একটি ব্লগ পোস্ট এটির সংক্ষিপ্তসার বর্ণনা করে: nomitor.com/blog/2010/11/10/…
এম

14
২০১৫ সালের গোড়ার দিকে এখন পরিস্থিতি কেমন? @ জেস্পর মর্টেনসেন এবং সাইমন পেক পোস্ট করা লিঙ্কগুলি কি এখনও প্রাসঙ্গিক?
ইতালিপালেআল

5
অ্যামাজন ২০১৫ সালের ডিসেম্বরে জিজিপ সংক্ষেপণের জন্য সমর্থন ঘোষণা করেছিল, সুতরাং এটি এখন অপ্রাসঙ্গিক মাত্র মূল ফাইল আপলোড করুন এবং এটি কাজ করবে। aws.amazon.com/blogs/aws/…
শান

15

আমার উত্তরটি এটিকে প্রত্যাহার করে: http://blog.kenweiner.com/2009/08/serving-gzided-javascript-files-from.html

স্কাইলারের জবাব বন্ধ করে দেওয়াতে আপনি সিএসএস এবং জএসএসের একটি জিজিপ এবং নন-জিজিপ সংস্করণ আপলোড করতে পারেন। সাফারি নামকরণ এবং পরীক্ষা সাবধান। কারণ সাফারি হ্যান্ডেল .css.gzবা .js.gzফাইল করবে না ।

site.jsএবং site.js.jgzএবং site.cssএবং site.gz.css (যদি আপনি নির্ধারণ করতে হবে content-encodingএই অধিকার পরিবেশন করা পেতে সঠিক MIME প্রকার করার হেডার)

তারপরে আপনার পৃষ্ঠায় রাখুন।

<script type="text/javascript">var sr_gzipEnabled = false;</script> 
<script type="text/javascript" src="http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr.gzipcheck.js.jgz"></script> 

<noscript> 
  <link type="text/css" rel="stylesheet" href="http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css">
</noscript> 
<script type="text/javascript"> 
(function () {
    var sr_css_file = 'http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css';
    if (sr_gzipEnabled) {
      sr_css_file = 'http://d2ft4b0ve1aur1.cloudfront.net/css-050/sr-br-min.css.gz';
    }

    var head = document.getElementsByTagName("head")[0];
    if (head) {
        var scriptStyles = document.createElement("link");
        scriptStyles.rel = "stylesheet";
        scriptStyles.type = "text/css";
        scriptStyles.href = sr_css_file;
        head.appendChild(scriptStyles);
        //alert('adding css to header:'+sr_css_file);
     }
}());
</script> 

gzipcheck.js.jgz কেবল sr_gzipEnabled = true; ব্রাউজারটি জিজেপড কোড পরিচালনা করতে পারে এবং তা না পারলে ব্যাকআপ সরবরাহ করতে পারে তা নিশ্চিত করার জন্য এই পরীক্ষাগুলি।

তারপরে ফুটারে অনুরূপ কিছু করুন আপনার সমস্ত জেসগুলি এক ফাইলে রয়েছে এবং পাদলেখাতে যেতে পারে ing

<div id="sr_js"></div> 
<script type="text/javascript"> 
(function () {
    var sr_js_file = 'http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr-br-min.js';
    if (sr_gzipEnabled) {
       sr_js_file = 'http://d2ft4b0ve1aur1.cloudfront.net/js-050/sr-br-min.js.jgz';
    }
    var sr_script_tag = document.getElementById("sr_js");         
    if (sr_script_tag) {
    var scriptStyles = document.createElement("script");
    scriptStyles.type = "text/javascript";
    scriptStyles.src = sr_js_file;
    sr_script_tag.appendChild(scriptStyles);
    //alert('adding js to footer:'+sr_js_file);
    }
}());
</script> 

আপডেট: আমাজন এখন gzip সংক্ষেপণ সমর্থন করে। ঘোষণা, সুতরাং এটি আর প্রয়োজন হয় না। আমাজন ঘোষণা


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

@ ডোনাল্ড জেনকিন্স আমি মনে করি যে জেএসগুলি এখনও ক্যাশে হবে। আপনি যখন জেএস স্নিপে স্ক্রিপ্ট ট্যাগটি তৈরি করেন, তখন জেএস কল করতে হবে এবং আমি বিশ্বাস করি এটি ক্যাশে থাকলে ব্রাউজারটি সেখান থেকে এটি ব্যবহার করবে।
শান

2
পরীক্ষার পৃষ্ঠা ব্লগ.কোসনি.টেস্টপেইজস / সাফারি- জিজেডটি ইঙ্গিত দেয় যে "সাফারি নামকরণ এবং পরীক্ষা সাবধানতা অবলম্বন করুন Because কারণ সাফারি সিএসএস.gz বা js.gz পরিচালনা করবে না" পুরানো " মাভেরিক্সের সাফারি 7 এবং আইওএস 7-তে সাফারিতে, css.gz এবং js.gz উভয়ই কাজ করে। এই পরিবর্তনটি কখন ঘটেছিল আমি জানি না, আমি কেবল আমার থাকা ডিভাইসগুলির সাথেই পরীক্ষা করছি।
গ্যারিওব

14

ক্লাউডফ্রন্ট জিজিপিং সমর্থন করে।

ক্লাউডফ্রন্ট এইচটিটিপি 1.0 এর মাধ্যমে আপনার সার্ভারের সাথে সংযোগ স্থাপন করে। ডিফল্টরূপে এনজিনেক্স সহ কয়েকটি ওয়েবসার্স এইচটিটিপি ১.০ সংযোগে জিপিড কনটেন্ট সরবরাহ করে না, তবে আপনি এটি যুক্ত করে বলতে পারেন:

gzip_http_version 1.0

আপনার nginx কনফিগারেশনে। আপনি যে কোনও ওয়েব সার্ভার ব্যবহার করছেন তার জন্য সমতুল্য কনফিগার সেট করা যেতে পারে।

এইচটিটিপি ১.০ সংযোগের জন্য বেঁচে থাকা সংযোগগুলি কার্যকর না করার কোনও পার্শ্ব প্রতিক্রিয়া রয়েছে, তবে সংকোচনের সুবিধাগুলি হ'ল এটি অবশ্যই বাণিজ্য বন্ধের পক্ষে।

Http://www.cdnplanet.com/blog/gzip-nginx-cloudfront/ থেকে নেওয়া

সম্পাদন করা

অ্যামাজন ক্লাউড ফ্রন্টের মাধ্যমে ফ্লাইতে জিপিডযুক্ত সামগ্রী পরিবেশন করা বিপজ্জনক এবং সম্ভবত এটি করা উচিত নয়। মূলত যদি আপনার ওয়েবসার্ভারটি সামগ্রীটি জিপ্পিং করে তবে এটি কোনও সামগ্রী-দৈর্ঘ্য সেট করে না এবং পরিবর্তে ডেটাটিকে ছাঁটাই হিসাবে প্রেরণ করবে।

যদি ক্লাউডফ্রন্ট এবং আপনার সার্ভারের মধ্যে সংযোগ বিঘ্নিত হয় এবং অকাল বিচ্ছিন্ন হয়ে যায় তবে ক্লাউডফ্রন্ট এখনও আংশিক ফলাফলকে ক্যাশে করে এবং এটি শেষ না হওয়া অবধি ক্যাশেড সংস্করণ হিসাবে পরিবেশন করে।

প্রথমে এটি ডিস্কে জিপিং করা এবং তারপরে জিজেপড সংস্করণ পরিবেশন করার গ্রহণযোগ্য উত্তর হ'ল এনগিনেক্স বিষয়বস্তু-দৈর্ঘ্যের শিরোনাম সেট করতে সক্ষম হবে, এবং ক্লাউডফ্রন্টটি সংক্ষিপ্ত সংস্করণগুলি বাতিল করবে।


5
-১, এই উত্তরটির সাথে প্রশ্নের কোনও মিল নেই। এনগিনেক্স! = এস 3 এবং ক্লাউডফ্রন্ট
জোনাথন

@ ড্যানাক, এই সমস্যার কারণে আপনি কি ক্লাউডফ্রন্টের আধিকো পুনরুদ্ধার করা ফাইল ক্যাচ করে প্রচুর সমস্যা অনুভব করেছেন? বাস্তবে এটি আপনার জন্য কতটা সমস্যা ছিল তা আমি বোঝার চেষ্টা করছি।
poshest

1
@ পোস্টেস্ট এটি ঘটেছে ফ্লাইতে জিজিপ পরিবেশন করার খুব সামান্য সুবিধা ছিল (যেহেতু gzip সার্ভারে যাইহোক দ্রুত হয়), তাই এটি ঘটতে দেখামাত্রই আমি এটি বন্ধ করে দিয়েছি। দুর্নীতিযুক্ত ডেটা "ফার্স্ট টু বাইট" 200 মিমি বিরল ক্ষেত্রে খুব কম সমস্যা রয়েছে যেখানে বিরল ক্ষেত্রে কন্টেন্ট ইতিমধ্যে জিপিড ফর্ম্যাটে উপস্থিত নেই।
ড্যানাক

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

5

আমরা সম্প্রতি আমাদের সাইটে স্থিতিশীল কিছু সম্পদ সঙ্কুচিত করতে uSwitch.com এর জন্য কয়েকটি আশাবাদ করেছি। যদিও এটি করার জন্য আমরা একটি সম্পূর্ণ এনগিনেক্স প্রক্সি সেটআপ করেছি, তবে আমি একটি ছোট হেরোকু অ্যাপ্লিকেশনও একসাথে রেখেছি যা কন্ট্রাকটি সঙ্কুচিত করতে ক্লাউডফ্রন্ট এবং এস 3 এর মধ্যে প্রক্সিগুলি তৈরি করেছে: http://dfl8.co

সরকারীভাবে অ্যাক্সেসযোগ্য S3 অবজেক্টগুলি সাধারণ URL কাঠামো ব্যবহার করে অ্যাক্সেস করা যায়, http://dfl8.co কেবল একই কাঠামো ব্যবহার করে uses অর্থাৎ নিম্নলিখিত URL গুলি সমতুল্য:

http://pingles-example.s3.amazonaws.com/sample.css
http://pingles-example.dfl8.co/sample.css
http://d1a4f3qx63eykc.cloudfront.net/sample.css

5

গতকাল অ্যামাজন নতুন বৈশিষ্ট্য ঘোষণা করেছে, আপনি এখন আপনার বিতরণে জিজিপ সক্ষম করতে পারবেন।

এটি নিজের নিজের জন্য .gz ফাইল যুক্ত না করে এস 3 এর সাথে কাজ করে, আমি আজ নতুন বৈশিষ্ট্যটি চেষ্টা করেছি এবং এটি দুর্দান্ত কাজ করে। (যদিও আপনার বর্তমান অবজেক্টকে অবৈধ করা দরকার)

অধিক তথ্য


0

আপনি নির্দিষ্ট ধরণের ফাইলগুলি স্বয়ংক্রিয়ভাবে সংকোচিত করতে এবং সংকুচিত ফাইলগুলি পরিবেশন করতে ক্লাউডফ্রন্টটি কনফিগার করতে পারেন।

এডাব্লুএস বিকাশকারী গাইড দেখুন


এটিকে আরও ভাল উত্তর দেওয়ার জন্য আপনি কী আপনার সমাধান (আরও একটি উদাহরণ) সম্পর্কে আরও তথ্য যুক্ত করতে পারেন?
ইয়াগামী হালকা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.