پس از این که با اهمیت افزایش سرعت بارگذاری سایت آشنا شدید، باید بدانید که چطور می‌توان خطاهای آن را رفع کرد! در این بخش از آموزش رفع خطاهای GTmetrix قصد داریم به نحوه برطرف کردن خطای optimize the order of styles and scripts بپردازیم. همان‌طور که از معنی لغوی این خطا که متشکل از کلمات optimize و order است، می‌توان فهمید که منظور این خطا قرارگیری درست و بهینه‌سازی در لود دو فایل css و js است. یعنی وقتی در بخش head صفحات شما فایل‌های استایل و جاوا اسکریپت بارگذاری می‌شوند، طوری باشند که هر دوی این فایل‌ها به ترتیب در هر خط بارگذاری شوند و به نحوی باشد که در خط اول فایل css، در خط بعدی js و در خط بعدی باز هم css قرار داشته باشد. بلکه باید کاری کنیم که کلیه فایل‌های css به ترتیب در چند خط و فایل‌های js هم در چند خط دیگه و به صورت جدا قرار داشته باشند که با ارور order of styles and scripts در جی تی متریکس مواجه نشویم.
رفع خطای optimize the order of styles and scripts
وقتی سورس صفحات رو چک کنید می‌بینید که در هر صفحه از سایت یک سری لینک برای فایل‌های css و js قرار دارد که با لود این فایل‌ها سایت شما شکل ظاهری به خودش میگیره. در این میان ممکن است حالتی پیش بیاد که شما با استفاده از JS تغییراتی رو در فایل استایل داده باشید، در این صورت وقتی لود این فایل‌ها به ترتیب نباشد و قبل از اینکه فایل css لود شود، فایل جاوا اسکریپتی که توسط اون تغییرات رو در css اعمال کردید بارگذاری شود، در این صورت ظاهر سایت با خطا مواجه می‌شود. پس باید کاری کنیم که کدهای قرار داده شده در سورس صفحات به یک ترتیب باشد و این دو فرمت فایل به صورت نامرتب بارگذاری نشوند. برای این کار شما باید فایل header سایت خودتون رو بررسی کنید و لینک‌هایی که برای لود این دو فرمت فایل قرار داره رو جابجا کنید و به شکل مرتب و پشت سر هم قرار د هید. ارور optimize the order of styles and scripts را می‌شود بهینه‌سازی چیدمان فایل‌های css و js ترجمه کرد.
حتی اگه دلیل این تغییر وابستگی بین دو فایل نباشد، بهتر است که فایل 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 برای بهینه‌سازی تصاویر سایت
استفاده از تصاویر در وبسایت بخش عمده فایل‌های آپلود شده روی یک سایت را تشکیل می‌دهند و تاثیر بسیار زیادی روی ایجاد تغییرات ظاهری در سایت دارند. همه ما در سایت‌هایمان و در هر نوشته حداقل از یک تصویر به خاطر اینکه بتوانیم در جستجوی تصاویر گوگل هم بالا بیاییم، استفاده می‌کنیم. در این بین سعی می‌شود تا همیشه از تصاویر با کیفیت و زیبایی استفاده شود که با خواندن پیام چشمی توسط بازدیدکننده در نگاه اول کاری کنید که محتوای سایت شما رو تا انتها دنبال کنند. اما یک شرط مهمی که برای استفاده از تصاویر در سایت وجود دارد متاسفانه نادیده گرفته می‌شود که آن هم چیزی جز Optimize images یا بهینه سازی کردن تصاویر سایت نیست! این بهینه‌سازی از دو جهت مورد بررسی قرار می‌گیرد که بخش اول شامل اندازه تصاویر و بخش دوم شامل حجم تصاویر می‌شود که در اینجا منظور ما حجم تصاویر هست.
چگونه خطای Optimize images را در جی تی متریکس رفع کنیم؟
همان‌طور که اشاره کردیم بهینه‌سازی تصاویر یک سایت شامل دو بخش است که هر کدام مربوط به مواردی هستند که در زیر به بررسی آن‌ها می‌پردازیم.
- بهینه سازی حجم تصاویر(optimize image): در این بخش باید کاری کنیم که حجم تصاویری که در صفحات سایت استفاده می‌کنیم ضمن اینکه حداکثر کیفیت رو داشته باشند، حداقل حجم ممکن رو داشته باشند. گزینه‌هایی که میتونه روی افزایش حجم تصاویر تاثیر بزاره شامل ALT تصاویر، عنوان تصاویر، جزییات عکس، رزولوشن عکس، اندازه، فرمت فایل و… هستند.
- بهینه سازی اندازه تصاویر(Serve scaled images): این گزینه صرفا مربوط به اندازه و رزولوشن تصاویر هست که هرچی بزرگ‌تر و در سطح بالاتری قرار داشته باشه باعث می‌شود که حجم تصویر هم بیشتر شود.
- بهینه‌سازی تصاویر وردپرس با افزونه WP Smush
سیستم‌های مدیریت محتوا مثل وردپرس به صورت پیش فرض قابلیتی دارند که وقتی تصویری رو آپلود می‌کنید تا یک حدی حجم تصویر رو کم می‌کنند. اما این میزان به شکلی نیست که بتونید به صورت دلخواه تنظیمش کنید و برای این کار باید از افزونه‌ها استفاده کنید. پس وقتی یک تصویری آپلود می‌کنید که حجم بالایی داره باید با هر ابزار ممکن کاری کنید که ضمن حفظ کیفیت، حجم اونو کمتر کنید. وقتی با افزایش حجم تصاویر در سایت مواجه شوید، این خطا به شکل بالا در جی تی متریکس نمایش داده می‌شود که میتونید با کم کردن حجم تصاویر اونو برطرف کنید. برای این کار چندین راهکار وجود داره که به بررسی هر کدوم می‌پردازیم.
استفاده از برنامه‌های ویرایشگر تصاویر
اولین و بهترین روش برای کم کردن حجم تصاویر سایت این است که وقتی تصویر خود را برای آپلود کردن در سایت می‌سازیم، به نحوی فایل خروجی رو تهیه کنیم که حداقل حجم رو داشته باشد. به عنوان نمونه در برنامه فتوشاپ می‌توانیم موقع ذخیره کردن و خروجی گرفتن از تصویر نهایی با استفاده از قابلیت save for web تصویر رو برای استفاده در وب سایت بهینه‌سازی کنیم. یا اینکه با تغییر رزولوشن عکس و کاهش کیفیت تصویر به میزانی که قابل قبول باشد، حجم آن را کمتر کنیم.
یکی دیگه از این روش‌ها این است که موقع خروجی گرفتن اطلاعاتی که در تصویر ذخیره می‌شود را حذف کنیم. به عنوان نمونه وقتی با گوشی هوشمند خودتان تصویری را می‌گیرید و قصد استفاده از آن در وبسایت خود را دارید اطلاعاتی مثل موقعیت جغرافیایی تصویر گرفته شده، مدل گوشی، تاریخ گرفتن تصویر و… ذخیره می‌شود که برای استفاده از سایت نیازی به این اطلاعات نداریم. پس بهتره موقع خروجی گرفتن از تصویر نهایی این گزینه‌ها رو از روی تصویر حذف کنیم.
