كيفية تحسين مؤشرات «Core Web Vitals» على موقع ويب يعمل بنظام « متعدد اللغات »

تُعد «مؤشرات الويب الأساسية» (Core Web Vitals) مجموعة من المقاييس التي تُستخدم لقياس جودة تجربة المستخدم على مواقع الويب. وتعتبرها جوجل من عوامل تحديد الترتيب، ولذلك فهي مهمة أيضًا لتحسين محركات البحث (متعدد اللغات). وإذا أهملتها، فإنك تخاطر بفقدان اهتمام الزوار ومحركات البحث على حد سواء.

لكي هذا السيناريو، ستتعلم في هذا المنشور كل ما تحتاج لكي حول تحسين هذه المقاييس على موقعك الإلكتروني متعدد اللغات. سنشرح ما هي ما Web Vitals، لكي الأداء الحالي لموقعك، وإرشادات خطوة بخطوة حول لكي كل مقياس من المقاييس على موقعك الإلكتروني.

ما Core Web Vitals؟

كما ذكرنا سابقًا، تقيس Core Web Vitals تجربة المستخدم على مواقع الويب. وجميعها مرتبطة بطريقة ما لكي وتفاعلية الموقع. تم تقديم هذه المقاييس من قبل Google في عام 2020 وأصبحت جزءًا من خوارزمية البحث الخاصة بهم. دعونا نستعرضها واحدة تلو الأخرى.

طلاء المحتوى الأكبر (LCP)

الأول هو Largest Contentful Paint (LCP). يقيس الوقت الذي تستغرقه الصفحة لكي وتصبح قابلة للعرض والاستخدام. ويحدد ذلك من خلال الكشف عن أكبر عنصر محتوى في صفحة الويب، والذي غالبًا ما يكون صورة أو كتلة نصية، عندما مرئيًا لكي .

يتم قياس هذا الفاصل الزمني بالثواني ويستخدم كنتيجة LCP. حددت Google عددًا من النقاط الفاصلة لكي ما التوقيت ما يجب أن يستهدفه موقعك.

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

إزاحة التخطيط التراكمي (CLS)

يقيس هذا المؤشر استقرار تخطيط موقع الويب أثناء تحميله، أي مقدار الحركة التي يظهرها عندما تظهر عناصر عندما على الصفحة. ويُسمى هذا المؤشر "التحول التراكمي في التخطيط" أو CLS.

ما أهمية ذلك؟

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

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

تعتبر درجة CLS أقل من 0.1 جيدة؛ أما الدرجة التي لكي .25 فتحتاج إلى تحسين، وأي درجة أعلى من ذلك تعتبر غير مقبولة.

ملاحظة واحدة: لن تؤثر حركة الصفحة في غضون 500 مللي ثانية من تفاعل المستخدم مع الصفحة (مثل النقر) على درجة CLS الخاصة بك. فهذه تعتبر لكي .

التفاعل لكي Paint (INP)

التفاعل لكي Paint أو INP هو أحدث إضافة لمقاييس Core Web Vitals. وسيحل محل First Input Delay (FID)، أحد المقاييس الأصلية، في مارس 2024.

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

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

ما معدل INP الجيد لكي لتحقيقه؟

يعد وقت الاستجابة لكي مللي ثانية جيدًا، ووقت الاستجابة لكي مللي ثانية مقبولًا؛ وأي وقت استجابة يزيد عن ذلك سيؤثر سلبًا على نظرة Google لموقعك.

كيف لكي مؤشرات Core Web Vitals لموقعك الإلكتروني

بمجرد أن تعرف ما هي Core Web Vitals ما فإن السؤال المنطقي التالي هو: كيف يمكنك معرفة مكانة موقعك؟ أسهل طريقة لكي هي لكي أداة اختبار السرعة مثل PageSpeed Insights.

ما عليك سوى إدخال عنوان URL لموقعك الإلكتروني في الجزء العلوي وإجراء الاختبار. بمجرد الانتهاء، لن فقط الاختبار فقط بما إذا كان موقعك الإلكتروني قد اجتاز تقييم Core Web Vitals، بل سيوفر لك أيضًا قيمًا لكل نقطة من نقاط البيانات المذكورة.

إذا كان ذلك متاحًا، فستحصل على مزيج من النتائج الواقعية ونتائج المختبر. ويشمل ذلك معلومات من CrUX، حيث جمعت Google بيانات مستخدمي مواقع الويب من متصفح Chrome الخاص بها. إذا لم يكن ذلك متاحًا، فقط قياسات من Lighthouse، الذي يحسبها بشكل مخصص.

الأدوات الأخرى التي يمكن أن تخبرك عن أداء الويب الأساسي الخاص بك هي GTmetrix أو WebPageTest أو إضافة Chrome Web Vitals.

تحسين مؤشرات «Core Web Vitals» على مواقع الويب التي تستخدم « متعدد اللغات »

إذن، ما لكي إذا كانت قيمك أقل من ممتازة؟ لنتحدث عن ذلك الآن.

من الآن فصاعدًا، سنستعرض شرحًا تفصيليًّا خطوةً بخطوة حول كيفية تحسين كل مؤشر من مؤشرات «Core Web Vitals» على موقعك متعدد اللغات . وسنتناول كيفية القيام بذلك يدويًّا، إلى جانب طريقة سهلة لمستخدمي ووردبريس بمساعدة المكون الإضافي WP Rocket.

WP Rocket يجعل من السهل جدًا على الأشخاص لكي لا يمتلكون معرفة تقنية لكي تحسينات متطورة في الأداء بسرعة وسهولة. إنه أحد أقوى المكونات الإضافية للتخزين المؤقت وأكثرها ملاءمة للمبتدئين.

تحسينات الأداء العام

لنبدأ ببعض النصائح العامة حول لكي من سرعة تحميل موقعك الإلكتروني:

• اختر شركة استضافة جيدة - إن جودة مزود خدمة الاستضافة الذي يوضع عليه موقعك الإلكتروني لها تأثير كبير على سرعة تحميله. احرص على اختيار مزود خدمة حسن السمعة من خلال قراءة بعض مقارنات السرعة ومراجعات المستخدمين قبل اتخاذ القرار.
• حافظ على تحديث موقعك – إذا كان موقعك يعتمد على نظام إدارة محتوى مثل WordPress، فتأكد لكي لكي . وهذا يعني البرنامج نفسه، بالإضافة إلى أي مكونات إضافية، وقوالب، وإصدار PHP للخادم، وكل شيء آخر لكي . فقط الطريقة فقط يمكنك الاستفادة من التحسينات الجديدة في السرعة.
• استخدم عدد أقل من المكونات الإضافية – في الوقت نفسه، حاول لكي إضافة عناصر لكي . كل مكون إضافي وملحق يأتي مع كود إضافي، مما قد يؤدي إلى إبطاء موقعك. لذا، اجعل ما على موقعك لكي الأدنى المطلق.
• اختر المكونات عالية الجودة – بالنسبة للإضافات التي يتم تضمينها في موقعك الإلكتروني، تأكد من أنها عالية الجودة ومُحسَّنة من حيث الأداء، مثل Weglot.

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

إصلاح أكبر محتوى الطلاء المحتوي الأكبر

هناك طريقتان رئيسيتان لتحسين طلاء المحتوى الأكبر: تحسين سرعة تحميل الصفحة بشكل عام (كما هو مذكور أعلاه) وجعل تسليم عناصر LCP أسرع.

ماعنصر LCP الخاص بك؟ سيخبرك PageSpeed Insights بذلك في قسم التشخيص.

تنفيذ التخزين المؤقت والضغط

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

ليه؟

في نظام إدارة المحتوى مثل WordPress، عادةً ما يتم إنشاء الصفحات ديناميكيًا من كود PHP ومحتوى مستمد من قاعدة بيانات. يقوم الخادم بتحويلها إلى مستندات HTML وإرسالها لكي .

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

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

لكي التخزين المؤقت والضغط على الخادم الخاص بك، تحتاج لكي ملف باسم .htaccess. يحتوي هذا الملف على توجيهات مهمة لوظائف خادم الويب الخاص بك، وعادة ما تجده في الدليل الجذري لموقع الويب الخاص بك.

يمكنك نسخ ولصق الكود التالي فيه لكي تقنيات تحسين السرعة المذكورة أعلاه:

<IfModule mod_deflate.c>
   # Compress HTML, CSS, JavaScript, Text, XML and fonts
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
   AddOutputFilterByType DEFLATE application/x-font
   AddOutputFilterByType DEFLATE application/x-font-opentype
   AddOutputFilterByType DEFLATE application/x-font-otf
   AddOutputFilterByType DEFLATE application/x-font-truetype
   AddOutputFilterByType DEFLATE application/x-font-ttf
   AddOutputFilterByType DEFLATE application/x-javascript
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE font/opentype
   AddOutputFilterByType DEFLATE font/otf
   AddOutputFilterByType DEFLATE font/ttf
   AddOutputFilterByType DEFLATE image/svg+xml
   AddOutputFilterByType DEFLATE image/x-icon
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/javascript
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/xml

   # Remove browser bugs (only needed for really old browsers)
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   BrowserMatch ^Mozilla/4\.0[678] no-gzip
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
   ExpiresActive On

   # Images
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/gif "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   ExpiresByType image/webp "access plus 1 year"
   ExpiresByType image/svg+xml "access plus 1 year"
   ExpiresByType image/x-icon "access plus 1 year"

   # Video
   ExpiresByType video/webm "access plus 1 year"
   ExpiresByType video/mp4 "access plus 1 year"
   ExpiresByType video/mpeg "access plus 1 year"

   # Fonts
   ExpiresByType font/ttf "access plus 1 year"
   ExpiresByType font/otf "access plus 1 year"
   ExpiresByType font/woff "access plus 1 year"
   ExpiresByType font/woff2 "access plus 1 year"
   ExpiresByType application/font-woff "access plus 1 year"
   ExpiresByType application/font-woff2 "access plus 1 year"

   # CSS, JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"

   # Others
   ExpiresByType application/pdf "access plus 1 year"
   ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

كلا المقتطفين من الكود مقدمان من GTmetrix ويعملان على خوادم Apache. يمكنك العثور على إرشادات لخوادم أخرى، مثل NGINX، عبر الإنترنت، على مثل، في هذا البرنامج التعليمي على KeyCDN.

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

تحسين التعليمات البرمجية وتسليم التعليمات البرمجية

أي إجراء يمكنك اتخاذه لتبسيط عملية توصيل ومعالجة كود موقعك الإلكتروني سيساعد في تحسين مؤشر «Largest Contentful Paint» على موقعك متعدد اللغات . دعنا نستعرض بعض الخيارات الجيدة لتحقيق ذلك:

• إزالة الترميز غير الضروري - إذا كان لديك الكثير من أكواد JavaScript و CSS الزائدة عن الحاجة على موقعك، يمكنك تحسين الأداء عن طريق التخلص من كل ما هو غير ضروري تمامًا.
• التصغير – يعني إزالة المسافات البيضاء والتعليقات من ملفات الموقع. يؤدي ذلك إلى تقليل حجم الملفات، مما يجعلها أسرع لكي والمعالجة.
• تحسين CSS و JavaScript – هنا، تقوم بإعداد ملفات موقع الويب الخاص بك بحيث لا تمنع بقية موقع الويب الخاص بك من التحميل. إنها الرسالة الشهيرة "إزالة الموارد التي تمنع العرض"التي قد تتلقاها من أدوات اختبار السرعة. هناك أداتان شائعتان لذلك هما السمتان defer و async. على التوالي، تقومان بنقل تنفيذ JavaScript لكي قائمة التحميل وتخبران المتصفح لكي الملفات في الخلفية فقط توفرها فقط

للتصغير يدويًا، يمكنك استخدام أدوات مثل Minifier أو Grunt. عادةً ما يعني تحسين CSS و JavaScript إجراء الكثير من التحليلات لمعرفة ما يمنع تحميل صفحاتك. ستعلمك أدوات اختبار السرعة بالبرامج النصية التي تسبب مشاكل.

لكي ذلك، لكي إضافة علامات defer و async لكي . تبدو كما يلي:

<script async src="important.js"></script>
<script defer src="not-so-important.js"></script>

يمكنك أيضًا تقسيم بعض الأكواد لكي فقط ماضروري في البدايةفقط . أكثر ذلك أدناه عندما عن تحسين INP.

إذا كنت ترغب لكي هذه العمليات، يمكن لـ WP Rocket تصغير حجم الكود، وإزالة CSS غير المستخدم، وتأجيل JavaScript، وتحميله بشكل غير متزامن بمجرد تحديد بعض المربعات.

تحسين الصور

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

كيف يمكنك تحسين الصور على موقعك الإلكتروني؟

• ترجمة الصور – لا تقتصر ترجمة موقعك الإلكتروني على النص فحسب. سيتعين عليك أيضًا تحويل النص الموجود في صورك و/أو استخدام صور أكثر ملاءمة ثقافيًّا. ولحسن الحظ، يوفر لك موقعWeglot كل ما تحتاجه في هذا المجال.
• الضغط – تمامًا مثل الملفات النصية، يمكنك إزالة البيانات غير الضرورية من الصور لكي حجمها.
• استخدم التنسيقات الحديثة - الصور بتنسيقات الجيل التالي، مثل WebP أو AVIF، أصغر بكثير من JPG أو PNG بينما تبدو بنفس الجودة.
• حجم الصور المرئية بشكل صحيح - اعرض الصور بالحجم الذي تظهر به على موقعك الإلكتروني. وإلا فإنك تجعل زوارك يقومون بتحميل بيانات غير ضرورية.
• تشغيل التحميل البطيء – هذه التقنية فقط الصور التي تكون مرئية بالفعل في المتصفح أثناء التحميل الأولي، وتقوم بجلب الصور الموجودة في أسفل الصفحة أثناء تمرير الزوار لها. وهذا يمنع أيضًا إهدار النطاق الترددي على الصور غير LCP، بحيث يمكن تحميل الصور المهمة بشكل أسرع.

الأدوات المتاحة

يمكنك استخدام أدوات مثل TinyPNG لضغط الصور وتحويلها إلى صيغ ملفات أخرى. كما يمكن لأداة مثل Image Resizer قص الصور إلى أي أبعاد تريدها. ستجد أيضًا خيارات لذلك في ووردبريس ضمن «الإعدادات » > «Media».

بالإضافة إلى ذلك، إذا كنت تستخدم أحدث إصدار من ووردبريس (أو أي إصدار أحدث من الإصدار 5.4)، فيجب أن يكون موقعك ممكّنًا للتحميل البطيء افتراضيًا.

إذا كنت تريد حلاً تلقائياً، فهناك Imagify. وهو مكون إضافي سهل الاستخدام لتحسين الصور يعمل بشكل جيد مع WP Rocket. يمكنه معالجة صورك تلقائياً لكي أخف وزناً مع تحقيق التوازن بين الجودة والأداء. يقوم المكون الإضافي بتحويل صورك إلى WebP و Avif، وتغيير حجم الصور الكبيرة، وعرض الإصدارات المحسنة على موقع WordPress الخاص بك تلقائياً.

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

استخدام شبكة CDN

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

ولهذا السبب، يقوم موقعWeglot تلقائيًّا بإعداد شبكة توزيع المحتوى (CDN) حتى تتمكن من نشر المحتوى المترجم بسرعة في جميع أنحاء العالم. إذا لم تكن Weglot مستخدمًا، فعادةً ما تحتاج إلى التسجيل في شبكة CDN وتهيئتها لموقعك. وتختلف هذه العملية من مزود لآخر؛ وإليك أمثلة على الإرشادات.

إذا كنت بحاجة إلى المساعدة، فإن WP Rocket يوفر إضافات مخصصة لـ Sucuri و Cloudflare، وهما حلان شائعان. فهما يجعلان لكي شبكات توصيل المحتوى هذه لموقعك أسرع وأسهل.

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

أخيرًا، يمتلك WP Rocket أيضًا شبكته الخاصة، والتي تسمى RocketCDN، والتي يمكنك تكوينها تلقائيًا من داخل المكون الإضافي. بالإضافة إلى ذلك، يمكن أن تقلل قدرة WP Rocket لكي ملفات الكود من حركة مرور CDN وتكاليفها.

معالجة التحول التراكمي للتخطيط التراكمي

العنصر التالي في قائمتنا الخاصة بمؤشرات «Core Web Vitals» التي يجب تحسينها على موقعك الإلكتروني متعدد اللغات هو CLS. وإليك كيفية ضمان تحقيق النجاح في هذا المجال.

تضمين سمات حجم الصورة

أحد أكبر العوامل في سوء نتائج CLS غالبًا ما تكون الصور بدون سمات ارتفاع وعرض محددة.

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

لذا، فإن القاعدة الأولى لتحسين CLS لكي تعريفات الارتفاع والعرض لكي . كيف تفعل ذلك؟

في HTML خالصة، تبدو ببساطة هكذا:

<img src="image.jpg" alt="Insert alt text" width="600" height="700">

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

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

حجز مساحة للتضمينات، وإطارات الصور وفتحات الإعلانات

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

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

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

تحسين توصيل خط الويب

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

• وميض النص غير المنسق (FOUT) – يعني أن الزائر يرى أولاً نص موقعك الإلكتروني بخط قياسي يتغير لحظة تحميل ملف الخط، مما قد يؤدي لكي تغيير لكي .
• وميض النص غير المرئي (FOIT) – هنا، لا يمكنك رؤية أي نص على الإطلاق في البداية. فقط مع ملف خط الويب.

يمكنك تجنب هذه المشكلات من خلال الاستراتيجيات التالية:

• استخدم تنسيقات الخطوط الحديثة – مثل الصور، تتوفر الخطوط بتنسيقات ملفات أكبر وأصغر. أسرعها لكي عادةً ما تكون WOFF أو WOFF2.
• حدد خطًا بديلًا مشابهًا – ضع خطًا بديلًا مشابهًا جدًا لكي الفعلي لتقليل حركة الصفحة عندما . يمكنك استخدام Font Style Matcher لكي تركيبات جيدة.
• تحميل الخطوط مسبقًا – قم بترتيب ملفات خطوط الويب حسب الأولوية عن طريق وضعها في بداية المستند وإضافة rel=preload لكي . بهذه الطريقة، سيقوم المتصفح بتحميلها أكثر .

إذا كنت تستخدم WP Rocket، فإن المكون الإضافي يأتي مع خيار لكي ملفات الخطوط لكي . كل لكي هو إدخال المسار الذي توجد فيه.

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

التعامل مع المحتوى الديناميكي

نعني بالمحتوى الديناميكي العناصر التي تظهر بعد انتهاء تحميل الصفحة. ومن الأمثلة على ذلك الصور المحملة ببطء واللافتات والنماذج وما إلى ذلك.

لكي تأثيرها على درجة CLS منخفضة، اتبع نفس النصيحة المذكورة أعلاه:

• حدد حاوياتها مسبقًا وأعطها أبعادًا ثابتة.
• ربط ظهورها بتفاعل المستخدم. بهذه الطريقة، تتجنب عقوبة CLS.

بالمناسبة، Weglot فهي قادرة تمامًا على ترجمة المحتوى الديناميكي. لذا، لا داعي للقلق من أن لا يفهمه أفراد جمهورك.

العمل على التفاعل لكي Paint

أخيراً، دعنا نتحدث عن كيفية التأكد من أن برنامج INP الخاص بك على ما يرام.

تحسين جافا سكريبت

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

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

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

إذا كنت تستخدم WP Rocket، لكي المكون الإضافي يسمح لك لكي تكوينات تفصيلية ما تريد لكي تحميلها وتلك التي لا تريد لكي تحميلها.

تقليل CSS غير المستخدم

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

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

كما ذكرنا سابقًا، يوفر WP Rocket خيارات لكي CSS غير المستخدم لكي .

إضافة التحميل البطيء

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

بالمناسبة، إذا كنت تواجه مشاكل في ترجمة الصور التي يتم تحميلها بشكل مؤجل، Weglot، فإن البرنامج يقوم افتراضيًا بترجمة عناوين URL للصور المضافة إلى سمات data-src أو srcset. إذا كان التحميل المتأخر لديك يستخدم سمات مخصصة، Weglot فلن تقوم بترجمتها بشكل تلقائي — سيتعين عليك إضافة مرشح PHP مخصص لـ WordPress التكاملات.

إذا كنت تستخدم Weglot تكامل JavaScript و/أو ما زلت غير قادر على ترجمة صورك، فاتصل بدعم العملاء للحصول على مزيد من المعلومات.

تحسين حيوية الويب الأساسية على موقعك الإلكتروني متعدد اللغات اليوم!

تُعد «مؤشرات الأداء الأساسية للويب» (Core Web Vitals) مؤشراً مهماً لجودة تجربة المستخدم على موقعك الإلكتروني متعدد اللغات . ولا يقتصر الأمر على اهتمام الزوار بهذا الموضوع فحسب، بل إن «مؤشرات الأداء الأساسية للويب» تؤثر أيضاً على ترتيب الموقع في نتائج البحث. ولهذا السبب، فإن تحسين موقعك وفقاً لهذه المؤشرات هو أمر يجب أن تأخذه على محمل الجد بالتأكيد.

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

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