سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش GTmetrix میزفا همراه شما هستیم. تو مقاله قبلی درباره رفع خطای Avoid non-composited animations صحبت کردیم و در این مقاله به آموزش رفع مشکل Avoid serving legacy JavaScript to modern browsers در ابزار جی تی متریکس جدید می‌پردازیم. خطای Avoid serving legacy JavaScript to modern browsers هم مثل بیشتر خطاهای GTmetrix جدید به بهینه سازی تجربه کاربری (UX) توجه داره. همونقدر که درک مفهوم این ارور ساده ست، برطرف کردنش می‌تونه سخت و پیچیده باشه. در یک کلام، اگه سایت شما برنامه نویس نداشته باشه، به احتمال بسیار زیاد نمی‌تونید این خطا رو رفع کنید. اما بهرحال در این مقاله سعی می‌کنیم درباره ماهیت و دلیل مشکل Avoid serving legacy JavaScript to modern browsers و روش برطرف کردنش صحبت کنیم.
لطفا تا پایان با میزفا همراه باشید.
سرفصل‌های پست
خلاصه خطای Avoid serving legacy JavaScript to modern browsers
میزان سختی: ****
روی چه مواردی تاثیر می‌ذاره: TTI
علت ایجاد خطای Avoid serving legacy JavaScript to modern browsers چیست؟
همونطور که از اسم خطای Avoid serving legacy JavaScript to modern browsers پیداست، این ارور به فایل‌های JavaScript مربوط میشه. جاوا اسکریپت هم مثل بیشتر زبان‌های برنامه نویسی دیگه، نسخه‌های مختلفی داشته که در طول زمان به روز رسانی و بهینه سازی شدند. آخرین نسخه جاوا اسکریپت که در سال ۲۰۱۵ ارائه شد، ES6 که ششمین نسخه استاندارد ECMAScript هست. به همین دلیل به ES6 گاهی اوقات ECMAScript 6 یا ECMAScript 2015 هم گفته میشه. نسخه قبلی (نسخه پنجم) ES5 بوده که در سال ۲۰۰۹ ارائه شده و بهش ECMAScript 5 یا ECMAScript 2009 هم گفته میشه.
حتما شنیدید که میگن “نو که میاد به بازار، کهنه میشه دل آزار”. داستان خطای Avoid serving legacy JavaScript to modern browsers در جی تی متریکس هم متناسب با همین ضرب المثل فارسی هست. با وجود ارائه نسخه ES6 و پشتیبانی بیشتر مرورگرهای جدید از این نسخه، گاهی اوقات برنامه نویسان عزیز به دلایل مختلفی از نسخه‌های قدیمی مثل ES5 در کدهای جاوا اسکریپت استفاده می‌کنند. هدف بیشتر این برنامه نویسان اینه که این کدها برای کاربرانی که از مرورگرهای قدیمی استفاده می‌کنند هم قابل اجرا باشه. این کار معمولا از طریق استفاده از Polyfills و Transforms انجام میشه (درباره Polyfills در ادامه صحبت می‌کنیم). اما متاسفانه استفاده از کدهای JavaScript نسل قدیمی در مرورگرهای جدید، باعث بروز مشکلاتی در سرعت سایت میشه.
بزرگترین مشکل ناشی از استفاده از JavaScript نسل قدیمی در مرورگرهای جدید اینه که باعث میشه مرورگر فایل‌های سنگین‌تر JS رو دانلود، تجزیه و اجرا کنه که باعث طولانی شدن زمان لود صفحه میشه. این یعنی تضعیف تجربه کاربری یا UX. در واقع با استفاده از کدهای JavaScript قدیمی کمک می‌کنیم که بعضی از کاربران سایت ما (که از مرورگرهای نامناسب و قدیمی استفاده می‌کنند) مشکلات کمتری در لود صفحه‌مون داشته باشند. اما از طرفی کاربران دیگه‌ای که از مرورگرهای مدرن و جدید استفاده می‌کنند، با مشکل اساسی کاهش سرعت لود صفحه مواجه میشن.
چطور خطای Avoid serving legacy JavaScript to modern browsers را برطرف کنیم؟
تا اینجا دلیل ارور Avoid serving legacy JavaScript to modern browsers رو متوجه شدیم و یاد گرفتیم به دلیل استفاده از کدهای JavaScript نسل قدیمی در مرورگرهای جدید این مشکل به‌وجود میاد. اگه در گزارش Structure جی تی متریکس روی این خطا کلیک کنیم، لیست کاملی از کدهای JavaScript که باعث ایجاد این خطا شدند رو مشاهده می‌کنیم. در سایت‌های WordPress گاهی این کدها ممکنه به دلیل استفاده از افزونه‌ها یا قالب‌های نامعتبر و قدیمی که مدت زیادیه به‌روز رسانی نشدند وجود داشته باشه و باعث بروز خطای Avoid serving legacy JavaScript to modern browsers بشه.
در ابتدای مقاله اشاره کردیم که برطرف کردن خطای Avoid serving legacy JavaScript to modern browsers اصلا ساده نیست. حل کردن این مشکل نیاز به تخصص بالای برنامه نویسی و همچنین آگاهی کامل از Codebase سایت و دانش گسترده درباره JavaScript داره. پس روش‌هایی که در ادامه بهشون اشاره می‌کنیم باید حتما توسط یه برنامه نویس متخصص و کاملا با تجربه در زمینه JavaScript انجام بشه.
حداقل استفاده از Polyfill
بالاتر اشاره کردیم که تبدیل کدهای ES6 به ES5 با استفاده از Polyfill انجام میشه. Polyfill یه کتابخونه نسبتا سنگین JavaScript هست که وظیفه‌اش اینه که در مرورگرهایی که از کدهای جاوا اسکریپت ما پشتیبانی نمی‌کنند، این مشکل عدم پشتیبانی رو حل کنه. اما در واقعیت و در عمل، Polyfill کاملا قادر به انجام این کار نیست و معایب و ایراداتی رو به همراه داره. بنابراین باید تا جایی که میشه کدهای ما به Polyfill وابسته نباشه. همچنین به دلیل سنگین بودن، استفاده از Polyfill باعث عملکرد (Performance) ضعیف صفحاتمون میشه و به همین دلیل برنامه نویسان کمتر ازش استفاده می‌کنند. برای رفع خطای Avoid serving legacy JavaScript to modern browsers هم پیشنهاد میشه فقط در موارد کاملا ضروری از Polyfill استفاده کنید.
استفاده از <script nomodule>
این روش برای حل مشکل Avoid serving legacy JavaScript to modern browsers در جی تی متریکس جدید روش بسیار بهتری هست که پیشنهاد می‌کنیم انجام بدید (البته اگه متخصص برنامه نویسی هستید). در جاوا اسکریپت یه ویژگی (Attribute) داریم به نام nomodule که میشه به این ویژگی nomodule یه Src اختصاص داد و اونجا از یه آدرس استفاده کرد. از طرفی مرورگرهای قدیمی ویژگی nomodule رو پشتیبانی نمی‌کنند و در نتیجه اون رو لود می‌کنند. درحالیکه nomodule در مرورگرهای جدید لود نمیشه (به دلیل پشتیبانی از nomodule).
این مسئله یه مزیت بزرگ برای ما داره. به این شکل که میشه در nomodule اسکریپت‌هایی بذاریم که مربوط به مرورگرهای قدیمی هست. در این صورت اگه nomodule لود بشه، این اسکریپت‌های مربوط به مرورگر قدیمی اجرا میشن. به این ترتیب کدهای JavaScript جدید (ES6) فقط در مرورگرهای مدرن لود میشن. از این روش می‌تونیم خطای مورد نظر رو برطرف کنیم و بین کدهای JavaScript و نسخه مرورگرها سازگاری ایجاد کنیم. برای اطلاعات بیشتر درباره نحوه دقیق انجام این روش، این مقاله رو مطالعه کنید.
در نهایت و بر اساس اونچه که ما در این مدت در پروژه‌های بهینه سازی سرعت میزفا از بررسی وضعیت سایت‌های مختلف در GTmetrix در تجربه کردیم، اینه که این خطا در بیشتر سایت‌ها در حد خیلی کم دیده میشه. اما معمولا به‌صورت جزئی هست و برچسب اهمیت Low داره. بنابراین با توجه به سختی بهینه سازی این خطا پیشنهاد می‌کنیم انرژی و زمانتون رو روی خطاهای مهم‌تر گزارش Structure بذارید که حل کردنشون تاثیر بیشتری در بهینه سازی سرعت سایت داره. مگه اینکه ارور Avoid serving legacy JavaScript to modern browsers یه مشکل جدی و با اهمیت بالا در سایت شما باشه که در این صورت باید بهش به‌صورت جدی‌تری توجه داشته باشید.
بده یک متخصص سئو یا تیم سئو
مقاله رو خوندی؟ سایر سایت‌ها هم مطالعه کردی؟ تلاش کردی تا بتونی براساس راهنمایی‌هایی که کردیم کار رو انجام بدی؟ اگه جوابت بله هست و بعد نتونستی مشکل رو حل کنی، خب کار رو بسپار به کاردان و بذار یه تیم سئو برات انجام بده. اگه تیم خوب می‌شناسی که هیچ ولی اگه دنبال یک تیم حرفه‌ای و همینطور دنبال خدمات خوب در زمینه سئو می‌گردی، می‌تونی خدمات سئو و بهینه سازی سایت میزفا رو یک نگاهی بکنی، کلی خدمات متنوع از جمله بهینه سازی سرعت سایت اونجا هست.
جمع بندی
در این مقاله میزفا درباره حل مشکل Avoid serving legacy JavaScript to modern browsers در GTmetrix جدید صحبت کردیم. به بیان خیلی ساده، هر وقت از JavaScript نسل قدیمی در مرورگرهای جدید استفاده بشه، این ارور به‌وجود میاد. همونطور که اشاره شد، برطرف کردن این خطا روش ساده‌ای نداره. تو مقاله بعدی درباره خطای Combine images using CSS sprites صحبت خواهیم کرد.
اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید؛ حتما پاسخ می‌دیم.
