ما هو تصميم الويب المستدام وكيفية تحقيقه
نشرت: 2022-12-01
"أريد حقًا سيارة كهربائية ، لكنني ببساطة لا أستطيع تحملها" قالها أحد أصدقائي بأسف قبل بضعة أشهر. كنا أنا وهو نناقش تغير المناخ والتغييرات التي أدخلناها على عاداتنا.
ضحكت.
"أنت تعلم أنها تستهلك أيضًا الطاقة ، وإذا لم تقم بشحن سيارتك الكهربائية من خلال منفذ يستخدم الطاقة المتجددة ، فأنت لا تزال تلوث كثيرًا ، أليس كذلك؟"
قال إنه يعرف ذلك ، لكنه لا يزال يشعر أنه وشركته فولكس فاجن البالغة من العمر 20 عامًا كانت صفعة في وجه كل جهوده ليعيشوا حياة أكثر استدامة وصديقة للبيئة.
اقترحت "ماذا عن هذا - يمكنني أن أخبرك عن كيفية خفض انبعاثات الكربون من خلال عالمك الرقمي". ألقى نظرة محيرة علي. أخبرته بعد ذلك أنه وفقًا لبعض الإحصائيات ، يولد مستخدم الإنترنت العادي نفس الكمية تقريبًا من ثاني أكسيد الكربون كما لو كان يسافر 1000 كيلومتر بسيارة عادية ، وهناك أنشطة مختلفة تساهم في ذلك.
حارب هذه الفكرة لمدة عشر دقائق تقريبًا حتى سحبت البيانات الموجودة على هاتفي. بصراحة ، لم ألومه كما أتذكر ، كان لدي نفس رد الفعل في اليوم الذي أدركت فيه أن كل صفحة ويب أقوم بزيارتها لها تكلفة خفية - تكلفة الطاقة المستخدمة للحفاظ عليها.
سر الإنترنت القذر ، إذا جاز التعبير.
وفقًا لـ Website Carbon Calculator ، ينتج متوسط موقع الويب ما يقرب من 0.5 جرام من ثاني أكسيد الكربون لكل مشاهدة صفحة ، لذلك بالنسبة لموقع الويب الذي يحتوي على 100000 مشاهدة شهرية ، فإن هذا يعني 500 كجم في السنة. ضع في اعتبارك أن هذا لكل موقع ويب!
كمرجع ، تصدر السيارة المتوسطة 1200 كيلوجرام من ثاني أكسيد الكربون لكل 1000 كيلومتر ، لذا يمكنك أن ترى كيف يكون للإنترنت تأثير ملموس للغاية على تغير المناخ والاحتباس الحراري بسبب بصمتها الكربونية الهائلة.
لذا فإن السؤال المطروح هو: ماذا يمكنك أن تفعل بصفتك مالك موقع لتقليل تأثير موقعك على بيئتنا؟
تصميم الويب المستدام ، بالطبع.
في Kualo ، نحن مرتبطون بشكل جوهري بمفهوم الاستدامة لدرجة أننا شعرنا أنه سيكون من الطبيعي استكشاف هذا الموضوع. في هذه المقالة سوف نتعلم:
نريد أن نوفر لك المخططات الدقيقة التي ستساعدك على تقليل البصمة الكربونية لموقعك على الويب ، لذلك دون مزيد من اللغط ، دعنا نتعمق!
هذا ما يمكننا قراءته في بيان تصميم الويب المستدام ، حيث يوضح الموقع باختصار ما ستشمله هذه العقيدة. دعنا ننتقل بسرعة إلى النقاط الست:
إذا كنت تفكر في جميع النقاط المذكورة أعلاه ، فقد ترى أن ما يدعو إليه هذا البيان ليس مجرد تصميم ويب مستدام ولكنه بالفعل الأساس لممارسات الأعمال المستدامة والاقتصاد المستدام. من أجل مستقبل أفضل ، نحتاج إلى شركات تقدم خدمات ومنتجات مفيدة وذات مغزى لها تأثير سلبي ضئيل على البيئة والأشخاص.
بعبارة أخرى ، إذا كنت تريد تصميم ويب مستدامًا ، فيجب عليك:
الآن ، بالعودة إلى ما قلته في بداية هذا المقال (ورسم المعلومات البياني الخاص بنا حول التأثير البيئي للإنترنت) ، نعلم أن هذا هو في الأساس ثقب أسود متزايد للطاقة. من ناحية أخرى ، نعلم أيضًا أن الإنترنت أمر بالغ الأهمية لكثير من الأشخاص ، ولا يمكن استبداله بإصدار أكثر كفاءة في استخدام الطاقة ، كما تفعل مع سيارة أو كمبيوتر محمول.
لكن هل تعلم ما يمكننا مبادلة؟
تصميم موقعنا ، بالطبع.
إذا كانت النقطة الرئيسية هي أن حجم موقع الويب الخاص بك وكيف يتم بناؤه يؤثران بشكل مباشر على كمية ثاني أكسيد الكربون التي سينتجها ، فهذا ما نحتاج إلى معالجته بصفتنا مالكي مواقع الويب.
ولكن هل هناك فائدة إضافية لتغيير طرقنا عندما يتعلق الأمر بتصميم الويب؟
بالتأكيد سأقول نعم.
بصفتي مسوقًا ، اعتدت التفكير في جميع زوايا جهودي الرقمية والطريقة التي تؤثر بها على مشاريعي ، ويمكنني أن أخبرك على الفور أنه حتى على المستوى الشخصي ، من الأفضل نشر موقع ويب يتبع موقعًا صديقًا للبيئة تصميم الويب وإليك بعض الأسباب وراء ذلك:
لأسباب واضحة ، يفضل المستخدمون رحلات المستخدم الأقصر ، لأنهم لا يضيعون وقتهم. بصرف النظر عن تجربة العملاء ، على الرغم من ذلك ، سيزورون أيضًا عددًا أقل من الصفحات للعثور على ما يحتاجون إليه وبالتالي تقليل انبعاثات الكربون من زيارتهم.
(رصيد الصورة: https://www.appcues.com/blog/user-journey-map)
إنها لفكرة جيدة أن تتعرف بشكل أفضل على مفهوم رحلات المستخدم ، وبعد ذلك ، بمجرد أن تتمكن من تصميم خرائط رحلة المستخدم الخاصة بك بحرية ، لتكييف تصميم الويب الخاص بك معها.
تجربة المستخدم الجيدة (UX) التي تتجنب نقاط الاحتكاك ستؤدي حتمًا إلى انخفاض استهلاك الطاقة وزيادة سعادة العملاء.
يعد اختيار مزود يقدم استضافة مستدامة مدعومة بالطاقة المتجددة أمرًا لا بد منه. من الجيد أيضًا إلقاء نظرة على سياستهم البيئية الشاملة ومعرفة ما إذا كان مقدم خدمة الاستضافة قد اتخذ خطوات إضافية للتعويض عن انبعاثات ثاني أكسيد الكربون و / أو ما إذا كانوا يشاركون في ممارسات الاستدامة الأخرى.
إذا كان الموقع لا يحتوي على ذاكرة تخزين مؤقت ، فأنت بذلك تجعل الخادم يعمل بجدية أكبر. في كل مرة يصل فيها شخص ما إلى صفحة على موقع الويب الخاص بك ، يجب إنشاء محتوى الصفحة بسرعة من خلال معالجة كود PHP ، وإجراء استعلامات لقاعدة البيانات وتحويلها إلى محتوى HTML الذي يعرض موقع الويب الخاص بك.
يستخدم هذا المزيد من وحدة المعالجة المركزية والذاكرة والقرص الخاص بالخادم ، مما يستهلك الطاقة في هذه العملية. سيحتاج الخادم إلى القيام بذلك لكل زائر وكل صفحة ، لذلك كلما زاد عدد الزوار والصفحات لديك ، زادت الطاقة التي تستهلكها.
مع وجود التخزين المؤقت في مكانه ، يتم تنفيذ معظم عبء العمل المكثف هذا فقط في المرة الأولى التي يطلب فيها الزائر صفحة. ثم يتم تخزين HTML الناتج في ذاكرة تخزين مؤقت بحيث لا تحتاج كل عملية تحميل لاحقة للصفحة إلى القيام بكل هذا العمل الثقيل.
علاوة على ذلك ، يتم تحميل صفحاتك بشكل أسرع. هذا ليس مكسبًا لك ولزوار موقعك فحسب ، بل يعني أيضًا أن الزائرين يقضون وقتًا أقل في التباطؤ في انتظار تحميل الصفحة - مما يستهلك طاقة أقل في هذه العملية.
هناك العديد من الطرق للتخزين المؤقت لمواقع الويب ، في Kualo ، نفضل LiteSpeed Cache للتخزين المؤقت للصفحة ، ولدينا أيضًا Redis و Memcached لاستعلامات قاعدة البيانات المؤقتة. مواقع ويب فائقة السرعة واستدامة أفضل - ما الذي لا تحبه؟
هذا هو الحال غالبًا مع المكونات الإضافية الموجهة للتسويق أو المكونات المكررة التي نسيناها. قم بتقييم ما لديك ثم ما تحتاجه وامنح التمهيد لأي شيء آخر.
(الخط المخصص الذي تم إنشاؤه لـ Duolingo بواسطة وكالة Johnson Banks)
قد يتجاوز ملف الخط المخصص النموذجي 200 كيلو بايت بسهولة أثناء تضمين وزن واحد. إذا كنت تستخدم أوزانًا ومحارفًا مختلفة ، فسيؤدي ذلك إلى زيادة حتمية ، مما يؤثر على كل من السرعة واستهلاك الطاقة.
لذلك يوصى باستخدام الخطوط المخصصة فقط إذا كنت تشعر أنها مهمة حقًا لعلامتك التجارية ولأغراض عملية.
https://youtu.be/eY-VyLd2t-Q
تتضمن LiteSpeed Cache لـ WordPress تحسينًا تلقائيًا للصور ، لذلك لا داعي للقلق بشأن القيام بذلك بنفسك. علاوة على ذلك ، يمكنه تحويل الصور لاستخدام تنسيقات ملفات حديثة مثل WebP ، والتي يكون حجمها أصغر بنحو 25٪ مقارنة بصور PNG أو JPG.
بخلاف التحسين ، ما نحتاج أيضًا إلى التفكير فيه هو ما إذا كان استخدامها مبررًا وهادفًا.
على سبيل المثال ، قد تكون بعض صور المنتج عديمة الفائدة (مثل الزوايا المتشابهة جدًا). في حالات أخرى ، يمكن بسهولة استبدال الصور المستخدمة على الصفحة ، مثل صور المخزون العشوائية ، ببدائل مثل رسومات SVG أو تحقيق نفس التأثير من خلال أنماط CSS.
إذا كان هذا يتضمن الكثير من الصور أو مقاطع الفيديو على وجه الخصوص ، والتي قد تكون كبيرة الحجم ، فيجب أن تنتقل كل تلك البيانات عبر الإنترنت على الرغم من عدم رؤيتها مطلقًا.
يعني التحميل البطيء أنك تطلب هذا المحتوى فقط أثناء قيام المستخدم بالتمرير لأسفل صفحتك. ستظهر هذه الأقسام قبل عرض هذا المحتوى مباشرة ، لذا من وجهة نظر الزوار ، يبدو الأمر كما لو كان موجودًا دائمًا - لا يوجد فرق يمكن إدراكه.
لا يقتصر الأمر على تجنب إرسال البيانات غير الضرورية ، ولكنك ستعمل أيضًا على تحسين نقاط PageSpeed الخاصة بك عن طريق جعل موقع الويب الخاص بك أقل أهمية.
تأتي بعض التطبيقات مع تحميل بطيء مضمّن ، أو يمكن تثبيتها بمكوّن إضافي. بالنسبة إلى WordPress ، تشتمل LiteSpeed Cache على ميزة التحميل البطيء القادرة على التحميل البطيء لأي شيء من الصور أو مقاطع الفيديو أو المحتوى المضمن أو حتى كتل HTML بأكملها إذا كانت صفحتك طويلة جدًا.
ليس للرسوم المتحركة عادة أي غرض تكتيكي ، لذا استخدمها بأدنى حد ممكن. بالنسبة لمقاطع الفيديو ، فإنها تتجه بقوة إلى الغرض الذي تخدمه ، لذلك إذا كنت تعتقد أنها مفيدة للمستخدمين ، فاستخدمها بالفعل ، فقط تأكد من أنها محسّنة قدر الإمكان.
غالبًا ما تحتوي تعليمات HTML و CSS و Javascript على بيانات إضافية ، مثل المسافات وفواصل الأسطر أو التعليقات. هذه المساحات أو التعليقات مفيدة فقط بحيث يمكن للمطور قراءة وفهم الكود بسهولة ، ولكن لا فرق في كيفية تفسير المتصفح لشفرتك.
يؤدي تصغير الكود إلى تجريد كل هذا الوزن غير الضروري ، مما يقلل من حجم الملفات التي يجب نقلها عبر الإنترنت ، ويجعل تحميل موقعك أسرع.
بالنسبة إلى WordPress ، يعالج LiteSpeed Cache هذا الجانب من أجلك ، ولكن معظم التطبيقات الأخرى سيكون لها أيضًا ميزة مماثلة متاحة عبر مكون إضافي.
ربما تكون قد استخدمت سمة أو منشئ صفحات يتضمن عددًا كبيرًا من التخطيطات أو الأنماط أو الوظائف المختلفة التي لا تستخدمها أبدًا في أي مكان على موقعك.
ستبقى جميع الشفرات في ملفات CSS و JS ، مما يزيد من كمية البيانات التي يجب نقلها عبر الإنترنت ويجعل تحميل موقعك أبطأ بدون سبب وجيه.
قد يكون من الصعب تحديد الكود الذي يجب إزالته يدويًا ، ولكن بالنسبة إلى WordPress ، يتيح لك LiteSpeed Cache إزالة CSS غير المستخدمة تلقائيًا. يؤدي هذا إلى إزالة CSS غير المستخدمة وإنشاء ملف CSS فريد لكل صفحة. قد يكون هذا مفيدًا إذا كان لديك بضع صفحات فقط ، ولكن إذا كان موقعك يحتوي على الكثير من الصفحات ، فقد يظل استخدام ملف CSS واحد أكثر فاعلية.
يمكن أن يكون تجريد جافا سكريبت أكثر تعقيدًا ، على الرغم من أن LiteSpeed يمكنه على الأقل تأخير تحميله حتى يتم اكتشاف نشاط المستخدم. قد يكون هذا مناسبًا ، بشرط ألا يكون مطلوبًا لمحتوى الجزء المرئي من الصفحة.
في نهاية المطاف ، فإن أفضل نصيحة هي تجنب استخدام أدوات إنشاء الصفحات أو المكونات الإضافية المتضخمة كلما أمكن ذلك واستخدام كود نظيف تعرف أنه مطلوب بالفعل.
سوف يقضون وقتًا أطول بكثير في محاولة العثور على ما يبحثون عنه ، مما يؤدي إلى زيادة استهلاك الطاقة.
لتجنب ذلك ، تأكد من أن تصميمك يتكيف جيدًا مع أكبر عدد ممكن من هذه المتغيرات لتوفير تجربة مثالية للمستخدمين.
والأهم من ذلك ، من وجهة نظر الاستدامة ، أن هذا يساعد في تقليل ثاني أكسيد الكربون لأن نقل البيانات إلى أجزاء مختلفة من العالم يتطلب الكثير من الطاقة. وكلما زاد انتقال البيانات ، زادت الطاقة التي تتطلبها.
من الجيد أيضًا الإشارة إلى أن الصور التي يتم تقديمها عبر CDN يتم تقليل حجمها عادةً إذا تخطيت هذه الخطوة بطريقة ما. ستوفر لك العديد من شبكات CDN أدوات لتحسين الصورة ، بما في ذلك تقليل حجم الصورة وكثافة البكسل والتنسيق والضغط.
من المهم اختيار CDN الذي يستخدم الطاقة المتجددة ، بالطبع ، مثل Cloudflare.
يمكنك إما استكشافها يدويًا أو استخدام Google Analytics لتقييم الصفحات التي يمكن أن تكون قديمة أو ضعيفة الأداء. يمكنك بعد ذلك تحديد ما إذا كان يمكنك تكييفها للحصول على محتوى مفيد ومحدث أو تحديد أنها مخصصة ببساطة للحاوية.
تعد المشاركة في المشاريع التي تزرع الأشجار وتعوض الكربون طريقة رائعة ليس فقط لتحسين استدامة تصميم الويب الخاص بك ولكن أيضًا في عملك بشكل عام. تعتبر الأشجار من الفائزين المطلقين عندما يتعلق الأمر بتقليل انبعاثات ثاني أكسيد الكربون ، حيث تمتصها وتحولها إلى أكسجين.
ندعوك لزيارة شركائنا في Ecologi (أو أي منظمات أخرى مماثلة) والبدء في زرع تلك الأشجار!
ضحكت.
"أنت تعلم أنها تستهلك أيضًا الطاقة ، وإذا لم تقم بشحن سيارتك الكهربائية من خلال منفذ يستخدم الطاقة المتجددة ، فأنت لا تزال تلوث كثيرًا ، أليس كذلك؟"
قال إنه يعرف ذلك ، لكنه لا يزال يشعر أنه وشركته فولكس فاجن البالغة من العمر 20 عامًا كانت صفعة في وجه كل جهوده ليعيشوا حياة أكثر استدامة وصديقة للبيئة.
اقترحت "ماذا عن هذا - يمكنني أن أخبرك عن كيفية خفض انبعاثات الكربون من خلال عالمك الرقمي". ألقى نظرة محيرة علي. أخبرته بعد ذلك أنه وفقًا لبعض الإحصائيات ، يولد مستخدم الإنترنت العادي نفس الكمية تقريبًا من ثاني أكسيد الكربون كما لو كان يسافر 1000 كيلومتر بسيارة عادية ، وهناك أنشطة مختلفة تساهم في ذلك.
حارب هذه الفكرة لمدة عشر دقائق تقريبًا حتى سحبت البيانات الموجودة على هاتفي. بصراحة ، لم ألومه كما أتذكر ، كان لدي نفس رد الفعل في اليوم الذي أدركت فيه أن كل صفحة ويب أقوم بزيارتها لها تكلفة خفية - تكلفة الطاقة المستخدمة للحفاظ عليها.
سر الإنترنت القذر ، إذا جاز التعبير.
وفقًا لـ Website Carbon Calculator ، ينتج متوسط موقع الويب ما يقرب من 0.5 جرام من ثاني أكسيد الكربون لكل مشاهدة صفحة ، لذلك بالنسبة لموقع الويب الذي يحتوي على 100000 مشاهدة شهرية ، فإن هذا يعني 500 كجم في السنة. ضع في اعتبارك أن هذا لكل موقع ويب!
كمرجع ، تصدر السيارة المتوسطة 1200 كيلوجرام من ثاني أكسيد الكربون لكل 1000 كيلومتر ، لذا يمكنك أن ترى كيف يكون للإنترنت تأثير ملموس للغاية على تغير المناخ والاحتباس الحراري بسبب بصمتها الكربونية الهائلة.
لذا فإن السؤال المطروح هو: ماذا يمكنك أن تفعل بصفتك مالك موقع لتقليل تأثير موقعك على بيئتنا؟
تصميم الويب المستدام ، بالطبع.
في Kualo ، نحن مرتبطون بشكل جوهري بمفهوم الاستدامة لدرجة أننا شعرنا أنه سيكون من الطبيعي استكشاف هذا الموضوع. في هذه المقالة سوف نتعلم:
- ما هو تصميم الويب المستدام؟
- لماذا نحتاج إلى تصميم ويب مستدام؟
- ما هي فوائد تصميم الويب المستدام؟
- أفضل ممارسات تصميم الويب المستدام
نريد أن نوفر لك المخططات الدقيقة التي ستساعدك على تقليل البصمة الكربونية لموقعك على الويب ، لذلك دون مزيد من اللغط ، دعنا نتعمق!
ما هو تصميم الويب المستدام؟
"تصميم الويب المستدام هو نهج لتصميم خدمات الويب التي تضع الناس والكوكب في المقام الأول. إنها تقدم منتجات وخدمات رقمية تحترم مبادئ بيان الويب المستدام: نظيفة وفعالة ومنفتحة وصادقة ومتجددة ومرنة. "هذا ما يمكننا قراءته في بيان تصميم الويب المستدام ، حيث يوضح الموقع باختصار ما ستشمله هذه العقيدة. دعنا ننتقل بسرعة إلى النقاط الست:
- نظيف: يجب أن تكون الخدمات التي يستخدمها موقع الويب الخاص بك مدعومة بمصادر الطاقة المتجددة ، مما يعني أن استضافة الويب الخاصة بك يجب أن تكون مدعومة بالبيئة.
- فعالة: يجب تحسين الخدمات التي تقدمها بالكامل لاستخدام أقل قدر ممكن من الطاقة (والمواد)
- مفتوح: يجب أن تكون الخدمات التي تقدمها متاحة للجميع ويجب أن تسمح للمستخدمين بالتحكم الكامل في بياناتهم
- الصدق: لن يقدم موقع الويب الخاص بك محتوى مضللًا و / أو يحاول تضليل المستخدمين من خلال تصميم الويب
- تجديدية: ستشارك خدماتك في اقتصاد موجه لدعم المجتمعات والبيئة
- المرونة: سيتم تقديم خدماتك متى وأينما تشتد الحاجة إليها
إذا كنت تفكر في جميع النقاط المذكورة أعلاه ، فقد ترى أن ما يدعو إليه هذا البيان ليس مجرد تصميم ويب مستدام ولكنه بالفعل الأساس لممارسات الأعمال المستدامة والاقتصاد المستدام. من أجل مستقبل أفضل ، نحتاج إلى شركات تقدم خدمات ومنتجات مفيدة وذات مغزى لها تأثير سلبي ضئيل على البيئة والأشخاص.
بعبارة أخرى ، إذا كنت تريد تصميم ويب مستدامًا ، فيجب عليك:
- استخدم أقل قدر ممكن من الموارد
- قم بتطوير واتباع خطة محتوى مدروسة جيدًا تتأكد من أن كل صفحة تقوم بتصميمها لها غرض
- الاستفادة من بناء موقع محسن
- تجنب تضليل المستخدمين بأي شكل من الأشكال لتنفيذ إجراءات قد لا يرغبون في القيام بها
ما سبب أهمية تصميم الويب المستدام؟
لذلك ، للإنترنت فوائد عديدة للمجتمع ، لكنها تأتي بتكلفة بيئية ضخمة. يستهلك مستخدم الويب العادي المحتوى عبر الإنترنت لمدة 5-6 ساعات يوميًا على أجهزة الكمبيوتر أو الأجهزة المحمولة. مع استمرارنا في استخدام التكنولوجيا أكثر من أي وقت مضى ، سيزداد هذا فقط في السنوات المقبلة حتى يتصفح مليارات الأشخاص مواقع الويب من جميع أنحاء العالم باستخدام 8 أنواع مختلفة من الأجهزة!الآن ، بالعودة إلى ما قلته في بداية هذا المقال (ورسم المعلومات البياني الخاص بنا حول التأثير البيئي للإنترنت) ، نعلم أن هذا هو في الأساس ثقب أسود متزايد للطاقة. من ناحية أخرى ، نعلم أيضًا أن الإنترنت أمر بالغ الأهمية لكثير من الأشخاص ، ولا يمكن استبداله بإصدار أكثر كفاءة في استخدام الطاقة ، كما تفعل مع سيارة أو كمبيوتر محمول.
لكن هل تعلم ما يمكننا مبادلة؟
تصميم موقعنا ، بالطبع.
إذا كانت النقطة الرئيسية هي أن حجم موقع الويب الخاص بك وكيف يتم بناؤه يؤثران بشكل مباشر على كمية ثاني أكسيد الكربون التي سينتجها ، فهذا ما نحتاج إلى معالجته بصفتنا مالكي مواقع الويب.
فوائد تصميم الويب المستدام
الآن ، بشكل عام ، إذا كنت تقرأ هذا ، فلديك بالفعل سبب وجيه للرغبة في موقع ويب مستدام ، وهذا السبب مرتبط بحماية البيئة. في الأساس ، أنت تريد أن تكون بطلاً للكوكب ، وأنا معجب بك لذلك.ولكن هل هناك فائدة إضافية لتغيير طرقنا عندما يتعلق الأمر بتصميم الويب؟
بالتأكيد سأقول نعم.
بصفتي مسوقًا ، اعتدت التفكير في جميع زوايا جهودي الرقمية والطريقة التي تؤثر بها على مشاريعي ، ويمكنني أن أخبرك على الفور أنه حتى على المستوى الشخصي ، من الأفضل نشر موقع ويب يتبع موقعًا صديقًا للبيئة تصميم الويب وإليك بعض الأسباب وراء ذلك:
- سوف تنفق أقل : من نفقات المصمم الخاص بك إلى إنتاج المحتوى الخاص بك ، كل شيء إضافي سيكلفك المال. ستكلفك التصميمات الأكثر تعقيدًا أموالًا ، وسيكلفك المزيد من كتابة الإعلانات والمحتوى المال وما إلى ذلك. كونك بسيطًا ولا تمتلك سوى ما تحتاجه بالفعل هو طريقة ممتازة لخفض النفقات
- سيكون عملاؤك أكثر إرضاءً: في الوقت الذي كانت فيه مواقع الويب جديدة ، كان الناس يتمتعون بالأجراس والصفارات ، الآن الجميع غارق في التعامل معهم ، حيث يقضون طوال اليوم في تصفح الإنترنت. هذا يعني أنه بالنسبة للمستخدم العادي ، كلما كان موقع الويب الخاص بك أكثر وضوحًا ، زادت احتمالية عثوره على ما يريده بدلاً من الضغط على الزر X والذهاب إلى شخص لا يضيع وقته.
- ستكون جهود تحسين محركات البحث الخاصة بك أكثر فاعلية : لقد كانت السرعة شيئًا لبضع سنوات حتى الآن عندما يتعلق الأمر بترتيب Google ، ولكن مع مرور كل عام ، نرى أن هذا يصبح أكثر أهمية عندما يتعلق الأمر بـ SEO. يكره Google مواقع الويب البطيئة ، وستعطي الأولوية بالتأكيد للمواقع الأخف والأسرع. بالمناسبة ، هذا ينطبق أيضًا على تجربة العملاء ، كما نعلم جميعًا.
كيف تجعل موقع الويب الخاص بك مستدامًا
1. ابدأ بالتخطيط لرحلة المستخدم الخاصة بك
إذا لم تكن معتادًا على المفهوم ، فإن رحلة المستخدم تشير ببساطة إلى تسلسل الإجراءات التي سيتخذها المستخدم عند زيارة موقعك لتحقيق هدف معين - الاشتراك ، الشراء ، إلخ.لأسباب واضحة ، يفضل المستخدمون رحلات المستخدم الأقصر ، لأنهم لا يضيعون وقتهم. بصرف النظر عن تجربة العملاء ، على الرغم من ذلك ، سيزورون أيضًا عددًا أقل من الصفحات للعثور على ما يحتاجون إليه وبالتالي تقليل انبعاثات الكربون من زيارتهم.
(رصيد الصورة: https://www.appcues.com/blog/user-journey-map)
إنها لفكرة جيدة أن تتعرف بشكل أفضل على مفهوم رحلات المستخدم ، وبعد ذلك ، بمجرد أن تتمكن من تصميم خرائط رحلة المستخدم الخاصة بك بحرية ، لتكييف تصميم الويب الخاص بك معها.
تجربة المستخدم الجيدة (UX) التي تتجنب نقاط الاحتكاك ستؤدي حتمًا إلى انخفاض استهلاك الطاقة وزيادة سعادة العملاء.
2. اختر موفر استضافة مدعوم من البيئة
أعلم أن هذا يبدو خدمة ذاتية بعض الشيء لأننا ، في النهاية ، شركة استضافة ، ولكن الحقيقة هي أن من يقوم بتشغيل موقع الويب الخاص بك كل يوم سيكون مهمًا تمامًا إذا كنت ترغب في تقليل بصمتك الكربونية. تستهلك مراكز البيانات ، للأسف ، جزءًا كبيرًا من الطاقة التي تذهب لتشغيل الإنترنت. من الضروري أن ننتقل بسرعة إلى مصادر متجددة بنسبة 100٪.يعد اختيار مزود يقدم استضافة مستدامة مدعومة بالطاقة المتجددة أمرًا لا بد منه. من الجيد أيضًا إلقاء نظرة على سياستهم البيئية الشاملة ومعرفة ما إذا كان مقدم خدمة الاستضافة قد اتخذ خطوات إضافية للتعويض عن انبعاثات ثاني أكسيد الكربون و / أو ما إذا كانوا يشاركون في ممارسات الاستدامة الأخرى.
3. مخبأ كل شيء!
إذا كنت تستخدم تطبيقًا مدفوعًا بلغة PHP كما تفعل العديد من مواقع الويب (WordPress و Magento و Drupal وما إلى ذلك) ، فإن التخزين المؤقت أمر لا بد منه لتحقيق الاستدامة.إذا كان الموقع لا يحتوي على ذاكرة تخزين مؤقت ، فأنت بذلك تجعل الخادم يعمل بجدية أكبر. في كل مرة يصل فيها شخص ما إلى صفحة على موقع الويب الخاص بك ، يجب إنشاء محتوى الصفحة بسرعة من خلال معالجة كود PHP ، وإجراء استعلامات لقاعدة البيانات وتحويلها إلى محتوى HTML الذي يعرض موقع الويب الخاص بك.
يستخدم هذا المزيد من وحدة المعالجة المركزية والذاكرة والقرص الخاص بالخادم ، مما يستهلك الطاقة في هذه العملية. سيحتاج الخادم إلى القيام بذلك لكل زائر وكل صفحة ، لذلك كلما زاد عدد الزوار والصفحات لديك ، زادت الطاقة التي تستهلكها.
مع وجود التخزين المؤقت في مكانه ، يتم تنفيذ معظم عبء العمل المكثف هذا فقط في المرة الأولى التي يطلب فيها الزائر صفحة. ثم يتم تخزين HTML الناتج في ذاكرة تخزين مؤقت بحيث لا تحتاج كل عملية تحميل لاحقة للصفحة إلى القيام بكل هذا العمل الثقيل.
علاوة على ذلك ، يتم تحميل صفحاتك بشكل أسرع. هذا ليس مكسبًا لك ولزوار موقعك فحسب ، بل يعني أيضًا أن الزائرين يقضون وقتًا أقل في التباطؤ في انتظار تحميل الصفحة - مما يستهلك طاقة أقل في هذه العملية.
هناك العديد من الطرق للتخزين المؤقت لمواقع الويب ، في Kualo ، نفضل LiteSpeed Cache للتخزين المؤقت للصفحة ، ولدينا أيضًا Redis و Memcached لاستعلامات قاعدة البيانات المؤقتة. مواقع ويب فائقة السرعة واستدامة أفضل - ما الذي لا تحبه؟
4. إذا كنت تكتب رمزًا ، فتأكد من أنه نظيف
سيستخدم غالبية المستخدمين نوعًا من أنواع أنظمة إدارة المحتوى ، ولكن إذا قمت بكتابة بعض التعليمات البرمجية ، فتأكد من سهولة فهمها وتغييرها وتجنب عمليات التكرار والعمليات غير الضرورية5. تجنب الإضافات والإضافات عديمة الفائدة
هذا وثيق الصلة بالقاعدة المذكورة أعلاه ، ولكن للأشخاص الذين يستخدمون بالفعل CMS مثل WordPress و Magento و Craft و Laravel وما إلى ذلك. في بعض الأحيان ، قد نشعر بالحماس الشديد مع كل الاحتمالات التي يوفرها لنا سوق المكونات الإضافية ونغرق موقعنا في المكونات الإضافية غير الضروريةهذا هو الحال غالبًا مع المكونات الإضافية الموجهة للتسويق أو المكونات المكررة التي نسيناها. قم بتقييم ما لديك ثم ما تحتاجه وامنح التمهيد لأي شيء آخر.
6. تجنب أو استخدام الحد الأدنى من الخطوط المخصصة
قد يكون هذا مفاجئًا ، لكن الخطوط المخصصة يمكنها بالتأكيد زيادة حجم ملف موقع الويب الخاص بك].(الخط المخصص الذي تم إنشاؤه لـ Duolingo بواسطة وكالة Johnson Banks)
قد يتجاوز ملف الخط المخصص النموذجي 200 كيلو بايت بسهولة أثناء تضمين وزن واحد. إذا كنت تستخدم أوزانًا ومحارفًا مختلفة ، فسيؤدي ذلك إلى زيادة حتمية ، مما يؤثر على كل من السرعة واستهلاك الطاقة.
لذلك يوصى باستخدام الخطوط المخصصة فقط إذا كنت تشعر أنها مهمة حقًا لعلامتك التجارية ولأغراض عملية.
7. استخدام ملفات الوسائط بحكمة (وتحسينها)
يجب أن يذهب دون القول أنه يجب تحسين حجم جميع الصور على موقع الويب الخاص بك. نحن نعلم ذلك من خلال أفضل الممارسات المتعلقة بسرعة موقع الويب (وبالتالي تحسين محركات البحث). نرى أحيانًا عملاء يسألون عن سبب بطء موقعهم ، فقط لنجد أن الصفحة الرئيسية تتضمن 4 ميجا بايت من الصور لأنهم قاموا بتحميل نسخ أصلية كبيرة جدًا! قد يتم تقديم هذه الصور نفسها دون أي انخفاض في الجودة عن طريق تحسينها.https://youtu.be/eY-VyLd2t-Q
تتضمن LiteSpeed Cache لـ WordPress تحسينًا تلقائيًا للصور ، لذلك لا داعي للقلق بشأن القيام بذلك بنفسك. علاوة على ذلك ، يمكنه تحويل الصور لاستخدام تنسيقات ملفات حديثة مثل WebP ، والتي يكون حجمها أصغر بنحو 25٪ مقارنة بصور PNG أو JPG.
بخلاف التحسين ، ما نحتاج أيضًا إلى التفكير فيه هو ما إذا كان استخدامها مبررًا وهادفًا.
على سبيل المثال ، قد تكون بعض صور المنتج عديمة الفائدة (مثل الزوايا المتشابهة جدًا). في حالات أخرى ، يمكن بسهولة استبدال الصور المستخدمة على الصفحة ، مثل صور المخزون العشوائية ، ببدائل مثل رسومات SVG أو تحقيق نفس التأثير من خلال أنماط CSS.
8. تحميل كسول أسفل محتوى الطية
قد تحتوي كل صفحة من صفحات الويب الخاصة بك على قدر كبير من المحتوى "في الجزء السفلي غير المرئي من الصفحة" - أي المحتوى غير المرئي ما لم يقم الزائر بالتمرير لأسفل صفحتك.إذا كان هذا يتضمن الكثير من الصور أو مقاطع الفيديو على وجه الخصوص ، والتي قد تكون كبيرة الحجم ، فيجب أن تنتقل كل تلك البيانات عبر الإنترنت على الرغم من عدم رؤيتها مطلقًا.
يعني التحميل البطيء أنك تطلب هذا المحتوى فقط أثناء قيام المستخدم بالتمرير لأسفل صفحتك. ستظهر هذه الأقسام قبل عرض هذا المحتوى مباشرة ، لذا من وجهة نظر الزوار ، يبدو الأمر كما لو كان موجودًا دائمًا - لا يوجد فرق يمكن إدراكه.
لا يقتصر الأمر على تجنب إرسال البيانات غير الضرورية ، ولكنك ستعمل أيضًا على تحسين نقاط PageSpeed الخاصة بك عن طريق جعل موقع الويب الخاص بك أقل أهمية.
تأتي بعض التطبيقات مع تحميل بطيء مضمّن ، أو يمكن تثبيتها بمكوّن إضافي. بالنسبة إلى WordPress ، تشتمل LiteSpeed Cache على ميزة التحميل البطيء القادرة على التحميل البطيء لأي شيء من الصور أو مقاطع الفيديو أو المحتوى المضمن أو حتى كتل HTML بأكملها إذا كانت صفحتك طويلة جدًا.
9. الحد من استخدام مقاطع الفيديو والرسوم المتحركة
لست بحاجة إلى جعل موقع الويب الخاص بك يبدو وكأنه صفحة Word وتجنب مقاطع الفيديو والرسوم المتحركة مثل الطاعون ، ولكن كما هو الحال مع الصور ، استخدمها بشكل مقتصد بدلاً من ذلك.ليس للرسوم المتحركة عادة أي غرض تكتيكي ، لذا استخدمها بأدنى حد ممكن. بالنسبة لمقاطع الفيديو ، فإنها تتجه بقوة إلى الغرض الذي تخدمه ، لذلك إذا كنت تعتقد أنها مفيدة للمستخدمين ، فاستخدمها بالفعل ، فقط تأكد من أنها محسّنة قدر الإمكان.
10. تصغير HTML و CSS وجافا سكريبت على موقعك
مرة أخرى ، ربما تقوم بذلك بالفعل لأغراض السرعة ، ولكن إذا لم تكن كذلك ، فلنستعرض السبب وراء ذلك بسرعة.غالبًا ما تحتوي تعليمات HTML و CSS و Javascript على بيانات إضافية ، مثل المسافات وفواصل الأسطر أو التعليقات. هذه المساحات أو التعليقات مفيدة فقط بحيث يمكن للمطور قراءة وفهم الكود بسهولة ، ولكن لا فرق في كيفية تفسير المتصفح لشفرتك.
يؤدي تصغير الكود إلى تجريد كل هذا الوزن غير الضروري ، مما يقلل من حجم الملفات التي يجب نقلها عبر الإنترنت ، ويجعل تحميل موقعك أسرع.
بالنسبة إلى WordPress ، يعالج LiteSpeed Cache هذا الجانب من أجلك ، ولكن معظم التطبيقات الأخرى سيكون لها أيضًا ميزة مماثلة متاحة عبر مكون إضافي.
11. قم بإزالة CSS و Javascript غير الضرورية
في حين أن التصغير يزيل البيانات غير الضرورية ، فإنه لا يحلل ما إذا كان موقعك يستخدم بالفعل أيًا من تلك الشفرات.ربما تكون قد استخدمت سمة أو منشئ صفحات يتضمن عددًا كبيرًا من التخطيطات أو الأنماط أو الوظائف المختلفة التي لا تستخدمها أبدًا في أي مكان على موقعك.
ستبقى جميع الشفرات في ملفات CSS و JS ، مما يزيد من كمية البيانات التي يجب نقلها عبر الإنترنت ويجعل تحميل موقعك أبطأ بدون سبب وجيه.
قد يكون من الصعب تحديد الكود الذي يجب إزالته يدويًا ، ولكن بالنسبة إلى WordPress ، يتيح لك LiteSpeed Cache إزالة CSS غير المستخدمة تلقائيًا. يؤدي هذا إلى إزالة CSS غير المستخدمة وإنشاء ملف CSS فريد لكل صفحة. قد يكون هذا مفيدًا إذا كان لديك بضع صفحات فقط ، ولكن إذا كان موقعك يحتوي على الكثير من الصفحات ، فقد يظل استخدام ملف CSS واحد أكثر فاعلية.
يمكن أن يكون تجريد جافا سكريبت أكثر تعقيدًا ، على الرغم من أن LiteSpeed يمكنه على الأقل تأخير تحميله حتى يتم اكتشاف نشاط المستخدم. قد يكون هذا مناسبًا ، بشرط ألا يكون مطلوبًا لمحتوى الجزء المرئي من الصفحة.
في نهاية المطاف ، فإن أفضل نصيحة هي تجنب استخدام أدوات إنشاء الصفحات أو المكونات الإضافية المتضخمة كلما أمكن ذلك واستخدام كود نظيف تعرف أنه مطلوب بالفعل.
12. تأكد من أن موقع الويب الخاص بك يعمل بشكل صحيح عبر الأجهزة المختلفة
قد يكون اختبار موقعك على العديد من أحجام الشاشات والمتصفحات والأجهزة وسرعات النطاق الترددي مضيعة للوقت إلى حد ما ، ومع ذلك فهو مرتبط ارتباطًا وثيقًا بتصميم الويب المستدام. يتعلق الأمر بالنقطة رقم 1 ، مما يعني أن العرض غير الصحيح للمحتوى والتصميم سيؤدي إلى ضعف تجربة المستخدم والكثير من الارتباك بين المستخدمين.سوف يقضون وقتًا أطول بكثير في محاولة العثور على ما يبحثون عنه ، مما يؤدي إلى زيادة استهلاك الطاقة.
لتجنب ذلك ، تأكد من أن تصميمك يتكيف جيدًا مع أكبر عدد ممكن من هذه المتغيرات لتوفير تجربة مثالية للمستخدمين.
13. استخدم CDN لخدمة المحتوى الخاص بك
إذن ما هو CDN؟ شبكة توصيل المحتوى (CDN) هي شبكة من الخوادم في مواقع جغرافية مختلفة. الطريقة التي سيساعدون بها في تحميل المحتوى الخاص بك بشكل أسرع هي الخدمة من موقع بالقرب من المستخدمين. بمعنى آخر ، يرتبط هذا بكل من السرعة وتجربة المستخدم.والأهم من ذلك ، من وجهة نظر الاستدامة ، أن هذا يساعد في تقليل ثاني أكسيد الكربون لأن نقل البيانات إلى أجزاء مختلفة من العالم يتطلب الكثير من الطاقة. وكلما زاد انتقال البيانات ، زادت الطاقة التي تتطلبها.
من الجيد أيضًا الإشارة إلى أن الصور التي يتم تقديمها عبر CDN يتم تقليل حجمها عادةً إذا تخطيت هذه الخطوة بطريقة ما. ستوفر لك العديد من شبكات CDN أدوات لتحسين الصورة ، بما في ذلك تقليل حجم الصورة وكثافة البكسل والتنسيق والضغط.
من المهم اختيار CDN الذي يستخدم الطاقة المتجددة ، بالطبع ، مثل Cloudflare.
14. قم بمراجعة المحتوى الخاص بك للتأكد من أنه يقدم إستراتيجية
إذا كان لديك موقع ويب كبير ، فإن تدقيق محتواه بشكل دوري أمر بالغ الأهمية. ستصبح بعض الصفحات حتمًا متقادمة أو لن تخدم غرضها بعد الآن. ينطبق هذا بشكل خاص على قواعد المعرفة ، ولكنه ينطبق أيضًا على صفحات المنتجات ومشاركات المدونات وما إلى ذلك.يمكنك إما استكشافها يدويًا أو استخدام Google Analytics لتقييم الصفحات التي يمكن أن تكون قديمة أو ضعيفة الأداء. يمكنك بعد ذلك تحديد ما إذا كان يمكنك تكييفها للحصول على محتوى مفيد ومحدث أو تحديد أنها مخصصة ببساطة للحاوية.
15. قم بتقليل انبعاثات ثاني أكسيد الكربون عن طريق تعويض بصمتك الكربونية
ربما كان التحول إلى نشاط تجاري إيجابي مناخي أحد أفضل القرارات التي اتخذناها على الإطلاق من حيث رفع مستوى استدامتنا. حتى هذه اللحظة ، قمنا بزرع أكثر من 50000 شجرة وعوضنا أكثر من 2000 طن من ثاني أكسيد الكربون ، بهدف مواصلة هذه الرحلة للسنوات القادمة.تعد المشاركة في المشاريع التي تزرع الأشجار وتعوض الكربون طريقة رائعة ليس فقط لتحسين استدامة تصميم الويب الخاص بك ولكن أيضًا في عملك بشكل عام. تعتبر الأشجار من الفائزين المطلقين عندما يتعلق الأمر بتقليل انبعاثات ثاني أكسيد الكربون ، حيث تمتصها وتحولها إلى أكسجين.
ندعوك لزيارة شركائنا في Ecologi (أو أي منظمات أخرى مماثلة) والبدء في زرع تلك الأشجار!