أداة فعالة للغاية لتصور مصدر تغيير التخطيط التراكمي (CLS) بالضبط وزيادة تصنيف صفحتك وبالتالي تجربة زوارك.
يقوم بإنشاء صورة GIF متحركة توضح تحركات العناصر أثناء تحميل صفحتك.
في بعض الحالات، يكون أكثر فعالية بكثير من مخطط تحميل الشلال.
تحليل تغيير التخطيط التراكمي
- حر
- لا يتطلب التنزيل/التثبيت
- لا حاجة للتسجيل
التخصصات: أداء المواقع الإلكترونية، تطوير المواقع الإلكترونية، تصميم تجربة المستخدم، تحسين محركات البحث.
بديل مجاني لبرامج Lighthouse و WebPageTest و Chrome DevTools.
| تحليل تغيير التخطيط التراكمي | منارة | اختبار صفحة الويب | أدوات مطوري Chrome |
|---|---|---|---|
| Output: يُنتج البرنامج صورة GIF توضح العناصر المتحركة في نافذة العرض، ويُعيد قيمة CLS. قد يصعب تحديد العناصر التي تحركت في الصفحات التي تحتوي على حركة رأسية كثيرة. | Output: يُدرج التقرير CLS ضمن فئات عرض المحتوى الأول، ومؤشر السرعة، وإجمالي وقت الحظر، وأكبر محتوى مُعرض. ويكون الناتج الافتراضي تقريرًا بتنسيق HTML، بينما يتوفر بتنسيق JSON باستخدام علامة. | Output: يعرض شريط الفيلم الإطارات الرئيسية للتحميل، ويحمل مخطط تسلسل التحميل خطًا أحمر متزامنًا مع شريط الفيلم. تُعرّف الوثائق CLS بأنه مقياس لمدى تغير التخطيط داخل نافذة العرض أثناء تحميل الصفحة. | Output: يعرض مسار تغييرات التخطيط في لوحة الأداء التغييرات على شكل معينات أرجوانية، مجمعة في مجموعات. يؤدي تمرير المؤشر فوق العنصر إلى تمييزه في نافذة العرض، وتعرض علامة التبويب "الملخص" التوقيتات والنتائج والعناصر المتأثرة والأسباب المحتملة. |
| شروط الاختبار: تم تثبيت منفذ عرض سطح المكتب عند 1920 × 1080. يستخدم الهاتف المحمول ملف تعريف Lighthouse Nexus 5X، ويتم تقييد وحدة المعالجة المركزية والشبكة لمحاكاة شبكة 3G جيدة. | شروط الاختبار: يعمل هذا البرنامج على متصفح Chrome محليًا، من خلال أدوات المطورين، أو سطر الأوامر، أو وحدة Node، أو أداة PageSpeed Insights. يتطلب سطر الأوامر الإصدار 22 من Node أو إصدارًا أحدث. | شروط الاختبار: تُجرى الاختبارات على متصفحات حقيقية من مواقع مختلفة حول العالم في ظل ظروف شبكة قابلة للتخصيص. ويُقدّم متصفح كروم أكبر قدر من المعلومات. | |
| تعريف CLS: يستخدم الإصدار 1.2.0 مقياس الحد الأقصى لنافذة الجلسة. ويتم تطبيق التقييد أثناء الاختبار. | تعريف CLS: لا تلتقط أدوات المختبر مثل Lighthouse التحولات إلا أثناء تحميل الصفحة، لذلك قد تكون القيم أقل مما يختبره المستخدمون الحقيقيون. | تعريف CLS: ينطبق نفس القيد المختبري. النتيجة هي حاصل ضرب نسبة التأثير ونسبة المسافة، والهدف هو 0.1 أو أقل. | تعريف CLS: لكل وردية درجة خاصة بها في علامة التبويب "الملخص". يقوم نظام CLS بتجميع الورديات في فترات زمنية تصل إلى 5 ثوانٍ، مع وجود فجوات أقل من ثانية واحدة. |
| الانفتاح والأتمتة: يتم تثبيت نسخة سطر الأوامر باستخدام npm (layout-shift-gif). تستقبل هذه النسخة خيارات عنوان URL والجهاز والإخراج، بالإضافة إلى ملف تعريف ارتباط اختياري، وتدعم شهادات HTTPS الموقعة ذاتيًا. تطلب الصفحة تبرعات اختيارية عبر Ko-fi. | الانفتاح والأتمتة: برنامج Lighthouse مرخص بموجب رخصة Apache-2.0. ويمكن تشغيله في بيئة التكامل المستمر (CI) من خلال Lighthouse CI وكوحدة Node. | الانفتاح والأتمتة: يحتوي المستودع على فرع رئيسي ضمن Polyform Shield 1.0.0 وفرع Apache ضمن Apache 2.0. ويوثّق تشغيل نسختك الخاصة وواجهة برمجة تطبيقات REST. تتطلب معظم التجارب WebPageTest Pro. |
المواضيع المغطاة: تغيير التخطيط التراكمي، CLS، درجة الصفحة، تجربة الزائر، GIF المتحرك، حركة العناصر، تحسين التحميل، واجهة المستخدم، أداء الويب، التحليل المرئي، مخطط التحميل، مقاييس الويب، ISO 9241، ISO/IEC 25010، ISO 25012، ISO 25000، وISO 9241-11..
أكثر الشبكة والويب tools
اقترح أفضل أداة عبر الإنترنت:
هل تعرف موقعًا إلكترونيًا أفضل أو مكملاً أو بديلاً للموقع المذكور أعلاه؟
> اقترح ذلك هنا <
السنة العاشرة
عيد
الصور والتنزيلات بالحجم الكامل متاحة فقط، ومجانية تمامًا، للأعضاء المسجلين.
> تسجيل الدخول <