رفع خطاهای GTmetrix و افزایش سرعت بارگذاری – بخش پنجم

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

افزونه Optimize the order of styles and scripts برای رفع این مشکل

اگر از وردپرس استفاده می‌کنید، بهترین راه‌کار استفاده از افزونه Optimize the order of styles and scripts است. بخاطر اینکه در وردپرس افزونه‌ها هم دارای فایل‌های CSS و JS گوناگون هستند ممکنه نتوانید این کار را به صورت دستی انجام دهید، برای همین یک راه کار ساده که وجود دارد و این است که می‌توانید توسط افزونه کلیه فایل‌هایی که در صفحات سایت لود می‌شوند را شناسایی کرده و چیدمان دلخواه برای بارگذاری آن‌ها را انتخاب کنید. افزونه WP Scripts & Styles Optimizer یکی از این افزونه‌های خوب است که تا به امروز موفق شده بیش از ۸۰۰ نصب فعال و کسب امتیاز ۴٫۷ را از آن خود کند که با این افزونه می‌توانید اقدام به مرتب کردن فایل‌ها در وردپرس کنید. برای استفاده از این افزونه روی دکمه زیر کلیک کنید و سپس با استفاده از راهنمای نصب افزونه در وردپرس اقدام به نصب و فعال سازی افزونه کنید. بعد از نصب و فعال سازی افزونه مشابه تصویر زیر منویی با عنوان WP Scripts & Styles Optimizer اضافه می‌شود که با رفتن به این صفحه می‌توانید این فایل‌ها رو شناسایی کرده و ترتیب بندی دلخواه برای هر کدوم را انتخاب کنید.

• رفع خطاهای GTmetrix و افزایش سرعت بارگذاری – بخش چهارم

استفاده از GTmetrix برای بهینه‌سازی تصاویر سایت

استفاده از تصاویر در وبسایت بخش عمده فایل‌های آپلود شده روی یک سایت را تشکیل می‌دهند و تاثیر بسیار زیادی روی ایجاد تغییرات ظاهری در سایت دارند. همه ما در سایت‌هایمان و در هر نوشته حداقل از یک تصویر به خاطر اینکه بتوانیم در جستجوی تصاویر گوگل هم بالا بیاییم، استفاده می‌کنیم. در این بین سعی می‌شود تا همیشه از تصاویر با کیفیت و زیبایی استفاده شود که با خواندن پیام چشمی توسط بازدیدکننده در نگاه اول کاری کنید که محتوای سایت شما رو تا انتها دنبال کنند. اما یک شرط مهمی که برای استفاده از تصاویر در سایت وجود دارد متاسفانه نادیده گرفته می‌شود که آن هم چیزی جز Optimize images یا بهینه سازی کردن تصاویر سایت نیست! این بهینه‌سازی از دو جهت مورد بررسی قرار می‌گیرد که بخش اول شامل اندازه تصاویر و بخش دوم شامل حجم تصاویر می‌شود که در اینجا منظور ما حجم تصاویر هست.

چگونه خطای Optimize images را در جی تی متریکس رفع کنیم؟

همان‌طور که اشاره کردیم بهینه‌سازی تصاویر یک سایت شامل دو بخش است که هر کدام مربوط به مواردی هستند که در زیر به بررسی آن‌ها می‌پردازیم.

• صفحات سایت وردپرسی خود را با افزونه Autoptimize بهینه‌سازی کنید
• بهینه سازی حجم تصاویر(optimize image): در این بخش باید کاری کنیم که حجم تصاویری که در صفحات سایت استفاده می‌کنیم ضمن اینکه حداکثر کیفیت رو داشته باشند، حداقل حجم ممکن رو داشته باشند. گزینه‌هایی که می‌تواند روی افزایش حجم تصاویر تاثیر بزارد شامل ALT تصاویر، عنوان تصاویر، جزییات عکس، رزولوشن عکس، اندازه، فرمت فایل و… هستند.
• بهینه سازی اندازه تصاویر(Serve scaled images): این گزینه صرفا مربوط به اندازه و رزولوشن تصاویر هست که هرچی بزرگ‌تر و در سطح بالاتری قرار داشته باشه باعث می‌شود که حجم تصویر هم بیشتر شود.
• راهنمای کامل استفاده از عکس‌های فرمت WebP

سیستم‌های مدیریت محتوا مثل وردپرس به صورت پیش فرض قابلیتی دارند که وقتی تصویری رو آپلود می‌کنید تا یک حدی حجم تصویر رو کم می‌کنند. اما این میزان به شکلی نیست که بتونید به صورت دلخواه تنظیمش کنید و برای این کار باید از افزونه‌ها استفاده کنید. پس وقتی یک تصویری آپلود می‌کنید که حجم بالایی داره باید با هر ابزار ممکن کاری کنید که ضمن حفظ کیفیت، حجم اونو کمتر کنید. وقتی با افزایش حجم تصاویر در سایت مواجه شوید، این خطا به شکل بالا در جی تی متریکس نمایش داده می‌شود که میتونید با کم کردن حجم تصاویر اونو برطرف کنید. برای این کار چندین راهکار وجود داره که به بررسی هر کدوم می‌پردازیم.

استفاده از برنامه‌های ویرایشگر تصاویر

اولین و بهترین روش برای کم کردن حجم تصاویر سایت این است که وقتی تصویر خود را برای آپلود کردن در سایت می‌سازیم، به نحوی فایل خروجی رو تهیه کنیم که حداقل حجم رو داشته باشد. به عنوان نمونه در برنامه فتوشاپ می‌توانیم موقع ذخیره کردن و خروجی گرفتن از تصویر نهایی با استفاده از قابلیت save for web تصویر رو برای استفاده در وب سایت بهینه‌سازی کنیم. یا اینکه با تغییر رزولوشن عکس و کاهش کیفیت تصویر به میزانی که قابل قبول باشد، حجم آن را کمتر کنیم.

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

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

Cache Validate چیست؟ بعد از اینکه وضعیت Cache Length توسط دو درخواست هدر Cache-Control و Expires مشخص شد، حالا باید توسط Cache Validate که آن هم توسط دو هدر HTTP با نام‌های Last-Modified و Etag مشخص می‌شود، تعیین کنید که فایل کش شده برای چه تاریخ و چه ورژنی است. اگر این دو مورد هم مشخص نشده باشند، در این صورت با خطای Specify a cache validator در GTmetrix مواجه خواهید شد. این دو درخواست رو به عنوان درخواست شرطی می‌شناسیم که بر اساس یک سری شروط باید وضعیت کش صفحات رو مشخص کنند.

در مقاله بعدی به بررسی ادامه این بحث می‌پردازیم.