التأخير أم التأجيل optimization

في البداية، لو كان موقعك يعمل من خلال React فستحتاج إلى استخدام Next.js بسبب ميزة SSR.

عدا ذلك، سنقوم بالتالي، حيث Deferred تعني أن يبدأ المتصفح بتنزيل ملف JavaScript في الخلفية دون إيقاف عملية تحليل HTML (parsing).

ثم تنفيذ ملف JavaScript بعد أن يتم تحليل HTML بالكامل وإنشاء نموذج DOM لكن التنفيذ يكون قبل حدث DOMContentLoaded، ولو لديك عدة ملفات JavaScript مؤجلة، سيتم تنفيذها بالترتيب الذي ظهرت به في كود HTML.

أما Delayed يعني تأخير تحميل ملف JavaScript حتى وقت لاحق، مثلاً بعد تحميل المحتوى المرئي الأولي First Paint أو بعد تفاعل المستخدم، وتستطيع فعل ذلك بطرق مختلفة كتحميل JavaScript بشكل ديناميكي باستخدام JavaScript نفسها بمعنى الإعتماد على Intersection Observer لتحميل الملفات عند ظهورها في إطار العرض.

أو حتى حدث معين، مثل scroll أو load، أو setTimeout أو event listeners كأن يضغط المستخدم على زر ما، لتأخير التنفيذ حتى لا يعيق التحميل الأولي.

ما يحدث عند مواجهة المتصفح ملف JavaScript

<script src="index.js">

 بدون defer أو async، هو أنه يتوقف عن تحليل HTML لتنزيل وتنفيذ ملف JavaScript، وذلك يؤخر اكتشاف العناصر الهامة في الصفحة، بما في ذلك العنصر الأكبر الذي يساهم في LCP.

بالتالي لو العنصر الأكبر LCP يعتمد على JavaScript ليتم عرضه، كصورة يتم تحميلها ديناميكيًا بواسطة JavaScript، أو محتوى يتم حقنه بواسطة JavaScript، فتنفيذ JavaScript أولاً سيؤخر عرض العنصر أي تأخير كود HTML، وبالتالي يؤخر LCP.

لذا أضف سمة defer لوسوم <script> التي لا تحتاج إلى التنفيذ فورًا:

<script src="script.js" defer></script>

حيث لا يعيق تحميل الصفحة أو تحليل الـ DOM وينفذ بالترتيب بعد اكتمال تحليل HTML.

ثم قم بتأجيل تحميل ملفات السكريبت غير الضرورية تمامًا للتحميل الأولي بالطرق التي تم ذكرها سابقًا، فهي مناسبة مثلاً لتحميل الإعلانات وسكريبتات التحليلات وهكذا.

أيضًا اجعل المتصفح يُحمّل الموارد المهمة مبكرًا كالخطوط من خلال rel=preload

<link rel="preload" href="critical-font.woff2" as="font">