كيفية قياس وتحسين أكبر محتوى محتوى لطلاء UX فائق

عندما يتعلق الأمر بالنجاح على الإنترنت ، هناك العديد من الطرق لتحقيق ذلك. تجربة المستخدم الأمثل هي إحدى هذه الطرق. ستستخدم Google تجارب مستخدم مختلفة ومقاييس ذات صلة لتصنيف مواقع الويب لـ SEO. استمر في إنتاج أدوات متعددة لتحسين أداء الويب. سنلقي نظرة على بعض الطرق التي تبحث بها Google عن تحسين تجربة المستخدم أدناه.

ما هو Google Core Web Vitals؟

في محاولتها الأخيرة لتعديل المقياس وفهم ما يعتبر تجربة مستخدم لائقة ، نظمت Google مقاييس الصفحة. يشار إلى هذه المقاييس الموحدة على أنها مؤشرات الويب الحيوية الأساسية وتسهل تقييمات خبرة المستخدم في العالم الحقيقي على موقع الويب الخاص بك.

ما هو أكبر رسم محتوى؟

لتبدأ ، دعنا نلقي نظرة على أكبر رسم محتوى (LCP). إنه أحد مقاييس حيوية الويب الأساسية. يقيس وقت تحميل أكبر مكون للمحتوى داخل إطار العرض عندما يصبح مرئيًا. تعمل المقاييس البديلة مثل TTFB و First Contentful Paint معًا على تسهيل تجربة الصفحة المباشرة ، ولا تكون موجودة بمجرد أن تصبح الصفحة "ذات مغزى" للمستخدم.

عادةً ، ما لم يصبح المكون الأكثر أهمية في الصفحة مرئيًا بشكل كامل ، فقد لا تقدم الصفحة سياقًا كافيًا للمستخدم. لذلك ، يمثل LCP توقعات المستخدم. كمقياس أساسي لمؤشرات الويب الحيوية ، يمثل LCP خمسة وعشرين بالمائة من نقاط الأداء ، وهذا هو سبب كونه أحد أهم المقاييس التي يجب تحسينها.

التحقق من وقت LCP الخاص بك

وفقًا لـ Google ، فإن فئات الأجزاء التي تم التفكير فيها لـ Largest Contentful Paint هي:

• عناصر <img>
• عناصر <image> داخل عنصر <svg>
• عناصر <video> (صورة ملصق مستخدمة)
• عنصر مع صورة خلفية يتم تحميلها عبر وظيفة URL
• تتكون عناصر مستوى الكتلة من عقد نصية و / أو عناصر نصية أخرى على مستوى السطر

كيف يتم قياس LCP؟

بالطبع ، هناك طرق متعددة لقياس LCP لصفحة الويب الخاصة بك. أسهل طريقة للقيام بذلك هي استخدام أحد الأنظمة الأساسية المتاحة التي تتضمن Lighthouse و PageSpeed ​​Insights و Search Console بالإضافة إلى تقرير تجربة مستخدم Chrome. على سبيل المثال ، تشير Google PageSpeed ​​Insights في تقريرها إلى مكون حساب LCP.

ما هو جيد LCP؟

لتوفير خبرة مستخدم لائقة ، يجب أن تحاول الاحتفاظ بـ LCP لمدة 2.5 ثانية أو أقل على موقعك. يجب أن تحدث غالبية تحميلات صفحتك دون هذا الحد. الآن بعد أن عرفنا جميعًا ما هي LCPs وما الذي يجب أن يكون هدفنا هو أن ندرس الطرق التي يمكن من خلالها تحسين LCP.

(يرجى إضافة الصورة المسماة يجب تحميل غالبية الصفحات عند LCP 2.5 ثانية أو أقل. jpg)

كيفية تحسين أكبر محتوى محتوى (LCP)

النظام الأساسي لتقليل LCP تمامًا هو تقليص البيانات التي يتم تنزيلها على جهاز المستخدم وتقليل الوقت المستغرق لإدارة هذا المحتوى وضمان تجربة مستخدم سلسة.

تحسين الصور الخاصة بك

في معظم المواقع ، عادةً ما يحتوي محتوى الجزء المرئي من الصفحة على صورة كبيرة الحجم مطلوبة لـ LCP. قد تكون صورة بطل أو دائرة أو لافتة. يجب عليك تحسين هذه الصور للحصول على LCP أكثر قوة.

لتحسين صورك ، يجب عليك استخدام CDN للصور تابع لجهة خارجية مثل ImageKit.io. تتمثل ميزة استخدام CDN للصور لجهة خارجية في أنك تستهدف ببساطة عملك الفعلي وتترك تحسين الصورة على CDN للصورة.

تحويلات في الوقت الحقيقي للصور سريعة الاستجابة

تستخدم Google تقسيم الجوّال أولاً لجميع المواقع تقريبًا. هذا هو السبب في أنه من الضروري تحسين LCP للجوال عبر سطح المكتب. يجب تصغير كل صورة مباشرة حسب طلب التصميم.

على سبيل المثال ، قد ترغب في أن تكون الصورة بحجم أصغر في صفحة القائمة وحجم أكبر في صفحة تفاصيل المنتج. يضمن تغيير الحجم هذا أنه لا يبدو أنك تستخدم أي وحدات بايت إضافية عما هو مطلوب لتلك الصفحة تحديدًا.

تخزين الصور وتحسين وقت التسليم

تستخدم شبكات CDN الخاصة بالصور شبكة توصيل المحتوى (CDN) لتسليم الصور. يضمن استخدام CDN تحميل الصور من موقع قريب بدلاً من خادم قد يكون في منتصف الطريق عبر العالم.

تحميل مسبق للموارد الأساسية

هناك حالات قد لا يقوم فيها المتصفح بتحميل أحد العناصر المرئية إذا كان يؤثر على LCP. على سبيل المثال ، يمكن اعتبار صورة لافتة أعلى الجزء المرئي من الصفحة كصورة خلفية داخل ملف CSS. نظرًا لأن المتصفح لن يعرف هذا عن الصورة حتى يتم تنزيل ملف CSS ، فلن يتم تحميله.

الآن ، إذا كنت تسأل ، "كيف يمكنني تحميل أكبر صورة رسم محتوى مسبقًا؟" ، فإن الإجابة بسيطة. ستتمكن من تحميلها مسبقًا باستخدام علامة ذات سمة rel = "preload" إلى القسم العلوي من مستند لغة ترميز النص التشعبي.

بينما ستتمكن من تحميل موارد متعددة مسبقًا في مستند ، يجب عليك قصرها على الصور أو مقاطع الفيديو في الجزء العلوي من الصفحة ، أو ملفات الخط على مستوى الصفحة ، أو ملفات CSS و JS الأساسية.

تقليل أوقات استجابة الخادم

إذا استغرق الخادم وقتًا أطول في التحميل مما يعتبر عاديًا ، فسيتم زيادة الوقت المستغرق لتحميل الصفحة على الشاشة. إنه يؤثر سلبًا على مقياس سرعة كل صفحة ، جنبًا إلى جنب مع LCP. لتحسين أوقات استجابة الخادم الخاص بك ، يمكنك:

• تحليل وتحسين الخوادم الخاصة بك
• استخدم شبكة توصيل المحتوى
• الاتصال مسبقًا بأصول الجهات الخارجية
• خدمة ذاكرة التخزين المؤقت للمحتوى أولاً مع عامل الخدمة
• ضغط الملفات النصية

تحسين أوقات استجابة جهاز العميل

إذا استغرق تحميل صفحتك وقتًا طويلاً ، فقد يكون ذلك مصدر إزعاج للعملاء المحتملين. لحسن الحظ ، هناك بعض الأشياء التي يمكنك القيام بها لضمان تحميلها بشكل صحيح من نهايتها وإنشاء تجربة مستخدم سلسة. هذا يشمل:

• تضمين CSS الأساسي
• تصغير والضغط على المحتوى
• تحسين LCP للعرض من جانب العميل
• استخدام العرض من جانب الخادم
• استخدام العرض المسبق

أصبح LCP عامل ترتيب بحث كبير يرتبط بقوة بتجربة المستخدم ورحلته. لذلك ، إذا كنت تدير نشاطًا تجاريًا على الويب ، فيجب عليك تحسين هذه المكونات لضمان نجاح المسعى.

المؤلف السيرة الذاتية

غيا مارنيويك كاتبة ومديرة وسائل التواصل الاجتماعي ومديرة رقمية. تكتب محتوى لـ Aumcore وهي متحمسة لإيجاد طرق جديدة لمشاركة المعلومات مع العالم.