جی تی متریکس و انواع خطاهای آن 3

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

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

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

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

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

کوکی‌ها درخواست‌های 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>

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

*******آموزش رفع خطای Make JavaScript and CSS external در gtmetrix

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

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

هنگامی که یک سایت را باز می‌کنید، در لحظه اول، مرورگرها منابع CSS و جاوااسکریپت خارجی را مسدود می‌کنند. علت این امر آن است که اولویت با بارگذاری منابعی است که در داخل هاست و دامنه شما قرار دارند. پس از بارگذاری منابع داخلی، منابع خارجی از حالت مسدودیت خارج شده و شروع به بارگذاری می‌کنند، که در نهایت با تکمیل این مرحله، ظاهر کامل سایت را مشاهده خواهید کرد.

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

رفع ارور Make JavaScript and CSS external

بر اساس الگوریتم‌های یاهو که در ستون Yslow مطرح شده است، توصیه می‌شود از روش خارجی (External) برای کدهای CSS و جاوااسکریپت استفاده کنید. دلیل این امر، امکان استفاده از کش سایت است. کدهایی که به صورت خارجی در قالب یک فایل فراخوانی می‌شوند، در مرورگر کاربران کش می‌شوند. اما در حالتی که به صورت مستقیم (Internal) یا درون خطی (Inline) استفاده شده باشد.

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

بنابراین، بهتر است که اگر تعداد خطوط کدنویسی شده CSS و جاوااسکریپت در حالت‌های Internal و Inline کمتر هستند، آنها را برداشته و در فایل جداگانه CSS و جاوااسکریپت قرار دهید یا در حالت استانداردتر، با سایر فایل‌ها ادغام کنید. در این حالت، به دلیل کاهش حجم صفحه و امکان استفاده از کش و فشرده‌سازی Gzip، سرعت بارگذاری بهتری خواهید داشت. بنابراین، می‌توان گفت استفاده از حالت External بهترین انتخاب است. می‌توانید با استفاده از آموزش رفع خطای Minify JavaScript and CSS در YSlow GTmetrix نیز حجم این فایل‌ها را کمتر کرده و بهینه‌سازی بهتری داشته باشید.

********رفع خطای Remove query strings from static resources

حتما این سوال در ذهنتون نقش بسته که اصلا query strings چیست و چرا باید ازش برای افزایش سرعت سایت استفاده کنیم. همونطور که در بالا اشاره کردم وجود query strings باعث میشه که فایل‌های مورد نظر کش نشده و در هر با بازدید کاربر از سایت از سمت سرور لود بشن. برای همین باعث بالا رفتن سرعت لود سایت و افزایش تعداد درخواست HTTP هم میشه.

اما در مقابل وجود query strings هم باعث میشه تا توسعه دهنده‌ها بتونن تغییراتی رو که در فایل‌ها اعمال میکنند رو بدون کش شدن زودتر آپدیت کنند. یعنی وقتی شما قالب وردپرس خریداری میکنید و چند روز بعد آپدیتی براش منتشر میشه، تا زمانی که فایل‌ها به صورت کش شده ذخیره هستند کاربران قبلی که این فایل‌ها براشون کش شده همچنان با ظاهر قبلی سایت براشون بالا میاد.

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

رفع خطای Remove query strings وردپرس

برای رفع مشکل Remove query strings from static resources در وردپرس دو راهکار پیش روی شماست که شامل استفاده از افزونه و استفاده از کدنویسی است. در صورتی که تمایل به استفاده از افزونه دارید، کافیه روی دکمه زیر کلیک کرده و بعد از اینکه وارد صفحه افزونه شدید با استفاده از راهنمای نصب افزونه در وردپرس اقدام به نصب و فعال سازی افزونه در سایت خودتون بکنید.

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

دانلود افزونه Remove Query Strings

علاوه بر این اگر از افزونه wp rocket هم استفاده می‌کنید قادر هستید با استفاده از تنظیمات افزونه این قابلیت رو در وردپرس فعال کنید. برای این منظور کافیه از راهنمای آموزش افزونه Wp Rocket استفاده کنید.

اما اگه تمایل به استفاده از افزونه ندارید میتونید با اضافه کردن قطعه کد زیر در فایل فانکشن(functions.php) قالب وردپرس خودتون این قابلیت رو فعال کنید. برای این منظور بعد از اینکه وارد هاست خودتون شدید به منوی File Manager مراجعه کنید.

جمع بندی

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