نحوه استفاده از Selenium و کاربرد آن در بارگذاری صفحات – بخش اول

تعدادی معیار وجود دارد که در طول فرایند توسعه و انتشار هر محصول نرم‌افزاری در نظر گرفته می‌شوند. یکی از این معیارها "تجربه کاربری" است که بر سهولت استفاده مشتریان از محصول شما متمرکز شده است. ممکن است محصولی تولید کرده باشید که مشکلی را حل کند، اما اگر مشتریان شما در استفاده از آن با مشکل روبرو شوند، شروع به جستجوی گزینه‌های دیگر می‌کنند. از جمله وب سایت یا برنامه‌های وب که طراحی وب بهتر، سرعت بارگذاری بالاتر، قابلیت استفاده (سهولت استفاده)، نیاز به حافظه کمتر و موارد دیگر را ارائه می‌دهند. در این مقاله قصد داریم به شما نشان دهیم چگونه می‌توانید زمان بارگذاری صفحه را توسط Selenium برای تست خودکار مرورگر اندازه گیری کنید. قبل از انجام این کار، ابتدا باید ارتباط زمان بارگیری صفحه برای یک وب سایت یا یک برنامه وب را درک کنیم.

چرا اندازه گیری زمان بارگذاری صفحه اهمیت دارد؟

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

موتورهای جستجوی محبوب برای تعیین سرعت سایت یا سرعت صفحه، زمان لازم برای دریافت اولین بایت را اندازه می‌گیرند. از این رو صفحاتی که کند رندر می‌شوند، می‌توانند ضربه بزرگی به رتبه بندی موتور جستجو وارد کنند. سرعت پایین صفحه همچنین به این معنی است که خزنده (crawler) موتور جستجو می‌تواند تعداد کمتری از صفحات را به اصطلاح ایندکس کند، که در نهایت در رتبه بندی نشان داده می‌شود.

واقعیتی که برای اکثر ما شناخته شده این است که اگر وب سایتی UX کاربر پسندتری را با زمان بارگذاری صفحه سریعتر در تلفن همراه ارائه دهد، گوگل برای آن وب سایت ارزش بیشتری قائل می‌شود و آن را در نتایج جستجوی تلفن همراه در رتبه بندی بهتر قرار می‌دهد. برای این منظور گوگل در 21 آوریل 2015 الگوریتم جدیدی برای mobile-friendly عرضه کرد. بنابراین مهم است که یک وب سایت تلفن همراه را برای آن تست کنید.

این قضیه فقط مختص گوگل نیست، بلکه اگر صفحات وب سایت شما با سرعت بالا لود نشوند، مشتریان شما نیز استفاده از وب سایت یا برنامه وب شما را ترجیح نمی‌دهند. حتی یک ثانیه تأخیر در زمان بارگیری صفحه می‌تواند باعث افزایش نرخ پرش و کاهش تعداد بازدید صفحه شود. این امر همچنین تأثیر منفی بر نرخ کلیک (CTR) و نرخ تبدیل خواهد گذاشت. به زبان ساده اندازه گیری زمان بارگذاری صفحه (که به آن سرعت صفحه نیز گفته می‌شود) مدت زمانی است که برای نمایش محتوا در صفحه طول می‌کشد. در نتیجه زمان بارگذاری صفحه کمتر منجر به ضریب استفاده بیشتر از محصول و نرخ تبدیل بهتر می‌گردد.

معیارهایی برای اندازه گیری زمان بارگذاری صفحات

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

1. فشرده سازی فایل‌ها و بهینه سازی تصاویر.
2. حافظه کش مرورگر.
3. کاهش تعداد redirectها.
4. کاهش استفاده از جاوااسکریپت non-blocking.
5. استفاده از تصاویر با اندازه‌های متغیر بسته به دستگاه مورد استفاده مشتری.

به کارگیری موارد بالا از وظایف توسعه دهندگان است، اما چگونه می‌توان با اندازه گیری زمان بارگذاری صفحه، وب سایت را تست کرد؟

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

اگر از مرورگرهای مختلف (یا حتی نسخه‌های مختلف) به وب سایت دسترسی پیدا کنید، ممکن است زمان بارگیری صفحه متفاوت باشد. این امر بستگی به سیستم (دسکتاپ، تبلت، تلفن همراه و ...) و موقعیت جغرافیایی محل دسترسی به وب سایت یا برنامه وب شما دارد. شما نمی‌توانید به صورت دستی هر ترکیبی (صفحه وب + نوع مرورگر + نسخه مرورگر + سیستم‌عامل) را امتحان کنید. اینجاست که شبکه Selenium با توانمند سازی شما برای انجام تست خودکار مرورگر برای صفحات وب به شما کمک می‌کند. به منظور اندازه گیری زمان بارگذاری صفحه با Selenium می‌توانید تست اتوماسیون را انجام دهید. قبل از انجام این کار، مهم است که نگاهی به زمان بندی پیمایش بیندازیم.

استفاده از Navigation Timing برای اندازه گیری سرعت بارگذاری صفحه

سرعت بارگذاری صفحه را چگونه می‌توان اندازه گیری کرد؟ زمان بندی پیمایش (Navigation Timing) یک API محبوب جاوااسکریپت است که می‌تواند برای اندازه گیری دقیق عملکرد در وب استفاده شود. اگرچه کتابخانه‌های دیگری نیز در دسترس است، اما زمان بندی پیمایش قابل اطمینان‌تر و دقیق‌تر می‌باشد.

Navigation Timing API در اکثر مرورگرهای معروف وب یعنی فایرفاکس، کروم، اینترنت اکسپلورر و موارد دیگر در دسترس است. با توجه به اینکه تعدادی رابط برای Navigation Timing وجود دارد، با استفاده از ویژگی‌های شی window.performance می‌توان به بسیاری از جزئیات مربوط به زمان بارگذاری صفحه دسترسی داشت. window.performance نتایج دقیق‌تری را برمی‌گرداند؛ زیرا این API از HRT (High-Resolution Time) برای محاسبه زمان بندی‌های لازم مربوط به یک صفحه وب استفاده می‌کند.

ویژگی‌های مهم شی window.performance عبارتند از:

پیمایش (navigation) - جزئیات مربوط به نحوه حرکات و رفتار کاربر در صفحه وب.
زمان بندی (timing) - اطلاعات مربوط به رویدادهای بارگیری صفحه.

رابط‌های دیگری که به عنوان بخشی از Navigation Timing API در دسترس هستند شامل PerformanceNavigationTiming، PerformanceTiming و PerformanceNavigation می‌باشند. داده‌ها با کمک XHR (XMLHttpRequest) از سمت کلاینت به سمت سرور رانده می‌شوند. سپس با استفاده از Navigation Timing API می‌توانید تبی را برای هر درخواست نگه دارید. به علاوه زمان بارگیری صفحه جدید، زمان بارگیری نشدن صفحه قبلی، زمان جستجوی نام دامنه، زمان بارگذاری کل، زمان شروع پاسخگویی و ... برخی از خصوصیاتی هستند که می‌توان از طریق window.performance به آنها دسترسی پیدا کرد. تصویر زیر نمایانگر عناصر رابط PerformanceTiming است.

ویژگی زمان بندی اطلاعات مهم مربوط به عملکرد صفحه فعلی را برمی‌گرداند. به عنوان مثال جزئیات مربوط به navigationStart،ConnectStart ،connectEnd ، domainLookupStart، domainLookupEnd و موارد دیگر.

شکل زیر ترتیب عملکرد رویدادهای navigation.timing را نشان می‌دهد. هر خصوصیت performance.timing هم زمان رویداد پیمایش را مشخص می‌کند. اینکه چه زمانی صفحه قبلی بارگیری نشده؟ چه زمانی آخرین صفحه درخواست شده؟ چه زمانی DOM بارگیری صفحه را شروع کرده؟ و موارد دیگر. این زمان‌ها بر حسب میلی ثانیه است که از اول ژانویه 1970 بر حسب UTC محاسبه می‌شود. برای کسب اطلاعات بیشتر در مورد هر رویداد می‌توانید به مستندات رسمی W3C برای رابط PerformanceTiming نگاهی بیندازید.

اگرچه می‌توانید از طریق سورس کد خود به window.performance دسترسی پیدا کنید، اما برای اجرای عملی window.performance می‌توانید از طریق کنسول debug مرورگر (فایرفاکس، کروم و ...) به این گزینه دسترسی پیدا کنید. به عنوان مثال وب سایت LambdaTest را در مرورگر خود باز کنید. ما از مرورگر فایرفاکس برای این کار استفاده می‌کنیم. اکنون گزینه Inspect Element را بزنید تا به کنسول debug بروید. در پنجره کنسول console and key را در window.performance.timing باز کنید. همانطور که در تصویر خروجی دیده می‌شود، window.performance شی عملکردی را که حاوی ویژگی زمان بندی است برمی‌گرداند.

ادامه مقاله را در بخش دوم دنبال کنید.

منبع