رفع خطای 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

رفع خطای Inline small CSS and JavaScript

در این پست قصد داریم درباره مشکلات Inline small CSS و Inline small JavaScript در GTmetrix صحبت کنیم و بررسی کنیم که Inline small ها چطورند و چه زمانی مفید هستند و برای افزایش سرعت سایت تاثیر خوبی دارند و چه زمانی باعث کندی سایت می‌شوند.

خلاصه‌ی از خطا Inline small CSS and Inline small JavaScript

نام: Inline small CSS

نوع: CSS
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 94%

نام: Inline small JavaScript

نوع: JS
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 95%

مقدمه درباره نحوه فراخوانی فایل‌های CSS و JS

• کدهای CSS
  CSS، نوعی زبان نشانه‌گذاری تحت وب است که به‌منظور توصیف ظاهر طراحی سایت (طراحی سایت شرکتی، طراحی سایت فروشگاهی) برای مرورگر همراه با HTMLمورداستفاده قرار می‌گیرد.

Inline-small-CSS

به شکل کلی سه شیوه برای استفاده از کدهای CSS در یک سند Html وجود دارد Inline، Internal و External که هرکدام دارای مزایا و معایب خاص خود در شرایط مختلف را داراست. باید توجه داشته باشید که تگ‌های HTML ابتدا کدهای External را لود می‌کند، پس‌ازآن به سراغ کدهای Internal و درنهایت کدهای نوع Inline را مورداستفاده قرار می‌دهد. درنتیجه کدهای Inline در اولویت قرار می‌گیرند. به‌عنوان‌مثال اگر در یک فایل External رنگ آبی برای یک تگ و در کدهای Internal رنگ زرد و بالاخره در کدهای Inline رنگ بنفش برای همان تگ انتخاب‌شده باشد، در چنین حالتی Html رنگ بنفش را مدنظر قرار خواهد داد.

• کدهای JS
  برای فراخوانی کدهای JS هم همانند CSS از سه روش بالا استفاده می‌شود

نکته بالا صرفا جهت اطلاع بود و مربوط به خطای GTmetrix نمی‌شود ولی توجه داشته باشید که خطایInline small CSS به معنی روش Inline در CSS که در بالا اشاره کردیم نیست. اگر به متن توضیحات سایت GTmetrix توجه کرده باشید به عبارت “Inlining small external CSS files” اشاره میکند و منظورش فایل‌های CSS با حجم بسیار کمی که با روش External در سند HTML فراخوانی می‌شوند را می‌گوید، ولی متاسفانه در اکثر طراحی سایت‌های ایرانی به اشتباه و به دلیل تشابه اسمی عبارت Inline فکر می‌کنند منظور روش Inline در CSS هست درحالی که عبارت “Inlining small external CSS files” در اینجا به معنی یک خط کردن کدهای CSS با حجم کم است. مقاله‌های سایت‌های معتبر keycdn ، گوگل و varvy گواهی این موضوع هستند.

درباره مشکل Inline small CSS

مرورگرها، قبل از اعمال استایل‌دهی محتوا، فایل External مربوط به کدهای CSS را مسدود می‌کنند. این امر باعث ایجاد تاخیر اضافی و افزایش مدت زمان لازم برای نمایش محتوا می‌گردد. و اگر تعداد فایل‌های external CSS زیاد باشد قطعا زمان تاخیر افزایش یافته و این امر ضربه‌ای به تجربه کاربری و فروش محصولات و خدمات شما خواهد زد. و همین موضوع برای Inline small JS صدق می‌کند

راه حل Inline Small

به منظور بهینه سازی لود سایت و زمان باز شدن صفحه، در صورتی که کدهای CSS موجود در فایل External، دارای حجم کمی باشند، شما می توانید آنها را به طور مستقیم در سند HTML، وارد کنید و یا با دیگر فایل‌های CSS ادغام نمایید.

گوگل در مقاله‌ای با عنوان Inline Small Resources به اهمیت استفاده از روش Internal اشاره کرده است. در مقاله اشاره شده گوگل عنوان می‌کند که استفاده از روش Internal در فایل‌های CSS و JS با حجم کم و همینطور استفاده از تصاویر به شکل Inline (روش Base64) باعث کاهش تعداد درخواست‌ها به شکل مستقیم در سند HTML می‌شود. در ادامه بیشتر درباره این موضوعات صحبت می‌کنیم.

قسمتی از مقاله گوگل:

This rewriter reduces the number of requests made by a web page by inserting the contents of small external CSS, JavaScript and image files directly into the HTMLdocument. This can reduce the time it takes to display content to the user, especially in older browsers.

inline-small-css

Inline CSS

اگر محتوای فایل CSS که به روش External فراخوانی شده بسیار کم حجم و به اندازه چند بایت می‌باشد بهتر است یا آن را با دیگر فایل‌های external CSS ادغام نماییم یا به شکل مستقیم و Internal درون سند HTML استفاده کنیم.

برای مثال به سند HTML زیر توجه کنید:

و فایل small.css با محتوای فرضی زیر:

می‌توانید از روش نه چندان جالب بالا برای لود قسمتی از استایل خود استفاده کنید ولی برای بهینه سازی سایت باید هوشمندانه و از بهترین روش ممکن بهره ببرید. روش بهینه سازی شده در چنین شرایطی که یک فایل CSS با حجم کم دارید به شکل زیر است:

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

Inline JS

درباره فایل‌های JS هم همانند CSS باید عمل کرد، در این پست سایت GTmetrix بیان میکند:

Inlining small external JavaScript files can save the overhead of fetching these small files. A good alternative to inline JavaScript is to combine the external JavaScript files.

و اگر توجه کرده باشید به فایل‌های External JS که حجم بسیار کمی دارند اشاره کرده که اگر طراحی سایت شما دارای فایل‌های External JS  است و تعداد قابل توجه‌ای دارند بهتر است آنها را ادغام نمایید ولی اگر تعداد کم باشید می‌توانید از راه حلی که گوگل اشاره کرده استفاده نمایید.

از مقاله گوگل اشاره شده که اگر محتوای فایل JS که به روش External فراخوانی شده بسیار کم حجم و به اندازه چند بایت می‌باشد به شکل مستقیم و Internal درون سند HTML استفاده کنیم تا در جهت بهینه سازی سرعت سایت تعداد درخواست‌های سمت سرور کاهش یابد.

برای مثال به سند HTML زیر توجه کنید:

و فایل small.js با محتوای فرضی زیر:

روش بهینه سازی شده در شرایطی که یک فایل JS با حجم کم دارید به شکل زیر است:

اگر تعداد فایل‌های زیادی از نوع js و css در سند html شما فراخوانی می‌شود می‌توانید برای ادغام کردن فایل‌ها از پلاگین‌های وردپرس زیر استفاده نمایید.

• w3 total cache
• js- css script optimizer
• wp super minify
• wp minify fix
• combine css
• combine js

Inline Images

Inline Images عکس هایی هستند که به صورت inline و از طریق کار با base64 آن‌ها را می‌سازیم. به این منظور که عکس‌ها را می‌توانند در بین کدهای HTML قرار دهید و بر اساس کدگذاری بر مبنای 64 عکس‌ها بخشی از HTML شوند و بدون بارگذاری شدن نمایش داده می‌شوند، در عوض مرورگر کد بر مبنای 64 را به عکس تبدیل می‌کند. یکی از محاسن مهم این کار، کاهش تعداد درخواست است که این امر نقش موثری در بهینه‌سازی سئو سایت و سرعت آن دارد. ولی توجه داشته باشید که این روش بهتر است فقط برای عکس‌هایی استفاده شود که اندازه و حجم بسیار کمی دارند چرا که وقتی عکس‌ها حجم متوسط به بالایی داشته باشند با روش کدگذاری بر مبنای 64 حجم تصاویر بیشتر از حالت معمول بوده و اگر برای تمام عکس‌ها از این روش استفاده کنیم به جای بهینه سازی و افزایش سرعت سایت نتیجه‌ای عکس را دریافت خواهیم کرد.

گوگل هم در این پست به اهمیت تصاویر به شکل Inline اشاره کرده است و گفته:

When this rewriter is enabled, the contents of small external images are written directly into the HTML document by an inline data: URL

برای مثال به سند HTML زیر توجه کنید:

در سند بالا تصویر کوچک با حجم اندک به شکل معمولی در صفحه بارگذاری می‌شود و حاوی یک درخواست دیگر برای لود شدن در صفحات کاربران است ولی روش زیر که برمبنای base64 است درگیر درخواست اضافی بر روی سرور متحمل نمی‌شود:

در پست جداگانه‌ای در آینده توضیحات بیشتری درباره تصاویر base64 یا Inline Images خواهیم داد. این خطا باعث کاهش تعداد درخواست های HTTP هم نیز می‌شودو شما اگر قصد دارید تعداد درخواست های سایت خود را در جهت بهینه سازی، کاهش دهید حتما مقاله رفع خطای Make fewer HTTP requests را هم بخوانید. سعی شده در این آموزش‌ها با بالا بردن سرعت سایت که یکی از فاکتورهای مهم در افزایش رتبه سایت در گوگل می‌باشد، کمک شایانی کنیم، در انتهای این آموزش باید توانید فایل css و js خود را با هم ادغام کنید و آن‌ها را یکی کنید.

رفع خطای Enable Keep Alive

در این مقاله قصد داریم درباره مشکل Enable Keep-Alive در GTmetrix صحبت کنیم و ببینیم چطور می‌تونیم این مشکل را در ساخت سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای افزایش سرعت سایت ما اهمیت دارد.

خلاصه‌ی از خطا Enable Keep-Alive

نام: Enable Keep-Alive

نوع: مربوط به سرور
اولویت: بالا
میزان سختی: راحت
میانگین امتیاز: 93%

Keep Alive چیست؟

Keep Alive نحوه درخواست بین سرور و مرورگر کاربر است که می‌گوید: مرورگر می‌تواند بیش از یک فایل را بگیرد یا نگیرد.

Deselect

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

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

طبیعتا مرورگر، برای نشان دادن صحیح صفحات طراحی سایت (طراحی سایت فروشگاهی، طراحی سایت شرکتی،قیمت طراحی سایت)  ما باید همه فایل‌ها را دریافت نماید. در قدم اول برای باز کردن یک سایت مرورگر فایل HTML را دریافت کرده و آن را می‌خواند. سپس مرورگر موارد دیگری مانند CSS، JavaScript و تصاویر را که فایل HTML به آن‌ها اشاره می‌کند را درخواست می‌کند. اگر Keep Alive فعال نباشد این مفهوم را می‌رساند که مرورگر بیش از یک فایل را در آن واحد نمی‌تواند درخواست کند آن موقع مرورگر برای دریافت همه فایل‌ها هر بار درخواست جداگانه ارسال می‌کند و اگر سرور هر بار جداگانه پاسخ بدهد حاصل آن، زمان زیادی برای دریافت تمام فایل‌ها تلف خواهد شد.صفحات وب معمولا مجموعه‌ای از تعداد زیادی فایل هستند و اگر لازم باشد برای هر یک از این فایل‌ها ارتباط جدیدی ایجاد شود، مدت زمان زیادی برای نمایش صفحات طول خواهد کشید و این فرایند می‌تواند زمان دانلود صفحه و هدر رفتن منابع سرور را افزایش دهد. ولی می‌توان با فعال کردن Keep Alive به این قابلیت رسید که سرور بتواند به مرورگر بگوید که “هر چه فایل نیاز داری را درخواست کن یک جا.”

تعریف آکادمیک Keep Alive HTTP این است: “روشی که اجازه می‌دهد درخواست HTTP در کانکشن tcp به جای باز کردن درخواست جدید، هر چه فایل می‌خواهد دریافت کند.” به زبان ساده‌تر،بستری را فراهم می‌کند تا ارتباطی بین وب سرور و مروگر برقرار شود و اجازه می‌دهد که بیش از یک فایل را در آن واحد مرورگر دریافت کند.گاهی در برخی از مقالات Keep Alive به عنوان persistant connection  هم صدا زده می‌شود.

keep-alive-enabled

آیا Enable Keep Alive به طور پیش‌فرض فعال نیست؟

برخی افراد به طور اشتباه باور دارند که Enable Keep Alive به شکل پیش‌فرض فعال است و لازم نیست در این باره نگران باشند زیرا امروزه keep alive در ارتباطات HTTP فعال است.

اگرچه این گفته درست می‌باشد، اما تعداد زیادی از افراد از هاست‌های اشتراکی استفاده می‌کنند که ممکن است با توجه به سیاست‌های مربوطه ارتباط با کاربر را بسته باشند. و از آنجا که میلیون‌ها صفحه از هاست‌های اشتراکی استفاده می‌کنند، دانستن اینکه ارتباطات شما keep alive هستند امری ضروری است. برای فهمیدن این موضوع می توانید از page speed tool گوگل یا سایت GTmetrix استفاده کنید.

چگونه Keep Alive را فعال کنیم

• Keep Alive با استفاده از HTTP هدر Connection: Keep-Alive فعال می شود.
• اگر Keep Alive فعال نشد، احتمالا HTTP Header های شما وضعیت connection: close را دارند.
• برای فعال شدن Keep Alive وضعیت آن را به connection: Keep-Alive تغییر دهید.
• فعال سازی Keep Alive وابسته به سرور مورد استفاده توسط شما و دسترسی هایی است که دارید. به بیشتر موارد در ادامه خواهیم پرداخت.

1. فعال سازی Keep Alive با استفاده از htaccess

   اگر به فایل config وب سرور خود دسترسی ندارید، می توانید Keep Alive را با استفاده از فایل .htaccess فعال کنید.

   افزودن کد بالا به فایل htaccess باعث می‌شود تا در header ها Keep Alive را به درخواست های شما اضافه کند، که البته بیشتر وب سرورها یا محدودیت‌هایی را تعیین کردن تا کد بالا را بازنویسی (override) می‌کند. لطفا توجه داشته باشید که ممکن است بعد از وارد کردن دستور بالا با ارور 500 روبه‌رو شوید و علت این است که سرور شما با دستور بالا سازگاری لازم را ندارد.

2. فعال سازی Keep Alive در Apache

   اگر به فایل پیکربندی Apache دسترسی دارید، می توانید Keep Alive را در آنجا فعال کنید. قسمت های مربوطه در زیر نشان داده شده اند.

3. فعال سازی Keep-Alive در NGINX 

4. مشکلات Keep Alive را می‌توان با HTTPCoriodule برطرف کرد. دستور keep-alive-disable وجود دارد که باید مراقب آن باشید، اگر این دستور را مشاهده کردید، مطمئن شوید قبل از حذف آن دلیل غیر فعال بودنش توسط هاستینگ را می‌دانید.

5. فعال سازی Keep-Alive در Litespeed

   Keep Alive به صورت پیشفرض فعال می‌باشد، اما ممکن است سرور شما از چیز دیگری به اسم smart keep-alive استفاده می کند. smart keep-alive یکی از تنظیمات داخل Litespeed است که به طور مشخصی برای وبسایت‌های با حجم بالا مورد استفاده قرار می‌گیرد. هنگامی که این گزینه فعال باشد، در قسمت page speed tools گزینه‌ای ظاهر می‌شود که نشان می‌دهد Keep Alive غیر فعال است.

   smart keep-alive فایل اولیه را با connection close در HTTP header درخواست خواهد می‌کند. سپس فایل‌های دیگر را با فعال کردن Keep Alive درخواست می‌کند. این گزینه باعث می‌شود هنگامی که درخواست‌های زیادی وجود دارند، کاربران بیشتری بتوانند همزمان متصل شوند.

   نکته: بجز در مواقعی که ترافیک سایت بالایی دارید، می‌توانید  smart keep-alive را در config غیر فعال کنید و هنگامی که این کار را انجام دادید تمام ارتباطات شما از Keep Alive استفاده خواهند کرد.

   اگر مطمئن نیستید که آیا برای شما از نوع smart هست و یا یقین دارید که این ویژگی غیرفعال است بهتر است به هاستینگ خود تیکت ارسال نمایید