مسار تعليمي

سرعة الموقع

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

  • 10 دروس
  • مجاني، دون تسجيل

تلك الدرجة الواحدة، والستة التي تحتها

الدرجة التي ينظر إليها الجميع

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

خط الماء: هنا تنتهي قراءة التقرير ويبدأ العمل
  • رد الخادم

    ما لم تصل أول بايت فليس لدى المتصفح ما يبدأ به. هنا يقرر التخزين المؤقت والاستضافة، لا القالب.

  • مسار العرض

    ما الذي يوقف أول رسم وما الذي لا يوقفه. أقصر دروس هذا المسار وأكثرها استعمالا.

  • وزن الصور

    أكبر جزء من وزن معظم الصفحات الفارسية، وأسهل ما يمكن إصلاحه.

  • جافاسكربت الطرف الثالث

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

  • الخطوط الفارسية

    مشكلة يعانيها الموقع الفارسي ولا يعانيها الإنجليزي. لها درس كامل في هذا المسار.

  • طبقات التخزين المؤقت

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

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

المسار خطوة بخطوة

الدروس مرتبة بحيث يقوم كل درس على سابقه. ويمكنك الدخول من اي نقطة ايضا.

  1. 1لماذا تهم سرعة الموقعسرعة الموقع مهمة، لكن ليس للسبب الذي تُباع به عادة: أثرها في ترتيب غوغل صغير ومشروط، وأثرها في من ينتظر أمام الصفحة كبير وفوري. يرسم هذا الدرس الحد بين الاثنين اعتمادا على وثائق غوغل نفسها وعلى قياساتنا.مبتدئ
  2. 2كيف يبني المتصفح الصفحةيقرأ المتصفح HTML من أول بايت ويبني شجرة الصفحة أثناء ذلك، لكنه لا يرسم شيئا على الشاشة حتى يفهم CSS، وإن بلغ سكربتا عاديا توقف عنده. وكل نصيحة عن السرعة ستسمعها في بقية هذا المسار تخرج من هاتين الجملتين.مبتدئ
  3. 3نظرة عميقة في Core Web VitalsCore Web Vitals ثلاثة أرقام تقيس ثلاثة أشياء مختلفة تماما: LCP لسرعة ظهور أكبر عنصر في الصفحة، وINP لسرعة استجابة الصفحة للنقر واللمس، وCLS لمقدار انزياح التخطيط من تلقاء نفسه. ويحكم غوغل على الثلاثة لا من اختبارك أنت بل من الصدك ٧٥ للزوار الحقيقيين، مفصولا بين الهاتف وسطح المكتب.متوسط
  4. 4كيف تقيس سرعة الموقعقياس سرعة الموقع يعني أخذ تقرير مخبري واحد، ووضعه إلى جانب بيانات المستخدمين الحقيقيين، واختيار عمل واحد من الاثنين. وأصعب ما فيه ليس أخذ التقرير ولا فهم الأرقام، بل مقاومة الرغبة في إصلاح كل ما لوّنته الأداة بالأحمر.مبتدئ
  5. 5تحسين الصور للويبتحسين الصورة ثلاثة أعمال، بهذا الترتيب في الأهمية: تصغيرها إلى الحجم المعروض فعلا، وإرسالها بصيغة حديثة، وإعلان أبعادها صراحة في HTML. أما الصورة التي لا تكسب شيئا فالأفضل ألا تُرسل أصلا؛ وهذه تسبق الثلاثة كلها.مبتدئ
  6. 6ما هو التخزين المؤقت وأنواعهالتخزين المؤقت هو حفظ نتيجة عمل ما كي لا يُعاد العمل نفسه في المرة التالية. على هذا الموقع تستغرق الصفحة نفسها، وبعدد البايتات نفسه تقريبا، ٢٣.٥ مللي ثانية من الكاش و١٥٥.٥ مللي ثانية بدونه حتى يصل أول بايت منها.مبتدئ
  7. 7تحسين CSS وجافاسكريبتتحسين CSS وجافاسكريبت ثلاثة أعمال، وقيمتها بهذا الترتيب: احذف ما لا يلزم، وأخّر ما لا يلزم فورا، وصغّر ما يبقى. على هذا الموقع وفّر تصغير ورقة الأنماط الرئيسية ١٦.٣ كيلوبايت على السلك، ويأخذ ملف تحليلات واحد لم نكتبه ١٧١.١ كيلوبايت.متوسط
  8. 8الخطوط الفارسية وسرعة الموقعالخط الفارسي أثقل من نظيره اللاتيني، لكن أكبر توفير لا يأتي من تخفيف الملف؛ بل من ألا ترسل ملفات لا تلزم. فهذا الموقع يكتب خمسة أوزان في أنماطه ولا يرسل إلا ثلاثة ملفات خط، مجموعها ٧٤.٦ كيلوبايت.متوسط
تعلم سرعة الموقع: عشرة دروس من رد الخادم إلى الخطوط

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

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

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

اسئلة متابعة حقيقية

هل أحتاج إلى معرفة البرمجة لأبدأ هذا المسار؟

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

موقعي على ووردبريس، هل أذهب مباشرة إلى درس ووردبريس؟

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

لماذا لا توجد في هذا المسار قائمة بأفضل إضافات السرعة؟

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

كُتب هذا المسار لمن يريد أن يعرف بنفسه أين يذهب وقت صفحته. وإن كانت أرقام موقعك سيئة فعلا وفضلت أن يقوم أحد بالعمل، يمكنك هناك أيضا اختبار موقعك بمحرك Lighthouse؛ انظر صفحة تسريع الموقع