ابزار جدید گوگل کروم (Chrome) برای رفع مشکلات چیدمان صفحات وب

مرورگر Chrome اخیرا در نسخه‌ی Canary خود، ابزار جدیدی به نام “Layout Shift Culprits” معرفی کرده است. این ابزار به توسعه‌دهندگان کمک می‌کند تا مشکلات چیدمان صفحات وب را شناسایی و رفع کنند.

نسخه‌ی جدید Chrome Canary، ویژگی “Layout Shift Culprits” را اضافه کرده است که به‌طور بصری مشکلات چیدمان صفحه را شناسایی می‌کند. این ابزار به توسعه‌دهندگان این امکان را می‌دهد که تغییرات چیدمان را به‌صورت لحظه‌ای مشاهده و بازپخش کنند تا بتوانند مشکلات خاص را به‌خوبی تشخیص دهند. این ویژگی در آینده از نسخه‌ی Chrome Canary به نسخه‌های پایدار Chrome منتقل خواهد شد، اما تاریخ دقیق آن هنوز اعلام نشده است.

امکانات اصلی
این ابزار در پنل Insights کروم قرار دارد و قابلیت‌های زیر را ارائه می‌دهد:

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

چیدمان صفحه.

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

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

چرا این ابزار مهم در گوگل Chrome است؟

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

• تجربه کاربری
• رتبه‌بندی در نتایج جستجو (SEO)
• قابلیت استفاده و نمایش صحیح در موبایل
• امتیازهای عملکرد صفحه

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

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

کاربردهای عملی

این ابزار جدید می‌تواند به توسعه‌دهندگان در موارد زیر کمک کند:

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

جمع‌بندی

این ویژگی در حال حاضر در Chrome Canary در دسترس است و می‌تواند تاثیرات مهمی در بهینه‌سازی عملکرد وبسایت‌ها داشته باشد. این ابزار به توسعه‌دهندگان امکان می‌دهد تا بازخورد بصری و لحظه‌ای از تغییرات چیدمان را دریافت کنند و فرایند دیباگینگ را به‌صورت کارآمدتری انجام دهند.

توسعه‌دهندگان می‌توانند Chrome Canary را به‌طور جداگانه از نسخه پایدار مرورگر Chrome دانلود کنند و از هر دو نسخه به‌صورت همزمان برای تست بهره ببرند.

منبع: searchenginejournal