كيفية التخلص من موارد حظر العرض | هواة الفسفور الابيض
نشرت: 2021-12-10إذا سمعت شكاوى حول سرعة تحميل موقع الويب الخاص بك أو كنت ترغب في تحميل صفحات الويب الخاصة بك بشكل أسرع وتحسين تجربة المستخدم الخاصة بك ، فقد ترغب في التفكير في كيفية التخلص من موارد حظر العرض.
بغض النظر عن السبب ، يمكن أن تؤثر سرعة ظهور موقع الويب أمام وجه الزائر على تجربة المستخدم وتتسبب في فقدان عملك لاتصالات العميل. تعتمد تجربة موقع المستخدم بشكل أساسي على مسار العرض الحرج وإدارة البرامج النصية التي يتم تحميلها على موقع الويب الخاص بك أثناء عملية العرض.
ما هو التقديم؟
تتبع جميع مواقع الويب مسارًا يمكن للمستخدم من خلاله رؤية محتوياته والتفاعل معه. يُطلق على مسار تحميل موقع الويب اسم مسار العرض الحرج. يصف هذا المسار خطوات كل موقع لجمع البيانات وإنشائها للزائر ومتصفحه.
ماذا تفعل المتصفحات قبل التقديم
يؤدي إدخال عنوان URL لموقع الويب إلى بدء العملية التالية:
- يكتمل التنقل عندما يطلب المستخدم عنوان URL محددًا.
- يحدث بحث DNS ، حيث يوفر الخادم عنوان IP
- يقوم المستعرض وخادم موقع الويب بإجراء مصافحة TCP لإجراء اتصال
- تحصل طلبات الاتصال الآمن على تفاوض TLS أو تبادل المصافحة الثانية
- يتلقى المتصفح ردًا ، ويحصل على رمز الموقع
- يتم استلام الحزمة الأولى من البيانات في بروتوكول TCP Slow Start لتنظيم حركة مرور الشبكة
- يرسل المستخدم إقرارات (ACKs) إلى الخادم لتأسيس قيود الاتصال ومعدلات الإرسال.
- يوزع المستعرض المعلومات ويحول البيانات إلى نموذج كائن CSS (CSSOM) ونموذج كائن المستند (DOM).
- يتم إنشاء شجرة DOM (بنية الموقع والصفحة)
- يقوم ماسح التحميل المسبق بتجميع الموارد الخارجية ، مثل البرامج النصية والصور.
- يتم بناء CSSOM (شجرة نمط)
- يتم تجميع JavaScript أثناء إنشاء CSSOM
- تم تصميم نموذج كائن إمكانية الوصول (AOM) للأجهزة المساعدة لتفسير المحتوى.
- يحدث العرض باستخدام أشجار CSSOM و DOM التي تم إنشاؤها مسبقًا.
ماذا يحدث عندما تجعل الصفحة؟
يتم تقديم مواقع الويب من خلال تصميم الكود لإكمال التخطيط والأسلوب والطلاء وأحيانًا التركيب على موقع ويب. نموذج كائن CSS (CSSOM) ونموذج كائن المستند (DOM)
أسلوب
يتم دمج DOM و CSSOM في شجرة عرض ، ويبدأ البناء. تنظم شجرة العرض العقد المرئية والمحتوى والأنماط المحسوبة للموقع وكل عقدة فريدة.
تَخطِيط
التخطيط هو الخطوة التي تلتقي فيها الهندسة المعمارية بالبناء ، ويتم إنشاء هيكل للصفحة لعرض عرض جميع العقد وارتفاعها وموقعها في شجرة العرض. يتم تحديد حجم كل كائن وموضعه.
يتم وضع مواقع الويب في هيكل مربع. يمكن أن تتكيف هذه المربعات مع عدد غير محدود من أحجام إطارات العرض المختلفة. عندما يتغير هيكل الصندوق للتحجيم ، فإن هذا يسمى إعادة التدفق .
الرسام: أول رسم وأول طلاء مضمون (FCP)
تسمى اللحظة التي يقوم فيها مستعرض موقع الويب بأي عرض لصفحة "الرسم الأول". يمكن أن يكون First Paint لون خلفية خالصًا فقط اعتمادًا على رمز الصفحة.
يشير First Contentful Paint (FCP) إلى اللحظة القابلة للقياس عندما يتمكن زائر موقع الويب من عرض محتوى على صفحتك (نص ، صور ، مقاطع فيديو ، إلخ). يقيس FCP من بداية تحميل صفحتك إلى النقطة التي يتم فيها عرض أي محتوى.
First Paint و FCP لا يتشابهان مع صفحة التحميل السريع أو الأداء السريع ، ولكن تجربة المستخدم تصبح أكثر إيجابية بشكل ملموس عندما يرى زوار الموقع صفحة تحميل سريعة. يعمل الضبط الدقيق للدهانات الأولى ووقت التحميل وأداء الموقع على تحسين تصور المستخدم لوقت التحميل.
التركيب
تستخدم صفحات الويب طبقات حيث تتداخل الكائنات لتنظيم الهيكل. التركيب هو المكان الذي تحسب فيه الصفحة ترتيب الأشياء لتقديمها بشكل صحيح.
تؤدي التدفقات الانسيابية إلى إعادة التركيب نظرًا لأن موضع الكائن غالبًا ما يتغير في إعادة التدفق.
ما المقصود بمصادر حظر العرض
البرامج النصية وأوراق الأنماط و HTML التي تعمل على إبطاء المتصفح أو تأخيره أو منعه من عرض المحتوى على موقع ويب هي موارد تمنع العرض. عندما يشير الأشخاص إلى موارد حظر العرض ، فإنهم عادةً ما يشيرون إلى:
- CSS
- JavaScript في قسم <head>
- الخطوط المحملة من خادم أو شبكة توصيل المحتوى
- عمليات استيراد HTML (الصفحات القديمة)
هناك الكثير من CSS وجافا سكريبت التي لا تحظر العرض وهي ضرورية للتحميل بالقرب من الجزء العلوي. حدد أولويات أوراق الأنماط للتأكد من أن أي زائر للموقع يرى المحتوى المقصود بدلاً من المحتوى غير المصمم أو لا شيء.
ما المقصود بحظر جافا سكريبت و CSS؟
أثناء عملية العرض ، يقوم المستعرض الخاص بك بتحميل معلومات موقع الويب عن طريق تشغيل المعلومات الموجودة في <head> أولاً ، بما في ذلك كل نص برمجي. يجب تشغيل جميع البرامج النصية بالترتيب ومعالجتها بالكامل قبل ظهور الصفحة في المستعرض الخاص بك.
يتم إنشاء البرامج النصية في قائمة انتظار ، لذا فإن ترتيب البرنامج النصي في <head> ضروري أثناء التطوير. اعتمادًا على الكود ، قد يبطئ موقع الويب الخاص بك أو يمنعه من التحميل بالكامل ، وهذا ما نشير إليه باسم CSS و JavaScript لحظر العرض.
قد تأتي البرامج النصية على موقع WordPress الخاص بك من السمات أو العمل المخصص أو المكونات الإضافية المضافة للوظائف المختلفة.
هل الصور Render-Block Resources؟
إذا كنت تتساءل عما إذا كانت الصور تحظر الموارد ، فهي ليست كذلك. لا يزال من الممكن أن يتسبب حجم الصورة في حدوث مشكلات في التحميل على صفحتك ، ولكن لا ينبغي أن يمنع العرض.
لماذا يتم التخلص من موارد حظر العرض؟
يمكن أن تبطئ البرامج النصية لحظر العرض من أوقات تحميل الصفحة وتدمر تجربة موقع الويب للزائرين. يمكن أن يؤدي تصور موقع الويب البطيء إلى خسارة الزائرين إذا كانت تجربة موقعك على الويب سيئة. يمكن أن يؤثر الاحتفاظ المنخفض بالزوار على نتائج محرك البحث ويقلل من قائمة النتائج.
تعني التصنيفات المنخفضة لمحركات البحث (SEO) انخفاضًا في عدد الزوار وفقدان الأعمال المحتملة. يؤدي فقدان التصنيفات إلى تقليل عدد الزائرين ، ويقلل الموقع السيئ من الاحتفاظ بالزائرين ؛ يمكن أن تكون موارد حظر العرض مشكلة كبيرة.
إذا كان هدف موقع الويب الخاص بك هو الحصول على نقاط Google PageSpeed عالية ، فإن فهم موارد حظر العرض يعد أمرًا أساسيًا لتحقيق هذا الهدف.
كيفية التخلص من موارد حظر العرض
إن التعامل بجدية بشأن تصنيفات تحسين محركات البحث في موقعك وتجربة المستخدم يعني أن موقعك يحتاج إلى التعامل مع موارد حظر العرض أو إزالتها. إذا كنت لا تبني موقعك من البداية ، فابدأ في اختبار موقع الويب الخاص بك بحثًا عن موارد حظر العرض.
بمجرد تحديد موارد حظر العرض هذه ، ستختار طريقتك لمعالجة المشكلة وتحسين وظائف موقعك.
اختبر ما إذا كان موقع الويب الخاص بك يحتوي على موارد لحظر العرض
لا يضير أبدًا إجراء تقييم على موقع الويب الخاص بك لاكتشاف أي موارد تمنع العرض (جرب Google PageSpeed Insights). إذا قمت بالتحسين إلى أقصى حد ممكن ، أو كنت تتبع أفضل الممارسات وما زلت تواجه مشكلات ، أو لا تعرف من أين تبدأ ، يمكن أن يكون مقيمو الصفحات أدلة مفيدة.
طرق للتخلص من JavaScript و CSS يحظران العرض
يتيح لك WordPress إدارة أي موارد تعوق عرض موقعك بعدة طرق مختلفة. سيمكنك WordPress من تنظيم البرامج النصية والروابط الخاصة بحظر العرض مع التعليمات البرمجية والعلامات وتنظيم الملفات والتحسين والمكونات الإضافية.
يمكن للمطورين المحترفين أيضًا إنشاء مكونات إضافية أو سمات مخصصة لبناء هذه العمليات في التعليمات البرمجية.
قم بإزالة جافا سكريبت التي تحظر التجسيد باستخدام التعليمات البرمجية
هناك ثلاث طرق لمعالجة موارد حظر العرض من خلال التعليمات البرمجية:
- انقل علامات <script> و <link> إلى الجزء السفلي من كود HTML الخاص بك
- أضف سمات غير متزامنة أو مؤجلة إلى العلامة للنصوص غير الهامة.
- قم بإزالة كود JavaScript غير المستخدم.
يقوم WordPress بتحميل ملف jQuery Migrate لتوفير التوافق مع الإصدارات القديمة من jQuery التي تستخدمها المكونات الإضافية والسمات. يمكنك استخدام جزء من التعليمات البرمجية أو مكون إضافي لمنع WordPress من تحميل ملف jQuery Migrate هذا إذا لم يكن هناك شيء على موقعك يحتاج إليه ليعمل.
تخلص من أوراق الأنماط التي تمنع العرض
طبيعة أوراق الأنماط تجعلها تحجب الموارد بطبيعتها. يمكنك معالجة هذا على موقعك بالطرق التالية:
- تقسيم CSS حسب نوع الوسائط (الهاتف المحمول ، الكمبيوتر اللوحي ، سطح المكتب ، إلخ.)
- تحسين مسار العرض الحرج
- اجمع ملفات CSS
باستخدام WordPress والمنشئ المرئي ، قد لا تتحكم في كيفية إنشاء الصفحة بشكل مباشر ، ولكن هناك طرقًا لحل أي مشكلة.
منع عرض العنوان باستخدام ملحق أو ملحق WordPress
تُستخدم الإضافات والإضافات في WordPress في تنظيم البرامج النصية على الصفحة. ستمر المكونات الإضافية عبر علامتي <script> و <link> في صفحتك وتطبق سمات المؤجل أو غير المتزامن بناءً على إرشادات محددة.
لقد مررنا واختبرنا مجموعة من المكونات الإضافية لـ WordPress واستمرنا في مشاركة أشياء مفيدة مثل المكونات الإضافية المفضلة لدينا لتحسين السرعة على المدونة.
احصل على محترف WordPress يتخلص من موارد حظر العرض نيابة عنك
تتطلب بعض المكونات الإضافية التخصيص ، وبينما تظهر بشكل مباشر ، يمكن أن ينتهي بها الأمر إلى عدم العمل إذا تم إعدادها بشكل غير صحيح. لا عيب في أن تطلب من محترف WordPress المساعدة و WP Buffs لديها العديد من المتخصصين الذين يمكنهم تحسين موقعك.
أفضل الممارسات لتحسين العرض
- اجمع موارد حظر العرض لتقليل تأثيرها على تحميل الصفحة.
- قم بتقليل حجم المورد ، وبالتالي يتم تقليل عدد البايتات المراد تحميلها.
- قم بتأجيل تنزيل موارد الحظر التي لا يتم عرضها.
- لا تقم بإضافة CSS بقاعدةimport لأنها تحميل خارجي.
- استخدم مكون WordPress الإضافي المصمم لتخزين البرامج النصية الخاصة بك وتحسين JavaScript و CSS.
- تحميل الخطوط المخصصة محليًا.
- تحديد CSS وجافا سكريبت الحرجة وغير الهامة.
- ضع علامة على رمز حظر العرض غير الهام بسمات غير متزامنة أو مؤجلة.
- يجب إزالة الرمز غير المستخدم.
تخلص من الصداع ودع متخصص ووردبريس يساعدك
WP Buffs ماهرون في تحسين مواقع WordPress وتحسين أداء الصفحة. نحن نتفهم سبب أهمية الأداء لعملك وما هي المجالات التي يجب التركيز عليها لإحداث التأثير الأكثر أهمية.
يمكن أن يكون تحسين أداء موقع الويب الخاص بك وتجربة الزائر أكثر من مجرد منع عرض الموارد. يمكن لـ WP Buffs إلقاء نظرة على موقعك وعنوانك:
- أحجام الصور
- جودة الصورة وشكل التسليم
- طول الصفحة ونسبة المحتوى الديناميكي
- مواضيع سيئة البناء
- البرامج النصية غير الضرورية التي تسبب التأخير
- الإضافات سيئة البناء
- البرامج النصية الخارجية غير المستخدمة
- البرمجيات التي عفا عليها الزمن
- خطة استضافة ويب محدودة غير قادرة على دعم احتياجات الموقع بشكل كافٍ
يمكن أن يكون WordPress نظامًا أساسيًا سهلًا بشكل معقول لإنشاء موقع ويب عليه ، ولكن تعظيم تجربة المستخدم يمكن أن يأخذ محترفًا مدربًا أو غالبًا مزود خدمة رائعًا.
أسئلة مكررة
تستخدم مواقع الويب البرامج النصية والروابط للوصول إلى الملفات والرموز لإنشاء موقع ويب في المستعرض. في بعض الأحيان ، تستغرق البرامج النصية والروابط بعض الوقت للتحميل ومنع أجزاء أخرى من موقع الويب من العرض لزائر الموقع. يعني التخلص من موارد حظر العرض معالجة البرامج النصية والروابط والخطوط والملفات التي تؤدي إلى إبطاء تحميل موقع الويب أو إيقافه بشكل صحيح.
هناك طرق مختلفة لإصلاح موارد حظر العرض ، وسيعتمد السلاح الذي تختاره على ما تحتاج إلى معالجته. اكتشف البرامج النصية والارتباطات المهمة لتحميل صفحتك ، ثم قم بتأجيل الآخرين إلى حين الحاجة. يمكن تحديد أولويات الكود باستخدام رمز أو باستخدام مكون إضافي.
إذا كنت تستخدم WordPress ، فإن أسهل طريقة هي استخدام مكون إضافي عالي الجودة يدير البرامج النصية والأحمال الخارجية من خلال تقييم ما هو مهم وما يمكن تأجيله لاحقًا في عملية العرض. بدلاً من تقييم الكود يدويًا وتعيين العلامات لكل نص برمجي لمؤسسة يدوية (وهو ما لا يزال ممكنًا ومُشجَّعًا) ، يتعامل المكون الإضافي تلقائيًا مع هذا الأمر نيابةً عنك.
إذا كنت لا تتطلع إلى إضافة مكون إضافي آخر إلى موقع الويب الخاص بك أو إذا لم يكن المكون الإضافي خيارًا لك ، فهناك طرق أخرى لإصلاح موارد حظر العرض. يمكنك تحسين أي نصوص وروابط في الكود يدويًا للتأكد من تحميلها بترتيب فعال أو لتأجيل تحميل هذا البرنامج النصي إلى أن تكتمل الوظائف الضرورية.