5 طرق لتحسين مؤشرات الويب الأساسية الخاصة بك
5 طرق لتحسين مؤشرات الويب الأساسية الخاصة بك
إخلاء المسؤولية
انظر ، لا يوجد شيء واحد مضمون لإصلاح مشكلة واحدة محددة. عليك أن تأخذ نظرة أشمل لتحسين موقعك. تشكل الكثير من الإصلاحات الصغيرة نتائج كبيرة. لذا ، بينما سأقدم لك خمسة أشياء يمكنك العمل عليها ، فإن هذا ليس نهائيًا. حتى Google تقول إن العديد من العناصر تعمل معًا للتوصل إلى نتائج ، لذلك من الصعب تحديد ما إذا كنت تفعل ذلك ، فسترتفع النتيجة في تقرير موقعك.
ما تقدمه لك Google ، هو رؤى حول ما يبطئ الموقع أو ما يضر بتجربة المستخدم. تقدم العديد من الأدوات أيضًا نصائح حول كيفية إصلاح الأشياء. Web.dev/measure ، على سبيل المثال ، لا يقدم نتائج متعمقة ، لكنه يمنحك فكرة عن تأثير إصلاح معين.
خمسة أشياء يمكنك أنت أو المطور الخاص بك القيام بها
على مر السنين، كان هناك نقاش مستمر حول أهمية سرعة الموقع و تجربة المستخدم . ولكن في حين أن هناك الكثير من المواد حول كيفية تحسين موقعك ، فإن وضع هذه المعرفة موضع التنفيذ أمر صعب. في الأشهر القليلة الماضية ، وضعت Google السرعة مرة أخرى في المقدمة مع تحديث تجربة الصفحة الذي سيحدث العام المقبل. لمساعدتك على الاستعداد لذلك ، قامت بتطوير أدوات لمنحك رؤى والكثير من الوثائق لقراءتها.
بالنسبة للعديد من المشكلات ، لم تتغير النصيحة كثيرًا. يتلخص الأمر كله في توصيل المحتوى الرئيسي للمستخدمين بأسرع وقت ممكن. قم بإجراء الاختبار لمعرفة كيفية أداء موقعك ، وحاول إعطاء الأولوية للإصلاحات وابدأ! ستجد أدناه مزيجًا من الطرق القديمة والجديدة لتحسين موقعك لتحسين مؤشرات”أساسيات الويب الأساسية”.
تحسين الصور الخاصة بك
سأبدأ هذه القائمة بنصائح قديمة ذهبيه: تحسين الصور. من أهم الأشياء التي يمكنك القيام بها لموقعك تحسين صورك بشكل صحيح. نعم ، قلنا ذلك مليون مرة لكننا سنقولها مرة أخرى: افعلها. قد تؤذيك هذه الصورة الكبيرة غير المحسّنة على صفحتك الرئيسية أو صفحتك المقصودة. غالبًا ما تكون الصور الكبيرة هي أكبر رسمة بالمحتوى First Contentful Paint (LCP) لأي موقع معين. تأكد من منح زوار موقعك ترحيبًا مناسبًا عن طريق جعل هذا التحميل سريعًا!
لدينا مقال شهير عن تحسين محركات البحث للصور يصف ما يمكنك القيام به لتحميل هذه الصورة بسرعة. لكن باختصار ، تأكد من تقديمها بالحجم المطلوب وضغطها جيدًا. هناك الكثير من الأدوات لمساعدتك على القيام بذلك. أنا شخصياً أحب النتائج التي أحصل عليها مع squoosh.app . لا تعتقد أنك بحاجة إلى الاحتفاظ بهذه الدقة الهائلة حتى تكون تلك الصورة حادة على الشاشات الأكثر شيوعًا.
حاول أيضًا اعتماد تنسيقات حديثة مثل WebP. يمكن لهذه التنسيقات تقديم صور عالية الجودة بحجم أقل. يحظى WebP بدعم جيد وحتى Apple قفزت على متنها! سيدعم إصدار Safari 14 القادم – على كل من MacOS و iOS – WebP. نعم ، يدعم متصفح Microsoft Edge الجديد الذي يعمل بنظام Chromium WebP أيضًا.
منصتك الخاصة أيضًا في وردبريس يوجد أداة ستساعدك على تحسين تحميل الصور. من المقرر أن يدعم الإصدار 5.5 من WordPress في أغسطس التحميل البطيء للصور. هذا يعني أنه سيتم تحميل تلك الصور التي تظهر على الشاشة فقط ويترك الباقي ليتم تحميله عندما يتفاعل المستخدم مع تلك الشاشة. هذا يخبر المتصفح بتحميل الصور الكبيرة فقط عند الحاجة إليها.
جزء آخر من نصيحة سرعة الموقع هو استخدام CDN ، لكن هل تعلم أنه يمكنك أيضًا استخدام CDN خصيصًا للصور؟ و صورة CDN يمنحك المزيد من السيطرة على الطريقة التي تريد أن تظهر بها وبالطريقة التي تريدها .
ثبّت التحميل عن طريق تحديد مقاسات للصور
أحد المقاييس الجديدة هو إزاحة التخطيط التراكمي Cumulative Layout Shift أو CLS للاختصار. مثال على ذلك عندما تبدو صفحة الجوال جاهزة وعندما تريد الضغط على زر ، يتحول المحتوى ويظهر إعلان بطيء التحميل في ذلك المكان. يحدث هذا كثيرًا وهو أحد الأسباب الرئيسية لإحباط المستخدمين. الآن، مع تحقيق Cumulative Layout Shift الخاص بك لن لن تكون صفحتك أسرع من المؤكد ولكن ستجعلك تشعر انها أسرع وكل صورة ستكون في مكانها.
ينتج عن CLS التحول في التخطيط التراكمي “اختصار كلمة “Cumulative Layout Shift” “صور بدون أبعاد في ال CSS. يمكن أيضًا أن يكون سببها الإعلانات والتضمينات بدون أبعاد ، أو المحتوى الذي يتم حقنه ديناميكيًا. عندما لا يتم تحديد الأبعاد بشكل صحيح ، تميل هذه العناصر إلى القفز قليلاً أثناء عملية التحميل ، مما يجعلها تبدو متشنجة وغير مستقرة. قد يكون هذا أيضًا بسبب إدراج محتوى جديد فوق المحتوى الحالي. لا تفعل ذلك ، إلا ربما بعد تفاعل صريح من قبل المستخدم.
تتمثل إحدى الطرق التي يمكنك من خلالها تحسين Core Web Vitals ومنع CLS في إضافة العرض والارتفاع للصور في CSS. بهذه الطريقة ، سيحجز المتصفح مساحة لتلك الصورة التي من المحتمل أن تظهر بعد النص. الآن ، ستختفي الترددات لأن المتصفح يعلم أنه سيتم إضافة شيء ما في الوقت المناسب.
لذلك ، تأكد من أن صورك تحتوي على سمات عرض وارتفاع مناسبة. بالطبع ، يمكنك أيضًا القيام بذلك باستخدام صور متجاوبة منتظمة. فقط تأكد من أنك تستخدم نفس نسبة العرض إلى الارتفاع لجميع الأحجام.
<img src="mountain.jpg" width="640" height="360" alt="Mountain underneath a cloudy sky">للتعامل مع قفز الإعلانات أو المحتوى المُحقن ، يُرجى حجز مساحة لها أيضًا. في النهاية ، قد ينخفض CLS قليلاً. وبالتالي يحسن بشكل عام من ال مستوى مؤشرات الويب الأساسية لديك .
قم بتسريع الخادم الخاص بك لتقليل وقت التحميل هذا
كلما كان الخادم الخاص بك يستجيب للطلبات بشكل أسرع ، كان ذلك أفضل. يؤدي الحصول على هذا الخادم للاستجابة بشكل أسرع إلى تحسين الكثير من مقاييس سرعة الموقع. في المواقع المعقدة ، يظل الخادم مشغولاً بمعالجة الطلبات وخدمة الملفات والبرامج النصية ، لذلك من الأفضل تحسين هذه العمليات.
يتكون تحسين الخادم الخاص بك من عدة أجزاء. أولاً ، قم بترقية خطة الاستضافة الخاصة بك. لا تبخل على الاستضافة. اختر واحدًا يقدم أداءً جيدًا بسعر عادل. أيضًا ، هناك عمل يتعلق بكيفية إعداد الخادم – استخدم إصدارًا حديثًا من PHP! – وما الجهاز الذي اخترته. ربما يجب عليك ترقية الجهاز إذا وجدت أنه يفتقر إلى ذلك. تحتاج أيضًا إلى البحث في كيفية عمل قواعد البيانات الخاصة بك ومعرفة ما إذا كان بإمكانك إجراء تحسينات. استخدم أدوات مثل البرنامج المساعد Query Monitor WordPress لمواصلة تحليل الاستعلامات على موقعك.
يمكنك أيضًا النظر في كيفية قيام خادمك بدفع الملفات إلى العملاء. هناك عدة طرق لتحسين هذه العملية ، link rel=preloadعلى سبيل المثال ، أو دفع خادم HTTP / 2. هذه حلول أكثر تقدمًا تتيح لك ضبط كيفية استجابة خادمك للطلبات. هنا ، مرة أخرى ، يمكن لـ CDN فعل المعجزات لتحسين “أساسيات الويب الأساسية”.
اهتم ب CSS المهم لتحميل محتوى الجزء المرئي والمحتوى من الصفحة بشكل أسرع
عندما يقوم المتصفح بتحميل صفحة ، يجب أن يحصل على HTML ، ويعرضها ، ويحصل على CSS ، ويعرضها ، ويحصل على JavaScript ، ويعرضها ، وما إلى ذلك ، وما إلى ذلك. كلما زاد عدد الملفات التي تحتاجها لتحميل موقعك وكلما زاد حجمها ، كلما كان تحميل موقعك أبطأ. في كثير من الأحيان ، بينما يكون المتصفح مشغولاً بفعل الأشياء ، لا يمكنه تحميل الأشياء السابقة في الخلفية أو تأجيلها. هناك عناصر معينة تمنع العملية.
نظرًا لأنه يتم تحميل CSS متأخرًا ، فقد يستغرق ظهور شيء ما على الشاشة بعض الوقت. من خلال أخذ الأجزاء المهمة من تصميمك – الجزء الذي يظهر في الجزء المرئي – من ملف CSS الرئيسي وتضمينه في التعليمات البرمجية الخاصة بك ، يمكنك الحصول على شيء ما على الشاشة بشكل أسرع. إصلاح هذا ، مرة أخرى ، لا يجعل موقعك أسرع ، لكنه يجعله يظهر محتواك بشكل أسرع. كل ذلك من أجل تجربة المستخدم .
للحصول على مجموعة من CSS المهمة ، يمكنك الاختيار من بين عدد من الأدوات أو يمكنك القيام بذلك يدويًا. بالإضافة إلى ذلك ، يمكنك استخدام مكونات التخزين المؤقت في WordPress مثل WP Rocket . يحتوي WP Rocket على زر بسيط يسمى Optimize CSS delivery . يساعد تنشيط هذا في التخلص من CSS الذي يحظر العرض وتحسين تحميل موقعك. بالطبع ، يقوم WP Rocket أيضًا بأشياء رائعة أخرى مثل تصغير CSS و JavaScript وتأجيل تحميل JavaScript.
اذا كنت تريد نسخه من اضافة wp Rocket بسعر مناسب يمكنك التواصل معي على [email protected] وسأقوم بتوفيرها إليك مرخصة بسعر مناسب .
تحسين تحميل نصوص الاطراف الثالثة third-party scripts
بالنسبة للعديد من المواقع ، يأتي البطء أيضًا من الخارج. إذا كان موقعك يعتمد على نصوص إعلانية ، على سبيل المثال ، فأنت في الأساس في أيدي مزود الإعلانات. يمكنك فقط أن تأمل أن تجعل إعلاناتهم عالية الأداء. إذا تم تحميل إعلاناتهم ببطء شديد ، فربما حان الوقت للعثور على مزود آخر.
إذا وجدت أن البرامج النصية للجهات الخارجية تبطئ موقعك ، فيجب أن تبحث في هذا الأمر. اسأل نفسك ، هل أحتاج حقًا إلى هذا الإعلان المحدد؟ ما هي قيمة هذه النصوص؟ قد يكون هناك خيار مختلف أفضل قليلاً وأقل إرهاقًا لخادمك. ربما جرب ذلك؟
إذا أمكن ، يمكنك تجربة استضافة البرنامج النصي بنفسك. بهذه الطريقة ، ستتحكم بشكل أكبر في عمليات التحميل. إذا لم تتمكن من القيام بذلك ، فتحقق مما إذا كان يمكنك تحميله مسبقًا بشكل أسرع.
على الأقل ، تأكد من تحميل البرامج النصية بشكل غير متزامن أو تأجيلها حتى اللحظة الأخيرة. بهذه الطريقة ، يمكن للمتصفح إنشاء الصفحة أولاً قبل الحصول على البرنامج النصي الخارجي وتشغيله. استخدم عدم التزامن إذا كان النص الذي تقوم بتحميله مهمًا ، مثل نص التحليلات. يمكنك استخدام التأجيل لموارد أقل أهمية. هناك الكثير من الوثائق حول تحسين البرامج النصية للجهات الخارجية .
تحسين “مؤشرات للويب الأساسية” core web vitals : جميع التحسينات الصغيرة مهمة
مع التحديث القادم لتجربة الصفحة ، تضع Google سرعة الموقع وتجربة المستخدم في المقدمة والوسط مرة أخرى. لقد نظرنا دائمًا إلى مُحسّنات محرّكات البحث بشكل شامل – هناك العديد من الأجزاء المتحركة ويجب عليك العمل عليها جميعًا لبناء أفضل موقع هناك. على الرغم من أن النصائح المذكورة أعلاه يمكن أن تساعدك على تحسين نتائج Core Web Vitals ، إلا أنه يجب عليك فعل ذلك لتزويد زوارك بتجربة أفضل.