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

في ٢٠٢٤، التهمت مراكز البيانات وشبكات النقل ما يقارب ١٫٥٪ من كهرباء العالم، بحسب وكالة الطاقة الدولية، ومن المتوقَّع أن تتضاعف هذه الحصة تقريبًا بحلول ٢٠٣٠. وراء هذه النسبة تفاصيل صغيرة جدًّا: طلب HTTP إضافي، صورة لم يضغطها أحد، حزمة JavaScript ضخمة تُعيد رسم فقرة ثابتة مع كل تمرير. أشياء لا يراها المستخدم، ولا يتوقف عندها كثير من المطوّرين. ومع حلول يوم الأرض هذا الأسبوع، يحقّ لنا أن نسأل سؤالًا لا نسأله كفاية: كم يكلّف موقعك الكوكبَ فعلًا؟ وكم يكلّفك أنت؟

نحن لم نبدأ نبحث عن شارة «خضراء». بدأنا نبحث عن السرعة. ثم اكتشفنا ما يعرفه كل مهندس أمضى وقتًا مع أدوات القياس: الموقع الأسرع هو الأخفّ، والأخفّ هو الأرخص في الاستضافة، والأرخص في الاستضافة هو الأقل استهلاكًا للطاقة. ثلاث صفات، قرار هندسي واحد. أمضينا السنة الماضية نبني AlsheikhMedia.com ومواقع منتجاتنا على هذا المبدأ بالذات.

ماذا تزن صفحتك فعلًا؟

متوسط وزن الصفحة اليوم حوالي ٢٫٥ ميغابايت. تقرير Web Almanac ٢٠٢٥ الصادر عن HTTP Archive يضع وسيط صفحات الهاتف عند ٢٫٥٦ ميغابايت. يبدو الرقم تافهًا إلى أن تضربه في مليارات التحميلات اليومية. والمشكلة أن هذا الخط البياني يسير في اتجاه واحد منذ عشرين عامًا: إلى فوق.

وزن الصفحة يأتي — في الغالب — من ثلاثة أبواب:

١. JavaScript. الصفحة الوسيطة تشحن نحو ٦٥٠ كيلوبايت من JavaScript مضغوطًا، بحسب Web Almanac ٢٠٢٥. أكثر هذا الحمل ليس منطق تطبيقك، بل أثاث إطار العمل نفسه: كود يُشغّل الصفحة بعد تحميلها (ما يسمّى hydration، أي «إحياء» الصفحة الساكنة وربطها بالأحداث)، وإدارة حالة لمحتوى لا يتغير، وأدوات تحليلات تُطلق نداءاتها مع كل حركة إصبع.

٢. الصور. ملفات PNG وJPEG غير المعالَجة لا تزال تستأثر بنحو ثُلث وزن الصفحة. كثير من المواقع يرسل للهاتف صورةً بدقّة شاشة مكتبية كاملة، وقليل منها يستعمل AVIF أو WebP مع srcset كما ينبغي. وجهاز المستخدم يدفع الفاتورة: بيانات، وبطارية، ووقت.

٣. السكربتات الخارجية. ودجت محادثة، تحليلات، اختبارات A/B، لافتة ملفات ارتباط، تضمينات شبكات اجتماعية. كل واحدة منها تُضيف استعلام DNS، واتصال TCP، وتنفيذ JavaScript. الموقع النموذجي يُطلق أكثر من ٨٠ طلبًا خارجيًا في التحميل الواحد. ثمانون ضيفًا لم تدعُهم إلى المائدة، وكلّهم يأكلون من طاقة جهاز الزائر.

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

ابنِ ثابتًا، قبل كل شيء

أكثر قرار أحدث فرقًا لدينا كان اختيار Astro إطارًا — وهو الإطار نفسه الذي يُشغّل تطبيقاتنا ثنائية اللغة. لم نختره لأنه الأحدث، بل لأنه — بخلاف معظم الأطر — لا يشحن أي JavaScript إلى المتصفح افتراضيًا. ما لم تطلب منه التفاعلية صراحة، يُسلّمك HTML خالصًا.

---
// هذا المكوّن يُحوَّل إلى HTML نقي وقت البناء
// ولا يصل إلى المتصفح سطر واحد من JavaScript
const posts = await getCollection('blog');
---
<ul>
  {posts.map(post => (
    <li><a href={post.slug}>{post.data.title}</a></li>
  ))}
</ul>

أما حين نحتاج فعلًا إلى تفاعلية — زرّ قائمة على الجوّال، مُبدِّل لغة — فبدلًا من تحميل الصفحة بأكملها كتطبيق JavaScript واحد، نُشغّل الجزء الذي يحتاج حركة فقط، وعند الحاجة إليه فقط؛ هذا ما يسمّيه Astro «بنية الجُزر» (Islands Architecture): جزر صغيرة من التفاعلية تطفو في بحر من HTML الساكن. أمّا باقي الصفحة فيبقى كما خرج من محرّك البناء: حروفًا على صفحة، بلا عجلة تدور في الخلفية.

قارن هذا بإعداد Next.js أو Nuxt التقليدي، حيث تُحيا الصفحةُ كلّها لحظة التحميل، فتُشحن شجرة المكوّنات بالكامل JavaScript — حتى لو كان كل عنصر فيها لا يتحرك. الفرق ليس تجميليًّا. قسنا صفحة هذه المدوّنة فوجدناها تشحن ٨٫٦ كيلوبايت مضغوطة من JavaScript، لا غير. مدوّنة مماثلة مبنية على React تشحن عادةً عشرات الكيلوبايتات من كود الإطار قبل أن يكتب صاحبها سطرًا واحدًا من منطقه الخاص.

التوصيل من الحافة يُلغي المسافة

ننشر على Cloudflare Pages، ما يعني أن HTML مخزَّن مسبقًا في أكثر من ٣٠٠ موقع حول العالم، على حافة الشبكة، قريبًا من المستخدم. زائر من دبي لا ينتظر رحلة إلى خادم في فرجينيا؛ الصفحة تصله من أقرب عقدة، في أقل من ٥٠ مللي ثانية في الغالب.

المسألة ليست ترف سرعة. كلّما طالت الاستجابة، طال بقاء البنية التحتية — موجّهات، ومبدّلات، ومعدّات راديو — مشتغلةً على طلبك الواحد. اختصِر زمن الرحلة، تُختصر الطاقة المنفقة في كل حلقة من السلسلة. على مستوى موقع واحد يبدو الأثر مجهريًّا؛ على مستوى شبكة عالمية يتراكم ليصبح مرئيًّا في فواتير الكهرباء.

ثم إن التوصيل من الحافة يُعفينا من مشقّة أخرى: لا خوادم أصل (origin servers) تعمل لمعظم الطلبات. لا عملية Node.js دائمة الاشتعال. لا حاوية تنتظر الزوّار في الثالثة فجرًا. ذاكرة الحافة تتكفّل بالأمر، والعقدة الواحدة تخدم آلاف المواقع في الوقت نفسه؛ تُقسَم تكلفة الكهرباء عليها جميعًا، فيبقى نصيب موقعك منها ضئيلًا.

الصور: أكبر مكسب، وأرخص معركة

الصور هي الثمرة الدانية، وهي أيضًا أكثر ما يغفل عنه الفِرق. نهجنا بسيط، ومدفون في خطوة البناء:

عالِج الصورة مرّة، واحدةً وإلى الأبد. كل صورة تُعالَج في وقت البناء إلى صيغ متعددة — WebP وAVIF — وأحجام متعددة. ثم يترك الاختيار للمتصفّح: يأخذ أصغر صيغة يدعمها، بالدقّة التي يحتاجها حجم الشاشة فعلًا، لا أكثر.

<picture>
  <source srcset="/images/hero-400.avif 400w, /images/hero-800.avif 800w"
          type="image/avif" />
  <source srcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w"
          type="image/webp" />
  <img src="/images/hero-800.jpg" alt="..." loading="lazy"
       width="800" height="450" />
</picture>

حمِّل كسولًا كلّ ما تحت الطيّة. خاصية loading="lazy" أداءٌ مجاني. الصورة التي لم يصل إليها الزائر بتمريره، لا يجب أن تستهلك ميغابايت من بياناته. على صفحة غنية بالصور، المكسب معتبر.

لا فيديوهات «بطل» في صفحات الهبوط. فيديو الخلفية التلقائي جميل، وكلفته مخفية. مقطع واحد مدّته عشر ثوانٍ بدقة 1080p يزن خمسة إلى خمسة عشر ميغابايت — أكثر من بقية الصفحة مجتمعةً. نحن نكتفي بصورة ثابتة مع حركة CSS خفيفة؛ الأثر البصري قائم، وفاتورة الطاقة أخفّ بأضعاف.

ما تفعله CSS لا يحتاج JavaScript

قاعدة داخلية ترسّخت عندنا بمرور الوقت: إن أمكن فعله بـ CSS، فلا تلجأ إلى JavaScript. حركات CSS تعمل على خيط التركيب (compositor) مع تسريع GPU، بينما حركات JavaScript تزاحم الخيط الرئيسي وتُعطّل العرض.

خذ مثالًا: إخفاء شريط التنقّل عند التمرير عندنا مكتوب بـ position: sticky وانتقالات CSS ومُستمع تمرير صغير. ليس حالة React تُعيد رسم الرأس مع كل بكسل. مُبدِّل الوضع الداكن تبديلٌ لخاصية CSS، لا سياقٌ (context) يُعيد بناء الشجرة كلها.

كلّ تحديث DOM تتجنّبه دوراتُ معالج موفَّرة. وكلّ دورة معالج موفّرة طاقةٌ لم تُحرق. الأرقام صغيرة على الصفحة الواحدة، لكنها تتراكم على ملايين المشاهدات حتى تصير رقمًا يستحق الذكر.

كيف تقيس الأثر البيئي لموقعك

الحساب ليس حكرًا على مختبرات الأبحاث. أدوات بسيطة تقرّبك من الرقم:

  • صفحتنا الرئيسية تزن ١٣٦ كيلوبايت — أخفّ بثمانية عشر ضعفًا من وسيط الويب، وWebPageTest يُثبت ذلك. أمّا Website Carbon Calculator فيُقدّر انبعاثات CO₂ لكل مشاهدة استنادًا إلى حجم البيانات المنقولة؛ مرِّر موقعك وقارن.
  • نتيجة أداء Lighthouse وكيلٌ معقول عن الاستدامة. أي نتيجة تتجاوز ٩٥ تعني — في الغالب — حزمًا صغيرة، وأصولًا مضغوطة، وعرضًا سريعًا.
  • Core Web Vitals تكاد تطابق مقاييس الاستدامة واحدًا لواحد: LCP أقلّ يعني بيانات أقلّ مرّت على الشبكة، CLS أقلّ يعني إعادات رسم أقلّ، INP أقلّ يعني عملًا أقلّ على معالج المستخدم.

التطابق ليس مصادفة؛ ما يخدم المستخدم يخدم الكوكب. مقاييس Google للأداء — سواء قصدت ذلك أم لا — هي مقاييس بيئية مقنَّعة.

الحساب التجاري يقول الشيء نفسه

الاقتصاد ينحاز إلى الهندسة النظيفة، لا إلى المبذِّرة.

الاستضافة تدفع ثمن الحوسبة والباندويدث. موقع ثابت على CDN حافي يكلّف كسرًا بسيطًا من كلفة تطبيق يُعرض من خادم. موقعنا هذا، عمليًا، لا نكاد ندفع شيئًا مقابل استضافته. موقع ديناميكي مكافئ بعرض من جانب الخادم يبتلع بين ٢٠ و٥٠ دولارًا شهريًا، ويستدعي مراقبة وتوسيعًا وصيانة مستمرّة.

السرعة تُحوِّل الزيارات إلى عملاء. كل ١٠٠ مللي ثانية تختصرها من زمن التحميل ترفع معدّل التحويل. قاست Amazon عام ٢٠٠٦ خسارة ١٪ من الإيرادات مقابل كل ١٠٠ مللي ثانية زائدة. المواقع الأسرع تتفوّق في نتائج البحث وفي الالتزام من الزوّار معًا.

البساطة تُعمِّر. ملف HTML كُتب عام ٢٠٠٥ لا يزال يفتح اليوم بلا عُقد. تطبيق React من ٢٠٢٠ قد لا يُبنى اليوم من دون معركة تحديثات تبعيات. البنية الأبسط تدوم أطول، وما دام المشروع يدوم من دون إعادة كتابة، فإن طاقته التراكمية تبقى منخفضة على مدى عمره كلّه.

ابدأ هذا الأسبوع، لا تنتظر إعادة كتابة

لست مضطرًّا لهدم بنيتك التقنية. ابدأ من الأعلى أثرًا:

١. مرِّر موقعك على WebPageTest. انظر إلى الحجم الكلي المنقول. إن تجاوز ١ ميغابايت، فالمكاسب السهلة بانتظارك.

٢. راجع السكربتات الخارجية، وفلتِر بلا شفقة. احذف ما لا تستعمله فعلًا. أداة التحليلات التي ثبّتها قبل ستة أشهر ولا تفتح لوحتها — هي تُحمَّل في كل مشاهدة، لكل زائر، كل يوم.

٣. حوِّل صورك إلى WebP أو AVIF. أمر واحد عبر sharp أو رفعةٌ إلى Squoosh تُنقص أحجام الصور ٥٠ إلى ٧٠٪ من دون أن تلحظ عينٌ فرقًا.

٤. أضف loading="lazy" لكل صورة تحت الطيّة. خمس دقائق، وتوفيرٌ فوري في الباندويدث.

٥. أعِد النظر في إطار العمل قبل المشروع المقبل. إن كانت الصفحة في معظمها محتوى، فلماذا تستدعي بيئة تشغيل كاملة على جهاز الزائر؟ Astro وEleventy وHugo كلّها تُخرج HTML ثابتًا بلا JavaScript أو بقدر ضئيل منه. الأداة المناسبة لمواقع المحتوى هي تلك التي تشحن أقلّ قدر من الكود، لا التي تتباهى بأكثره.

ابنِ سريعًا. اشحن خفيفًا. الكوكبُ أيضًا من بين مستخدميك.

استدامةأداءAstroحوسبة الحافةويب أخضرتطوير ويب