أداء الموقع ومراقبة الصحة: ​​النصائح وأفضل الممارسات

يعد إنشاء موقع ويب أو مشروع تجارة إلكترونية وتشغيلهما أمرًا رائعًا - ومع ذلك ، فإن عملك بعيدًا عن الانتهاء بمجرد إنشاء موقعك وتشغيله.

بدون مراقبة الصحة والأداء المناسبة ، سيعاني موقع الويب الخاص بك من العواقب - والتي يمكن أن تكون أكبر بكثير من مجرد سرعة تحميل بطيئة.

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

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

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

عند النظر إلى المتوسط ​​، الذي يعتبر أيضًا مواقع الويب عالية التلوث ، يرتفع هذا الرقم إلى 0.9 جرام.

بصرف النظر عن المشكلات على المستوى العالمي ، فإن موقع الويب غير الصحي وغير المناسب سيكلفك الوقت والمال والإيرادات. تشبه صحة موقع الويب صحتنا: من السهل إهمالها ومن الصعب تحسينها.

يجب أن تكون على دراية بالمكونات الرئيسية التي تشكل صحة موقع الويب لإجراء ممارسات المراقبة المناسبة للمساعدة في توفير وقت المعالجة.

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

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

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

الجوانب التي يجب مراقبتها للحصول على درجة عالية من صحة موقع الويب

حيوية الويب الأساسية

صورة من المؤلف ، أكتوبر 2022

Google PageSpeed ​​Insights

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

تتعقب العديد من الأدوات الحيوية الأساسية للويب ، لكن العديد من مالكي مواقع الويب ينجذبون نحو أداة بسيطة: Google PageSpeed ​​Insights.

بعد إدخال عنوان URL الخاص بك في الأداة ، سيتم تقديمك بتقرير يوضح ما إذا كنت قد اجتزت اختبار Core Web Vitals وأي جوانب أخرى تحتاج إلى مراقبتها. فيما يلي المقاييس الثلاثة الرئيسية التي ستراها:

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

استهدف الحصول على 2.5 ثانية أو أقل .

إذا كانت نتيجتك تزيد عن 2.5 ثانية ، فقد يشير ذلك إلى ما يلي: تأخر الخادم لديك ، أو أن أوقات تحميل الموارد ليست متكافئة ، أو لديك عدد كبير من جافا سكريبت و CSS لحظر التجسيد ، أو أن العرض بطيء من جانب العميل.

أول تأخير في الإدخال (FID)

اهدف إلى الحصول على درجة 100 مللي ثانية أو أقل .

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

التحول في التخطيط التراكمي (CLS)

اهدف إلى الحصول على درجة 0.1 أو أقل .

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

حاصرات سرعة الصفحة

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

• كود JavaScript و CSS غير مستخدمين.
• عرض حظر JavaScript و CSS Code.
• JavaScript غير مصغر و CSS Code.
• أحجام ملفات الصور الكبيرة (المزيد عن ذلك أدناه).
• عدد كبير جدًا من سلاسل إعادة التوجيه.

من أجل تحسين تحميل ملفات JavaScript و CSS ، ضع في اعتبارك تحميلها مسبقًا.

هناك خيار آخر يتمثل في تمكين التلميحات المبكرة ، والتي تخبر المتصفح في استجابة خادم HTTP بالموارد التي يجب أن يبدأ تنزيلها من خلال الاستفادة من "وقت تفكير الخادم" ، وبالتالي تسريع تحميل الصفحة.

لاختبار موقع الويب الخاص بك:

1. انتقل إلى https://pagespeed.web.dev/
2. أدخل عنوان URL للصفحة التي تريد مسحها ضوئيًا.

أود أن أوصي باختيار صفحتك الرئيسية أولاً.

أداة أخرى مفيدة هي WebPageTest.org ، والتي تعرض أيضًا "أساسيات الويب الأساسية" والمقاييس الأخرى التي يمكن أن تساعدك على تحسين أداء موقع الويب الخاص بك وصحته بشكل كبير. أيضا ، إنه مجاني!

ما عليك سوى لصق عنوان URL للصفحة في مربع البحث المعروض على الموقع ، وسيقوم بإجراء اختبار كامل من موقع افتراضي.

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

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

صورة من المؤلف ، أكتوبر 2022

في UCRAFT ، نستخدم مجموعة من الأدوات مثل PageSpeed ​​Insights و Chrome Dev Tools و WebPageTest والعديد من الأدوات الأخرى ، لاكتساب فهم واضح لما نحتاج إلى العمل عليه عندما يتعلق الأمر بأداء موقعنا - خاصة وأن صناعة SaaS هي قدرة تنافسية عالية بالفعل.

عناصر التصميم

لقطة من الكاتب ، أكتوبر 2022

عندما نفكر في أداء موقع الويب والمراقبة الصحية ، فإننا نتركها عادةً لفريق التكنولوجيا للتعامل معها.

لكن ماذا لو أخبرتك كيف تصمم موقع الويب الخاص بك ، والعناصر التي تختارها يمكن أن تؤدي إلى أداء أو تعطله؟

هذا صحيح - حان الوقت لإشراك فريق التصميم.

تحسين الصورة

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

وبالمثل ، قم بضغط صورك وجرب أنواع ملفات مختلفة مثل WebP و JPEG 2000 و JPEG XR بدلاً من اختيار ملفات JPEG أو PNG الأثقل.

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

تدعم جميع المتصفحات تقريبًا ، بما في ذلك Chrome و Safari و Firefox ، سمة التحميل = "lazy" على <img> أو <iframe> ، والتي تخبر المتصفح بتحميلها عندما يقترب المستخدم منها.

تأكد من عدم التحميل البطيء للصور في الجزء المرئي من الصفحة ، حيث سيؤدي ذلك إلى انخفاض درجة LCP لصفحتك ، وتوصي Google باستخدام سمة fetchpriority = "high" على الصور الموجودة في الجزء المرئي من الصفحة لتحسين LCP.

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

أيضًا ، استفد من استجابة السمة "srcset" لتحميل الصور ذات الحجم المناسب بناءً على حجم الشاشة ، وتجنب تحميل الصور الكبيرة بشكل متكرر على الشاشات الصغيرة. سيساعد هذا بشكل كبير في تحسين درجة LCP.

الخطوط

غالبًا ما تكون الخطوط المخصصة الباهظة صعبة القراءة للمستخدمين الذين ليس لديهم رؤية 20/20 ، ولكنها يمكن أيضًا أن تبطئ موقع الويب الخاص بك إلى حد كبير.

قم بتبديل الخطوط المستضافة خارجيًا للحصول على المزيد من الخطوط الآمنة للويب ، وجرب خطوط Google - طالما أنها مستضافة من خلال شبكة CDN الخاصة بـ Google.

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

تأكد من تحميل الخطوط الخاصة بك مسبقًا.

الرسوم المتحركة / الميزات الإضافية

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

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

لا تستخدم الرسوم المتحركة غير المركبة ، لأنها تؤدي إلى إعادة طلاء الصفحة ، مما يزيد من عمل السلسلة الرئيسية - وقد تظهر صفحة الويب غير مستقرة بصريًا عند تحميلها.

حل PWA لتحسين الهاتف المحمول

لماذا لا تسلك المسار الملائم للجوال بالكامل وتحول موقع الجوال الخاص بك إلى تطبيق ويب تقدمي (PWA)؟

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

مقاييس الأداء الفني الإضافية

مدة التشغيل

يظهر الجهوزية كيف يعمل موقع الويب الخاص بك بشكل جيد.

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

إذا كان ذلك ممكنًا ، فاستهدف الحصول على وقت تشغيل بنسبة 99.999٪ واختبر موقع الويب الخاص بك من مواقع مختلفة.

أدوات مراقبة الجهوزية:

• StatusCake.
• بينغدوم.
• وقت تشغيل أفضل.
• الجهوزية الروبوت.

أداء قاعدة البيانات

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

يمكنك التحقق من ذلك من خلال مراقبة وقت الاستجابة لاستفساراتك وتحديد استعلامات قاعدة البيانات التي تستغرق معظم الوقت.

بمجرد القيام بذلك ، احصل على التحسين! يمكنك استخدام أدوات مثل Blackfire.io لمساعدتك على تحديد الاختناقات بسهولة وإيجاد حلول بناءً على بيانات دقيقة.

أجهزة خادم الويب

قد يتأخر موقع الويب الخاص بك إذا كانت مساحة القرص لديك مليئة بملفات السجل والصور ومقاطع الفيديو وإدخالات قاعدة البيانات. تأكد من مراقبة تحميل وحدة المعالجة المركزية (CPU) بانتظام ، خاصة بعد تنفيذ التحديثات أو تغييرات التصميم.

يمكن أن تساعدك أدوات مثل New Relic على تحسين مكدسك بالكامل من خلال المراقبة الفعالة وتصحيح الأخطاء.

رؤية البحث

الكثير من المقاييس التي نوقشت أعلاه لها بالفعل تأثير كبير على رؤية البحث.

لذلك عندما تقوم بتشغيل صفحات موقع الويب الخاص بك من خلال Google PageSpeed ​​Insights وتحسينها ، فأنت تقوم أيضًا بأشياء مهمة لتحسين محركات البحث لديك.

يمكنك أيضًا اختيار أدوات الزحف إلى مواقع الويب مثل Semrush أو Sitechecker.pro أو Screaming Frog أو DeepCrawl أو أي أداة أخرى تناسب احتياجاتك.

تساعد برامج زحف مواقع الويب في العثور على جميع أنواع المشكلات ، مثل:

• كسر الروابط.
• الصور المكسورة.
• مراقبة المقاييس الحيوية الأساسية للويب.
• إعادة توجيه السلاسل.
• أخطاء البيانات المنظمة.
• صفحات Noindexed.
• العناوين والأوصاف التعريفية مفقودة.
• محتوى مختلط.

تأكد من أنك مستعد تمامًا عندما يتعلق الأمر بالنقاط التالية:

• خريطة موقع XML - تأكد من تنسيق خريطة الموقع بشكل صحيح وتحقق مما إذا كان من الضروري إجراء أي تحديثات وإعادة إرسال خريطة الموقع عبر Google Search Console.
• Robots.txt - تأكد من استخدام ملف robots.txt لصفحات الويب الخاصة بك (HTML أو PDF أو أي تنسيقات أخرى غير وسائط يمكن لمحركات البحث قراءتها) لإدارة حركة الزحف بشكل أفضل ، خاصة إذا كنت تشك في أن خادمك قد يكون غارقًا في ذلك الطلبات من زاحف Google.

أمن الموقع والتخزين المؤقت

احصل على شهادة SSL الخاصة بك!

الموقع الصحي هو موقع آمن.

حتى إذا تم تحميل موقع الويب الخاص بك في الوقت المناسب وحصل على درجة 100/100 ، فلا توجد طريقة سيثق بها المستخدمون (أو محركات البحث) في موقعك إذا لم يبدأ بـ https: //.

شهادة SSL هي في الأساس رمز على الخادم الخاص بك يقوم ببناء اتصال مشفر ، مما يضمن بقاء بيانات المستخدم آمنة.

لا يعد الحصول على شهادة SSL عملية صعبة بشكل خاص ، ولكنها قد تكون طويلة عند القيام بها يدويًا.

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

ضع في اعتبارك استخدام CDN

شبكات توصيل المحتوى (CDNs) هي خوادم موزعة تعمل في انسجام تام لتقديم محتوى إنترنت سريع.

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

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

تشمل أفضل اللاعبين في الصناعة Cloudflare و Amazon Cloudfront و Google Cloud CDN. ومع ذلك ، هناك العديد من الخيارات الأخرى ، لذا أجرِ بحثك واختر أفضل CDN لموقعك على الويب ومتطلبات عملك.

إعداد جدار حماية تطبيق الويب

يحمي جدار حماية تطبيقات الويب (WAF) تطبيقات الويب عن طريق تصفية حركة مرور HTTP المشبوهة. يهدف إلى منع التطبيقات من الهجمات مثل:

• التزوير عبر المواقع.
• البرمجة النصية عبر المواقع (XSS).
• إدراج الملف.
• حقن SQL.

فيما يلي قائمة بجدران حماية تطبيقات الويب الأكثر شيوعًا والموثوقية:

• Cloudflare WAF.
• جدار حماية GoDaddy.
• مايكروسوفت أزور.

أو إذا كنت تستخدم WordPress ، فيمكنك التفكير في تثبيت مكونات إضافية مثل:

• WordFence.
• سوكوري.
• أمان شامل (AIOS).

حكم

هذا هو التفاف! كما يمكنك أن تقول ، يعتمد أداء موقع الويب وصحته على جوانب مختلفة.

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

تعد مُحسّنات محرّكات البحث أمرًا حيويًا أيضًا لصحة موقع الويب الخاص بك ، لذا تحقق من رؤية البحث والروابط وأدوات منع التحميل المحتملة لمعرفة ما يمكنك تحسينه.

ولا تنسَ شهادة SSL والتخزين المؤقت أيضًا.

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

تذكر تحسين صورك ، وتجنب الخطوط الثقيلة ، واستخدام الرسوم المتحركة باعتدال.

المزيد من الموارد:

• كيفية استخدام تقرير Chrome UX لتحسين أداء موقعك
• 6 نصائح لتحسين أداء شبكة Google الإعلانية
• مُحسنات محركات البحث الفنية المتقدمة: دليل كامل

الصورة المميزة: JulsIst / Shutterstock