عشر طرق لتحسين أوقات تحميل موقع الويب الخاص بك و Google Core Vitals

ما هي "حيوية الويب الأساسية"

في بداية هذا العام ، قدمت Google مجموعة جديدة من المعايير التي تحدد استقرار وسرعة واستجابة أي موقع ويب معين. المعايير الثلاثة الرئيسية هي كما يلي:

• يُحدِّد التغيير التراكمي في التخطيط المقدار الذي يجب أن يتغير به هيكل صفحة الويب وتغيير موضعه. المعيار لهذا هو 0.1.
• يقيس Largest Contentful Paint المدة التي يستغرقها تحميل المحتوى الرئيسي للصفحة. يجب أن تكون أفضل النتائج 2.5 ثانية أو أقل.
• أول تأخير في الإدخال هو الوقت بين فتح صفحة الويب واللحظة التي تصبح فيها تفاعلية لأول مرة. الإطار الزمني الأكثر شيوعًا هو 100 مللي ثانية.

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

1. تحسين CDN وذاكرة التخزين المؤقت للمتصفح

يجب تحسين درجات FID و LCP الخاصة بك بسرعة كبيرة باستخدام هذه الطريقة. قم بخدمة أصولك الثابتة من CDN ، أو قم بتخزينها مؤقتًا على خدمة مثل Cloudfront من AWS. ستحصل المتصفحات على النتائج المطلوبة بسرعة أكبر بعد ذلك.

بالإضافة إلى ذلك ، يمكن تخزين الصفحات الديناميكية مؤقتًا في CDN بقيم TTL الصحيحة المطبقة بالفعل بناءً على كيفية تصرف تطبيقاتك.

2. استخدم الحجم الدقيق لجميع الإعلانات والوسائط

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

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

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

3. تحميل الصور ذات الدقة الصحيحة بطريقة كسولة بناءً على نوع الجهاز الذي يتم استخدامه

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

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

4. استخدم SSR و CSR بالطريقة الذكية

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

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

5. كسر كل شيء عن طريق تقسيم التعليمات البرمجية الخاصة بك

يعد استخدام أحجام الملفات الأكثر أهمية للأصول (خاصة ملفات JS) فكرة سيئة بشكل عام. بدلاً من ذلك ، يجب أن تسمح لبروتوكول h2 والاستفادة منه لتحميل الأصول مرة أخرى بشكل غير متزامن في أجزاء منفصلة.

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

6. استخدم تقنيات ضغط Brotli لتقليل الأصول الثابتة

بقدر ما يذهب الضغط ، يبدو أن Brotli هو الخيار الأفضل من حيث سرعة التحميل. ومع ذلك ، ستضيف نسب الضغط الأعلى إلى الحزمة وأوقات البناء من حيث DevOps.

ولكن في نهاية اليوم ، يعد وقت تحميل الموقع هو العامل الأكثر أهمية ويجب إعطاؤه الأولوية فوق أي شيء آخر.

7. اجعل محتوى الاستجابة وطلب Api فعالين قدر الإمكان

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

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

8. قلل الحجم الإجمالي لصفحاتك ومستنداتك

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

حاول دائمًا الحفاظ على نظافة الأشياء من جانب الكود للأشياء لأنه من السهل تفويت أجزاء من البيانات الزائدة عن الحاجة.

9. استبدال صور الفيديو المصغرة بصور العنصر النائب

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

من الأفضل اختيار صورة عنصر نائب أو مساحة فيديو فارغة للحفاظ على الموارد وبالتالي زيادة سرعة الموقع.

10. اختر أسرع خادم متوفر

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

من خلال إنفاق المزيد من المال ، ستوفر قدرًا كبيرًا من الوقت بشكل عام. Cloudflare هي أداة ممتازة على مستوى DNS تسمح لك بتحسين موقعك بشكل فعال من حيث التكلفة بدون موارد خادم مكلفة.

خاتمة

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

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