۶ نکته بهینه سازی جاوا اسکریپت از گوگل

در یک ویدیوی جدید از Google، توسعه دهنده مدافع آلن کنت شش راه برای بهینه سازی جاوا اسکریپت برای بهبود عملکرد وب سایت شما به اشتراک می گذارد.

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

۱. از تکثیر فایل جاوا اسکریپت پرهیز کنید

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

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

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

نحوه تشخیص

بخش فرصت گزارش PageSpeed ​​Insights توصیه‌های خاص سایت شما را فهرست می‌کند.

به دنبال توصیه برای کم نگه داشتن تعداد درخواست‌ها و کوچک نگه داشتن اندازه‌های انتقال باشید.

برای خلاصه ای از تعداد و اندازه انواع منابع درخواستی از جمله فایل های جاوا اسکریپت، روی توصیه کلیک کنید.

نحوه رفع مشکل

شما می توانید این مشکل را به روش های مختلف برطرف کنید. یکی از گزینه‌هایی که Google توصیه می‌کند این است که فایل‌های کوچک‌تر را با هم ترکیب کنید تا یک فایل واحد و بزرگ‌تر برای دانلود داشته باشید.

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

۲. از جستجوی بیش از حد DNS اجتناب کنید

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

نحوه تشخیص

PageSpeed ​​Insights می‌تواند فهرستی از نام‌های دامنه مورد استفاده در URLها را در بخش‌هایی مانند کاهش زمان اجرای جاوا اسکریپت به شما نشان دهد.

برگه شبکه در Chrome Developer Tools راه دیگری برای مشاهده همه نام‌های دامنه ارجاع شده است.

نحوه رفع مشکل

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

۳. جاوا اسکریپت ناکارآمد

را حذف کنید

جاوااسکریپت ناکارآمد را کاهش دهید یا حذف کنید، زیرا می‌تواند سرعت صفحات وب را کاهش دهد و منجر به تجربه ضعیف کاربر شود.

نحوه تشخیص

در گزارش Google’s PageSpeed ​​Insights به دنبال فرصت‌های زیر بگردید:

• کاهش زمان اجرای جاوا اسکریپت: اسکریپت‌هایی را گزارش می‌کند که زمان زیادی از CPU صرف تجزیه یا اجرای کد جاوا اسکریپت شده است.
• حذف منابع مسدودکننده رندر: این شامل جاوا اسکریپت است که ممکن است قبل از رندر شدن صفحه اجرا شود، و باعث می‌شود کاربر برای دیدن هر محتوا مدت بیشتری منتظر بماند.
• Document.write: در صورت استفاده نادرست از این موضوع می‌تواند باعث مشکلات عملکردی قابل توجهی در صفحه شود زیرا از انجام سایر عملیات جلوگیری می‌کند.
• از شنوندگان غیرفعال استفاده نمی‌کند: یک شنونده غیرفعال به مرورگر اشاره می‌کند که کد جاوا اسکریپت تابعی را که از پیمایش جلوگیری می‌کند فراخوانی نمی‌کند و به مرورگر اجازه می‌دهد حتی زمانی که جاوا اسکریپت هنوز است صفحه را اسکرول کند. در حال اجرا.

نحوه رفع مشکل

حذف جاوا اسکریپت ناکارآمد موضوع بزرگ تری است که فراتر از محدوده ویدیوی Google است.

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

۴. جاوا اسکریپت استفاده نشده را حذف کنید

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

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

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

نحوه تشخیص

در گزارش Google’s PageSpeed ​​Insights به دنبال فرصت‌های زیر بگردید:

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

نحوه رفع مشکل

Google تکنیکی به نام درخت تکان دادن را توصیه می‌کند که می‌تواند برای شناسایی جاوا اسکریپتی که هرگز فراخوانی نمی‌شود، استفاده شود و حذف آن بی‌خطر است.

۵. فشرده سازی فایل های جاوا اسکریپت

مطمئن شوید که فایل های جاوا اسکریپت شما هنگام دانلود فشرده شده است. در حالی که مرورگر وب باید زمان بیشتری را برای CPU صرف کند تا محتوای فایل را از حالت فشرده خارج کند، گوگل می گوید فشرده سازی یک پیروزی کلی است.

نحوه تشخیص

گزارش PageSpeed ​​Insights بخشی دارد که فایل‌های جاوا اسکریپت را برجسته می‌کند که ممکن است از فشرده‌سازی سود ببرند.

با کلیک بر روی فعال کردن فشرده‌سازی متن به شما نشان می‌دهد که کدام فایل‌ها برای فشرده‌سازی توصیه می‌شوند.

نحوه رفع مشکل

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

۶. مدت زمان کش مناسب را برای کد جاوا اسکریپت تنظیم کنید

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

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

نحوه تشخیص

در برگه شبکه‌سازی ابزارهای برنامه‌نویس Chrome می‌توانید سرصفحه‌های پاسخ HTTP را برای فایل‌های جاوا اسکریپت که دانلود شده‌اند بررسی کنید. به دنبال سرصفحه‌هایی مانند کنترل حافظه پنهان بگردید.

در PageSpeed ​​Insights به دنبال فرصتی با عنوان ارائه دارایی های ثابت با خط مشی کش کارآمد باشید. با کلیک کردن بر روی آن، فهرستی از منابع، از جمله فایل‌های جاوا اسکریپت، که ممکن است از هدرهای کش به درستی تنظیم شده بهره مند شوند، به شما نشان می‌دهد.

نحوه رفع مشکل

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

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

برای جزئیات بیشتر در مورد هر یک از توصیه‌های بالا برای بهینه‌سازی جاوا اسکریپت، ویدیوی کامل Google را در زیر ببینید:

تصویر ویژه: Visual Generation/Shutterstock