موضوع
بدايةً ، المعلومات في هذا المقال تتطلب من قارئها او المُستفيد أن يمتلك خلفية برمجية ولا تستدعي بالضرورة ان تكون مطور برمجيات ، يكفي أن تعرف المُسميات واهدافها و طبيعتها مثل : اساسيات كتابة HTML ، اساسيات الجافاسكربت ، وكذلك المعرفة ب طبيعة عمل أنماط تنسيق الصفحات "CSS"
للموقع الإلكتروني الخاص بكْ مجموعة متنوعة من الخصائص، مُجرد فهمكْ لطبيعة هذه الخصائص تأكد تماماً بإن الإطار البرمجي للموقع ليس بالمشكلة الكبيرة، بغض النظر عن لغته البرمجية. وتأكد تماماً بأن جميع المواقع الإلكترونية قاطبةً لها طبيعة عمل مُتشابهة بغض النظر عن ارتباط الموقع بمكاتب برمجية مختلفة أو استراتيجية استدعاء المُحتوى الخاص بالموقع والتي سنتحدث عنها بشكل مفصلْ لاحقاً.
لهذا السبب لربما عملية تحسين و زيادة سرعة الموقع للكثير من الأشخاص أو اصحاب الاختصاص قد تكون صعبة أو مُرهقة أو مجهولة الملامح . ولكن العكس تماماً ، ف لفهم طبيعة الموقع الدور الأكبر للوصول الى سرعة تصفح أفضل بغض النظر عن حجم المُحتوى "بأنواعه" لهذا الموقع.
ولإستيضاح هذا الأمر ، وجب عليك أن تبدأ بالسؤال
بطبيعة الحال عملية التصفح تحتاج الى نافذة للوصول الى محتويات و مكونات الموقع ، وهذه النافذه هي "البرمجيات" المتصفحات التي بدورها تُعطي القراءات اللازمة لعرض محتوى الموقع.
ونستوضح من هذا الأمر بأن هنالك مجموعة من التدفُقات البرمجية التي تحدث داخل المُتصفح والتي من شأنها أن تستعرض البيانات للمُستخدم النهائي.
يُطلق عليه برمجياً " Browser Reflow"والتي تعني العمليات الحسابية التي يقوم بها المُتصفح واللازمة ل تَمَوضُعْ جميع عناصر الموقع الالكتروني المرغوب بتصفحه بغرض عرضه النهائي للمُستخدم أو مجموعة المُستخدمين . وبشكل أبسط هو الوقت اللازم الذي يحتاجه المُتصفح لسلوك مسار التصفح من بدايته حتى نهايته وبمثال أبسط :
لنعتبر أن الموقع عباره عن مضمار سباق. وأن المُتصفح هو سيارة فراري، فإن الوقت اللازم للوصول من البداية الى النهاية يُعتبر هو مسار التصفح مع الاخذ بعين الاعتبار العمليات الأخرى مثل ، تغيير الاطارات ، او اضافة الوقود وغيرها..
فالأمر مشابه تماما، ان تدفق المتصفح يتخلله عمليات حسابيه مختلفة تعتمد بشكل كبير على ترتيب العناصر في الموقع ، الملفات المُستخدمه ، الدوال البرمجية ، اُطر التنسيقات للصفحة CSS، الاتصالات الصادرة ، الاستضافة ، ملفات جافا سكربت . ونفهم من هذا بأن عملية استدعاء عُنصر واحد في الموقع قد يتطلب استدعاء عُنصر ما قبله أو استدعاء عُنصر أخر بعده ، يعني ترابط الأحداث التي يتم قراءتها من المتصفح خلال الثواني الازمه لعرض الموقع.
بالطبع للمتصفح دور كبير في سُرعة قراءه البيانات و العناصر داخل الموقع الواحد، لذلك يجب عليك مُتابعة التحديثات المُستمرة للمتصفحات
توضح الصورة الفروقات بين انواع المتصفحات في قراءة أنماط تنسيقات الصفحة CSS وسرعتها
قد تحدثنا مُسبقاً في حالة دراسة خاصة ب رفع سرعة متاجر سلة اضغط هنا: : لمتابعة الحالة، واوضحنا بأن المُشكلة الأكبر كانت بحجم العناصر المُستخدمة في الكتلة الواحدة
Excessive Dom Size
مثلما توضح الصورة :
ولنفهم اكثر ما هي العناصر المُحتملة ، سنجد في الصورة التالية وجود تكتل للعناصر بمُسمى <section> ، والتي ايضاً لها تكتُلات ومجموعات داخلية كبيرة ، والتي نتج عنها حوالي 5 آلاف عنصر، هذه العملية وحدها تستدعي وقتاً اطول على غير العادة لقراءة فقط عناصر ال HTML
ناهيك عن التكتُلات الداخلية ل ملفات الcss + javascript
تعتبر هذه استراتيجية واحدة من العديد من الاستراتيجيات المختلفة ، وعلى هذا الأساس يُعتبر التقليل من تدفقات العناصر في المتصفح عملية هامة جداً لزيادة سرعة التصفح في الموقع و هي كالتالي :
HTML Minifyمُلاحظة : عامل الاستضافة مُهم ايضاً ، بالاضافة الى التنوع في استخدام استراتيجيات التهيئة الافضل لسرعة الموقع "TSEO" او مجازياً السيو التقني.
المصدر الأساسي : مطوري جوجل
الاضافات المُتخللة بالمقال : فريق ريبارو
