سوال درباره کش سرور

[baharmf93]

سلام دوستان
سوالی دارم که در منابع فارسی نیست و خارجی‌ها بیشتر پرداختن ولی خوب متوجه نشدم
سوالم بیشتر درباره اصطلاحات زیر هست
Last-Modified
Etag
Cache-Control
Expires

همون‌طور که میدونید تمام موارد بالا یک نوع درخواست HTTP هست تا فایل‌ها رو به نحوی در مرورگر کاربر کش کنه، ولی دقیقا چه فرق‌های فنی اینا با هم دارن؟ فرق بین Expires با Cache-Control رو تقریبا میدونم که اولی تاریخ انقضا تعیین میکنه و دومی یک مدت زمان رو ولی اینها چه ارتباطی دارن با درخواست‌های Etag و Last-Modified ؟
فرق دقیق Etag یا Last-Modified چیه؟ چرا مثلا دیجی کالا همه اینا رو فعال داره؟ اصلا میشه هر چی میدونید از اینا بگید؟ ممنون
یک منبع معتبر هم میشناسم که اگر انگلیسی خوبی دارید از این کمک بگیرید برای توضیح دادن بیشتر :)

لینک منبع رو حتما ببینید (https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers#http-cache-headers)

[baharmf93]

از دوستان کسی هست جواب سوال ما رو بدونه؟

[AtrafNet]

سلام
مواردی که من از همون لینکی که گذاشتید به صورت دست و پا شکسته متوجه شدم :)

اولاً که Cache-Control عنصر اصلی HTTP Caching هستش و اگر از هر کدوم یک از سایر مقادیر گفته شده استفاده کنید تا زمانی که Cache-Control تعیین نکرده باشید تاثیری نداره.

تفاوت public یا private بودن مقدار Cache-Control در اینه که اگر public باشه هم مرورگر های معمولی بدون پــروکسی و هم پــروکسی سرور ها محتوا رو Cache میکنن اما اگه روی حالت private باشه فقط مرورگر های معمولی بدون پــروکسی Cache رو انجام میدن و پـروکسی سرور ها دیگه Cache نمیکنن.
به نظرم حالت public اصولاً باید بهتر باشه مگر در مواردی خاص.

همچنین Cache-Control علاوه بر تعیین public یا private بودن حالت کش شدن امکان تعیین زمان کش هم به صورت توکار با تعیین مقدار max-age بر اساس ثانیه داره.

تفاوت max-age در Cache-Control با هدر مجزا Expires در اینه که max-age بر اساس ثانیه های بعد از اولین لود فایل یا صفحه رو کش میکنه اما Expires یک تاریخ انقضاء دقیق و مشخص در آینده رو هدف میگیره مثل نمونه های زیر:

max-age که بر اساس ثانیه های بعد از اولین لود فایل کش میکنه:



Cache-Control:public, max-age=31536000

در این کد 31536000 ثانیه برابر با 365 روز کش تعیین شده.

اینم Expires که بر اساس یه تاریخ انقضاء دقیق و مشخص کش میکنه:



Cache-Control:public
Expires: Mon, 25 Jun 2012 21:31:12 GMT

در این کد به تاریخ دوشنبه 25 ژوئن 2012 برای اتمام کش و تازه سازی فایل اشاره شده.

اگر همزمان max-age و Expires با هم تعیین شده باشن مرورگر مقدار max-age رو در اولویت قرار میده و بر اساس اون کش میکنه.


تا اینجا Cache-Control و Expires برای کش کردن با زمان یا تاریخی خاص هستن اما مقادیری برای کش کردن به صورت شرطی هم وجود داره که بر اساس شرط هایی خاص زمان کش یا حذف کش رو برای مرورگر تعیین میکنن.

درخواست های Cache شرطی به مرورگر اجازه میدن تا ببینه که آیا یک نسخه به روز از اون فایل یا صفحه رو در کش خود داره یا نه و اگر صرفاً نسخه به روزی در دسترس نداشت دوباره صفحه رو لود و کش کنه.
در این حالت مرورگر اطلاعاتی رو درباره محتوای کش شده به سرور می فرسته و سرور وظیفه داره که تعیین کنه که اطلاعات کش شده درست هستن یا باید به روز شوند.


دو نوع HTTP Header برای ایجاد کش کردن های شرطی وجود دارن یکی Last-Modified و یکی ETag.
Last-Modified همونطور که از اسمش معلومه به معنای تاریخ آخرین ویرایش صفحه یا فایل هستش برای همین این گزینه مثل گزینه Expires باید با تاریخ دقیق پر بشه اما با این تفاوت که این بار تاریخ آینده نباید باشه بلکه باید تاریخ آخرین ویرایش اون فایل یا صفحه باشه.وقتی فایل یا صفحه رو دوباره ویرایش کردید باید دوباره این مقدار به روز بشه و مرورگر اینجاست که می بینه اگر نسخه به روز فایل یا صفحه رو نداره باید دوباره صفحه رو لود و کش کنه نمونه استفاده از Last Modified:



Cache-Control:public, max-age=31536000
Last-Modified: Mon, 03 Jan 2011 17:45:57 GMT


با تعیین Last-Modified مرورگر پس از یک بار کش کردن صفحه در دفعات بعد هدری مجزا با عنوان If-Modified-Since محتوی تاریخ قبلی که خودش از مقدار Last-Modified شما ذخیره کرده رو به Request Header های صفحه مربوطه اضافه میکنه و منتظر پاسخ می مونه تا بفهمه که صفحه نسبت به تاریخ If-Modified-Since به روز شده یا نه اگر به روز شده باشه که وب سرور HTTP Code درست 200 رو پس میده اما اگر به روز نشده باشه HTTP Code عدد 304 Not Modified به معنای به روز نشده رو ارسال میشه و برای همین مرورگر متوجه میشه که باید از همون نسخه کش شده خودش استفاده کنه.
اینجا ظاهراً تعیین max-age هم به صورت پشتیبان قرار میگیره و مثل قضیه max-age و Expires این بار max-age اولویت قرار نمیگیره بلکه Last-Modified در اولویت میشه.

آخرین مورد یعنی ETag با اسم کامل Entity Tag به معنای "برچسب هویتی" مانند Last-Modified تغییرات صفحه یا فایل رو به مرورگر می فهمونه با این تفاوت که این بار از تاریخ و زمان آخرین ویرایش صفحه یا فایل استفاده نمیشه بلکه از محتوای متنی منحصر به فردی برای هر صفحه یا فایل (مثل یک MD5 Hash) برای شناسایی اون صفحه توسط سرور استفاده میشه و این بار هم مرورگر به جای رکوئست هدر قبلی If-Modified-Since که در حالت Last-Modified ارسال میکرد این بار رکوئست هدر If-None-Match رو محتوی مقدار ETag قبلی اون صفحه یا فایل که کش کرده رو به سرور ارسال میکنه و اینجا باز وب سروره که تعیین میکنه محتوای کش شده نیاز به آپدیت شدن داره یا نه و اگر نیاز نداشته باشه و کش با محتوای اصلی صفجه یا فایل تفاوتی نداشته باشه باز مثل مورد قبل HTTP Code 304 به معنای Not Modified رو ارسال میکنه.



Cache-Control:public, max-age=31536000
ETag: "15f0fff99ed5aae4edffdd6496d7131f"


و نمونه رکوئست هدری که مرورگر پس از اولین اجرای چنین صفحه ای در دفعات بعد ارسال میکنه:



If-None-Match: "15f0fff99ed5aae4edffdd6496d7131f"


ببخشید طولانی شد امیدوارم از مرجع کاملی که گذاشتید تونسته باشم ترجمه درست رو برسونم :x

[baharmf93]

وای دمت گرم خیلی مردی خیلی
با اجازه برم بخونم متن شما رو :)

[baharmf93]

سلام
مواردی که من از همون لینکی که گذاشتید به صورت دست و پا شکسته متوجه شدم :)
...



سلام و دوباره تشکر میکنم از شما
خیلی مفید بود و اینکه فهمیدم
تا اونجایی که گرفتیم اینکه این درخواست‌ها وابسطه هم نیستن ولی به هم ربط دارن برای کش کردن صحیح فایل‌ها

من داشتم مقاله زیر که لینکش رو قرار دادم رو میخوندم که مربوط به همین موضوع هست، اکثر جاهاش رو فهمیدم جز یک پاراگراف
شما میتونید راهنمایی کنید؟
گفته:


Headers that Determine Cache Length
The next two headers are Cache-Control and Expires. These headers help determine how long the file should be held in cache before it fetches a new copy from the server. Remember, to fix the warnings you see in Pingdom or GTmetrix, you need to ensure that you have a header that both validates the cache, as well as one that determines the cache length.


این رو میگه که هدر Cache-Control و Expires برای این هست که یک زمانی رو تعیین کنن ک فلان فایل چ مدت در مرورگر کاربر ذخیره بشه، از اونجا که میگه Remember و ... خب متوجه نشدم منظورش کدوم از این چهارتاست Last-Modified این Etag این Cache-Control و یا این Expires

ولی اینطوری برداشت کردم که میگه باید هر دو هدر Cache-Control و Expires باشن و یکی از هدرهای Last-Modified و یا این Etag کافیه
درسته؟
منبع (https://kinsta.com/knowledgebase/specify-a-cache-validator/)
ممنون :)

[AtrafNet]

سلام و دوباره تشکر میکنم از شما
خیلی مفید بود و اینکه فهمیدم
تا اونجایی که گرفتیم اینکه این درخواست‌ها وابسطه هم نیستن ولی به هم ربط دارن برای کش کردن صحیح فایل‌ها

من داشتم مقاله زیر که لینکش رو قرار دادم رو میخوندم که مربوط به همین موضوع هست، اکثر جاهاش رو فهمیدم جز یک پاراگراف
شما میتونید راهنمایی کنید؟
گفته:


این رو میگه که هدر Cache-Control و Expires برای این هست که یک زمانی رو تعیین کنن ک فلان فایل چ مدت در مرورگر کاربر ذخیره بشه، از اونجا که میگه Remember و ... خب متوجه نشدم منظورش کدوم از این چهارتاست Last-Modified این Etag این Cache-Control و یا این Expires

ولی اینطوری برداشت کردم که میگه باید هر دو هدر Cache-Control و Expires باشن و یکی از هدرهای Last-Modified و یا این Etag کافیه
درسته؟
منبع (https://kinsta.com/knowledgebase/specify-a-cache-validator/)
ممنون :)

این بخش Remember که میگید فقط نوشته یادتون نره که خطا هایی که سایت Pingdom و GTmetrix دادن رو رفع کنید و بعدش مطمئن بشید که حتماً یک Header داشته باشید که هم کش رو فعال کنه و هم مدت زمانش رو دقیق مشخص کنه.
Cache-Control که گزینه اصلی فعال کردن Caching تحت مرورگر هستش و باید با همه سایر موارد به صورت public یا private فعال باشه اما درباره وجود هم max-age و هم Expires باید بدونید که اینجا صرفاً منظورش این بوده که بالاخره با یه روش مدت کش رو مشخص کنید ولی نگفته که حتماً هم max-age و هم Expires با هم تعیین بشه توجه کنید که در منبع قبلی که دادید ذکر شده بود که اگر max-age و Expires با هم تعیین بشن مرورگر max-age رو استفاده میکنه و Expires رو نادیده میگیره.
درباره هدر های کش شرطی مثل Last-Modified و Etag تا وقتی شما بدون هیچ شرطی فایل ها و صفحات رو تا یه تاریخ و زمان خاص با max-age یا Expires کش میکنید فکر نکنم نیاز به تعیین همزمان Last-Modified یا Etag باشه اما شاید وقتی Last-Modified همراهش ست شده باشه بتونید مشکل تازه سازی نشدن کش وقتی تغییری میدین برای بعضی بازدیدکنندگان که گاهی نیاز به زدن کلید های Ctrl+F5 پیدا میکنن رو حل کنید اما دقیق در این مورد اطلاع ندارم که آیا Last-Modified نسبت به max-age و Expires اولویت داده میشه یا نه و همچنین وقتی max-age یا Expires فعال باشه مرورگر باز هم رکوئست هدر مخصوص Last-Modified که
If-Modified-Since هست رو به وب سرور ارسال میکنه که نسبت به تغییرات جدید اون فایل یا صفحه دوباره لودش کنه یا نه لزومی نمی بینه.

[baharmf93]

این بخش Remember که میگید فقط نوشته یادتون نره که خطا هایی که سایت Pingdom و GTmetrix دادن رو رفع کنید و بعدش مطمئن بشید که حتماً یک Header داشته باشید که هم کش رو فعال کنه و هم مدت زمانش رو دقیق مشخص کنه.
...


درسته
بعضی از سایت ها همه رو دارن
مثل دیجی کالا و حالا معلوم نیست کدوم از هدرهای کش شرطی اولویت دارن

به نظر شما خطای Specify a cache validator بیشتر مربوط به کدوم از این هدرهاست؟
به نظرم چون عبارت validator اومده مربوط به
یکی از هدرهای Last-Modified و یا این Etag میشه

[AtrafNet]

درسته
بعضی از سایت ها همه رو دارن
مثل دیجی کالا و حالا معلوم نیست کدوم از هدرهای کش شرطی اولویت دارن

به نظر شما خطای Specify a cache validator بیشتر مربوط به کدوم از این هدرهاست؟
به نظرم چون عبارت validator اومده مربوط به
یکی از هدرهای Last-Modified و یا این Etag میشه


من خودم شخصاً از این کد ساده که از mod_expires خود آپاچی استفاده میکنه در فایل htaccess. استفاده میکنم و طوری که الان هدر های فایل های css. و js. سایتم رو چک کردم ظاهراً به صورت خودکار تمامی گزینه های max-age و Expires و Last-Modified و ETag به صورت خودکار فعال میکنه:



<IfModule mod_mime.c>
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
</IfModule>


<IfModule mod_expires.c>
ExpiresActive On
AddType application/font-woff2 .woff2
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/html "access plus 1 hour"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresDefault "access plus 1 month"
</IfModule>



تو این کد من چون از هر جا هاست گرفتم فونت woff2 رو شناسایی نمیکردن اول MimeType این فونت رو اضافه کردم بعدش تو پارگراف بعدی مدت زمان کش تصاویر رو 1 سال و فایل های css. و js. رو 1 ماه و سایر فایل هایی هم که تعیین نکردم با خط آخر ExpiresDefault همون یک ماه قرار دادم.

این کد رو تست کنید ببینید همچنان GTmetrix به شما این خطا رو میده یا نه.

[baharmf93]

من خودم شخصاً از این کد ساده که از mod_expires خود آپاچی استفاده میکنه در فایل htaccess. استفاده میکنم و طوری که ...


ممنون از توجهتون
من بیشتر دنبال اینم که بدونم
سایت منم مشکل نداره
سوال الان همین جا هست این کدی که شما الان دادید فقط هدر Expires رو فعال میکنه؟ یا همه هدرها رو؟
طبق توضیحات این سایت (https://kinsta.com/knowledgebase/specify-a-cache-validator/) برای رفع خطای Specify a cache validator ما چهار تا راه داریم و اومده همه هدرها رو گفته، از طرفی اومده گفته validator یعنی هدرهای Last-Modified و یا این Etag و Cache Length یعنی Expires و Cache-Control
این خطا داره cache validator رو نشون میده پس چ ربطی به Expires و Last-Modified داره؟

[AtrafNet]

ممنون از توجهتون
من بیشتر دنبال اینم که بدونم
سایت منم مشکل نداره
سوال الان همین جا هست این کدی که شما الان دادید فقط هدر Expires رو فعال میکنه؟ یا همه هدرها رو؟
طبق توضیحات این سایت (https://kinsta.com/knowledgebase/specify-a-cache-validator/) برای رفع خطای Specify a cache validator ما چهار تا راه داریم و اومده همه هدرها رو گفته، از طرفی اومده گفته validator یعنی هدرهای Last-Modified و یا این Etag و Cache Length یعنی Expires و Cache-Control
این خطا داره cache validator رو نشون میده پس چ ربطی به Expires و Last-Modified داره؟

والا در این باره اطلاعی ندارم که چرا Expires رو به Last-Modified ربط میدن یا حتی چرا mod_expire آپاجی همه این موارد رو همزمان فعال میکنه.
شاید بیشتر برای جنبه محکم کاریه که جلوی هرگونه ناسازگاری ها با مرورگر ها هم گرفته بشه مثل کد های کاملتر font-face که یه فونت رو با 5 - 6 روش مختلف لود میکنن اما خب تو قضیه فونت قشنگ قضیه شفاف و روشنه و میشه فهمید هر نوع فراخوانی برای یه نوع مرورگر های خاصه اما هدر ها با توجه به اینکه اکثر مرورگر ها ازشون پشتیبانی میکنن دلیل محکم کاری و استفاده از تمامی هدر ها رو والا منم نمی دونم :)

[gdfire]

والا در این باره اطلاعی ندارم که چرا Expires رو به Last-Modified ربط میدن یا حتی چرا mod_expire آپاجی همه این موارد رو همزمان فعال میکنه.
شاید بیشتر برای جنبه محکم کاریه که جلوی هرگونه ناسازگاری ها با مرورگر ها هم گرفته بشه مثل کد های کاملتر font-face که یه فونت رو با 5 - 6 روش مختلف لود میکنن اما خب تو قضیه فونت قشنگ قضیه شفاف و روشنه و میشه فهمید هر نوع فراخوانی برای یه نوع مرورگر های خاصه اما هدر ها با توجه به اینکه اکثر مرورگر ها ازشون پشتیبانی میکنن دلیل محکم کاری و استفاده از تمامی هدر ها رو والا منم نمی دونم :)
میگما اینم بلدی :
Inline small JavaScript و Inline small CSS دقیقا کجا قالب باس بزاریم و چه مدلی تا صد بشه؟:114:

[baharmf93]

میگما اینم بلدی :
Inline small JavaScript و Inline small CSS دقیقا کجا قالب باس بزاریم و چه مدلی تا صد بشه؟:114:

بااجازه دوستمون
این سایت خوب توضیح داده این مورد رو
https://mizfa.com/blog/inline-small-css-and-javascript/

[gdfire]

بااجازه دوستمون
این سایت خوب توضیح داده این مورد رو
https://mizfa.com/blog/inline-small-css-and-javascript/
مرسی ولی اینارو میدونم فقط نمیدونم کجا قالب باس بزارم تو تگ هد گذاشتم ولی تکون نخورد:-?

[AtrafNet]

مرسی ولی اینارو میدونم فقط نمیدونم کجا قالب باس بزارم تو تگ هد گذاشتم ولی تکون نخورد:-?


CSS و جاوا اسکریپت های کوتاه رو GTmetrix پیشنهاد میکنه تو خود HTML بذارید.
کجای قالب هم CSS رو که باید داخل تگ head و داخل تگی جدا با عنوان style بذارید.

جاوا اسکریپت هم باید داخل تگی با عنوان script بذارید با این تفاوت که مثل CSS محدودیت قرار دادن داخل تگ head رو ندارید و می تونید جا های دیگه هم بذارید.محدودیت CSS هم که گفتم جهت معتبر (validate) بودن از نظر استاندارد های W3 هستش که می تونید تو این لینک تست کنید: https://validator.w3.org (https://validator.w3.org/)
بهتره که جاوا اسکریپت رو معمولاً در پایین ترین جای ممکن صفحه بذارید تا بعد از لود شدن کل صفحه جاوا اسکریپت اجرا بشه چون اگه قبل از لود المان های گرافیکی صفحه جاوا اسکریپت بخواد لود بشه کاربر بیشتر باید تو صفحه سفید و بدون المان های گرافیکی منتظر اجرای جاوا اسکریپت ها بمونه.
بهترین مکان برای جاوا اسکریپت به نظر من قبل از بسته شدن تگ body هستش که اگر وردپرس دارید در فایل footer.php هستش.

خواستم نمونه کد HTML برای هر دو توضیحی که دادم بذارم اما cloudflare انجمن کد مخرب شناسایی کرده (!!) و نذاشت ارسال کنم برای همین تو سایت زیر اشتراک گذاشتم ولی یه بدی داره کد هاش یه هفته تاریخ انقضاء داره:

https://paste.ofcode.org/y4CG9segG8Jsb6ixjKHyVL