تست سایت وردپرس در مرورگرهای مختلف

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

تست سایت در برابر مرورگرهای مختلف (Cross Browser Testing) چیست؟

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

چرا باید یک سایت وردپرس را در مرورگر های مختلف تست کنیم؟

گوگل کروم (Google Chrome) با اشتراک ۶۵ درصدی در صفحه های دسکتاپ و ۵۷ درصدی در تلفن‌های همراه ، محبوب‌ترین مرورگر اینترنت در دنیا محسوب می‌شود. با این حال ، سایر مرورگرها مانند فایرفاکس (Firefox) ، مایکروسافت اِج (Microsoft Edge) ، سافاری (Safari) و اپرا (Opera) نیز همچنان توسط میلیون‌ها کاربر در سراسر جهان مورد استفاده قرار می‌گیرند.

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

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

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

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

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

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

یافتن مرورگرهای محبوب کاربران وبسایت شما

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

به حساب Google Analytics خود وارد شوید و مسیر Audience » Technology را طی کنید. از این جا می‌توانید اطلاعات مربوط به کاربران سایت خود و موارد مورد استفاده آن‌ها در بازدید از سایت‌تان را پیدا کنید. پس از مرتب کردن لیست خود ، گزینه‌های بالای لیست را نگه داشته و از بقیه آن ها صرف‌نظر کنید.

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

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

بهترین ابزار تست سایت در برابر مرورگرهای مختلف در وردپرس

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

در ادامه ، بهترین ابزار تست مرورگر در وردپرس را برایتان معرفی خواهیم کرد:

۱- Browsershots

Browsershots یک ابزار منبع باز است که به شما این امکان را می‌دهد تا وبسایت خود را در انواع مرورگرها و سیستم‌های پردازشی تست کنید. بهترین قسمت استفاده از این ابزار این است که به طور رایگان در دسترس می‌باشد. با این حال ، این افزونه با مرورگرهای Microsoft Edge و Internet Explorer سازگار نیست و در آن‌ها تست انجام نمی‌دهد. همچنین با این ابزار نمی‌توانید وبسایت خود را در گوشی‌های موبایل تست کنید.

برای استفاده از Browsershots ، آدرس وبسایت خود را وارد کرده و مرورگرهایی که قصد تست در آن‌ها را دارید را انتخاب کنید. مرورگرها در سه دسته‌ی مخصوص سیستم‌های عامل Windows ، Linux و Mac OS طبقه‌بندی شده‌اند.

پس از تائید درخواست خود ، باید منتظر باشید تا ابزار کار خود را انجام داده و نتیجه را به صورت تصویر از صفحه (اسکرین‌شات) برای شما آماده کند. پس از پایان ، تصاویر در همان صفحه قابل رویت خواهند بود. می توانید با کلیک روی هر شات ، نمایش آن را تمام صفحه کرده و تست را بررسی کنید.

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

۲- CrossBrowserTesting

CrossBrowserTesting یک ابزار قدرتمند در زمینه‎ی تست مرورگر است که تست همزمان و ویژگی تصویربرداری را با هم ارائه می‎دهد. کار با این ابزار بسیار آسان است. برای استفاده از آن باید مبلغی را به شرکت سازنده‌ پرداخت کنید اما ، نسخه‌ای از آن به طور رایگان برای صد دقیقه در اختیار مشتری قرار می‌گیرد تا از کیفیت ابزار مطمئن شود.

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

اگر می‌خواهید به سرعت از تست‌های وبسایت خود اسکرین‌شات داشته باشید ، به لایه‌ی Screenshots بروید و وبسایت خود را با تست اسکرین‌شات امتحان کنید. ابزار CrossBrowserTesting به طور خودکار تصاویری از صفحه‌ی وبسایت شما روی سیستم‌های Mac ، Windows ، iPad و Nexus 6P با مرورگرهای Chrome ، Firefox ، Safari و مرورگرهای Microsoft Edge در اختیار شما قرار می‌دهد. این ابزار همچنین تفاوت چینش‌ها را زیر هر شات ذکر می‌کند و با کلیک روی آن می‌توانید چینش اولیه را با چینش تست شده مقایسه کنید. امکان دانلود کردن تمام تصاویر روی کامپیوترتان نیز وجود دارد.

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

۳- BrowserStack

BrowserStack ابزاری پولی در زمینه‌ی تست مرورگر و پلتفرم است که برای وبسایت‌ها و اپلیکیشن‌های موبایل مورد استفاده قرار می‌گیرد. نسخه‌ی رایگان این ابزار برای آزمایش آن ، به مدت ۳۰ دقیقه در اختیار کاربران قرار داده می‌شود.

با استفاده از این ابزار ، می‌توانید هر دو نوع تست همزمان و اسکرین شات را انجام دهید. بستر مورد نظر خود برای انجام تست را انتخاب کرده و سپس یک مرورگر انتخاب کنید. BrowserStack یک صفحه‌ی آزمایشی از مرورگر انتخاب شده با ویژگی‌های سیستم مورد نظر شما باز می‌کند و سپس با وارد کردن آدرس وبسایت خود ، می‌توانید آن را تست کنید.

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

تحلیل داده های موجود در اسکرین شات های تست مرورگر

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

اگر پوسته‌ی مورد استفاده شما در وبسایت‌تان ، یک پوسته‌ی پاسخ‌ده (responsive theme) است که با کیفیت بالا کدنویسی شده ، اکثر اسکرین‌شات‌های در اختیارتان مشابه هم به نظر خواهند آمد. با این وجود ، در برخی مواقع عناصر وب در مرورگرهای مختلف متفاوت به نظر می‌رسند. اگر این تفاوت جزئی بوده و بر رضایت‌بخش بودن عملکرد وبسایت تاثیر نمی‌گذارد ، می‌توانید آن را نادیده بگیرید.

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

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

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