آموزش رفع خطای Reduce cookie size در GTmetrix

یکی دیگه از خطاهای رایج که در تست سرعت سایت با جی تی متریکس نمایش داده میشه با عنوان Reduce cookie size هست. همونطور که از معنای لغوی این خطا GTmetrix برداشت میشه از ما خواسته میشه که اندازه و تعداد کوکی‌های سایت رو کاهش بدیم. کوکی‌ها درخواست‌هایی هستند که به صورت HTTP در اولین ورود به هر سایتی در مرورگر ذخیره میشن که برای اهداف گوناگونی ازشون استفاده میشه.

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

در این آموزش به نحوه برطرف کردن خطای Reduce cookie size در Yslow جی تی متریکس می‌پردازم که با استفاده ازش میتونید درخواست‌های کوکی سایت که در مرورگر کاربران ذخیره میشه رو بهینه سازی کنید. کوکی‌هایی که در مرورگر کاربران ذخیره می‌کنید باعث کاهش تعداد درخواست HTTP سایت میشن، اما در مقابل حالتی که پیش میاد اینه که اگر تعداد کوکی هم بالا باشه باعث به وجود اومدن خطای Make fewer HTTP requests خواهند شد.

آموزش رفع خطای Reduce cookie size در GTmetrix

کوکی‌ها علاوه بر اطلاعات احراز هویتی قادر هستند اطلاعاتی رو در خودشون ذخیره کنند که بیشترین نمونه‌ها شامل اطلاعات بانکی، رمزهای ورود، اطلاعات ورود به هر سایت و… میشه. اما اگه اگه این سوال براتون پیش اومده که پس چرا اطلاعات کارت بانکی شما در درگاه پرداخت ذخیره نمیشه بخاطر این هست که کوکی در درگاه‌های بانکی به منظور افزایش امنیت و کاهش خطر هک حساب‌های بانکی به صورت کش شده نیست و ذخیره نمیشه.

کوکی‌ها درخواست‌های HTTP رو تحت Header بین مرورگر و سرور رد و بدل می‌کنند که اگه بتونیم حجم این کوکی‌ها رو کمتر کنیم و علاوه بر این هم با حذف کوکی‌هایی که بهشون ممکنه نیازی نداشته باشیم، اقدام به بهینه سازی کوکی‌های سایت بکنیم. کارهایی مثل جلوگیری کردن از حالت کوکی در فایل‌های استاتیک میتونه گزینه خوبی باشه که در آموزش بهبود cookie free domains در وردپرس به معرفی یکی از این نمونه‌ها پرداختم. برای بهینه سازی کوکی در سایت میتونید دقیقا مطابق توضیحاتی که تو آموزش رفع خطای Enable gzip compression در GTmetrix توضیح دادم عمل کنید. که در ادامه به معرفی چند راهکار برای بهینه سازی کوکی‌ها در سایت می‌پردازم.

۱- کاهش حجم و درخواست کوکی با Gzip

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

یکی از راه‌های فشرده سازی استفاده از Gzip هست که میتونید به میزان قابل توجهی حجم کوکی رو کمتر کنید. برای این منظور اگر از هاست سی پنل استفاده می‌کنید با اضافه کردن کدهای زیر به فایل htaccess. میتونید حجم کوکی‌هایی که به صورت استاتیک هستند رو کمتر کنید.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

اما اگر از هاست دایرکت ادمین استفاده می‌کنید استفاده از کد زیر میتونه برای فعال کرده قابلیت Gzip گزینه بهتری باشه که روی درخواست‌های کوکی هم تاثیر گذار هست.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

۲- استفاده از Cookie Free Domains

در این روش برای افزایش سرعت سایت با استفاده از کوکی دامنه، به صورتی عمل میکنیم که کلیه فایل‌ها را از دامنه و یا ساب دامنه دیگه دریافت کنیم تا سرعت بارگذاری فایل‌های ثابت افزایش پیدا بکنه. اگر در gtmetrix، وبسایت خودتونو تست کرده باشید، احتمالا به بخش Use cookie-free domains بر خوردید که مشخص میکنه تا چه میزان شما از کوکی‌ها برای رد و بدل کردن داده‌های سایت توسط زیر دامنه و یا دامنه دیگه استفاده می‌کنید.

برای استفاده از cookie-free domains در وردپرس ابتدا باید یک ساب دامنه در سایت خودتون ایجاد کنید. اگر با نحوه ساخت زیر دامنه آشنایی ندارید میتونید از آموزش نحوه ساخت ساب دامین در GTmetrix هاست سی پنل استفاده کنید. بنابراین بعد از ورود به هاست خودتون به منوی ساب دامنه‌ها مراجعه کرده و سپس یک ساب دامنه با نام دلخواه خودتون ایجاد کنید و مسیر اونو روی public_html/wp-content تنظیم کنید. در اینجا من قصد دارم تا از ساب دامنه CDN برای این کار استفاده کنم.

حالا بعد از اینکه ساب دامنه شما برای وردپرس در هاست ساخته شد به مسیر File Manager در هاست خودتون مراجعه کنید و سپس به مسیر public_html در هاست سی پنل مراجعه کنید.

بعد از اینکه وارد مسیر public_html در هاست سی پنل GTmetrix شدید باید به دنبال فایل wp-config.php وردپرس بگردید و بعد از اینکه فایل را پیدا کردید روی اون راست کلیک کرده و گزینه Edit را انتخاب کنید تا به صفحه ویرایش فایل هدایت شده و در نهایت کدهای زیر را در مکان مناسبی از این فایل قرار دهید.

// تعریف ثابت برای استفاده از ساب‌دامنه بدون کوکی برای فایل‌های استاتیک
define('COOKIE_DOMAIN', '.example.com'); // به جای example.com دامنه اصلی خودتون رو وارد کنید

// تعریف ثابت برای غیرفعال کردن ارسال کوکی‌ها در فایل‌های استاتیک
define('COOKIEPATH', '/');
define('SITECOOKIEPATH', '/');

با اضافه کردن این کد به فایل wp-config.php، شما به وردپرس می‌گویید که برای کوکی‌ها دامنه‌ای تنظیم کند که شامل ساب‌دامنه شما نشود و در نتیجه کوکی‌ها برای فایل‌های استاتیک روی ساب‌دامنه ارسال نشوند. این کار باعث می‌شود تا حجم کوکی‌های ارسال شده در درخواست‌های فایل‌های استاتیک کاهش یافته و در نتیجه سرعت بارگذاری سایت افزایش یابد.

۳- حذف کوکی از فایل‌های استاتیک با استفاده از htaccess.

علاوه بر روش بالا، می‌توانید در فایل htaccess. نیز قوانینی اضافه کنید که درخواست‌ها برای فایل‌های استاتیک مثل تصاویر، CSS و جاوا اسکریپت بدون کوکی ارسال شوند. برای این منظور کد زیر را در فایل htaccess. سایت خود قرار دهید:

<IfModule mod_headers.c>
    # غیرفعال کردن کوکی برای فایل‌های استاتیک
    <FilesMatch "\.(jpg|jpeg|png|gif|js|css|woff|woff2|ttf|svg|ico)$">
        Header unset Cookie
    </FilesMatch>
</IfModule>

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

جمع‌ بندی

خطای Reduce cookie size در GTmetrix نشان‌دهنده این است که سایت شما کوکی‌های زیادی را در درخواست‌ها ارسال می‌کند که باعث افزایش حجم و کاهش سرعت لود سایت می‌شود. با روش‌هایی که در این آموزش مطرح شد می‌توانید:

• حجم کوکی‌ها را با فشرده‌سازی Gzip کاهش دهید،

• از ساب‌دامنه‌های بدون کوکی (Cookie Free Domains) برای فایل‌های استاتیک استفاده کنید،

• و کوکی‌ها را از فایل‌های استاتیک حذف کنید.

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