البحث في الموقع

أصبحت الفترة التي تزامنت مع ظهور الوسائل والطرق الجديدة التي يحاول المطورون استخدامها لإقناع الزائرين بالصور المتخصصة والمحتوى الديناميكي وإضافة الفيديو فترةً مهمة لتحميل صفحة الموقع ومصدر قلق دائم لمطوري الويب، خاصةً تلك الوسائط التي تحتاج وقت كبير في التحميل. وقد يظهر هذا القلق واضحًا عند إضافة أي محتوى جديد على اختلاف نوعه إلى صفحة الموقع، وهنا يتطلب من الموقع الخاص بك إنشاء طلبيات HTTPS (بروتوكول نقل النص التشعبي الآمن) إضافية تعمل بدورها على إبطاء موقعك بشكل تدريجي. سوف أتحدث في هذا المقال عن طلبيات خادم HTTPS، وعن ماهية الأدوات التي يجب استخدامها لتتبع هذه الطلبيات وأيضًا سوف أوضح الطرق التي يمكنك بها تقليص تلك الطلبيات داخل موقع ووردبريس الخاص بك. ما هي طلبيات خادم HTTPs وهل لها تأثير على تجربة المستخدم؟ بالطبع لا توجد هناك أهمية أكبر من أهمية تجربة المستخدم التي تعمل على جذب الزوار للموقع والاشتراك فيه أو شراء منتجاتك، أو التعرف على المزيد من المعلومات حول خدماتك. فهنا يظهر واضحًا جدًا أن أي خطأ بسيط يمكن أن يعرّض هذه التجربة للخطر فمثلًا لو كان لديك صفحة ويب تستغرق بضع ثوانٍ قليلة للتحميل، فهذا وحده كافٍ أن يعرّض معدل التحويل لديك للخطر. لذا ولتجنب ذلك، عليك التعرف على هذه المعلومات حول طلبيات خادم HTTPS ولماذا تحدث. ففي كل مرة يزور شخص ما موقع الويب الخاص بك أو إحدى صفحاته (وركّز هنا في عدد الصفحات الموجودة على موقعك)، إذ يقدّم متصفحه طلبًا إلى خادم موقع الويب الخاص بك وهذا يتكرر مع كل صفحة يقوم بزيارتها. وهنا تكمن مسؤولية موقع الويب الخاص بك في إرسال كل ملف بما يحتوي عليه (النصوص والصور التي عادة ما يشتمل عليها أغلب المواقع بالإضافة إلى الفيديو، وملفات CSS، وملفات جافاسكربت، …إلخ) ويتلقى كل ملف من تلك الملفات طلب خادم منفصل. وبعد أن تعالج جميع طلبيات الخادم وتنقل الملفات إلى المتصفح، يمكن تحميل موقع الويب الخاص بك على الشاشة، ولكن تخيل ماذا سوف يحدث إذا كان موقع Wordpress الخاص بك يحتوي على عشرات أو حتى مئات الملفات لإرسالها إلى متصفحات من يزوره؟ توقع فعليًا زمن تحميل الصفحات، بالطبع هذا شيء غير مستحب إن كان الزمن كبيرًا! وقد يزداد الأمر سوءًا بشكل كبير مع تزايد شعبية الموقع وتلقي طلبيات خادم HTTPS كثيرة في وقت واحد. مثال على ذلك: 40٪ من الناس لا يتحملون الانتظار وقد يفقدون صبرهم إذا كان عليهم الانتظار أكثر من ثلاث ثوان لتحميل الصفحة. و قد أشارت دراسة كيس ماتريكس إلى أن التأخير لمدة ثانية واحدة في استجابة الصفحة عندما يتفاعل الزائر معها قد يكلف ما يصل إلى 7٪ من التحويلات؛ لذا، تحتاج إلى العثور على طريقة لتقليص عدد الملفات التي يجب إرسالها إلى المتصفح إذا كنت تريد أن تظل أوقات التحميل هذه مقبولة. فمن غير المعقول أن يكون الحل هو تقليل عدد الصور أو المحتوى الديناميكي أو الانتقال إلى الحد الأدنى من التصميم الخاص بك بحيث تخسر بذلك ميزة العرض الخاصة بموقعك و يصبح الأمر مملًا للغاية. بالرغم من أهمية حجم وكمية الملفات، إلا أنه يتوفر هناك العديد من الطرق في ووردبريس للتغلب على ذلك. الأدوات الخاصة بتتبع طلبيات خادم HTTPS وما يتعلق به من حسن الحظ أن هناك عدد من الأدوات تساعدك في تخطي عقبة تخمين السبب وراء ظهور شاشة الموت البيضاء لدى زوار موقعك ومعرفة ما يسبب ذلك. وتعمل أيضًا على تتبع مصدر التأخر في أوقات تحميل موقعك. أعرض هنا إليك بعض الأدوات المجانية والموثوقة. أدوات التطوير في كروم إذا كنت تريد رؤية دقيقة ومتعمقة في المتصفح كروم للمدة التي يستغرقها كل عنصر وملف يعالج على موقع ووردبريس الخاص بك. ابدأ أولًا بفتح نافذة متصفح جوجل ثم انتقل إلى صفحة الإعدادات التي تسمى أدوات المطور (Developer Tools) كما يظهر في الصورة. ستفتح عند الضغط عليها لوحة تحكم جديدة على الجانب الأيمن من الشاشة. حينئذ اضغط فوق علامة التبويب Network "الشبكة"، ومن هنا ستتمكن من معرفة الإجراءات التي تحدث في صفحتك. وستتمكن أيضًا من البحث بحثًا دقيقًا في توقيت كل ملف على حدة للتأكد لمعرفة أيها قد يكون سببًا في زيادة الضغط (الحمل) على صفحتك. أداة PageSpeed Insights لتحليل الأداء والسرعة من غوغل هذه الأداة ليست الوحيدة بالطبع التي تقدمها جوجل لمساعدتك في اكتشاف المشكلات المتعلقة بطلبيات خادم HTTPS من الناحية المثالية، فإذا كنت من مستخدمي أدوات التطوير فمن الواجب عليك الاستفادة من الأداة PageSpeed Insights التي يجب أن تكون ضمن قائمتك. تحلل PageSpeed إحصاءات محتوى صفحة الويب ثم تقدم اقتراحات لتحسين سرعة تلك الصفحة. انتقل إلى صفحة PageSpeed Insights وضع رابط الصفحة التي تريد تحليلها وسوف تقدم لك نتائج تفصيلية تقيّم فيها أداء الصفحة على الجوال وكذلك على سطح المكتب. يقدم لك كل تقييم من هذه التقييمات درجة من 100 تبين مدى جودة الأداء ومن ثم يقدم لك نصائح حول كيفية تحسين موقعك لتحسين الأداء. أداة GTmetrix أداة GTmetrix هي أداة تقييم واختبار سرعة الموقع وستوفر لك درجة تقيِّم موقع الويب الخاص بك. وتتميز أداة GTmetrix أنها تتعامل في عملية شرح أداء موقعك بطريقة أكثر شمولًا وثقة من جوجل لذلك، بالرغم من ظهور العلامات الحمراء و الصفراء (وهي ليست جيدة)، إلا أنه يمكنك التمرير فوق كل نقطة من نقاط البيانات ومعرفة متوسط الدرجات وأوقات التحميل. وهذا سيعطي فكرة أكثر واقعية حول مستوى أداء صفحات موقعك. عند تقييمك من GTmatrix، تتلقى نصائح قياسية حول كيفية تحسين السرعة والأداء لصفحتك. كل تلميح يظهر بجانبه الدرجة المطابقة، وهذا يتيح لك معرفة المكان الذي أنجزت فيه الأمور بشكل جيد، وتعطي مقترحات للتحسين. وإذا كنت تريد المزيد من المساعدة في تلك المناطق الأضعف، فما عليك سوى النقر على السهم المتجه للأسفل وسيخبرك بالملفات التي يمكن أن تستخدم بعض الأعمال. أداة Pingdom الأداة Pingdom تتشابه إلى حد كبير مع أداة GTmetrix في عملها و كيفية تقديم المعلومات. وقد تجد أن الاختلاف الرئيسي بين الأداتين هو في السرعة التي توفر بها نتائجها وأيضًا الواجهة هذه أجمل قليلًا. و لكن من ناحية أخرى، ستتلقى نفس التقييم الدقيق تقريبًا من كلا الأداتين وهذا هو بالضبط ما تحتاجه إذا كنت تحاول توفير الوقت في تقييم مشاكل موقعك وتريد تضييق نطاق ما لا يعمل. الأداة WebPageTest لن يمر ذكر أدوات اختبار صفحات الويب دون ذكر الأداة WebPageTest هنا. مع أن الموقع قليل الشكوك والنتائج ليست سهلة القراءة مثل بعض الأدوات الأخرى، إلا أنني أحب الرسم البياني الشريطي المستخدم لعرض المدة التي يستغرقها كل ملف للتحميل. رغم أنه قد يكون هناك قدر هائل من البيانات في هذه الصفحة ولا توجد نصائح حول كيفية حل مشكلات التباطؤ المحددة، ما زلت أعتقد أن طريقة عرض العناصر الأثقل جيدة نوعًا ما. يمكنك دائمًا استخدام هذا بالاقتران مع أدوات المُطوِّر لتضييق نطاق العناصر ذات الإشكالية في موقعك. كيفية تقليل عدد طلبيات خادم HTTPS لموقع وورد الخاص بك وبعد أن تعرفت على كيفية تحديد المناطق المسببة لضعف أداء موقع الويب الخاص بك، دعنا نتحدث عن كيفية حل المشكلة كاملة من بدايتها وهي تقليل عدد طلبيات خادم HTTPS لموقع ووردبريس الخاص بك. أقدم إليك 9 خطوات يمكنك القيام بها وبذلك تحتفظ على عدد معقول من الطلبيات في موقعك. 1) حذف الصور غير الضرورية هذا ليس معناه أنه يتوجب عليك التضحية بالصور من أجل خفض طلبيات الخادم ولكن بدلًا من ذلك، أعتقد أنه يجب عليك التركيز والحفاظ على مكتبة الوسائط الخاصة بموقعك خالية من أي صور لا ضرورة لها أبدًا. لذا، إذا كانت هناك صور لا تستخدمها أو حتى لو كنت تفكر في استخدامها في المستقبل فيمكنك التخلص منها. في النهاية لن تضيف شيئًا لموقعك سوى إضافة وزن إضافي وطلبيات للخادم وموقعك ليس بحاجة إليها. 2) حذف الملفات الأخرى غير الضرورية وقد تُظهر لك أدوات تقييم سرعة صفحتك التي ذكرتها أن الصور ليست هي التي تسبب المشكلة، وتتفاجأ أن هناك إضافة لتغذية الوسائط الاجتماعية أو وجود فيديو مدمج في الصفحة. فأنصحك أنه إذا كان هناك أي شيء على موقعك ليس ضروريًا ويتسبب في الضغط، فقم بإلغائه. اشمل على ذلك الإضافات والقوالب التي قمت بتثبيتها، ولكن التي لا تستخدمها في الوقت الحالي. 3) ضغط وتقليص حجم الملف من الأشياء الأخرى التي يتوجب عليك فعلها هو تثبيت إضافة تدعى WP Smush التي تتولى عملية ضغط صور موقعك. فإذا كنت ترغب في الحفاظ على صور موقعك الجميلة وذات الدقة عالية على موقعك بجودة سليمة تحتاج إلى ضغطه. 4) إنشاء عفريت صور CSS باستخدام CSS، يمكنك إنشاء ما يعرف باسم عفاريت الصورة (Image Sprite وهي تقنية تقوم على مبدأ استعمال صورة واحدة تحتوي على مجموعة من الخلفيات واستعمالها في جميع أزرار الموقع ويرجع الهدف من استعمال هذه التقنية إلى تسريع تحميل الموقع والتقليل من استخدام موارد استضافة الموقع). فعليًا سوف يجمع ملف CSS هذا جميع ملفات الصور الخاصة بك ويضعها في ملف واحد. استعن بهذا الدليل من W3 Schools لإنشاء عفريت. 5) فعّل خاصية التحميل الكسول هل سمعت عن التحميل الكسول (lazy loading)؟ ربما تسمع به لأول مرة، وسأقرب لك فكرة عمله. هنالك إضافات خاصة ترسل طلبيات للخادم عندما يقوم المستخدم بالتمرير لأسفل إلى صورة على الصفحة، وهذا الإجراء يحفظ موقع الويب الخاص بك ويقلل من الاضطرار إلى إرسال طلبيات الخادم غير الضرورية إلى المتصفح التي لم يسبق لزوارك الوصول إليها من قبل. 6) تجاهل الأصول غير ذات الصلة عملية التجاهل هذه تقوم بها إضافة تسمى WP Asset Cleanup وهي خاصة بووردبريس وتعمل بشكل مشابه لكيفية عمل إضافات التحميل الكسول. فبدلًا من التركيز على تأخير طلبيات الخادم للصور التي لم تتم مشاهدتها، تستكشف هذه الإضافة ما إذا كان هناك إضافة أو ملف أو مادة عرض أخرى موجودة داخل القالب الخاص بك، ولكن ليس على تلك الصفحة المحددة وبعد ذلك تحفظ هذا الأصل من أن يتم تحميله والكشف عنه في تلك الصفحة. وبالتالي، يصبح هناك تقليل لعدد طلبيات الخادم التي تذهب إلى المتصفحات. 7) استخدام الإضافة Hummingbird استعمال إضافة التخزين المؤقت (caching) أمرًا ضروريًا لمواقع ووردبريس، وخصوصًا تكمن أهميته عندما يكون موقع ووردبريس الخاص بك يتعامل مع زوار دائمين للموقع. وبذلك ليست هناك حاجة فعلاً لمعالجة طلبيات الخادم نفسها إذا لم يتغير شيء، وبالتالي فإن إضافة التخزين المؤقت تعمل على ذلك وتزيل كل ما ليس له حاجة. ومن الإضافات المهمة في ووردبريس إضافة Hummingbird التي تؤدي دورها بشكل مثالي مع إدارة التخزين المؤقت للمتصفح، فهي تعتني أيضًا بضغط الملفات، وملفات CSS، وملفات JavaScript وتصغير ملفات html، كما يضيف CDN (أي اختصار شبكة توصيل المحتوى وهي عبارة عن مجموعة من الخوادم الموزعة بكل أنحاء العالم تعمل على إيصال المحتوى الثابت لمواقع الويب إلى المستخدمين حسب موقعهم الجغرافي بأقرب وقت وأقصر مسافة) وتعمل إضافة CDN على تسريع الأمور بشكل أكبر ومنح إمكانية الوصول إلى تقارير الأداء في حالة عدم رغبتك في استخدام أحد العناصر الثلاثة أعلاه لتقييم حالة سرعة موقعك. 8) دمج ملفات الجافا سكريبت و ال سي اس اس تحتوي مواقع ووردبريس على العديد من ملفات CSS وJavaScript فبدلًا من إرسال كل ملف كطلب خادم منفصل إلى متصفحات الزوار، يمكن دمجهم في ملف واحد منفرد لكل نوع. ضع باعتبارك أن ملف CSS المدمج الخاص بك يجب أن يكون داخل رأس موقع الويب الخاص بك، وملف جافاسكربت في التذييل. 9) الحد من الصور الخارجية يظهر هذا واضحًا وأكثر شيوعًا عند تعليقات المدونة. هل تعلم أنه إذا تركت نظام التعليق الافتراضي الخاص بووردبريس في مكانه فإنه سوف يستخدم تلقائيًا Gravatar (صورة تشخيصية ثابتة وهي عبارة عن خاصية أوتوماتيكية لسحب صور المعلقين وسيرهم) وبذلك تصبح هذه الصور طلبيات خادم إضافية يتعين عليك إرسالها إلى كل المتصفحات، فماذا لو كانت المدونة معروفة ومشهورة بالطبع سوف تصبح هناك فوضى. ولكن في ووردبريس يوجد هناك بعض الإضافات الخاصة بالتعليقات وتعمل على تجنب هذه المشكلة. الخلاصة أخيرًا مما يميز تطوير مواقع ووردبريس أن هناك الكثير من الأشياء التي تستطيع القيام بها داخل الموقع و تحسين أداءه، ولكن أحيانًا نغفل كيف يمكن لموقعنا الخاص بما يحتويه من قوالب وإضافات وصور رائعة تبرز جماله أنها قد تكون بشكل مفرط يفوق الحد في نظر المستعرض الذي يحاول ببساطة معالجة الموقع بالكامل. ومع ذلك، في وورد بريس عليك أن لا تخف أبدًا، فإذا استخدمت أداة مراقبة السرعة للصفحة وتابعت عليها دومًا وأيضًا التزمت بنصائح الحد من طلبيات الخادم التسعة التي ذكرتها في الأعلى، أعتقد أنك بذلك سوف تجعل أداء موقعك جيدًا. ترجمة -وبتصرف- للمقال How to Reduce HTTP/S Requests in WordPress لصاحبته Brenda Barron

من المهم جدًا أن يكون الموقع سريعًا، إذ يتوقع ما نسبته 47% من الزوار أن يُحمَّل الموقع في أقل من ثانيتين، وسيترك ما نسبته 40% من الزوار موقعك إن استغرق أكثر من ثلاث ثواني ليُحمَّل. إحدى الدراسات (صحيحٌ أنَّ الدراسة قديمة، لكن الفكرة النظرية وراءها ما تزال صالحة إلى زماننا هذا) تقول أنَّ المستخدمين سيتساهلون إذا حدث تأخير بسيط، لكن درجة عدم رضاهم إذا كان التأخير متوسطًا هي نفسها إذا كان التأخير كبيرًا. فربما لا تظن أنَّ موقعك «بطيء»، لكن حتى لو كان زمن التأخير متوسطًا فقد يحسّ الزوار أنه بطيء جدًا؛ والحل الوحيد لتفادي خسارة زوار موقعك بسبب بطء الموقع هو جعله سريعًا :-) . إحدى أكبر العقبات التي ستواجهك عندما تحاول جعل موقعك سريعًا هي الصور والملفات الثابتة الأخرى مثل JS و CSS، فالصور تكون عادةً كبيرةً وتأخذ وقتًا طويلًا للتحميل (خصوصًا على الاستضافات المشتركة الرخيصة)، ولتحسين ذلك يمكنك استخدام شبكات توزيع المحتوى (CDN). ما هي شبكات توزيع المحتوى؟ شبكات توزيع المحتوى (بالإنكليزية Content Distribution Networks) هي مجموعة من الخواديم المنتشرة حول العالم والمختصة بتخديم المحتوى الثابت بسرعة. طريقة عمل تلك الشبكات تتلخص بوجود خادوم رئيسي (origin) يخزِّن ملفاتك الثابتة (مثل الصور وملفات JavaScript و CSS) وخواديم توزيع التي توصِّل المحتوى إلى المستخدمين، والخادوم الرئيسي هو الخادوم الذي يحتوي على النسخة الرئيسية من الملفات (وفي حالتنا: هو الخادوم الذي يُشغِّل ووردبريس). وعندما يتم طلب الصورة عبر شبكة توزيع المحتوى فسيُحدَّد ما هو الخادوم الأقرب لمكان المستخدم جغرافيًا وسيتحقق الخادوم إن كان يملك الصورة المطلوبة، فإن لم يكن يملكها فسينزلها من الخادوم الرئيسي، وإذا كانت موجودةً عنده فسيرسلها للمستخدم. فائدة طريقة التوزيع السابقة تتلخص في نقطتين أساسيتين: 1. تلك الخواديم مخصصة ومحسّنة لتخديم المحتوى الثابت (مثل الصور) لذا يمكنها تحميل المحتوى بشكل أسرع. 2. يتواجد أحد تلك الخواديم بالقرب من مكان المستخدم، وهذا يعني أنَّ الملف لن يحتاج إلى الانتقال لمسافات طويلة (فيزيائيًا) حتى يصل إلى المستخدم، وبالتالي سيكون زمن التأخير قليلًا. قد يبدو من الوهلة الأولى أنَّ الأمر معقدٌ جدًا، وهو كذلك، لكن لحسن الحظ لا توجد ضرورة أن تتعامل مع الأمور التقنية الخاصة بشبكات توزيع المحتوى، إذ تستطيع قطف الثمار مباشرةً، فهنالك خدماتٌ كثيرة تتولى الأمور التقنية وتُسهِّل عملية الاستفادة من تحسين الأداء عبر استعمال شبكات توزيع المحتوى في موقعك. لكن دعنا نلقي نظرةً على أفضل حلّ لاستعمال شبكات التوزيع في ووردبريس. استخدام Photon خدمة Photon هي خدمة جيدة لتوزيع المحتوى، وهي مجانية أيضًا، وهنالك أسباب تجعل خدمة Photon (التابعة لإضافة Jetpack) جيدة، ولهذا فصلناها عن بقية إضافات CDN: 1. هذه الخدمة هي جزءٌ من إضافة Jetpack، فإضافة Jetpack فيها الكثير من الميزات المفيدة ومن المرجح أنّك تستعملها في موقعك؛ كل ما عليك فعله هو تثبيت Jetpack (من إضافات – أضف جديد، ثم ابحث عن Jetpack) وفعِّل Photon وستكون خدمة CDN جاهزةً عندك، ولا حاجة إلى إجراء أيّة خطوات إضافية، وضبط هذه الخدمة بسيطٌ جدًا؛ إذ تحتاج الكثير من إضافات CDN الأخرى إلى تعديلات تقنية على ضبط خادومك، لكن هذه الإضافة لا تتطلب ذلك. 2. ستُحسِّن خدمة Photon من حجم صورك تلقائيًا، فأغلبية خدمات CDN ستُخدِّم الصور التي ترسلها لها كما هي، لكن خدمة Photon ستجعل الحجم التخزيني لتلك الصور أصغر، ولفعل ذلك ستستخدم Jetpack صيغة صور باسم webp التي طورتها Google، وتملك صيغة webp أفضل خوارزمية ضغط متوافرة حاليًا، وهي مدعومة من متصفحَي Chrome و Opera، وخدمة Photon تعرف ذلك وتُخدِّم الصور بصيغة webp لزوار موقع Chrome و Opera فقط (التي يستعملها حوالي نصف الزوار). 3. إحدى المزايا المتقدمة لخدمة Photon هي القدرة على تطبيق فلاتر إلى الصور وقصها وإعادة تحجميها، وعملية القص وإعادة التحجيم ستقوم بها خدمة Photon دون تدخل من المستخدم (باستعمال دوال add_image_size()‎ الموجودة في ووردبريس)، ويمكن للمستخدمين المتقدمين أن يضيفوا فلاتر إلى الصورة لتغيير طريقة عرضها. عملية ضبط Photon شبيهة بطريقة ضبط وحدات (modules) Jetpack الأخرى. فبعد تفعيل إضافة Jetpack فاذهب إلى صفحة الضبط الخاصة بها وابحث عن Photon ثم اضغط على «Activate». ألم أقل لك أنَّ الأمر بسيط جدًا. لمزيدٍ من المعلومات حول Photon أحيلك إلى هذه الصفحة، وإلى توثيق API. خيارات أخرى لشبكات توزيع المحتوى لماذا تريد استخدام شبكة توزيع أخرى إذا كانت خدمة Photon ممتازةً؟ هنالك ثلاثة أسباب محتملة: الخصوصية. خدمة Photon مملوكة من شركة Automattic (وهي الشركة التي تملك موقع wordpress.com) وبعض المستخدمين يشكون في أمرهم. لا تنسَ أنَّ Automattic هي شركة تجارية وتوفر خدمة مجانية ولا تتوقع أنها صدقة نابعة من طيبة قلوبهم. لن تنتهي صلاحية التخزين المؤقت. وهذا يعني أنَّك لا تستطيع حذف صورة، فلو أردتَ استبدال صورة بأخرى فعليك رفع الصورة الجديدة باسمٍ مختلف. خدمة Photon لا تدعم إلا الصور. فلو أردتَ تخديم ملفات JavaScript و CSS من شبكة توزيع محتوى، فعليك استخدام خدمة أخرى. لكن لسوء الحظ، لا توجد خدمة توزيع محتوى سهلة الإعداد كما في خدمة Photon. لكن الأسباب السابقة لا تعني بالضرورة أن تتجنب استخدام هذه الخدمة، إذ إنَّ تحميل الصورة من خدمة Photon يملك أثرًا كبيرًا على سرعة موقعك، والفائدة الآتية من تحميل الملفات الثابتة الأخرى من شبكة توزيع محتوى ستكون قليلة نسبيًا، ما لم يكن موقعك مشهورًا فعندئذٍ سيستفيد من استعمال خدمة CDN أخرى. إذا أصررتَ على إعداد شبكة CDN فسأذكر في بقية هذا الدرس أفضل الخيارات التجارية المتاحة أمامك لتختار منها ما يناسبك. أفضل الخيارات: خدمة Cloudflare خدمة Cloudflare هي خيار ممتاز، ويمكنها توفير ميزات أكثر من مجرد شبكة توزيع محتوى، بما في ذلك تحسين حماية موقعك وخلاف ذلك، لذا أنصحك بإلقاء نظرة عليها. ذكرتُ Cloudflare أولًا لأنها توفر خطةً مجانيةً رائعةً كافيةً لأغلبية المستخدمين (وإذا أردتَ المزيد من الميزات، فالخطط الاحترافية تبدأ من 20 دولارًا لكل موقع شهريًا). فإذا كنتَ مهتمًا كثيرًا بالحصول على أفضل أداء وأردتَ دمج خدمات إضافة Jetpack مع خدمة توزيع محتوى خارجية، فأنصحك باستعمال Cloudflare. الجانب السلبي الوحيد لهذه الخدمة هو أنَّ إعدادها ليس بسيطًا كما في إضافة Jetpack؛ إذ ستحتاج إلى تسجيل حساب في الخدمة واتباع التعليمات لتحديث سجلات DNS، وقد تستغرق هذه العملية بين عدِّة ساعات إلى يوم كامل، وبعد فعلك لذلك عليك تسجيل الحساب المجاني وضبطه بنفسك. يمكنك قراءة هذا الدرس لشرح طريقة فعل ذلك. الخيارات التجارية الأخرى توفِّر Incapsula خدمة شبيهة بخدمة Cloudflare، وتعطيك خدمات تحسين الأداء والأمان، والخطة المجانية التي توفرها رائعة وهي سهلة الإعداد نسبيًا (ويوفرون لك إضافة ووردبريس لتسهيل دمج الخدمة مع موقعك، لكن قد مضت فترةٌ طويلةٌ منذ آخر تحديث لهذه الإضافة). لكن من مساوئ خدمة Incapsula أنَّ الخطط المدفوعة أغلى من نظيراتها في Cloudflare، لذا إذا أردتَ الحصول على ميزات متقدمة فعليك دفع مبلغ كبير نسبيًا، إذ تبدأ الخطط المدفوعة من 59 دولارًا لكل موقع شهريًا. أما خدمة KeyCDN فهي حلٌّ رخيصٌ نسبيًا لمواقع ووردبريس، وتوفر هذه الخدمة إضافة ووردبريس مُصانة ومُحدَّثة وتستحق التجربة. يجدر بالذكر أنَّ هذه الخدمة لا توفِّر خطة مجانية لكن هنالك فترة تجريبية مجانية، والخطط المدفوعة تبدأ من 0.04 دولار لكل غيغابايت، أي لن تدفع أكثر من دولار واحد شهريًا إلا إذا كان موقعك مشهورًا جدًا. ربما أشهر الخدمات هي خدمة MaxCDN والتي تستخدم من أشهر مواقع التدوين وتُذكَر كثيرًا عند الحديث مع مطوري ووردبريس الآخرين. يمكنك إضافة دعم لخدمة MaxCDN عبر إضافات مثل W3 Total Cache (انظر التوثيق)، وتبدأ الأسعار من 9 دولارًا شهريًا. Fastly هي خدمة CDN تُستعمَل من أكبر المواقع التي تتخصص بالأخبار مثل موقع صحيفة الغارديان البريطانية، وينصحون باستخدام إضافة purgely لدمج الخدمة في موقعك. وصحيحٌ أنَّ Fastly ليست أرخص خدمة CDN لكن هنالك إمكانية تجربة الخدمة بإعطائك 50 دولارًا في حسابك، وأنصحك بتجربة هذه الخدمة إذا كنت جادًا بخصوص تحسين سرعة موقعك. خيارات أخرى إذا أردتَ المزيد من الخيارات والإعدادات فقد تضع ببالك استخدام Amazon Cloudfront أو Google’s Cloud CDN إذا توفر تلك الخدمات تحكمًا دقيقًا وتسعير أكثر مرونة، لكنها تتطلب أن تكون لديك دراية تقنية أكبر. ربما تفكر في الدفع لأحدهم لكي يضبط تلك الخدمات لك لكي تلائم احتياجاتك. الخلاصة إنَّ أفضل خيار هو استخدام خدمة Photon لتخديم الصور مع استخدام Cloudflare لبقية الملفات، وعملية إعداد تلك الخدمات سهلة ولا تأخذ وقتًا طويلًا وستحسِّن سرعة موقعك كثيرًا، مما يرضي زوار موقعك ومحركات البحث. أما إذا كان موقعك أكبر فقد تفكر في استخدام الخدمات المدفوعة التي توفر لك قدرًا كبيرًا من التحكم، وهذه الخدمات التي ناقشناها في هذا الدرس توفِّر مجالًا واسعًا من الخدمات لمختلف أنواع المواقع ولمختلف الميزانيات. الفكرة الرئيسية من استخدام شبكات توزيع المحتوى هي تخديم محتوى الموقع بشكل أسرع إلى المستخدمين، وهذه الخدمات تضبطها لمرة واحدة ثم تنساها، لذا أنصحك بأخذ وقتك لتفكِّر بالخيار الأفضل لجعل موقعك سريعًا. لا تنسَ أنَّ استخدام شبكات توزيع المحتوى هو جزءٌ بسيطٌ من الأحجية التي تجعل موقعك سريعًا، فاستخدام إضافة للتخزين الموقت واختيار قالب سريع والاستضافة في شركة جيدة هي عوامل ستساعد في تسريع موقعك. لذا أنصحك بالاطلاع على الدورة التدريبية Become a WordPress Master التي تعلِّمك المهارات اللازمة لفعل ذلك في ووردبريس. ترجمة –وبتصرّف– للمقال Using CDNs to Unlock a Big WordPress Speed Boost لصاحبه Alex Denning. حقوق الصورة البارزة محفوظة لـ Freepik

يشبه أداء المواقع كثيرًا قاعدة 80/20، حيث إن إجراء تحسينات بنسبة 20% ستزيد سرعة الموقع الإلكتروني بنسبة 80%. فاتّخاذ خطوات بسيطة مثل تنظيم شفرة CSS يأتي بثمار طيّبة. يشرح هذا المقال خطوات بسيطة يمكن أن يؤدّي تطبيقها - إلى جانب تنظيم شفرة CSS - إلى تحسّن ملحوظ في أداء الموقع. تصغير الملفات وضغطها تعدّ إزالة الشفرة المتكررة وغير الضرروية من أبسط الطرق وأفضلها في تقليل حجم ملف CSS، ولكن هناك بعض الطرق الأخرى. تتمثّل إحدى هذه الطرق في تصغير minify وضغط ملفات HTML و CSS و JavaScript. كذلك يمكن ضغط الصور وإزالة التعليقات و مواصفات الألوان Color Profiles غير الضرورية. آلية gzip للضغط آلية gzip هي إحدى أشيع وسائل ضغط الملفات، إذ تأخذ هذه الآلية الملفات الشائعة مثل HTML ،CSS، Javascript وما شابهها وتبدأ بتحديد السلاسل النصية المتشابهة وضغطها. وكلما تم التعرّف على المزيد من السلاسل النصية كان حجم الملفات المضغوطة أصغر، وهذا يعني إرسال ملفات أصغر حجمًا من الخادوم إلى المتصفح. ليست تهيئة gzip بالأمر الصعب، وقد أبلى فريق HTML5 Boilerplate بلاءً حسنًا في هذا المجال. ولضغط الملفات بآلية gzip ستحتاج إلى إضافة ملف .htaccess إلى المجلد الرئيسي في خادوم الويب ثم تدرج في هذا الملف أنواع الملفات التي ترغب في ضغطها. لا تنسَ إضافة النقطة إلى بداية اسم الملف، لأنّ هذا الملف هو من الملفات المخفية. يمكنك أن تجد في إعدادات خادوم Apache في HTML5 Boilerplate أنواع الملفات التي يُنصح بضغطها، ولا بأس بالتذكير مرة أخرى أنّ شفرة ضغط هذه الملفات يجب أن تكون في ملف .htaccess في المجلد الرئيسي لخادوم الويب. وجدير بالذكر أن هذا الملف لا يعمل إلا مع خواديم Apache والتي تتطلب تفعيل الوحدات التالية. mod_setenvif.c mod_headers.c mod_deflate.c mod_filter.c mod_expires.c mod_rewrite.c لا تقلق إن وجدت صعوبة في هذا الأمر، فهناك بعض الخواديم التي تهيّئ لك هذه الأمور نيابة عنك، فبطبيعة الحال، ضغط الملفات وتصغير حجمها يكون دائمًا في مصلحة خادوم الويب. قياس نسبة الضغط تقدّم أداة الفحص Inspector في متصفح Google Chrome عددًا كبيرًا من المعلومات حول أداء الصفحة، ويمكن الوصول إليها من خلال التبويب Network. إضافة إلى ذلك، هناك عدد من المواقع الإلكترونية التي تساعد على معرفة ما إذا كانت خاصية الضغط gzip مفعّلة أم لا. في تبويب Network يتم التعرّف على جميع الملفات المحمّلة بواسطة المتصفح وعرض أحجام تلك الملفات والمدة التي استغرقتها عملية التحميل. لاحظ كيف أن ضغط الملفات قد قلّل من حجمها بنسبة 60% تقريبًا. يمكن التعرّف على أنواع وسائل الضغط التي يدعمها المتصفح من خلال اختيار أحد الملفات. في الصورة أعلاه نلاحظ أنّ المتصفح يدعم gzip، deflate و sdch كما هو مبيّن في ترويسة الطلب المرسل من المتصفح. أما ترويسة Header الإجابة الواردة من الخادوم فتبيّن أن الملف مضغوط بواسطة gzip. ضغط الصور قد يكون تقليل حجم الملفات النصّية مفيدًا، ولكن يمكن الحصول على نتائج أفضل من خلال ضغط ملفات الصور. يمكن لحجم ملفات الصور المستخدمة في الموقع الإلكتروني أن يصبح كبيرًا جدًّا، وضغط الصور يمكن أن يساعد على إبقاء حجم الملفات الكلي تحت السيطرة. يتجنّب الكثيرون مسألة ضغط الصور وذلك خوفًا من أن يتسبب الضغط في تقليل جودة الصورة، ولكن هذا غير صحيح في أغلب الأحيان، إذ يمكن ضغط الصورة دون المساس بجودتها، وذلك من خلال التخلص من مواصفات الألوان والتعليقات غير الضرورية. تتوفّر العديد من الأدوات التي تساعد على ضغط الصور، من أفضلها ImageOptim لنظام Mac و PNGGauntlet لنظام Window، و Trimage لنظام لينكس. تقوم هذه الخدمات بضغط صيغ الصور الأكثر شيوعًا مثل JPG و PNG. نموذج لضغط الصور غير مضغوطة، 455kb مضغوطة، 401kb باستخدام ImageOptim فإنّ حجم الصورة أعلاه قد انخفض بمقدار 14% دون المساس بدقّة الصورة أو جودتها. من الجدير بالذكر هنا أن اختيار أبعاد الصورة في HTML باستخدام خاصيتي height و width يساعد على تصيير الصورة بسرعة أكبر وذلك بتحديد الحجم المناسب للصورة. ولكن يجب الانتباه إلى أن هاتين الخاصيتين تستخدمان في تحديد أبعاد الصورة الحقيقية لا لتصغير حجمها، فمن الممارسات السيئة في هذا الصدد استخدام صورة ذات حجم كبير ثم تصغيرها باستخدام خاصية height و width، والنتيجة تحميل بيانات فائضة عن الحاجة. <img src="ocean.jpg" height="440" width="660" alt="Oceanview"> تقليل طلبات HTTP يشكّل عدد طلبات HTTP - بعد حجم الملفات - العائق الأكبر في طريق تحقيق الأداء الأفضل. ففي كل مرة يُرسل فيها الطلب إلى الخادوم يزداد وقت تحميل الصفحة، وفي بعض الأحيان تتطلب معالجة الطلب من قبل الخادوم الانتهاء من معالجة الطلب السابق، وقد تؤدّي كثرة الطلبات إلى حدوث مشاكل في الخادوم. دمج الملفات المتشابهة إحدى الطرق المتّبعة في تقليل طلبات HTTP - وربّما أسهلها - تتمثّل في دمج الملفات المتشابهة، بمعنى دمج جميع ملفات CSS في ملف واحد وجميع ملفات JavaScript في ملف واحد كذلك. يؤدي دمج هذه الملفات ثم ضغطها إلى إنشاء طلب HTTP واحد صغير نسبيًا. <!-- سيء --> <link href="css/reset.css" rel="stylesheet"> <link href="css/base.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <!-- جيد --> <link href="css/styles.css" rel="stylesheet"> يجب تحميل ملفات CSS في بداية صفحة الوِب ضمن الوسم head، أما ملفات JavaScript فيجب تحميلها في نهاية الصفحة ضمن الوسم body. والسبب هو أنّه يمكن استكمال تحميل ملفات CSS أثناء تحميل بقية أجزاء الصفحة، في حين أنّه لا يمكن تصيير ملفات JavaScript متعددة في نفس الوقت، لذا فإن هذه الملفات تمنع تحميل بقية عناصر الصفحة. يجب الانتباه هنا إلى ملفات JavaScript تُحمّل لا تزامنيًا Asynchronously بعد اكتمال تصيير الصفحة، وكذلك يجب الانتباه إلى أن JavaScript قد تكون مطلوبة في تصيير عناصر الصفحة كما هو الحال عند اسخدام HTML5 shiv. شرائح الصور Image Sprites المقصود بشرائح الصور في CSS هو استخدام صورة خلفية واحدة في مجموعة من العناصر، والهدف هنا هو تقليل عدد طلبات HTTP الناشئة من استخدام مجموعة من الصور. ولإنشاء شريحة اختر مجموعة من صور الخلفية الأكثر استخدامًا ورتّبها إلى جانب بعضها البعض في صورة واحدة، ثم باستخدام CSS أضف الشريحة كصورة خلفية إلى عنصر معين، ثم استخدم خاصّية background-position لعرض الصورة المطلوبة. بهذه الطريقة، يتم تمرير الصورة خلف العنصر ليقوم الأخير بعرض الجزء الملائم من الصورة. فعلى سبيل المثال إن كانت أبعاد العنصر هي 16 بكسل طولًا و 16 بكسل عرضًا فهذا يعني أنّ هذا العنصر سيعرض 16 بكسل طولًا و 16 بكسل عرضًا من الصورة، أما باقي أجزاء الصورة تكون مخفية. هذا مثال عن شريحة تضم صورًا لأيقونات قائمة محرر النصوص، وقد أحيطت كل صورة بخطوط إرشادية لتوضيح أماكن تغيّر موقع الخلفية. يمكن إنشاء قائمة باستخدام شريحة الصور السابقة وذلك بجعلها خلفية للعنصر span، ثم يمكن تغيير موضع الشريحة بواسطة الأصناف، وبذلك يمكن عرض الأيقونة المناسبة في كل مرة. HTML <ul> <li><a href="#"><span class="bold">Bold Text</span></a></li> <li><a href="#"><span class="italic">Italicize Text</span></a></li> <li><a href="#"><span class="underline">Underline Text</span></a></li> <li><a href="#"><span class="size">Size Text</span></a></li> <li><a href="#"><span class="bullet">Bullet Text</span></a></li> <li><a href="#"><span class="number">Number Text</span></a></li> <li><a href="#"><span class="quote">Quote Text</span></a></li> <li><a href="#"><span class="left">Left Align Text</span></a></li> <li><a href="#"><span class="center">Center Align Text</span></a></li> <li><a href="#"><span class="right">Right Align Text</span></a></li> </ul> CSS ul { margin: 0; padding: 0; } li { float: left; list-style: none; margin: 2px; } li a { background: linear-gradient(#fff, #eee); border: 1px solid #ccc; border-radius: 3px; display: block; padding: 3px; } li a:hover { border-color: #999; } li span { background: url("sprite.png") 0 0 no-repeat; color: transparent; display: block; font: 0/0 a; height: 16px; width: 16px; } .italic { background-position: -16px 0; } .underline { background-position: -32px 0; } .size { background-position: -48px 0; } .bullet { background-position: -64px 0; } .number { background-position: -80px 0; } .quote { background-position: -96px 0; } .left { background-position: -112px 0; } .center { background-position: -128px 0; } .right { background-position: -144px 0; } (تجربة حيّة) معرّف الموارد الموحّد URI الخاص ببيانات الصورة إضافة إلى استخدام شرائح الصور، يمكن الاستفادة من البيانات المُرمَّزة Encoded للصورة وتضمينها مباشرة في HTML و CSS وذلك من خلال معرّف الموارد الموحّد الخاص بالبيانات Data URI، وبهذا لن يُرسَل أي طلب HTTP إلى الخادوم. هذه الطريقة مفيدة للصور الصغيرة والتي لا تكون عرضة للتغيير، وعندما يكون بالإمكان نقل ملفات HTML و CSS إلى ذاكرة التخبئة Cach. ولكن لا يخلو الأمر من مشاكل، إذ يصعب أحيانا تبديل هذه المعرّفات ومتابعتها وقد تحتاج إلى توليد المعرّف مرة أخرى، إضافة إلى أنّها لا تعمل مع المتصفحات القديمة وخصوصًا Internet Explorer 7 وما قبله. إن كان بالإمكان تقليل عدد طلبات HTTP باستخدام هذه الطريقة، وإن كان بالإمكان تخزين ملفات HTML و CSS في ذاكرة التخبئة فإن الفوائد التي ستجينها باستخدام هذه الطريقة تفوق المشاكل المترتبة عنها. هناك عدد من الأدوات التي تساعد في توليد معرّف البيانات مثل هذا المحوّل وأداة Patternify. ومع ذلك تأكّد دائمًا من أنّ حجم البيانات في معرّف البيانات الخاصّ بالصورة أقل حجمًا من ملفّ الصورة الأصلية. HTML <img height="100" width="660" alt="Rigged Pattern" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg=="> CSS div { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg==") repeat; } (تجربة حيّة) خزّن الملفات الشائعة في ذاكرة التخبئة هناك طريقة أخرى لتقليل عدد طلبات HTTP المرسلة إلى الخادوم ولعرض الصفحات في وقت أقصر، وتتمثّل هذه الطريقة في إضافة الملفات الشائعة إلى ذاكرة التخبئة. فعند تحميل الصفحة للمرة الأولى يمكن تخزين ملفات معيّنة في ذاكرة التخبئة، وبهذا لن يحتاج المتصفح إلى طلب الملفات ذاتها - لمدة معيّنة - في كل زيارة لتلك الصفحة. تحديد مدّة بقاء هذه الملفات في ذاكرة التخبئة عائد إليك. وكما هو الحال مع ضغط الملفات، فإنّ تعيين مدّة بقاء الملفات في ذاكرة التخبئة يكون من خلال ملف .htaccess. ومرة أخرى فقد أعدّ فريق HTML5 Boilerplate ملفًّا خاصًّا لتعيين تاريخ انتهاء صلاحية الملفات في ذاكرة التخبئة وذلك في إعدادات خادوم Apache الخاصّ بهم. عادة ما تخزّن الصور ومقاطع الفيديو والخطوط وملفات الوسائط المعروفة لمدة شهر في ذاكرة التخبئة، أمّا ملفات CSS و JavaScript فتخزّن في الغالب لمدة عام كامل. وفي حال كانت ملفات CSS أو غيرها من الملفات عرضة للتغير في فترات متقاربة، يمكن تغيير اسم الملف - ومن الأفضل أن يكون الترقيم متسلسلًا - ليُحمَّل الملف من خلال المتصفح. كذلك يمكن تغيير مدة بقاء هذه الملفات في ذاكرة التخبئة إلى قيمة أقل. ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" إن كانت ملفات CSS و JavaScript تتغيّر في كل أسبوع ولا يُتحكَّم في إصداراتها باستخدام ملفات منفصلة فمن الأفضل تغيير قيمة "access plus 1 year" إلى "access plus 1 week". ويمكن مراجعة صفحة صيغة mod_expires للتعرّف على القيم المتاحة. ترجمة - وبتصرّف - للمقال Performance & Organization لصاحبه Shay Howe. حقوق الصورة البارزة محفوظة لـ Freepik

إن قدرتك على كتابة شفرة HTML وCSS مع فهم عميق لما تكتبه يعني امتلاكك لمهارة كبيرة ومتميّزة، وعند ازدياد حجم شفرات الموقع الإلكتروني وكذلك عدد زوّاره، تظهر الحاجة إلى مجموعة جديدة من المهارات المهمّة والضرورية لتوفير الوقت أثناء التطوير ولتحسين تجربة المستخدم؛ لذا فإن معرفة أساسيات تحسين أداء الموقع الإلكتروني وتنظيمه قد يساعد كثيرًا في هذا الصدد. تؤثّر طريقة تنظيم الشفرة البرمجية وأسلوب بنائها كثيرًا على سرعة التطوير، إضافة إلى سرعة تصيير Rendering الصفحة على متصفح الإنترنت، وقد يشغل هذا الأمران اهتمام المطورين والمستخدمين على حد سواء. تمكن زيادة سرعة الإنتاج وتوفير تجربة أفضل للمستخدمين من خلال قضاء الوقت الكافي في التخطيط للحصول على بنية صحيحة للشفرة الأساسية، وتحديد آلية عمل المكونات المختلفة مع بعضها. إستراتيجية وبنية الشفرة الأساسية تتمثّل أول خطوة في طريق تحسين أداء الموقع الإلكتروني وتنظيمه في تحديد إستراتيجة وبنية جيدة للشفرة الأساسية، وذلك من خلال ترتيب مجلدات المشروع بصورة جيدة، وتحديد أنماط التصميم Design patterns، وإيجاد السبل اللازمة لإعادة استخدام الشفرة الشائعة. بنية الأنماط Styles إن طريقة تنظيم الأنماط أمر عائد إلى الرغبة الشخصية وطبيعة الموقع الإلكتروني المراد إنشاؤه، ولكن - عمومًا - هناك بعض الممارسات الجيدة التي ينصح باتباعها، وإحدى هذه الممارسات هي فصل الأنماط بناء على الغرض من استخدامها، وهذا يعني إنشاء مجلدات للأنماط الأساسية الشائعة، ولمكونات واجهة الاستخدام، ووحدات منطق العمل Business logic modules. # Base – normalize.css – layout.css – typography.css # Components – alerts.css – buttons.css – forms.css – list.css – nav.css – tables.css # Modules – aside.css – footer.css – header.css تتضمن بنية الملفات الموضّحة أعلاه ثلاثة مجلدات تضمّ مجموعات فريدة من الأنماط، والهدف هنا هو أن تبدأ بالنظر إلى المواقع الإلكترونية على أنّها أنظمة وليست صفحات منفردة، ويجب أن تعكس بنية الشفرة البرمجية هذا المبدأ. لاحظ عدم وجود أي أنماط خاصّة بالصفحات في بنية الملفات هذه. يتضمن المجلد base الأنماط الشائعة والمتغيّراات المستخدمة في أرجاء الموقع الإلكتروني كالأنماط المتعلقة بمخطط الصفحات وتنسيق النصوص على سبيل المثال. أما المجلد components (المكوّنات) فيتضمن الأنماط الخاصة بعناصر واجهة الاستخدام والتي يمكن تقسيمها إلى مكونات مختلفة مثل التنبيهات والأيقونات. أخيرًا، يتضمن المجلد modules (الوحدات) الأنماط الخاصة بأقسام الصفحة المختلفة، والتي تُحدَّد حسب طبيعة المشروع واحتياجاته. لا ترتبط أنماط المكونات بأي شكل من الأشكال بمنطق العمل الجوهري للموقع الإلكتروني وإنما تعتمد على الواجهة بصورة تامة، أما الأنماط الخاصة بمنطق العمل فتكون موجودة في الوحدات ، ومن الشائع استخدام عددٍ من المكونات الخاصة بواجهة الاستخدام ضمن هذه الوحدات. فعلى سبيل المثال يمكن أن يحتوي العمود الجانبي في الصفحة على أنماط القوائم والأيقونات المعرّفة ضمن أنماط المكونات في حين تكون بعض الأنماط الأخرى متوارثة من نمط الوحدة. يساعد فصل الأنماط بهذه الطريقة على تكوين أنماط مسبقة متقنة الصنع والقدرة على استخدام الأنماط في أماكن متعددة من الموقع الإلكتروني وإعادة استخدامها حسب الحاجة. إن ترتيب الأنماط بهذه الأسلوب ليس أمر مستحدثًا، وقد ورد ذكره سابقًا في عدد من منهجيات CSS مثل CSS كائنية التوجه Object Oriented CSS أو OOCSS اختصارًا، وبنية CSS القابلة للتجميع والتوسع Scalable and Modular Architecture for CSS أو SMACSS اختصارًا. لكل واحدة من هذه المنهجيات آراؤها الخاصة حول بنية الملفات وكذلك حول طريقة استخدام الأنماط. CSS كائنية التوجه Nicole Sullivan واحدة من روّاد منهجية CSS كائنية التوجه وذلك في عملها المتمثّل في كتابة الأنماط الخاصة بالمواقع الإلكترونية الكبيرة. تضع هذه المنهجية مبدأين أساسيين يساعدان على بناء مواقع إلكترونية قابلة للتوسع تعتمد على بنية قوية ومتماسكة وبمقدار معقول من الشفرة البرمجية. وهذا المبدآن هما: فصل البنية عن القشرة، فصل المحتوى عن الحاوي. المقصود بفصل البنية عن القشرة هو تجريد مخطط العنصر من السمة العامة للموقع الإلكتروني. بمعنى أنّه يجب أن تكون بنية الوحدة شفافة، وتسمح بتوارث الأنماط الأخرى وعرضها دون أي تضارب. ويتطلب هذا بنية رصينة للمخطّطات والشبكات إلى جانب وحدات متقنة الصنع. أما فصل المحتوى عن الحاوي فيعني عدم اعتماد العناصر الأبناء على العنصر الأب، فعلى سبيل المثال يجب أن يظهر العنوان بنفس المظهر بغض النظر عن العنصر الأب الذي يحتويه. ولتحقيق هذا، يجب أن ترث العناصر أنماطًا مبدئية، ثم تُوسَّع هذه الأنماط حسب الحاجة. HTML <div class="alert alert-error"> <p class="msg">...</p> </div> CSS .alert {...} .alert-error {...} .msg {...} تشجّع CSS كائنية التوجه على بناء مكتبة للمكونات، والتحلّي بالمرونة، والاستفادة من الشبكة. تشكّل هذه القواعد أرضية جيدة يمكن أن تساعد في تجنّب الحاجة إلى إنشاء أنماط إضافية عند إضافة صفحات أو خصائص جديدة للموقع الإلكتروني. بنية CSS القابلة للتجميع والتوسع المنهجية الثانية في تنظيم شفرة CSS هي المنهجية التي طوّرها Jonathan Snook تحت اسم بنية CSS القابلة للتجميع والتوسع. تدعو هذه المنهجية إلى تقسيم الأنماط إلى خمسة فئات رئيسية، هي: الأساس Base، المخطط Layout، الوحدة Module، الحالة State، السمة Theme. تضمّ فئة الأساس الأنماط الأساسية للعناصر التي تغطي الأمور العامة والمبدئية، ثم تأتي بعدها فئة المخطط لتحديد الأحجام المختلفة للعناصر إلى جانب أنماط الشبكة مانحة إياها المخطط الرئيسي. أما أنماط الوحدة فهي أنماط مخصصة بصورة أكبر وهي موجّهة إلى أجزاء محددة من الصفحة، كروابط التنقّل في الموقع (navigation) أو الأنماط المميزة الأخرى، ثم تأتي بعدها أنماط الحالة التي تستخدم لزيادة أو تعديل أنماط أخرى في حال تضمنت الوحدة المعنية حالات مختلفة، كلسان تبويب مفعّل مثلًا. وأخيرًا، يمكن إضافة فئة السمة والتي تتضمن أنماط تستند إلى المظهر الخارجي للوحدات المختلفة. HTML <div class="alert is-error"> <p>...</p> </div> CSS .alert {...} .alert.is-error {...} .alert p {...} .alert.is-error p {...} في المثال السابق يكون الصنف alert ضمن فئة الوحدة في حين أن الصنف is-error يكون ضمن فئة الحالة. بعد ذلك تُتوارث الأصناف من هذه الفئات حسب الحاجة. أي منهجية ستختار؟ اختيار المنهجية التي ستستخدمها في عملك أمر عائد إليك تمامًا، وقد تشعر بأنّ منهجية معينة تناسب مشروعًا معينًا والعكس صحيح. بصورة عامة، لا بأس باستخدام مزيج من المنهجيتين والاستفادة من مبادئهما حسب ما تقتضيه الحاجة. تحسين الأداء بواسطة المحدّدات Selectors عدم الاهتمام بالمحدّدات من الأمور التي يُبتلى بها الكثير من المطوّرين، حيث ينصبّ جلّ الاهتمام في الغالب على الخصائص والقيم التابعة لها، فما دامت الأنماط مطبّقة على العنصر الصحيح فإن كل شيء يبدو على ما يرام. ولكن هذا افتراض خاطئ تمامًا، فلطريقة تحديد العناصر في CSS أثرٌ كبير على الأداء، بما في ذلك سرعة عرض الصفحات ومدى فعالية الأنماط في البنية العامة للموقع. اجعل المحدّدات قصيرة قدر الإمكان هناك الكثير من الفوائد الناجمة عن تقصير محدّدات CSS قدر الإمكان، إذ بتقصيرها تقل التخصّصية، ما يسمح بتوارث وتناقل أفضل للأنماط، وزيادة في كفاءتها. أما المحدّدات الطويلة فتقلّل الأداء لأنها تجبر المتصفح على تصيير كل نوع من أنواع المحددات على حدة من اليمين إلى اليسار، كما تشكّل عائقًا أمام المحدّدات الأخرى لتكون أكثر تخصّصًا. /* سيء */ header nav ul li a {...} /* جيد */ .primary-link {...} /* سيء */ button strong span {...} button strong span .callout {...} /* جيد */ button span {...} button .callout {...} المحدّد الأول في الشفرة السابقة مخصّص جدًّا، ويمكن تحديده وتصييره بسرعة أكبر باستخدام الصنف. إضافة إلى ذلك، فإن استخدام الصنف في هذه الحالة يقلل بقدر ملحوظ من الحاجة إلى تحديد العنصر الأب، الأمر الذي يسمح بتغيير موقع العنصر فيما بعد دون إفساد الأنماط الأخرى. أما المثال الثاني فيتضمن محدّدات أقصر من المثال الأول ولكن يمكن تحسينها من خلال توفير المستوى ذاته من التخصصية لكل محدد. لا تبالغ في استخدام محددات مخصّصة جدًّا وبهذا ستواجه مشاكل أقلّ بكثير في حال حدوث تغير في ترتيب عناصر الصفحة. إن التقليل من عدد المحدّدات وإعطائها جميعًا القوة ذاتها سيمكّنها من العمل مع بعضها البعض بصورة أفضل. إن الهدف الأساسي من تقصير المحدّدات هو تقليل التخصصية وكتابة شفرة أوضح وأكثر ترتيبًا. استخدم الأصناف Classes دائمًا الأصناف رائعة جدًّا، إذ يصيّرها المتصفح بسرعة كما أنّها تتيح إعادة استخدام الأنماط إلى جانب استخدامها الواسع في بناء المواقع الإلكترونية. ولكن عند استخدام الأصناف يجب الانتباه إلى ممارسات مجرَّبة ستساعد على تحقيق أقصى فائدة ممكنة منها. تُصيَّر المحدّدات من اليمين إلى اليسار؛ لذا فمن الضروري أن تعتني جيّدًا بـ المحدّد الرئيسي Key selector وهو المحدد الأخير ضمن قائمة المحدّدات من الجهة اليمنى، وهو محدّد مهمّ للغاية؛ لأنّه يحدّد العنصر الأول الذي سيعثر عليه المتصفح أثناء بحثه ضمن الصفحة، وسيؤدي عدم الاعتناء بالمحدد الرئيسي إلى دخول المتصفح في فوضى عارمة. لا تتردّد في استخدام صنف فريد من أجل تحقيق الفائدة بالنسبة لأداء الصفحة، كذلك لا تُضِف أي عنصر قبل محدّدات الأصناف، فذلك سيمنعك من تطبيق هذه الأنماط على عناصر أخرى، وسيزيد من مقدار الخصوصية التي يتمتع بها ذلك المحدد. /* سيء */ #container header nav {...} /* جيد */ .primary-nav {...} /* سيء */ article.feat-post {...} /* جيد */ .feat-post {...} يجدر بك كذلك الابتعاد عن استخدام محدّدات المعرّفات ID selectors قدر الإمكان؛ ذلك لأنّها محدّدات مخصّصة جدًّا ولا تسمح بإعادة استخدامها في أي مكان آخر، ويسعني القول إنّ استخدام المعرّف لا يختلف كثيرًا عن استخدام !important. الشفرة القابلة لإعادة الاستخدام إن أحجام الملفات الكبيرة وعمليات التصيير غير الضرورية التي يقوم بها المتصفح هي من أكبر العوائق التي تقف في وجه الأداء الجيد. وإعادة استخدام الأنماط قدر الإمكان من أسرع الطرق في تقليل حجم ملفات CSS، إذ يجب دمج أنماط الواجهة Interface patterns والأنماط المكررة ليكون بالإمكان مشاركة الشفرة ذاتها على عدد من العناصر. فعلى سبيل المثال لو كانت هناك وحدتان تتشاركان في عدد من الخصائص (كلون الخلفية، والأركان الدائرية، والظل) فلا حاجة على الإطلاق للتصريح عن النمط ذاته مرتين، بل يمكن دمج هذه الخصائص في صنف واحد، وبهذا تكتب الأنماط مرة واحدة ويكون بالإمكان مشاركتها في أماكن مختلفة. ولكن يجب الانتباه إلى أنّ إعادة استخدام الشفرة لا يكون على حساب الدلالية Semantics. يمكن في هذه الحالة استخدام زوج من المحددات وفصلهما بفاصلة، وبهذا يمكن للأنماط أن تكون متوارثة بين المحدّدين في الوقت ذاته. هناك طريقة أخرى غالبًا ما نراها في منهجيتيْ OOCSS و SMACSS اللتين تحدّثنا عنهما سابقًا، وتتلخّص هذه الطريقة في تعريف الأنماط في صنف واحد، ثم تطبيق أصناف متعددة على العنصر ذاته. /* سيء */ .news { background: #eee; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } .social { background: #eee; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } /* جيد */ .news, .social { background: #eee; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } /* الأفضل */ .modal { background: #eee; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } ليس هناك فارق كبير بين الطريقتين ما دامت الشفرة مشتركة وقابلة لإعادة الاستخدام، وما دام الحجم النهائي للملف صغيرًا. الخطوة المواليّة لتنظيم شفرة CSS هي معرفة أساسيّات تحسين أداء الموقع. ترجمة - وبتصرّف - للمقال Performance & Organization لصاحبه Shay Howe. حقوق الصورة البارزة محفوظة لـ Freepik