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

بی‌مقدمه برویم سراغ اصل مطلب. تصویر آشنای زیر و گیرهای همیشگی ابزار «تست سرعت گوگل»، داغ دل خیلی از سئوکاران را تازه می‌کند.اما حرف حساب گوگل چیست و چکار باید کرد؟در اینجا با سه شاخص مهم گوگل طرف هستیم: TTI، LCP و TBT.شاخص Time to Interactive یا TTI یعنی حدفاصل زمانی بین نقطه‌ای که محتوای صفحه لود شده و نقطه‌ای که صفحه برای کاربر قابل استفاده می‌شود.شاخص Largest Contentful Paint یا LCP یعنی مدت زمانی که طول می‌کشد تا وب‌سایت بیشترین محتوا را روی صفحه نمایش به کاربر نشان دهد و آماده استفاده کند.شاخص Total Blocking Time یا TBT یعنی کل مدت زمانی که صفحه وب امکان پاسخ به درخواست کاربر را (اعم از کلیک، لمس صفحه، اسکرول و غیره) ندارد.در اکثر موارد در پشت زمان بالای این شاخص‌ها، پای یک یا چند فایل CSS و به خصوص JS در میان است. پس باید راهی پیدا کرد که بتوان از شر این اسکریپت‌های مزاحم در هنگام مراجعه کاربر خلاص شد. اما چطور؟تاخیر در اجرای اسکریپت‌هافرض کنیم که شما در سایت خود یک افزونه گفتگوی آنلاین با پشتیبانی، سبد خرید شناور، ری‌کپچای گوگل برای جلوگیری از اسپم‌ها و گوگل آنالیتیکس برای ردیابی و جمع‌آوری اطلاعات بازدیدکنندگان را نصب کرده‌‌اید. اتفاقی که می‌افتد اینست که به محض ورود کاربر به صفحه، فایل‌های جاوااسکریپتِ همه این‌ها یک به یک دانلود و اجرا می‌شوند. در حالیکه در بدو ورود کاربر به صفحه هیچ‌کدام از این اسکریپت‌ها واقعا ضرورتی ندارند و می‌توانند با یک یا چند ثانیه تاخیر هم اجرا بشوند و یا حتی اجرایشان منوط به Interaction با کُنش خاصی از سمت کاربر بشود (مثل لمس صفحه موبایل، اسکرول صفحه و غیره). پس تا اینجا سرنخ این کلاف سردرگم دستمان آمده.«تاخیر» در برابر «تعویق» اسکریپتاما حالت تاخیر (Delay) را نباید با ویژگی تعویق (Defer) اشتباه گرفت. ویژگی Defer که قبلا در این مطلب به آن اشاره شد، به مرورگر می‌گوید که هنگام برخورد با یک اسکریپت خارجی متوقف نشود و آن را همزمان با پروسه لود ساختار HTML صفحه دریافت کند، منتها اجرایش را به انتهای این پروسه بسپارد. اما در حالت Delay، مرورگر با شروع لود صفحه اسکریپت‌ها را با چند ثانیه تاخیر دریافت و اجرا می‌کند.بنابراین می‌توان برای یک اسکریپت واحد، همزمان از ویژگی‌های Delay و Defer استفاده کرد. منتها در این حالت همیشه Delay نسبت به Defer تقدم دارد و Defer صرفا حکم بازیکن ذخیره را پیدا می‌کند تا اگر زد و گزینه اول به هر دلیل با مشکل مواجه شد، لااقل دومی جایگزینش شود.نحوه لود فایل‌های جاوااسکریپت با 2 ثانیه تاخیر (برای امکان مقایسه بهتر، jQuery مستثنی شده است)الگوریتم‌های گوگل را می‌توان فریب داد، اما «تجربه کاربری» را نه!به تاخیر انداختن اجرای اسکریپت‌های یک صفحه به نفع لود سریع‌تر و کسب امتیاز بالاتر طبق معیارهای گوگل، البته یک ایده جدید یا شاهکار نوآورانه نیست و اگر بخواهیم خودمانی‌تر صحبت کنیم، نوعی تقلب تکنیکی است! اما به هر تا زمانی که گوگل الگوریتم‌هایش را تغییر نداده می‌توان از این ترفند استفاده کرد.ولی همچنان باید یادآوری کنم که ابزار «تست سرعت گوگل» (PSI) سایت شما را هم در یک محیط لابراتواری یا آزمایشگاهی می‌سنجد (Lab Data) و هم با استفاده از تجربه کاربر در دنیای واقعی (UX). آنچه در این میان اهمیت بیشتری دارد همین تجربه کاربری در واقعیت است. به این ترتیب که گوگل از مرورگر کرومِ کاربران داده‌هایی را جمع‌آوری و تحت عنوان گزارش تجربه کاربری (CrUX) به سرورهایش ارسال می‌کند. بنابراین هر چند می‌توان PSI را با انواع ترفندها در محیط لابراتواری فریب داد و امتیاز بالا گرفت، ولی در نهایت تجربه کاربری واقعی است که حرف آخر را می‌زند. وقتی فاصله بین امتیاز PSI و تجربه کاربری زیاد بشود، بالاخره در عمل تاثیر منفی‌اش را روی رتبه وب‌سایت شما (از نظر گوگل) خواهد گذاشت. بنابراین ایجاد تاخیر در اجرای اسکریپت‌ها گرچه در ابتدا می‌تواند امتیاز PSI را بالا ببرد، اما «اگر» در عمل باعث افت تجربه کاربری شود مجددا این امتیاز را مورد تجدیدنظر و کاهش قرار خواهد داد.پس خلاصه کنم. تاخیر در اجرای اسکریپت‌ها نباید باعث اختلال در برخی عملکردهای سایت، لود غیرطبیعی صفحه وب و تجربه بد کاربری بشود.نحوه تاخیر در اجرای اسکریپت‌هاافزونه‌های مختلف بهینه‌سازی و افزایش سرعت سایت غالبا گزینه تاخیر در اجرای اسکریپت‌ها را دارند (حال به صورت اختیاری یا پیش‌فرض). منتها تنها تفاوت بین آن‌ها اینست که برخی این کار را بهتر انجام می‌دهند، برخی بدتر؛ برخی رایگان انجام می‌دهند و برخی بابتش پول زور هم می‌گیرند!برخلاف افزونه‌های بازاری موجود -مثل WP Rocket، Perfmatters، Nitropack و غیره- افزونه WP Meteor با اختلاف زیادی از همه جلوتر است و غیر از رایگان بودن، مهمترین ویژگی‌اش اینست که با معروف‌ترین و پرکاربردترین افزونه‌های بهینه‌سازی و کش سایت سازگاری دارد.و اما چند نکته:اول. اگر از این افزونه استفاده می‌کنید، بهتر است که مدت زمان تاخیر در اجرای اسکریپت‌ها از 1 ثانیه (مقدار پیش‌فرض) به 2 ثانیه افزایش پیدا کند تا نتیجه دلخواه گرفته شود.دوم. بسته به نیاز می‌توان زمان تاخیر را هر عددی در بازه 1 تا 2 ثانیه و یا خارج از آن انتخاب کرد. برای اینکار می‌توانید کد زیر را به فایل functions.php اضافه کنید (به جای 1500، هر عددی را بر حسب میلی‌ثانیه بنویسید).add_filter('wp-meteor-frontend-adjust-wpmeteor', function ($wpmeteor, $settings) { $wpmeteor['rdelay'] = 1500; // number of milliseconds to delay return $wpmeteor; }, 100, 2);سوم. بعد از تاخیر در اسکریپت‌های سایت، باید همه قسمت‌های سایت را (به خصوص اگر فروشگاهی باشد) با دقت بررسی کرد تا مطمئن شد که عملکردهای سایت مختل نشده باشند. در صورت بروز مشکل می‌توان هم اسکریپت‌ها و هم صفحات مشکل‌دار را مستثنی کرد. قابلیت انتخاب اسکریپت‌هایی که باید معاف از تاخیر شوند در خود افزونه لحاظ شده و مستثنی کردن برگه‌ها هم با اضافه کردن کد زیر به فایل functions.php قابل انجام است (به جای 1، آی‌دی برگه مورد نظر خود را بنویسید).add_filter('wpmeteor_enabled', function ($value) { global $post; if ($post && $post->ID == 1) { return false; } return $value; });چهارم. استفاده از ویژگی Delay می‌تواند روی عملکرد برخی اسکریپت‌ها تاثیر بگذارد. مثلا در مورد اسکریپت گوگل آنالیتیکس، اجرای آن با تاخیر می‌تواند آمارها را یک مقدار خیلی جزئی پایین بیاورد؛ منتها این اتفاق الزاما هم چیز بدی نیست. چون گوگل همه بات‌ها یا اسپم‌ها را از نتایج آمار بازدیدگان سایت فیلتر نمی‌کند و بنابراین با تاخیر در اجرای اسکریپ گوگل آنالیتیکس و منوط کردنش به کُنش از سمت کاربر واقعی، می‌توان آمارها را به نوعی واقعی‌تر هم کرد. از طرف دیگر ممکن است که میزان Bounce Rate سایت (یعنی درصد بازدیدکنندگانی که به یک سایت وارد می‌شوند، اما بدون کلیک روی سایر صفحات از آن خارج می‌شوند) کمی نوسان پیدا کند. اما همانطور که گفته شد می‌توان گوگل آنالیتیکس یا سایر اسکریپت‌های مشابه را به سادگی از تاخیر در اجرا معاف کرد.پنجم. استفاده از این روش ممکن است باعث افت رتبه در سایر ابزارهای تست سرعت مثل GTMetrix شود، ولی این موضوع اهمیتی ندارد. چون جی‌تی‌متریکس از متریک‌ها و معیارهایی استفاده می‌کند که با گوگل تفاوت‌هایی دارد؛ از جمله اینکه زمان لود کامل محتوای صفحه و هر آنچه را که در آن است می‌سنجد و معیار قرار می‌دهد (یعنی مثلا اگر شما یک نقشه گوگل در فوتر سایت خود قرار بدهید که لود آن 5 ثانیه طول بکشد، جی‌تی‌متریکس این را در مدت زمان لود کامل صفحه و رتبه شما لحاظ می‌کند و از این جهت کمی گمراه‌کننده است). در حالیکه آنچه به درستی برای گوگل اهمیت دارد اینست که به محض ورود کاربر به یک سایت، چه مدت زمانی طول می‌کشد تا او بتواند با صفحه ارتباط بگیرد و Interact داشته باشد. پس هرچه زودتر، بهتر. بنابراین معیار ما گوگل است و گوگل هم طبق ضوابط خودش پیش می‌رود و به رتبه و امتیاز تست سرعت سایت شما در سایر ابزارها کمترین اهمیتی نمی‌دهد. پس قرار نیست همه این ابزارها را راضی کنید.ششم؛ اگر قصد مقایسه لود سایت را در دو حالتِ با و بدون تاخیر در اسکریپت‌ها دارید، نیازی نیست که هر بار افزونه را فعال و غیرفعال کنید و تست بگیرید. کافی است رشته ?wpmeteordisable را به انتهای آدرس صفحه اضافه کنید تا به صورت عادی و بدون تاخیر در اجرای اسکریپت‌ها لود شود. برای مثال:https://example.com/?wpmeteordisableوندا نوژنمطالب مرتبط:کوچک‌سازی کدهای HTML چیست و چطور عمل می‌کند؟بهبود سرعت سایت: استفاده از افزونه کش و کاهش زمان پاسخگویی سرور(TTFB)تست سرعت سایت: استایل‌های مزاحم و خطای Render Blockingتست سرعت سایت: اسکریپت‌های مزاحم و خطای Render Blockingافزونه Asset Cleanup: یک ضرورت برای افزایش سرعت سایت وردپرسی شما!افزایش سرعت سایت‌های فروشگاهی وردپرس