اگر از همراهان همیشگی پرشین تولز هستید، حتماً مقاله قبلی در مورد افزایش سرعت بارگذاری سایت با استفاده از ابزار GTmetrix را خوانده‌اید! در این مقاله هم قصد داریم به بررسی ادامه این بحث بپردازیم تا بتوانید با افزایش سرعت سایت، وضعیت سئوی سایت خود را بهبود ببخشید و رضایت کاربران را هم جلب کنید.
Minimize redirects: در هنگام بارگذاری صفحه از چندین نوع فایل css، js و… استفاده می‌شود که هر کدام از این فایل‌ها برای قالب یا افزونه خاصی مورد استفاده قرار می‌گیرند. حالا هر چقدر تعداد این فایل‌ها بیشتر باشد، باعث افزایش تعداد درخواست HTTP می‌شود که همین موضوع باعث نمایش امتیاز کمتر در آن پارامتر خواهد شد. در نتیجه تعداد درخواست از سمت مرورگر و سرور بیشتر شده و سرور به صورت دائمی درگیر پاسخ‌ها خواهد بود. پس بهتر است با ترکیب کردن این نوع فایل‌ها کاری کنید که تمامی فایل‌های CSS در یک فایل و تمامی فایل‌های JS در یک فایل دیگر قرار گرفته و بارگذاری شوند! پارامترهای Minify JavaScript، Minify HTML و Minify CSS هم مربوط به همین مسئله هستند که به راحتی می‌توانید آن را بهینه‌سازی کنید.
Specify a character set early: این خطا مربوط به متا تگ character set است که در زبان‌های مختلف از آن استفاده می‌شود. چون ما در زبان فارسی متاتگ character set که همان <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/> را استفاده می‌کنیم، بر اساس گفته GTmetrix نیازی به استفاده از آن نیست. بنابراین پیشنهاد می‌شود که از این متاتگ استفاده نکنید؛ زیرا بر اساس گفته جی‌تی متریکس نیازی به تغییر این متا تگ ندارید.
Avoid bad requests: این پارامتر هم درخواست‌هایی که به صورت نادرست به سرور ارسال شده باشند را شناسایی خواهد کرد. به عنوان مثال ممکن است از یک فایل جاوا اسکریپت یا CSS در یک جایی استفاده شده باشد که آدرس خواندن این فایل اشتباه بوده یا این که اصلا وجود نداشته باشد که در این صورت در این پارامتر نشان داده می‌شود و می‌توانید آن را برطرف کنید.
Enable gzip compression: این پارامتر مربوط به فعال بودن Gzip در سرور شما است که نشان می‌دهد تا چه میزان از این قابلیت در سایت شما استفاده می‌شود. در صورتی که از Gzip استفاده کنید، صفحات شما فشرده‌تر شده و در نتیجه با سرعت بالاتر صفحه لود خواهد شد.
Enable Keep-Alive: برای نمایش محتوای یک صفحه باید چندین فایل با انواع فرمت مختلف توسط مرورگر از سرور درخواست شود که در این صورت اگر قرار باشد توی هر بار لود صفحات یک درخواست جدید ارسال شود و سرور هم به همه این درخواست‌ها پاسخ مثبت دهد، دردسر زیادی برای شما ایجاد می‌کند!پس بهتر است که برخی فایل‌ها وقتی از طرف مرورگر کاربر درخواست می‌شوند، در مرورگر باقی بمانند تا در خواست‌های بعدی به جای ارسال از سمت سرور، از خود مرورگر در دسترس قرار بگیرند. این پارامتر نحوه درخواست بین سرور و مرورگر کاربر رو مشخص می‌کند که در آن مشخص می‌شود مرورگر می‌تواند بیش از یک فایل را بگیرد یا نگیرد؛ باید آن را مشخص کنید.
Inline small CSS و Inline small JavaScript: به صورت پیش فرض مرورگرها در هر سایتی لود فایل‌های CSS و JS که از منابع خارجی لود می‌شوند را تا زمانی که صفحه به صورت کامل از سمت خود سرور لود نشده در نظر نمی‌گیرند. بعد از آن که صفحه بر اساس فایل‌های خود سرور بارگذاری شود، شروع به بارگذاری فایل‌های خارجی می‌کنند. در این صورت زمانی در این بین از بین می‌رود که بهتره استایل‌ها و js خارجی را به صورت مستقیم در خود سایت وارد کنید. برای بهبود این پارامتر کافی است استایل‌ها و کدهای JS که از منابع خارجی لود می‌شود را مستقیما در سرور سایت قرار دهید.
Minimize request size: این پارامتر برای کاهش حجم درخواست‌ها است که از سمت کوکی و هدر قابل استفاده هستند و تقریبا مشابه همون حالتی هستند که در پارامتر Minimize redirects وجود دارند.
Put CSS in the document head: در این پارامتر توصیه شده که فایل‌های CSS را در هدر سایت قرار دهید تا بارگذاری شود؛ در این کار تا جای ممکن از کدهای استایل که در بخش بدنه قرار گرفتند و به صورت سفارشی ازشون استفاده می‌کنید دوری کنید.
Remove query strings from static resources: این پارامتر برای درخواست‌هایی است که به صورت query strings ارسال می‌شود و شامل کاراکتر علامت سوال (?) هستند. در بسیاری از سایت‌ها نظیر Gravatar.com این علامت سوال برای نمایش آواتار کاربران دیده می‌شود!
Serve resources from a consistent URL: این پارامتر هم برای نمایش منابع از یک آدرس سازگار و درست هستند که اگر منابع از یک آدرس ناسازگار و غیر صحیح درخواست شود، در این بخش نشان داده می‌شود که می‌توانید آن را برطرف کنید.
Serve scaled images: وقتی از بهینه‌سازی تصاویر در سایت صحبت می‌کنیم، منظور ما دو حالت بهینه سازی حجم تصاویر و بهینه سازی اندازه تصاویر هست. گاهی اوقات دیده می‌شود که در سایت‌هایی تصاویری با اندازه بزرگ استفاده شدند. به عنوان مثال تصویری در نوشته قرار داده شده که اگه به آدرس مستقیم عکس مراجعه کنیم می‌بینیم که اندازه تصویر در ۱۸۰۰*۲۵۰۰ پیکسل هست اما وقتی داخل نوشته تصویر رو می‌بینیم در ظاهر اندازه شاید روی ۴۵۰*۸۰۰ قرار داشته باشد. این نوع تصاویر با استفاده از CSS تغییر سایز داده می‌شود که اصطلاحاً به آن scaled images می‌گوییم. در این پارامتر تصاویری که چنین وضعیتی داشته باشند نشان داده می‌شود که برای رفع خطا کافی است تصویر را ویرایش کرده و در اندازه درست آپلود و استفاده کنید.
Avoid CSS @import: این پارامتر برای جلوگیری از استفاده از کدهای استایل هست که به صورت @import شده تعیین شده‌اند. اگر در این پارامتر خطایی وجود داشت کافی است استایلی که آدرس داده شده را بررسی کنید و اگه کد به صورت ایمپورت شده قرار دارد، اصلاح کنید.
Combine images using CSS sprites: این پارامتر برای ترکیب کردن تصاویر با استفاده از CSS است که کمکی بزرگی به بهینه سازی سایت‌ها می‌کند. در این روش فرض کنید قصد دارید در یک باکس چند تصویر قابل کلیک استفاده کنید که برای ارسال کالا، مدت زمان ارسال، شرایط ارسال رایگان، پشتیبانی و… را نمایش دهید. بنابراین اگر یک کاربر عادی باشیم، تصاویر را به صورت جدا جدا در کنار هم قرار می‌دهیم. سپس برای هر تصویر لینک دلخواه رو می‌گذاریم. مشکلی که در این حالت پیش می‌آید، این است که تعداد زیادی درخواست برای بارگذاری این تصاویر به وجود می‌آید. اما اگر از روش CSS sprites استفاده کنیم، میتوانیم با استفاده از CSS یک تصویر که شامل از همه این تصاویر در کنار هم است، استفاده کنیم و با استفاده از CSS ناحیه‌های قابل کلیک روی هر عکس رو مشخص کنیم که با کلیک روی این ناحیه، کاربر به آن لینک هدایت شود.
Prefer asynchronous resources: برای بارگذاری یک صفحه، کدها به ترتیب از بالای صفحه، یعنی بخش head شروع به بارگذاری می‌شوند و به همین شکل تا انتهای آن پیش می‌رود تا پس از بارگذاری کدهای فوتر ادامه پیدا می‌کند. هر چقدر کدهای هدر بیشتر باشند، باعث بارگذاری دیرتر صفحات سایت می‌شوند که برای رفع این مشکل، بهتر است کدهای جاوا اسکریپت را با استفاده از تگ <script> در فوتر بارگذاری کنید.
Avoid a character set in the meta tag: این پارامتر هم مشابه همان پارامتر Specify a character set early است که در بخش قبلی توضیح دادیم! با این تفاوت که مربوط به بخش متا داده صفحات می‌شود.
Specify image dimensions: این ارور وقتی در GTmetrix به وجود می‌آید که در تصاویر از ویژگی‌هایی مانند width و height استفاده نکرده باشید. برای رفع این مشکل کافیه در تصاویر عرض و ارتفاع را مشخص کنید.
Specify a Vary Accept-Encoding header: هنگامی که هدر Vary: Accept-Encoding در هاست فعال نباشد، وب سرور یا CDN به جای ارسال فایل‌های فشرده شده GZIP، فایل‌های فشرده نشده را به اشتباه به مرورگر ارسال می‌کند! اما اگه هدر Vary: Accept-Encoding فعال باشد، وب سرور یا CDN نسخه درستی از فایل‌ها را به مرورگر ارسال خواهد کرد. پس فعال بودن این قابلیت از اهمیت بسیار بالایی برخوردار است که در اکثر سرورها به شکل پیش‌فرض فعال است و می‌توانید از آن استفاده کنید. در صورتی که فعال نباشد، در اینجا نمایش داده می‌شود که برای رفع آن کافی است از میزبان هاست خود درخواست کنید این قابلیت را فعال کند.
در مقاله بعدی به بررسی ادامه این بحث می‌پردازیم.
