اگرچه جاوا اسکریپت برای تعامل بهتر کاربر و برای تجربه کاربری از ستون اصلی یک وب‌سایت است اما گاها باعث به وجود آمدن مشکلاتی زیادی می‌شود. در این پست آموزشی از کامی سئو قصد داریم در رابطه با 6 رکن بهینه سازی جاوا اسکریپت از زبان آلن کنت، توسعه‌دهنده برجسته گوگل باهم به گفتگو بپردازیم.
بدون شک بهینه سازی سرعت سایت از نکات مهم سئو تکنیکال است که بخشی از آن به بهینه سازی جاوا اسکریپت برمیگردد که در این بخش پوشش داده شده است.
نکات مهم بهینه سازی جاوا اسکریپت از دیدی گوگل
در ویدیوی زیر از Google، توسعه‌دهنده مدافع، آلن کنت، شش راه برای بهینه سازی جاوا اسکریپت برای بهبود عملکرد وب‌سایت شما به اشتراک می‌گذارد. کنت مشکلات عملکرد رایج ناشی از جاوا اسکریپت را شناسایی می‌کند و مراحلی را که می‌توانید برای رفع آن‌ها انجام دهید را شرح می‌دهد.
1. جلوگیری از افزایش فایل‌های جاوا اسکریپت در سایت
اولین نکته در بهینه سازی جاوا اسکریپت این است که از افزایش تعداد فایل‌های جاوا اسکریپت در سایت خود اجتناب کنید. اگر مراقب نباشید و زیاده‌روی کنید، ممکن است تعداد فایل‌های جاوا اسکریپت بیش‌ازحد باشد، به‌خصوص اگر هر مؤلفه رابط کاربری در یک فایل جداگانه باشد.
کاهش تعداد فایل‌های جاوا اسکریپت که مرورگر باید دانلود کند می‌تواند عملکرد وب‌سایت را بهبود بخشد.
چگونه به این مشکل پی ببریم؟
- بخش Opportunity در گزارش PageSpeed Insights توصیه‌های خاص مخصوص سایت شمارا فهرست می‌کند.
- به دنبال گزینه هایی باشید که مربوط به جاوا اسکریپت شما برای بهینه سازی آن است. یا عبارت keep request counts low and transfer sizes small را پیدا کنید.
- بر روی توصیه برای خلاصه‌ای از تعداد و اندازه انواع منابع درخواستی ازجمله فایل‌های جاوا اسکریپت کلیک کنید.
چگونه آن را رفع کنیم؟
- روش‌های مختلفی برای بهینه سازی جاوا اسکریپت وجود دارد. یکی از گزینه‌هایی که گوگل توصیه می‌کند این است که فایل‌های کوچک‌تر را باهم ترکیب کنید تا یک فایل واحد و بزرگ‌تر برای دانلود داشته باشید.
- راه‌حل دیگر پشتیبانی از HTTP2 در سایت شما است. برای این مورد با پشتیبانی هاستینگ خود تماس بگیرید.
2. برای بهینه سازی جاوا اسکریپت از تعداد زیادی DNS استفاده نکنید
از تعداد زیاد جستجوی DNS برای فایل‌های جاوا اسکریپت مرجع اجتناب کنید، زیرا این کار می‌تواند اولین بازدید کاربر از سایت شمارا کند.
چگونه تشخیص دهیم:
- PageSpeed Insights می‌تواند فهرستی از نام‌های دامنه مورداستفاده در URL ها را در بخش‌هایی مانند کاهش زمان اجرای جاوا اسکریپت به شما نشان دهد.
- برگه network در ابزار توسعه‌دهنده کروم یا بخش inspect راه دیگری برای مشاهده همه نام‌های دامنه ارجاع شده است.
چگونه آن را رفع کنیم:
- برای کاهش تعداد جستجوهای DNS، گوگل به شما پیشنهاد می‌کند یک کپی از فایل‌های جاوا اسکریپت مرجع خارجی را در سایت خود میزبانی کنید.
3. جاوا اسکریپت ناکارآمد را حذف کنید
یکی دیگر از نکات بهینه سازی جاوا اسکریپت حذف جاوا اسکریپت ناکارآمد است کنید، زیرا می‌تواند سرعت صفحات وب را کاهش دهد و منجر به تجربه ضعیف کاربر شود.
چگونه آن‌ها را تشخیص دهیم؟
در گزارش PageSpeed Insights گوگل به دنبال فرصت‌های زیر باشید:
- Reduce JavaScript execution time: این اسکریپت ها را گزارش می‌کند که در آن مقدار زیادی از زمان CPU صرف تجزیه یا اجرای کد جاوا اسکریپت شده است.
- Eliminate render blocking resources: این شامل جاوا اسکریپت است که ممکن است قبل از رندر شدن صفحه اجرا شود و باعث می‌شود کاربر برای دیدن هر محتوا مدت بیشتری منتظر بماند.
- write: در صورت استفاده نادرست از این می‌تواند باعث مشکلات عملکردی قابل‌توجهی در صفحه شود زیرا مانع از وقوع سایر عملیات می‌شود.
- Does not use passive listeners: این گزینه به مرورگر اشاره می‌کند که کد جاوا اسکریپت تابعی را که از پیمایش جلوگیری می‌کند فراخوانی نمی‌کند و به مرورگر اجازه می‌دهد حتی زمانی که جاوا اسکریپت هنوز در حال اجرا است صفحه را اسکرول کند.
چگونه آن را رفع کنیم:
- راه‌حل‌ها معمولاً شامل نوشتن کد جاوا اسکریپت به شکل متفاوتی است. تکنیک‌ها شامل نمایه‌سازی کدهای موجود و نوشتن نسخه‌های کوچک‌شده کد است.
4. حذف جاوا اسکریپت استفاده‌نشده برای بهینه سازی جاوا اسکریپت
حذف جاوا اسکریپت استفاده‌نشده نیز می‌تواند باعث بهینه سازی جاوا اسکریپت شود، اما گوگل می‌گوید این مشکل یک مشکل رایج و راه‌حلی برای آن به‌صورت مطلق و کامل وجود ندارد.
استفاده مجدد از کد در سراسر سایت‌ها می‌تواند منجر به گنجاندن جاوا اسکریپتی شود که موردنیاز نیست. جاوا اسکریپتی که هرگز فراخوانی نمی‌شود هنوز باید توسط مرورگر وب دانلود و تجزیه شود که باعث اتلاف منابع می‌شود.
چگونه این مشکل را تشخیص دهیم؟
در گزارش PageSpeed Insights گوگل به دنبال گزینه‌های زیر باشید:
- Reduce unused JavaScript: این جاوا اسکریپت را به شما نشان می‌دهد که به‌عنوان بخشی از بارگذاری یک صفحه اجرانشده است.
- Avoid enormous network payloads: با فراخوانی دانلودهای بزرگ کتابخانه، مناطقی را برای بهبود شناسایی می‌کند.
- Minimize main-thread work: شامل زمان صرف شده برای تجزیه، کامپایل و اجرای جاوا اسکریپت است.
چگونه رفع آن:
- گوگل تکنیکی به نام درخت تکان دادن (tree-shaking) را توصیه می‌کند که می‌تواند برای شناسایی جاوا اسکریپتی که هرگز فراخوانی نمی‌شود، استفاده شود که پاک کردن آن بی‌خطر است.
5. فشرده‌سازی فایل‌های جاوا اسکریپت
مطمئن شوید که فایل‌های جاوا اسکریپت خود را فشرده کرده‌اید. درحالی‌که مرورگر وب باید زمان بیشتری برای CPU صرف کند تا محتوای فایل را از حالت فشرده خارج کند، گوگل می‌گوید فشرده‌سازی یک‌راه عالی برای بهینه کردن صفحه است.
چگونه فایل‌های غیر فشرده را تشخیص دهیم؟
- گزارش PageSpeed Insights دارای بخشی است که فایل‌های جاوا اسکریپت را برجسته می‌کند که ممکن است فشرده نشده باشند.
- با کلیک بر روی فعال کردن فشرده‌سازی (Enable text compression) به شما نشان می‌دهد که کدام فایل‌ها برای فشرده‌سازی توصیه می‌شوند.
چگونگی رفع این مشکل:
- اکثر مرورگرهای وب یا سیستم‌های مدیریت محتوا دارای پشتیبانی داخلی برای فشرده‌سازی دانلودها در صورت پیکربندی صحیح هستند.
6. تنظیم مدت‌زمان کش مناسب
برای بهینه سازی بهتر جاوا اسکریپت بررسی کنید که فایل‌های جاوا اسکریپت شما با هدرهای زمان انقضای کش مناسب برگردانده شده باشند. این به مرورگرها کمک می‌کند تا از سربار بررسی اینکه آیا فایل‌های جاوا اسکریپت در حافظه پنهان آن قدیمی هستند، اجتناب کنند که باعث بهبود عملکرد می‌شود.
چگونه آن را تشخیص دهیم؟
- در network شبکه ابزارهای برنامه‌نویس کروم (Chrome Developer Tools)، می‌توانید سرصفحه‌های پاسخ HTTP را برای فایل‌های جاوا اسکریپت دانلود شده بررسی کنید. به دنبال هدرهایی مانند کنترل کش باشید.
- در PageSpeed Insights به دنبال گزینه‌ای با عنوان erve static assets with an efficient cache policy باشید. با کلیک بر روی آن، فهرستی از منابع، ازجمله فایل‌های جاوا اسکریپت که ممکن است از هدرهای کش مناسب بهره‌مند شوند، به شما نشان می‌دهد.
چگونه آن را رفع کنیم؟
- یک‌راه برای افزایش حافظه پنهان فایل‌های رایج جاوا اسکریپت، ارجاع فایل‌ها از یک مکان عمومی مشترک است.
- اگر کاربر از سایت‌هایی بازدید کند که از یک فایل جاوا اسکریپت مجدد استفاده می‌کنند، مرورگر می‌تواند از نسخه دانلود شده قبلی فایل استفاده کند که عملکرد را بهبود می‌بخشد.
منبع:
https://www.searchenginejournal.com/6-javascript-optimization-tips-from-google/451021/#close
کامل بهرامی: دانش‌آموخته کارشناسی ارشد رشته مهندسی کامپیوتر گرایش نرم‌افزار از دانشگاه ارومیه هستم. به حوزه کامپیوتر، برنامه‌نویسی و فناوری اطلاعات علاقه‌مند‌م و در حوزه‌های مذکور در مکتب خونه، مجله فرادرس، هاست ایران، مدیااد، تپسل، متریکس، سبز لرن و غیره تولید و ویراستاری محتوا انجام می‌دهم. هم‌اکنون سه سال است که در این حوزه مشغول به کار هستم و بالای 6000 مقاله در سطح وب دارم. از سال ١٤٠١ به بعد به عنوان ویراستار و مدیر تیم نویسنده‌ها در مکتب خونه فعالیت مستمر دارم.
