يشارك فريق Google Chrome نصائح لتحسين حيوية الويب الأساسية
تشارك Google توصيات Core Web Vitals الجديدة الواقعية لمعظم المطورين والقابلة للتطبيق على معظم مواقع الويب.
- حيوية الويب الأساسية هي ثلاثة مقاييس تقيس وقت التحميل والتفاعل والاستقرار البصري.
- أمضى فريق Chrome في Google عامًا في تحديد أهم نصيحة يمكن أن يقدمها بخصوص Core Web Vitals.
- هذه هي التوصيات التي يجب أن تعطيها الأولوية عندما يكون الوقت محدودًا.
تشارك Google مجموعة محدثة من التوصيات لتحسين Core Web Vitals لمساعدتك في تحديد ما يجب تحديده حسب الأولوية عندما يكون الوقت محدودًا.
حيوية الويب الأساسية هي ثلاثة مقاييس تقيس وقت التحميل والتفاعل والاستقرار البصري.
تعتبر Google هذه المقاييس ضرورية لتوفير تجربة إيجابية وتستخدمها لتصنيف مواقع الويب في نتائج البحث الخاصة بها.
على مر السنين، قدمت Google العديد من الاقتراحات لتحسين نتائج Core Web Vitals.
على الرغم من أن كل توصية من توصيات Google تستحق التنفيذ، إلا أن الشركة تدرك أنه من غير الواقعي أن تتوقع من أي شخص أن يفعل كل شيء.
إذا لم تكن لديك خبرة كبيرة في تحسين أداء موقع الويب، فقد يكون من الصعب معرفة ما سيكون له التأثير الأكثر أهمية.
قد لا تعرف من أين تبدأ بوقت محدود لتكريسه لتحسين Core Web Vitals. هذا هو المكان الذي تأتي فيه قائمة توصيات Google المنقحة.
في منشور مدونة، تقول Google إن فريق Chrome قضى عامًا في محاولة تحديد أهم النصائح التي يمكن أن يقدمها بخصوص Core Web Vitals.
وضع الفريق قائمة من التوصيات الواقعية لمعظم المطورين، وقابلة للتطبيق على معظم مواقع الويب، ولها تأثير حقيقي في العالم الحقيقي.
إليك ما ينصح به فريق Google Chrome.
تحسين أكبر محتوى محتوى (LCP)
يقيس مقياس Largest Contentful Paint (LCP) الوقت الذي يستغرقه المحتوى الأساسي للصفحة ليصبح مرئيًا للمستخدمين.
تنص Google على أن حوالي نصف مواقع الويب فقط تفي بحدود LCP الموصى بها.
هذه هي أهم توصيات Google لتحسين LCP.
تأكد من سهولة العثور على مورد LCP في مصدر HTML
وفقًا لتقويم الويب 2022 بواسطة أرشيف HTTP، تحتوي 72٪ من صفحات الويب للجوال على صورة كمحتوى رئيسي. لتحسين LCP، يجب أن تضمن مواقع الويب تحميل الصور بسرعة.
قد يكون من المستحيل تلبية حد LCP الخاص بـ Google إذا كانت الصفحة تنتظر تنزيل ملفات CSS أو JavaScript بالكامل وتحليلها ومعالجتها قبل بدء تحميل الصورة.
اكتب محتوى جذابًا بأسلوبك الفريد
أتمتة إنشاء المحتوى بالكامل؛ الحصول على أفكار محتوى مخصصة؛ وكتابة المقالات وتحسينها ونشرها بنقرة واحدة – باستخدام ContentShake.
كقاعدة عامة، إذا كان عنصر LCP عبارة عن صورة، فيجب أن يكون عنوان URL للصورة قابلاً للاكتشاف دائمًا من مصدر HTML.
تأكد من إعطاء الأولوية لمورد LCP
بالإضافة إلى وجود مورد LCP في كود HTML، توصي Google بمنحه الأولوية وعدم التأخير وراء الموارد الأخرى الأقل أهمية.
حتى إذا قمت بتضمين صورة LCP في مصدر HTML باستخدام علامة <img> قياسية، إذا كان هناك العديد من علامات <script> في قسم <head> من صفحة الويب الخاصة بك قبل علامة <img>، فقد يؤدي ذلك إلى تأخير وقت التحميل من مورد صورتك.
سيكون من الأفضل أن تتجنب أيضًا أي إجراءات قد تقلل من أولوية صورة LCP، مثل إضافة سمة التحميل = “كسول”.
كن حذرًا عند استخدام أي أدوات لتحسين الصور تقوم تلقائيًا بتطبيق التحميل البطيء على جميع الصور.
استخدم شبكة توصيل المحتوى (CDN) لتقليل وقت اللقمة الأولى (TTFB)
يجب أن يتلقى المستعرض البايت الأول من استجابة مستند HTML الأولية قبل تحميل أي موارد إضافية.
يُطلق على مقياس هذا الوقت اسم Time to First Byte (TTFB)، وكلما حدث ذلك بشكل أسرع، يمكن أن تبدأ العمليات الأخرى بشكل أسرع.
لتقليل TTFB، قم بتقديم المحتوى الخاص بك من موقع بالقرب من المستخدمين واستخدام التخزين المؤقت للمحتوى المطلوب بشكل متكرر.
تقول Google إن أفضل طريقة للقيام بالأمرين هي استخدام شبكة توصيل المحتوى (CDN).
تحسين تغيير التخطيط التراكمي (CLS)
يعد تغيير التخطيط التراكمي (CLS) مقياسًا يستخدم لتقييم مدى استقرار التخطيط المرئي لموقع الويب. وفقًا لـ Google ، لا تفي حوالي 25٪ من مواقع الويب بالمعيار الموصى به لهذا المقياس.
هذه هي أهم توصيات Google لتحسين CLS.
تعيين أحجام صريحة لمحتوى الصفحة
يمكن أن تحدث تغييرات التخطيط عندما يتغير محتوى على موقع ويب بعد انتهاء التحميل. من المهم حجز مساحة مسبقًا قدر الإمكان لمنع حدوث ذلك.
أحد الأسباب الشائعة لتغييرات التخطيط هو الصور غير الحجم، والتي يمكن معالجتها عن طريق تعيين سمات العرض والارتفاع أو خصائص CSS المكافئة بشكل صريح.
الصور ليست العامل الوحيد الذي يمكن أن يتسبب في حدوث تغييرات في التخطيط على صفحات الويب. يمكن أن يساهم المحتوى الآخر، مثل إعلانات الجهات الخارجية أو مقاطع الفيديو المضمنة التي يتم تحميلها لاحقًا في CLS.
تتمثل إحدى طرق معالجة هذه المشكلة في استخدام خاصية نسبة العرض إلى الارتفاع في CSS. هذه الخاصية جديدة نسبيًا وتسمح للمطورين بتعيين نسبة عرض إلى ارتفاع للصور والعناصر غير المصورة.
يسمح توفير هذه المعلومات للمتصفح بحساب الارتفاع المناسب تلقائيًا عندما يعتمد العرض على حجم الشاشة، على غرار الطريقة التي يعمل بها مع الصور ذات الأبعاد المحددة.
تأكد من أن الصفحات مؤهلة لـ Bfcache
تستخدم المتصفحات ميزة تسمى ذاكرة التخزين المؤقت للخلف / للأمام، أو bfcache للاختصار، والتي تسمح بتحميل الصفحات فورًا من تاريخ أقدم أو لاحق في سجل المتصفح باستخدام لقطة من الذاكرة.
يمكن لهذه الميزة تحسين الأداء بشكل ملحوظ عن طريق القضاء على تغييرات التخطيط أثناء تحميل الصفحة.
توصي Google بالتحقق مما إذا كانت صفحاتك مؤهلة للحصول على bfcache باستخدام Chrome DevTools والعمل على أي أسباب تجعلها غير مؤهلة.
تجنب الحركات / الانتقالات
أحد الأسباب الشائعة لتغييرات التخطيط هو تحريك العناصر الموجودة على موقع الويب، مثل لافتات ملفات تعريف الارتباط أو لافتات الإشعارات الأخرى، التي تنزلق من الأعلى أو الأسفل.
يمكن أن تدفع هذه الرسوم المتحركة المحتوى الآخر بعيدًا عن الطريق، مما يؤثر على CLS. حتى عندما لا يفعلون ذلك، لا يزال من الممكن أن يؤثر تحريكهم على CLS.
تقول Google إن الصفحات التي تنقل أي خاصية CSS يمكن أن تؤثر على التخطيط تقل احتمالية أن تحتوي على CLS “جيد” بنسبة 15٪.
للتخفيف من ذلك، من الأفضل تجنب تحريك أو نقل أي خاصية CSS تتطلب من المستعرض تحديث التخطيط ما لم يكن ذلك استجابة لإدخال المستخدم، مثل الضغط أو الضغط على مفتاح.
يوصى باستخدام خاصية تحويل CSS للانتقالات والحركات عندما يكون ذلك ممكنًا.
تحسين تأخير الإدخال الأول (FID)
تأخير الإدخال الأول (FID) هو مقياس يقيس مدى سرعة استجابة موقع الويب لتفاعلات المستخدم.
على الرغم من أن معظم مواقع الويب تعمل بشكل جيد في هذا المجال، إلا أن Google تعتقد أن هناك مجالًا للتحسين.
يعد مقياس Google الجديد، التفاعل مع الرسام التالي (INP)، بديلاً محتملاً لـ FID، والتوصيات الواردة أدناه ذات صلة بكل من FID وINP.
تجنب المهام الطويلة أو فصلها
المهام هي أي عمل منفصل يقوم به المستعرض، بما في ذلك العرض والتخطيط والتحليل وتجميع وتنفيذ البرامج النصية.
عندما تستغرق المهام وقتًا طويلاً، أكثر من 50 مللي ثانية، فإنها تحجب سلسلة المحادثات الرئيسية وتجعل من الصعب على المتصفح الاستجابة بسرعة لإدخالات المستخدم.
لتجنب ذلك، من المفيد تقسيم المهام الطويلة إلى مهام أصغر من خلال منح السلسلة الرئيسية المزيد من الفرص لمعالجة العمل المهم المرئي للمستخدم.
يمكن تحقيق ذلك من خلال التنازل عن الخيط الرئيسي في كثير من الأحيان بحيث يمكن أن تحدث التحديثات التقديمية وتفاعلات المستخدم الأخرى بسرعة أكبر.
تجنب جافا سكريبت غير الضرورية
يمكن أن يؤدي موقع الويب الذي يحتوي على كمية كبيرة من JavaScript إلى تنافس المهام على اهتمام الموضوع الرئيسي، مما قد يؤثر سلبًا على استجابة موقع الويب.
لتحديد الشفرة غير الضرورية وإزالتها من موارد موقع الويب الخاص بك، يمكنك استخدام أداة التغطية في Chrome DevTools.
من خلال تقليل حجم الموارد المطلوبة أثناء عملية التحميل، سيقضي موقع الويب وقتًا أقل في تحليل وتجميع التعليمات البرمجية، مما يؤدي إلى تجربة مستخدم أكثر سلاسة.
تجنب تحديثات العرض الكبيرة
JavaScript ليس الشيء الوحيد الذي يمكن أن يؤثر على استجابة موقع الويب. يمكن أن يكون العرض مكلفًا ويتعارض مع قدرة موقع الويب على الاستجابة لمدخلات المستخدم.
يمكن أن يكون تحسين عمل العرض أمرًا معقدًا ويعتمد على الهدف المحدد. ومع ذلك، هناك بعض الطرق للتأكد من إمكانية إدارة عرض التحديثات وعدم تحولها إلى مهام طويلة.
توصي Google بما يلي:
- تجنب استخدام requestAnimationFrame () للقيام بأي عمل غير مرئي.
- حافظ على حجم DOM الخاص بك صغيرًا.
- استخدم احتواء CSS.
خاتمة
تعد “أساسيات الويب الأساسية” مقياسًا مهمًا لتوفير تجربة مستخدم إيجابية وتصنيفًا في نتائج بحث Google.
على الرغم من أن جميع توصيات Google تستحق التنفيذ، إلا أن هذه القائمة المختصرة واقعية وقابلة للتطبيق على معظم مواقع الويب ويمكن أن يكون لها تأثير مفيد.
يتضمن ذلك استخدام CDN لخفض TTFB، وتعيين أحجام صريحة للمحتوى على الصفحة لتحسين CLS، وجعل الصفحات مؤهلة لـ bfcache ، وتجنب JavaScript والرسوم المتحركة / الانتقالات غير الضرورية لـ FID.
باتباع هذه التوصيات، يمكنك الاستفادة بشكل أفضل من وقتك وتحقيق أقصى استفادة من موقع الويب الخاص بك.
المصدر: searchenginejournal
قد يهمك:
