سيو تقني
March 15, 2022

زيادة سرعة الموقع عبر تقليل تدفق عناصر المتصفح

تثبيت و زيادة سرعة الموقع برمجيا عبر تقليل تدفق العناصر في المتصفح
blog-details

نشرت من قبل

إبراهيم فتحي
Statistic Icon

موضوع

سيو تقني
بدايةً ، المعلومات في هذا المقال تتطلب من قارئها او المُستفيد أن يمتلك خلفية برمجية ولا تستدعي بالضرورة ان تكون مطور برمجيات ، يكفي أن تعرف المُسميات واهدافها و طبيعتها مثل : اساسيات كتابة HTML ، اساسيات الجافاسكربت ، وكذلك المعرفة ب طبيعة عمل أنماط تنسيق الصفحات "CSS"

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

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

ولإستيضاح هذا الأمر ، وجب عليك أن تبدأ بالسؤال

كيف يتم تصفح الموقع ؟

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

فماذا تعني تدفُق المُتصفح أو تدفق مسار التصفح ؟

يُطلق عليه برمجياً " Browser Reflow"والتي تعني العمليات الحسابية التي يقوم بها المُتصفح واللازمة ل تَمَوضُعْ جميع عناصر الموقع الالكتروني المرغوب بتصفحه بغرض عرضه النهائي للمُستخدم أو مجموعة المُستخدمين . وبشكل أبسط هو الوقت اللازم الذي يحتاجه المُتصفح لسلوك مسار التصفح من بدايته حتى نهايته وبمثال أبسط :

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

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

لكن ما هو دور فهم تدفقات المتصفح في زيادة سرعة الموقع من الأساس ؟! وايضاً هل للمتصفح دور في سرعة التصفح ؟

بالطبع للمتصفح دور كبير في سُرعة قراءه البيانات و العناصر داخل الموقع الواحد، لذلك يجب عليك مُتابعة التحديثات المُستمرة للمتصفحات

توضح الصورة الفروقات بين انواع المتصفحات في قراءة أنماط تنسيقات الصفحة CSS وسرعتها

  • 1x: يعني الوقت مابين ثانية حتى 6 ثوان لقراءة نوع التنسيق

قد تحدثنا مُسبقاً في حالة دراسة خاصة ب رفع سرعة متاجر سلة اضغط هنا: : لمتابعة الحالة، واوضحنا بأن المُشكلة الأكبر كانت بحجم العناصر المُستخدمة في الكتلة الواحدة
Excessive Dom Size

مثلما توضح الصورة :

ولنفهم اكثر ما هي العناصر المُحتملة ، سنجد في الصورة التالية وجود تكتل للعناصر بمُسمى <section> ، والتي ايضاً لها تكتُلات ومجموعات داخلية كبيرة ، والتي نتج عنها حوالي 5 آلاف عنصر، هذه العملية وحدها تستدعي وقتاً اطول على غير العادة لقراءة فقط عناصر ال HTML


ناهيك عن التكتُلات الداخلية ل ملفات الcss + javascript

إذن كيف تقوم بتحسين سرعة الموقع أو المتجر لديك؟

تعتبر هذه استراتيجية واحدة من العديد من الاستراتيجيات المختلفة ، وعلى هذا الأساس يُعتبر التقليل من تدفقات العناصر في المتصفح عملية هامة جداً لزيادة سرعة التصفح في الموقع و هي كالتالي :

  1. التقليل من عدد العناصر المعروضة داخل التكلات او المجموعات في العنصر الواحد ، واذا كان من الضرورة وجودها ف يُفضل ضغطها باستخدام ادوات ضغط ملفات HTML HTML Minify
  2. التقليل من تكتلات ملفات انماط التنسيقات للصفحة "CSS" عبر تحييدها و ضغطها تماما كالطريقة رقم واحد.
  3. تقليل مُعدل الاتصالات الصادرة من الموقع
  4. تقليل عمليات الاستدعاء التي تتم في أول عملية تصفح للموقع
  5. والأهم هو اختيار مسار التدفق الأفضل عبر ترتيب العناصر وفق اولوياتها داخل الصفحة الواحدة ، كُلما كان العنصر ذو أهمية أقل كان من الأفضل استدعاءه بترتيب أقل. "Dom tree"
مُلاحظة : عامل الاستضافة مُهم ايضاً ، بالاضافة الى التنوع في استخدام استراتيجيات التهيئة الافضل لسرعة الموقع "TSEO" او مجازياً السيو التقني.

وبعد أن قمتَ بقراءة هذا المقال ، يمكنكَ ان تستفيض ايضاً حول رفع اداء وسرعة المتاجر في سلة 

المصدر الأساسي : مطوري جوجل
الاضافات المُتخللة بالمقال : فريق ريبارو

Reparo whatsapp