رفع خطای Minify HTML در gtmetrix

در این مقاله قصد داریم درباره خطای Minify HTML و حل آن در GTmetrix صحبت کنیم. البته رفع خطای Minify HTML تاثیر ناچیزی در سرعت سایت خواهد داشت برخلاف دو خطای Minify CSS و Minify JavaScript که تاثیر بالایی در افزایش سرعت سایت دارند، برهرحال خواندن مقاله صرف از هر نتیجه‌ای برای شما مفید خواهد بود.

خلاصه‌ی از خطا Minify HTML

نام: Minify HTML
نوع: مربوط به HTML
اولویت: کم
میزان سختی: ساده
میانگین امتیاز: 98%

خطای Minify HTML در Gtmetrix چیست؟

عبارت Minify در روند بهینه‌سازی‌سایت به معنای طراحی سایت با فایل‌های حجم پایین است. هدف از Minify کردن از بین بردن فضاهای خالی در بین کدها و همچنین کامنت‌های بین کدها است. خط‌ها و کاراکترهای غیرضروری در سورس کدهای شما را در جهت بهینه سازی سرعت سایت از بین می‌برد. معمولا از این روش برای فایل‌هایی که سمت کاربر ارسال می‌شود، استفاده می‌کنند، فایل‌هایی از قبیل HTML ، CSS و جاواسکریپت. توجه داشته باشید که شما می‌توانید فایل‌های PHP را Minify کنید ولی PHP زبان برنامه نویسی سمت سرور است و Minify کردن آن تاثیری در بالا بردن سرعت سایت در سمت مرورگر کاربر ندارد.

عمل اصلی که در ٰMinify انجام می‌گیرد فشرده سازی فایل‌ها سمت کاربر است و مزیت آشکار این سریع‌تر لود شدن فایل‌ها و در نتیجه افزایش سرعت سایت است. نکته مهمی که باید به آن اشاره کنیم این است که عمل Minify کردن منابع (فایل‌ها) جدا از اینکه باعث بهبود تجربه کاربری (تجربه کاربری چیست) می‌شود موتورهای جستجو هم چنین فایل‌هایی با حجم کمتر را بیشتر دوست دارند.

رفع ارور Minify HTML

روش اول Minify HTML برای سایت‌های استاتیک

اگر طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) شما استاتیک است یعنی دارای محتوای ثابت و بدون CMS است می‌توانید از سایت‌های زیر برای Minify فایل‌های HTML استفاده نمایید.

• willpeavy.com
• minifycode.com

مزیت وب سایت minifycode در این است که جدا از minify کردن فایل‌های HTML می‌تواند فایل‌های CSS و JavaScript را هم Minify کند.

روش دوم Minify HTML در وردپرس

برای Minify HTML در ساخت سایت‌های وردپرس کافی است یکی از پلاگین‌های زیر را نصب کنید تا عمل Minify صورت بگیرد.

• Minify HTML
• HTML Minify
• WP Super Minify
• Autoptimize

پیشنهاد ما استفاده از افزونه Autoptimize یا WP Rocket است و می‌توانید جدا از minify کردن فایل‌های HTML سایر فایل‌های مهم همانند CSS و JavaScript را فشرده سازی کنید.

روش سوم Minify HTML در جوملا

اگر از  CMS جوملا استفاده می‌نمایید می‌توانید از پلاگین‌های زیر بهره ببرید.

• JCH Optimize
• EXT HTML Compressor

روش چهارم Minify HTML در Cloudflare

برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایل‌ها زیر دارند، اگر طراحی سایت شما بر روی چنین CDNهایی هست می‌توانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید.

AutoMinify

نتیجه کار Minify HTML:

نتیجه کار Minify HTML را می‌توانید بعد از Minify کردن در قالب یک عکس مشاهده کنید:

minify-html-result

رفع خطای Minify JavaScript در gtmetrix

در این مقاله قصد داریم درباره مشکل Minify JavaScript و حل آن در GTmetrix صحبت کنیم.

خلاصه‌ی از خطا Minify JavaScript

نام: Minify JavaScript
نوع: مربوط به JavaScript
اولویت: بالا
میزان سختی: ساده
میانگین امتیاز: 87%

خطای Minify JavaScript در Gtmetrix چیست؟

عبارت Minify در روند بهینه‌سازی‌ سئو سایت به معنای طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی، قیمت طراحی سایت) با فایل‌های حجم پایین است. هدف از Minify کردن از بین بردن فضاهای خالی در بین کدهااست. خط‌ها و کاراکترهای غیرضروری در سورس کدهای شما را در جهت بهینه سازی سرعت سایت از بین می‌برد. معمولا از این روش برای فایل‌هایی که سمتکاربر ارسال می‌شود، استفاده می‌کنند، فایل‌هایی از قبیل HTML ، CSS و جاواسکریپت. توجه داشته باشید که شما می‌توانید فایل‌های PHP را Minify کنید ولی PHP زبان برنامه نویسی سمت سرور است و Minify کردن آن تاثیری در بالا بردن سرعت سایت در سمت مرورگر کاربر ندارد.

عمل اصلی که در ٰMinify انجام می‌گیرد فشرده سازی فایل‌ها سمت کاربر است و مزیت آشکار این سریع‌تر لود شدن فایل‌ها و در نتیجه افزایش سرعت سایت است. نکته مهمی که باید به آن اشاره کنیم این است که عمل Minify کردن منابع (فایل‌ها) جدا از اینکه باعث بهبود تجربه کاربری (تجربه کاربری چیست) می‌شود موتورهای جستجو هم چنین فایل‌هایی با حجم کمتر را بیشتر دوست دارند.

کمی دقیق‌تر درباره خطای Minify Javascript صحبت کنیم، به مثال زیر توجه کنید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var currentTime = new Date(),       hours = currentTime.getHours(),       minutes = currentTime.getMinutes();   if (minutes < 10) {     minutes  = "0" + minutes;   }   var suffix = "AM"; if (hours >= 12) {     suffix = "PM";     hours = hours - 12; } if (hours == 0) { hours = 12; }     time = hours + ":" + minutes + " " + suffix;     document.getElientById("time").innerHTML = time;

اگر به کد بالا توجه کرده باشید برای درک بهتر کدنویسی از فضاهای خالی زیر استفاده شده است ولی زیبانویسی تاثیری برای موتورهای جستجو و مرورگرهاندارد. Minify شده یک فایل Javascript همانند زیر است:

1	var currentTime=new Date,hours=currentTime.getHours(),minutes=currentTime.getMinutes();minutes<10&&(minutes="0"+minutes);var suffix="AM";hours>=12&&(suffix="PM",hours-=12),0==hours&&(hours=12),time=hours+":"+minutes+" "+suffix,document.getElientById("time").innerHTML=time;

اگر دقت کرده باشید هر دو کدهای Javascript یک عمل را انجام می‌دهند ولی کد اولی فضای اضافه بیشتری نسبت به کد دومی دارد. حال که درک بهتری نسبت به Minify Javascript پیدا کردیم باید چگونه متوجه شویم که کدام فایل‌های Javascript ما Minify شده است؟

رفع ارور Minify JavaScript

روش اول Minify JavaScript

پیدا کردن ارور Minify JavaScript نیز به سادگی تمام است، شما کافی است به یکی از ابزارهای تست سرعت سایت همانند Gtmetrix مراجعه کنید و اگر خطای Minify Javascript مشاهده کردید یک فایل برای دانلود خوده سایت Gtmetrix برای شما قرار می‌دهید که آن فایل Minify شده Javascript است و می‌توانید دانلود کنید و در هاست آپلود کنید.

روش دوم Minify JavaScript

minify-javascript

شما می‌توانید از ابزارهای زیر برای فشرده سازی فایل‌ها استفاده کنید به دین منظور وارد یکی از سایت‌های زیر شوید و تمام کدهای فایل غیرفشردهJavaScript را کپی و در سایت مذکور Paste کنید و سپس گزینه فشرده سازی را کلیک نمایید تا فایل فشرده شده JavaScript یا همان Minify JavaScript را به شما بدهد و سپس در هاست خود آپلود کنید.

• javascript-minifier
• refresh-sf
• jscompress
• jsmini

روش سوم Minify JavaScript

اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید می‌توانید از پلاگین‌ رایگان Better WordPress Minify برای minify کردن فایل‌های JS استفاده کنید. پلاگین‌های جامع دیگر هم هستند که جدا از minify کردن انواع فایل‌ها سمت کاربر، تنظیمات دیگری هم برای بالا بردن سرعت لود سایت در اختیار شما می‌دهند به عنوان مثال پلاگین رایگان WP Super Minifyهم minify کردن فایل‌های سمت کاربر را انجام می‌دهد و هم نیز تنظیمات مختلف دیگر برای افزایش سرعت سایت شما در این پلاگین دیده می‌شود.

روش چهارم Minify JavaScript

برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایل‌ها زیر دارند، اگر سایت شما بر روی چنین CDNهایی هست می‌توانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید.

AutoMinify

نتیجه کار Minify JavaScript:

نتیجه کار Minify JavaScript را می‌توانید بعد از Minify کردن در قالب یک عکس مشاهده کنید:

minify-js-before-after

توجه: گاهی ممکن است به دلایل مختلف بعد از Minify JavaSrcipt قالب سایت شکل ظاهری خود را از دست بدهد، بنابراین بعد از اعمال روش‌های بالا حتما ظاهر سایت خود را بررسی کنید.

رفع خطای Minify CSS در gtmetrix

در این جلسه مقاله داریم درباره مشکل Minify CSS و حل اون در GTmetrix صحبت کنیم و ببینیم چطور می‌تونیم این مشکل را در کمتر از ۱۰ دقیقه در سایت پیدا و رفع کنیم.

خلاصه‌ی از خطا Minify CSS

نام: Minify CSS
نوع: مربوط به CSS
اولویت: بالا
میزان سختی: ساده
میانگین امتیاز: 94%

خطای Minify CSS در Gtmetrix چیست؟

عبارت Minify در روند بهینه سازی سئو سایت به معنای طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی، قیمت طراحی سایت)با فایل‌های حجم پایین است. هدف از Minify کردن از بین بردن فضاهای خالی در بین کدها نیز است. خط‌ها و کاراکترهای غیرضروری در سورس کدهای شما را در جهت بهینه سازی سرعت سایت از بین می‌برد. معمولا از این روش برای فایل‌هایی که سمت کاربر ارسال می‌شود، استفاده می‌کنند، فایل‌هایی از قبیل HTML ، CSS و جاواسکریپت. توجه داشته باشید که شما می‌توانید فایل‌های PHP را Minify کنید ولی PHP زبان برنامه نویسی سمت سرور است و Minify کردن آن تاثیری در بالا بردن سرعت سایت در سمت مرورگر کاربر ندارد.

minify-css

عمل اصلی که در ٰMinify انجام می‌گیرد فشرده سازی فایل‌ها سمت کاربر است و مزیت آشکار این سریع‌تر لود شدن فایل‌ها و در نتیجه افزایش سرعت سایت است. نکته مهمی که باید به آن اشاره کنیم این است که عمل Minify کردن منابع (فایل‌ها) جدا از اینکه باعث بهبود تجربه کاربری (تجربه کاربری چیست) می‌شود موتورهای جستجو هم چنین فایل‌هایی با حجم کمتر را بیشتر دوست دارند.

کمی دقیق‌تر درباره خطای Minify CSS صحبت کنیم، به مثال زیر توجه کنید:

اگر به کد بالا توجه کرده باشید برای درک بهتر کدنویسی از فضاهای خالی زیر استفاده شده است ولی زیبانویسی تاثیری برای موتورهای جستجو و مرورگرها ندارد. Minify شده یک فایل CSS همانند زیر است:

اگر دقت کرده باشید هر دو کدهای CSS یک عمل را انجام می‌دهند ولی کد اولی فضای اضافه بیشتری نسبت به کد دومی دارد. حال که درک بهتری نسبت به Minify CSS پیدا کردیم باید چگونه متوجه شویم که کدام فایل‌های CSS ما Minify شده است؟

تشخیص خطای Minify CSS

پیدا کردن ارور Minify CSS نیز به سادگی تمام است، شما کافی است به یکی از ابزارهای تست سرعت سایت همانند Gtmetrix مراجعه کنید و اگر خطای Minify CSS همانند شکل زیر مشاهده کردید با با دقت ادامه مقاله ما را بخوانید.

GTMetrix-minify-css-result

رفع ارور Minify CSS

روش اول استفاده از سایت Gtmetrix

وقتی سایت Gtmetrix خطای minify CSS را به شما نشان می‌دهد فایل فشرده آن را هم قرار می‌دهد، همانند عکس زیر:

minify-css-gtmetrix

فایل فشرده شده را می‌توانید دانلود کنید و به دایرکتوری فایل غیرفشرده رفته و فایل فشرده را جایگزین فایل غیرفشرده نمایید.

روش دوم استفاده از ابزارهای فشرده آنلاین

csscompressor-css-minify

شما می‌توانید از ابزارهای زیر برای فشرده سازی فایل‌ها استفاده کنید به دین منظور وارد یکی از سایت‌های زیر شوید و تمام کدهای فایل غیرفشرده CSS را کپی و در سایت مذکور Paste کنید و سپس گزینه فشرده سازی را کلیک نمایید تا فایل فشرده شده CSS یا همان Minify CSS را به شما بدهد و سپس در هاست خود آپلود کنید.

• cssminifier.com
• csscompressor.com
• minifier.org

روش سوم استفاده از پلاگین وردپرس

اگر از سیستم مدیریت محتوای وردپرس استفاده می‌کنید می‌توانید از پلاگین‌ رایگان Better WordPress Minify برای minify کردن فایل‌های CSS استفاده کنید. سایر افزونه‌های دیگر هم وجود دارند به عنوان مثال یکی از کارهای پلاگین رایگان WP Super Minify که می‌تواند انجام دهد minify کردن فایل‌های سمت کاربر هست این پلاگین تنظیمات اضافه‌تری هم برای بهینه سازی سرعت سایت در اختیار شما قرار می‌دهد. ولی اگر شما فقط مشکل ارور minify CSS را دارید می‌توانید از پلاگین اولی یا روش‌های اول و دوم استفاده نمایید.

روش چهارم استفاده از تنظیمات CDN

برخی از CDN ها همانند Cloudflare تظیماتی مبنی بر فشرده سازی فایل‌ها زیر دارند، اگر سایت شما بر روی چنین CDNهایی هست می‌توانید از این تنظیمات در جهت بهینه سازی سایت خود استفاده نمایید.

AutoMinify

نتیجه کار:

نتیجه کار Minify CSS نیز باید به شکل زیر باشد:

seoblogger-after-minify-css

قیمت سئو سایت و بهینه سازی سایت به چه صورت محاسبه می شود

سئو به روش هایی گفته می شود که بازدید سایت شما در گوگل از طریق آنها افزایش می یابد و در نتیجه افرادی که به دنبال خرید محصولات شما هستند، به سمت سایت شما هدایت می شوند. 

قیمت سئو سایت

 در مورد تعیین بودجه برای پروژه سئو کسب و کارتان نیز هزینه با توجه به نوع خدماتی که انجام می شود مشخص می شود. قیمت طراحی سایت به نحوه انجام خدمات توسط شرکت های طراحی سایت(طراحی سایت شرکتی،طراحی سایت فروشگاهی)  و سئو و همچنین هدف کسب و کار شما بستگی دارد. قیمت های سئو در ایران، بازه وسیعی را تشکیل می دهند، این موضوع دلایل مختلفی دارد که در ادامه به آنها می پردازیم 

عدم تعریف مناسب از خدمات سئو و عدم هدفگذاری مناسب

خدمات سئو در بعضی شرکت ها، محدود به نصب یک پلاگین در اسکریپت های آماده مانند وردپرس با انجام یک سری تنظیمات اولیه است. 

 قیمت سئو بر اساس کلمه کلیدی

برخی دیگر قیمت سئو را بر اساس کلمه کلیدی اعلام میکنند، بدون اینکه در نظر داشته باشند که سئو داخلی مشتری شامل چه شرایطی است و چه کارهایی باید بر روی آن انجام شود. 

سئو سیاه در برابر سئو سفید

برخی دیگر قرارداد را به صورت کوتاه مدت منعقدکرده و نتیجه را منوط به قرار گرفتن در صفحه اول گوگل در کلمه خاصی می کنند. 

سئو سایت بر اساس پکیج 

 دلایل مختلفی برای دریافت خدمات سئو از طریق پکیج وجود دارد که به طور خلاصه برخی از آنها عبارتند از:

• دید دراز مدت به همکاری با شرکت سئو
•  افزایش ورودی گوگل به نسبت سایر روش ها
•  فعالیت بر اساس اصول سئو سفید و مورد تایید گوگل
•  تاثیر پذیری کمتر نسبت به تغییرات ناگهانی رتبه های گوگل و…

قیمت سئو سایت توسط اکثر سایت چگونه محاسبه می شود؟

معمولا در تعیین هزینه بهینه سازی وب سایت موارد زیر را مد نظر قرار می گیرد

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

آنالیز و بهینه سازی محتوا

 نوشتن مطلب و پر کردن صفحه از کلمات کلیدی تضمینی برای رتبه گرفتن نیست محتوای سایت باید جذاب باشد.

رفع خطای Leverage browser caching و هر آنچه که باید درباره کش بدانید

در این مقاله قصد داریم درباره مشکل Leverage browser caching و حل اون در GTmetrix صحبت کنیم و ببینیم چطور می‌تونیم این مشکل را در طراحی سایت(طراحی سایت شرکتی،طراحی سایت فروشگاهی) پیدا و رفع کنیم و چرا اصلا این موضوع برای افزایش سرعت سایت ما اهمیت دارد.

خلاصه‌ی از خطا Leverage browser caching

نام: Leverage browser caching
نوع: مربوط به سرور
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: 59%

قطعا شما هم از ابزارهای پیج اسپید، جی تی متریکس یا Pingdom جهت تست سرعت سایت خودتان استفاده کردید و یکی از خطاهای معروف و ایرادهایی که این ابزارهای آنلاین می‌گیرید Leverage browser caching هست، حال با خواندن این پست وقت آن رسیده که مشکل را حل کنید. برای حل مشکل Leverage browser caching در این ابزارها راه‌کارهای ساده‌ای وجود دارد مخصوصا اگر از CMS های اماده و رایگان برای سایتتان استفاده کرده باشید. در این مقاله درباره معنی این اخطار، چه تاثیراتی بر سایت دارد، و گزینه‌های موجود برای رفع این خطا را به شما خواهیم گفت.

Leverage browser caching چیست (کش)

خطای Leverage browser caching که اسکرین‌شات آن را در Pagespeed گوگل مشاهده می‌کنید به کش مرورگر شما اشاره می‌کند درواقع باید گفت کش چیست ؟

هر بار که شما از وب سایتی بازدیدی انجام می‌دهید لازم است که یک سری فایل‌هایی را دانلود کنید تا سایت قابل مشاهده باشد فایل‌هایی مانند، CSS، JS، HTML و عکس‌ها که در کش مرورگر (یا کش محلی یا کش لوکال) ذخیره می‌شود. حال وقتی به صفحه‌ی دیگری از آن سایت مراجعه می‌کنید موارد تکراری صفحات مثل لوگو سایت فایل‌های CSS و غیره دیگر دوباره دانلود نمی‌شوند بلکه از طریق کش محلی مرورگر فراخوانی صورت می‌گیرد. پس به این ترتیب لازم نیست با هر بار لود کردن صفحه‌های سایت، فایل‌های مشترک بین صفحات را دانلود کنید. این همان دلیلی است که باعث می‌شود در اولین بازدید از یک سایت زمان بیشتری برای لود شدن لازم باشد تا زمان لود صفحات در تکرار بازدید از همان سایت.

این عمل هم باعث صرفه‌جویی در حجم اینترنت بازدیدکننده می‌شود و هم تعداد درخواست‌های سمت سرور  را کاهش می‌دهد و صفحات سایت در دفعات بعدی سریع‌تر لود می‌شوند. این خطا این را می‌گوید که وقتی شما بازدیدی از سایت می‌کنید درخواست کش هدر HTTP به خوبی پیاده‌سازی نمی‌شود یا ممکن است درخواست کش هدر HTTP به خوبی ارسال شود و وجود داشته باشید ولی زمان کش بسیار کوتاه است.

leverage-browser-caching-pagespeed-insights-assets

اصولا به شکل درخواست Header دو روش یا متد اصلی برای کش کردن داریم. Expires Header و Cache-Control Header . هدر Cache-Control در HTTP/1.1 معرفی شد و اگر در سمت کاربر فعال باشد یک عدد بر حسب ثانیه برای کش کردن فایل در نظر می‌گیرد این عدد همان زمان انقضا فایل است، ولی Expires یک تاریخ را مشخص می‌کند که مثلا تا فعلان تاریخ فایل کش شود. Expires روشی ساده است. پس در هدر Cache-Control مدت زمان انقضا را می‌دهیم و در هدر Expires تاریخ زمان انقضا را می‌دهیم. اگر قصد دارید کنترل بیشتری بر روی کش داشته باشید و به دنبال آپشن بیشتر برای دسترسی به کش مرورگر دارید از دستور Cache-Control برای ذخیره سازی فایل‌ها در مرورگر است، می‌توانید استفاده کنید. استفاده از هر دو هدر  Expires  و  Cache-Control لازم نیست، ولی حداقل استفاده از یکی در جهت افزایش سرعت سایت لازم و ضروری است ولی اگر هر دو را اضافه کنید جز محکم‌کاری در جهت کش شدن فایل‌ها کار خاص دیگری نکرده‌اید ولی به شکل کلی هدر Cache-Control نسبت به هدر Expires اولویت بالاتری دارد.  Cache-Control  جدیدتر و معمولا این متد توصیه می‌شود ولی با این حال هنوز برخی  سایت‌های آنالیز سرعت مثل Gtmetrix هدر Expires را چک می‌کنند.

جزئیات تفاوت هدر Expires و Cache-Control

• Expires Header

  Expires همان‌طور که گفتیم یک تاریخ برای کش کردن فایل‌ها میگیرد مثلا تا فعلان تاریخ یک فایل را کش می‌کند و تا آن تاریخ از کش مرورگر استفاده می‌کند و بعد از آن تاریخ دوباره درخواست برای دریافت آن فایل به سرور ارسال می‌شود. نمونه کد:

  و مثلا خروجی که در هدر HTTP مرورگر می‌توان دید:

expires-header

Cache-Control Header

همان‌طور که گفتیم Cache-Control به ما اجازه بیشتری می‌دهد برای کش کردن در مرورگرها پیدا کنیم. اساس هدر Cache-Control مقدار زمان و روشی که باید کش شود را تعریف می‌کند. وقتی به یک فایل به‌وسیله مرورگر دانلود و در لوکال دسترسی پیدا کند، هدر HTTP آن فایل نیز مورد ارزیابی قرار می‌گیرد. وقتی محتویات هدر Cache-Control را مرورگر بخواند،کش آن فایل را اعمال می‌کند.
اگر یک مرورگر بعد از ارزیابی ببیند که یک فایل باید برای یک روز کش شود، آن فایل در کش مرورگر برای یک روز می‌ماند و اگر آن فایل بعد از یک روز دوباره فراخوانی شود مرورگر دوباره آن فایل را از سرور درخواست می‌کند و منتظر پاسخ سرور می‌شود. به‌طور مثال تصویر لوگو سایت شما که اصولا در صفحات مختلف ثابت است و اگر یک بازدیدکننده به یک صفحه از وب‌سایت شما بیاید و تصویر لوگو سایت شما را دانلود کند، هنگامی‌که بازدیدکننده به صفحات دیگر سایت شما برود، تصویر لوگو دوباره دانلود نمی‌شود، و از کش مرورگر فراخوانی می‌شود این روند همینطور ادامه دارد تا وقتی که مدت زمان انقصا تمام شود.

به کد زیر توجه کنید:

کد بالا تنظیمات  Cache-Control  است که به شکل هدر HTTP ارسال می‌شود. و اعمال این کد بستگی به نوع فایل‌هایی که تعریف می‌کنیم، دارد.

حال به بررسی خط به خط دستور بالا می‌پردازیم

1. خط یک هیچ عملی را انجام نمی‌دهد جز اینکه یاداور برای شما است درواقع دستورات را تشریح می‌کند و  .htaccess آن را نادیده می‌گیرد چرا که با # شروع شده است. به شکل خلاصه کامنتی جهت آگاهی و یاداوری برای استفاده کننده از کد بالا است.
2. خط دو که قسمت مهم دستور ما است میگه “اگر فایل‌ها از این نوع بودند ما یک سری عملیات را انجام می‌دهیم” . درواقع عمل کش فقط برای این نوع فایل‌ها صورت می‌گیرد. شما اگر تمایلی ندارید مثلا فایل gif کش شود کافیست آن را از لیست نوع فایل‌ها بردارید و یا اگر تمایل دارید فایل‌های HTML کش شود کافیست آن را به لیست نوع فایل‌ها اضافه کنید تا آن عمل خاص که در اینجا کش کردن است اعمال شود.
3. خط سه همان عملیاتی هست که باید انجام شود، هدر  Cache-Control مقداری را می‌گیرد. Header set Cache-Control نام هدری است که به شکل HTTP در مرورگر فراخوانی می‌شود و  max-age=2592000 بمدت زمان برحسب ثانیه است و اشاره می‌کند که فایل باید چه مدت در کش مرورگر بازدیدکننده ذخیره شود و مقدار 2592000 برابر با یک ماه است یعنی همان زمان انقضا یک فایل.
   مقادیر رایج، موارد زیر هستند:
   یک دقیقه: MAX-AGE=60
   یک ساعت: MAX-AGE=3600
   یک روز: MAX-AGE=86400
   یک هفته: MAX-AGE=604800
   یک ماه: MAX-AGE=2628000

یک سال: MAX-AGE=31536000و یکی از دستورات کش ممکن است Public باشد یعنی کش مورد نظر به شکل عمومی است اگر شما در جهت افزایش سرعت سایت خود قرار هست کش را به هاست اضافه کنیدو اطلاعات موجود خصوصی نیست میتوانید از  Public استفاده نمایید که اصولا اکثر فایل‌ها از این نوع دستور هستند. می‌توان به جای  Public  دستورات دیگر هم درج کرد، به شکل کلی سه دستور دیگر هم در Cache-Control وجود دارد:

1. • PUBLIC
     در بالا توضیح داده شد.
   • PRIVATE
     دستور Private به این معناست که کش شدن برای یک کاربر خاص است. مثلا اگر من به حساب فیسبوک خود بروم قطعا مواردی برای من کش خواهد شد که اگر شما به آن آدرس بروید، برای شما کش نخواهد شد چرا که من وارد اکانت خود شده و دارای حریم اطلاعاتی هستم که فیسبوک تعیین کرده و همین موضوع برای شما هم هست و وقتی شما وارد اکانت خود می‌شوید و به آدرس فیسبوک خود مراجعه می‌کنید مواردی که برای شما کش می‌شود لزوما همه آنها برای من کش نمی‌شود.
   • NO-STORE
     دستور No-Store یک دستور قوی‌تری است که از کش شدن تحت هر شرایطی جلوگیری می‌کند.

خط چهار هم جمله را به پایان می‌رساند و اعلام می‌کند دستورات به پایان خود رسیدند و آماده برای دستورات بعدی می‌شوند (اگر موجود داشته باشد).

کد برای حل مشکل Leverage browser caching در .htaccess

حل مشکل کش با متد Expires

کد زیر از نوع متد Expires  است. کد را در بالای فایل .htaccess قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

کد یک:

کد دو:

یکی از کدهای بالا را استفاده کنید یعنی یا کد یک یا کد دو

حل مشکل کش با متد Cache-Control

کد زیر از نوع متد Cache-Control  است. کد را در بالای فایل .htaccess قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

کد برای حل مشکل Leverage browser caching در Nginx

حل مشکل کش با متد Expires

کد زیر از نوع متد Expires  است. کد را می‌توانید در Nginx قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

حل مشکل کش با متد Cache-Control

کد زیر از نوع متد Cache-Control  است. کد را می‌توانید در Nginx قرار دهید. و بعد از قرار دادن و ذخیره کردن، تغییرات اعمال شده را بعد از رفرش می توانید مشاهده کنید.

نحوه چک کش اعمال شده

شما می‌توانید بعد از اعمال کدهای بالا در ساخت سایت خود، کش طراحی سایت خود را توسط مرورگرها بررسی کنید که آیا به درسی تنظیم شده‌اند یا خیر، به این منظور بر روی سایت خود کلیک راست کرده و وارد بخش DevTools گوگل کروم شوید و سپس وارد تب Network شده و سایت خود را دوباره رفرش کنید و یکی از فایل‌های سمت چپ را انتخاب کرده و در سربرگ Response Header کش‌های اعمال شده را مشاهده کنید. البته می‌توانید از ابزارهای آنلاین Gtmetrix هم استفاده کنید.

netword-developers-tools

نکات تکمیلی:

اگر در لیست شما html یا عکس‌هایی برای یک دوره زمانی در مرورگر کاربر کش می‌شوند به این معنی است که شما اگر خواستید تغییراتی در صفحه اعمال کنید ممکنه خیلی از این تغییرات برای کاربران قابل مشاهده نباشند. این به این علت که کاربران به جای فایل‌های فعلی، به فایل‌های ذخیره شده نگاه می‌کنند یعنی همان کش محلی. البته با روش‌هایی می‌توان این مشکل را رفع کرد که یکی از رایج‌ترین آنها URL fingerprinting است. مثلا شما فرض کنید یک فایل CSS دارید و قصد تغییرات آن را دارید، این فایل قبلا در کش محلی کاربران با نام main.css ذخیره شده است، حال شما تغییراتی در آن فایل CSS اعمال می‌کنید و نام آن main_1.css می‌شود و اگر دوباره تغییراتی اعمال کنید نام به main_2.css تغییر می‌کند. روش URL fingerprinting برای تغییرات ناگهانی مفید است. که در پست رفع خطای Riove query strings from static resources بیشتر درباره این روش صحبت کرده‌ایم.
نکته یک در بالا می‌تواند به شکل دیگری به کمک درخواست‌های شرطی صورت بپذیرد، درخواست‌های شرطی (Conditional requests) درخواست‌هایی هستند که مرورگر می‌تواند از سرور بپرسد که آیا فایل کپی ذخیره شده در کش مرورگر با فایل موجود در سرور فرق دارد یا خیر؟ ایا فایل موجود در سرور دست‌خوش آپدیت و یا تغییرات بوده است یا نه؟ مرورگر اطلاعاتی را که درباره‌ی فایل کپی ذخیره شده در کش را ارسال می‌کند و سرور تعیین می‌کند که آیا فایل اپدیت شده و فایل جدید باید ارسال گردد یا نه همان فایل کپی ذخیره شده در مرورگر است؟ اگر مورد دوم باشد در این حالت وضعیت 304 (HTTP 304 Not Modified status) بازگشت داده می‌شود. ETag یا یا entity tag یک نوع HTTP Header یکی از این نوع درخواست‌های شرطی است.

Conditional-requests

توجه داشته باشید که ما چندین نمونه کد خط در این مقاله به شما معرفی کردیم، گاهی ما در پروژه‌های افزایش سرعت سایت پیش می‌آید که برخی کدها با سرور ناسازگار است و ممکن است به خوبی اعمال نشود و یا مشکلاتی را به وجود اورد بنابراین قبل از هر عملی و تغییراتی، حتما بک آپ گرفته شود و سپس کدها را تست و بهترین را برای سایت خود انتخاب نمایید.
به این نکته اشاره کنیم که شما فقط می‌توانید فایل‌هایی را کش کنید که در سرور شما موجود باشد و فایل‌ها در سرورهای دیگر را نمی‌توان کش کرد، همانند Analytics گوگل یا فایل‌های سایت‌های مشابه مانند OneSignal که یک سری فایل را سرورهای خود در سند HTML شما برای اجرا در سایت فراخوانی می‌کنند را نمی‌شود کش کرد.

رفع ارور Leverage browser caching برای Google Analytics

یکی از خطاهای رایج و سوال‌های زیادی که از بنده می‌شود نحوه بهینه سازی و کش کردن لینک JS آمارگیر گوگل آنالیتیکس در سایت است. چرا که این فایل فقط ۲ ساعت کش می‌شود و به همین خاطر ابزارهای آنلاین نیز یک نوع خطا حساب می‌کنند زیرا مدت زمان انقضا دو ساعت بسیار کم می‌باشد به مانند اسکرین شات زیر که مشاهده می‌کنید. علت آن این است که گوگل می‌خواهد اگر تغییراتی اعمال کرد این تغییرات سریع برای همه کابران صورت بپذیرد و در این پست گفته از روش انتقال آنالیتیکس به لوکال اجتناب کنید و اشاره می‌کند که:

Referencing the JavaScript file from Google’s servers ensures that you get access to new features and product updates as they become available, giving you the most accurate data in your reports.

به هر حال یک راه برای تغییر زمان کش فایل جاوا اسکریپت Google Analytics موجود دارد.

leverage-browser-caching-pagespeed-insights-analytics

به کمک افزونه Complete Analytics Optimization Suite به سادگی می‌توانید کش آمارگیر گوگل آنالیتیکس را در لوکال دست خوش تغییرات دهید، این افزونه را از مخزن وردپرس دانلود و نصب کنید و سپس اطلاعات لازم برای چنین عملی مثل Google Analytics Tracking ID را به این پلاگین بدهید، Position of traking code را هم توصیه میکنیم Footer را انتخاب نمایید و بعد سیو کنید. تغییرات انجام شد و لذت برید

local-analytics-settings

افزونه کش وردپرس

پیشنهاد ما برای کش کردن در وردپرس استفاده از روش‌های بالا است، چرا که نصب هر افزونه باعث کاهش سرعت سایت وردپرس می‌شود، به هر حال اگر مایل به استفاده ازکدهای بالا نیستید می‌توانید از افزونه‌های زیر برای فعال سازی کش در وردپرس استفاده نمایید.

• افزونه Cache Enabler
• افزونه W3 Total Cache
• افزونه WP Super Cache