لم يمض وقت طويل منذ أن أعلنت Google أن المواقع التي تستغرق أكثر من ثلاث ثوانٍ للتحميل ليست صديقة لمحركات البحث.
في عصر الإنترنت والتسويق الرقمي، لا غنى عن موقع إلكتروني سريع لتتمكن من منافسة آلاف المنافسين حول العالم بفعالية. ولا شك أن الموقع الأسرع يتمتع بفرص أفضل لجذب الزوار وزيادة تفاعلهم مع محتواه.
إن تشغيل موقع WordPress يعني تشغيل عدد كبير من البرامج النصية في نفس الوقت لجعل موقعك متاحًا.
مع ذلك، ليس من الضروري تحميل جميع هذه العناصر دائمًا. إذا سبق لك أن تحققت من أداء موقعك الإلكتروني باستخدام جوجل البصائر PageSpeedربما تكون قد صادفت خيار JavaScript وCSS الذي يعيق عملية العرض والذي يؤثر على سرعته.
سنتحدث اليوم عن هذه الملفات الزائدة وسنوضح لكم الطرق التي يمكنكم من خلالها إزالتها لتحسين موقعكم.
ما هو JavaScript و CSS الذي يمنع العرض؟
باختصار، تعد JavaScript وCSS التي تمنع العرض عبارة عن سلسلة من أوراق الأنماط والبرامج النصية الضرورية للتشغيل بالكامل قبل تحميل الموقع وظهوره.
تُضيف السمات والإضافات التي تُثبّتها على موقع ووردبريس الخاص بك الكثير من هذه الملفات إلى واجهة موقعك. وكما قد تكون خمنتَ، يُبطئ بعضها وقت تحميل الصفحة ويمنع عرضها.
عندما يفتح زائر موقع الويب موقع الويب الخاص بك، يقوم متصفح الإنترنت أولاً بتحميل ملفات JavaScript وCSS الضرورية قبل HTML.
هذا إجراء عادي، إذ أن الصفحة التي تفتقر إلى هذه العناصر الأساسية ستكون غير قابلة للاستخدام. تكمن المشكلة في أن متصفح الويب لا يستطيع عرض الصفحة قبل تحميل هذه الملفات بالكامل.
الحيلة هنا هي أنه يمكنك تأجيل تحميل بعض البرامج النصية دون التسبب في أي مشاكل فيما يراه الزوار عند فتح صفحة من صفحاتك.
يمكن لأصحاب المواقع إجراء تعديلات على موقعهم لمنع متصفحات الويب من تحميل أي أكواد خارج ما هو ضروري للجزء العلوي من الصفحة التي يراها المستخدم على الفور.
بمعنى آخر، تُحمّل المتصفحات الملفات الأساسية فقط لهذا القسم قبل أن ينتقل المستخدم إلى أسفل الصفحة. تُسمى هذه المنطقة من صفحات الويب ATF، وهي اختصار لعبارة "Above the Fold" (فوق الطية). أما الأجزاء الأخرى التي تتطلب من المستخدمين التمرير لأسفل لرؤيتها فهي القسم غير ATF.
لذا، إذا كان موقعك الإلكتروني يُحمّل أكواد جافا سكريبت وCSS المتعلقة بالأقسام غير المتوافقة مع معايير ATF، فسيستغرق تحميل الصفحات وقتًا أطول. ولهذا السبب تحاول جوجل تنبيهك إلى التوقف عن تشغيل الموارد غير الضرورية في أكواد موقعك.
البحث عن JavaScript وCSS التي تمنع العرض
أسهل طريقة لمعرفة هذه المشكلة هي إجراء اختبار سرعة باستخدام أداة Google PageSpeed Insights. بمجرد زيارة الصفحة، كل ما عليك فعله هو إدخال عنوان URL الخاص بك في الحقل المطلوب ثم النقر على زر "تحليل".
إذا واجهت هذه المشكلة في الصفحة، فسترى اقتراحًا يطلب منك إزالة JavaScript وCSS التي تعيق عرض المحتوى الموجود أعلى الصفحة.
سيكون من الأفضل لو لم تنسى أن معظم نقاط مواقع الويب يتراوح معدل الأداء عادةً بين 70 و90، وحتى المواقع ذات الأداء المتميز نادراً ما تصل إلى رقم قريب من 100. لذا، لا تُجبر موقعك على الوصول إلى 100. ابذل قصارى جهدك لتحقيق أعلى نتيجة دون التأثير سلباً على تجربة المستخدم.
اعتمادًا على السمة والأدوات التي تستخدمها على موقعك، هناك بعض البرامج النصية ضروري لتجربة المستخدم المثالية من المفترض أن تقدم هذه الميزات لجمهورك. لذلك، من غير الحكمة إطلاقاً إزالتها في محاولة لتحسين ترتيبك قليلاً في صفحة نتائج بحث جوجل.
إصلاح برمجيات JavaScript وCSS التي تمنع العرض
توجد العديد من الاستراتيجيات للتخلص من جافا سكريبت التي تعيق عرض الصفحة. من أهم هذه الاستراتيجيات Async وDefer. تسمح الطريقة الأولى لمتصفح المستخدم بتنزيل جافا سكريبت أثناء تحليل أجزاء HTML الأخرى.
على الرغم من أن عملية التحليل لا تتوقف تمامًا أثناء تنزيل الملف، محلل HTML يتوقف البرنامج مؤقتًا لتنفيذ النص البرمجي أثناء تنزيله. من ناحية أخرى، يسمح أسلوب التأجيل للمتصفح بتنزيل جافا سكريبت أثناء تحليل أجزاء HTML الأخرى، ولا يُنفذ النص البرمجي إلا بعد انتهاء تحليل HTML.
إزالة رموز CSS التي تعيق العرض أكثر صعوبة، إذ قد تؤخر تحميل الأكواد اللازمة لمحتوى ATF. الإجراء معقد بعض الشيء ويتطلب فهمًا جيدًا لتطوير الويب.
ومع ذلك، فإننا نخاطب المستخدمين العاديين الذين يديرون مواقعهم الإلكترونية بأنفسهم.
نعلم جميعًا أن ووردبريس نظام معياري يسمح للمستخدمين العاديين بتعديل كل شيء دون كتابة سطر واحد من التعليمات البرمجية. حل هذه المشكلة سهل أيضًا، ويمكنك حلها بسرعة بتثبيت الإضافة المناسبة.
أفضل إضافات WordPress لإصلاح عوائق العرض في JavaScript وCSS
سنقدم في الفقرات التالية خمسة أفضل إضافات ووردبريس أداءً التي تساعدك على حل هذه المشكلة بشكل أعمق.
تنبيه: قبل استخدام أي من الأدوات التالية، تأكد من عمل نسخة احتياطية لموقعك الإلكتروني لمنع أي فقدان محتمل للبيانات.
Autoptimize
استخدم Autoptimize صُممت هذه الإضافة خصيصًا لمعالجة المشكلات التي تُشير إليها أدوات تحليل مواقع الويب، مثل Google PageSpeed Insights. تُحسّن هذه الإضافة عرض ملفات JavaScript وCSS دون التركيز كثيرًا على جوانب أخرى من أداء موقع الويب.
إذا كنت تبحث عن ميزات تحسين أساسية، فستوفر لك هذه الإضافة ما تحتاجه. ومن أهم مميزات هذه الأداة أنها تحوّل صور موقعك الإلكتروني إلى صيغة WebP المُحسّنة.
بعد تثبيت وتفعيل إضافة Autoptimize، عليك تحديد خياري "تحسين كود جافا سكريبت" و"تحسين كود CSS" الموجودين في إعدادات الإضافة. احرص على عدم تحديد الخيارات الأخرى أسفل هذين الخيارين والتي تجمع ملفات CSS وScript.
على الرغم من أن هذا المكوّن الإضافي متاح مجانًا، يمكنك أيضًا شراء حزم مميزة تساعدك في تكوين موقع الويب.
WP Rocket
WP Rocket WP Rocket اسمٌ معروفٌ بين أدوات تحسين ووردبريس، يُساعدك في جوانب مُختلفة، مثل تعديل جافا سكريبت وCSS، وإعدادات التحميل البطيء. عملية إعداد WP Rocket بسيطةٌ جدًا، ولكن قد تجد صعوبةً في فهم كيفية عمل الواجهة.
جاهز للاستخدام فورًا بعد التثبيت، ويُطبّق الإعدادات المثلى على موقعك الإلكتروني مباشرةً. ونظرًا لاحتمالية حدوث أعطال في الموقع نتيجةً لتغييرات البرامج النصية، لا يُفعّل الملحق إعدادات JavaScript وCSS التي تُعيق عرض الصفحة افتراضيًا.
لكن يمكنك بسهولة تشغيل هذه الميزة من خلال الانتقال إلى إعدادات المكون الإضافي والبحث عن الخيارات ذات الصلة في قسمي "ملفات CSS" و "ملفات JavaScript".
تبلغ تكلفة الإضافة الرئيسية 49 دولارًا سنويًا، وتأتي مع دعم لمدة عام أيضًا. علاوة على ذلك، يمكنك العثور على العديد من الإضافات. إضافات مجانية للمكون الإضافي الأساسي على WordPress أيضًا.
رابيت لودر
رابيت لودر هو مكون إضافي متطور لتحسين أداء WordPress مصمم لجعل موقع الويب يعمل بشكل أسرع وأكثر سلاسة وكفاءة.
على غرار WP Rocket الذي نال استحسانًا واسعًا، لا يقتصر دور RabbitLoader على الارتقاء بأداء موقعك إلى مستويات جديدة فحسب، بل يقدم أيضًا بعض الميزات المبتكرة التي تميزه عن غيره من اللاعبين في هذا المجال.
سحر التخزين المؤقت: يقدم RabbitLoader نظام تخزين مؤقت ديناميكي يتكيف في الوقت الفعلي مع التغييرات على موقعك، مما يضمن أن يرى زوارك دائمًا المحتوى الأحدث دون التضحية بالسرعة.
تحسين الصورة: قد تُبطئ الصور تحميل الموقع الإلكتروني بشكل ملحوظ، لكن ميزة تحسين الصور في RabbitLoader تُحدث نقلة نوعية. فهي تضغط الصور وتُغير حجمها تلقائيًا إلى الحجم الأمثل دون المساس بجودتها، مما يضمن تحميل موقعك بسرعة دون التضحية بجاذبيته البصرية.
تحميل كسول: يوفر كل من WP Rocket وRabbitLoader تحميلًا كسولًا للصور والإطارات المضمنة، ولكن RabbitLoader يذهب إلى أبعد من ذلك من خلال تقديم تحميل JavaScript المؤجل.
التوافق: صُمم RabbitLoader ليعمل بسلاسة تامة مع مجموعة واسعة من قوالب وإضافات ووردبريس، تمامًا مثل WP Rocket. سواءً كان لديك مدونة بسيطة أو موقع تجارة إلكترونية معقد، فقد صُمم RabbitLoader لتحسين أداء موقعك دون أي تعارضات.
W3 المشاركات الكاش
W3 المشاركات الكاش هو معزز أداء قوي لا يتعامل مع مشكلات التخزين المؤقت فحسب، بل يتعامل أيضًا مع المشكلات التي تسببها البرامج النصية وأوراق الأنماط.
يمكنك بسهولة إزالة ملفات JavaScript و CSS التي تعيق عملية العرض عن طريق تمكين خيار Minify من إعدادات المكون الإضافي أولاً وتعيينه على الوضع اليدوي.
بعد ذلك، انقر على علامة التبويب "إزالة الموارد التي تعيق العرض" وانسخ عنوان الرابط الكامل للملفات الضرورية للبرامج النصية وأوراق الأنماط التي تعيق العرض. الآن يمكنك استخدام هذه الروابط وإدخالها في "قسم جافا سكريبت" الخاص بـ الأداء>التصغير علامة التبويب.
يحتوي W3 Total Cache على أكثر من مليون عملية تثبيت نشطة، ويمكنك تنزيله إلى موقعك مجانًا من موقع WordPress.org.
حزمة تعزيز السرعة
حزمة تعزيز السرعة أداة موثوقة لتحسين أوراق الأنماط، وجافا سكريبت، والتحميل البطيء، وإزالة الفوضى. يُحدّث فريق المطورين هذه الإضافة باستمرار لمواكبة أحدث التحديثات وإجراءات الأمان.
إذا كنت تبيع المنتجات والخدمات عبر الإنترنت، تحسين خاص بـ WooCommerce ستساعدك ميزات Speed Booster Pack كثيرًا في زيادة ظهور متجرك على الإنترنت.
يمكنك إصلاح أكواد JavaScript وCSS التي تعيق عرض موقعك على WordPress بسرعة عن طريق النقر فوق علامة التبويب "متقدم" من قائمة "حزمة معزز السرعة" في لوحة التحكم الخاصة بك.
بالنسبة لجافا سكريبت، فعّل خياري "نقل النصوص البرمجية إلى التذييل" و"تأجيل تحليل ملفات جافا سكريبت". ثم انتقل إلى قائمة "تحسين CSS" واختر من الخيارات المتاحة لتحسين أداء موقعك.
Speed Booster Pack هو حل مجاني متوفر على موقع WordPress.org.
تحسين JCH
تحسين JCH هو العنصر الأخير في قائمة المكونات الإضافية المقترحة التي تأتي مزودة بأدوات مفيدة تسريع تحميل الصفحةعلى سبيل المثال، يساعدك ذلك على تقليل عدد طلبات HTTP المطلوبة لتحميل صفحاتك، وفي الوقت نفسه، تقليل حجم تلك الصفحات.
مولد العفاريت هناك ميزة أخرى مثيرة للاهتمام متوفرة في هذا البرنامج المساعد والتي تقلل من عدد طلبات HTTP لتحميل الصور الخلفية.
باستخدام JCH Optimize، يمكنك إزالة ملفات JavaScript وCSS التي تعيق عرض الصفحة عند الترقية إلى الخطة المميزة. كل ما عليك فعله هو تفعيل خيار "مميز" أو "أمثل" من قسم "الإعدادات التلقائية". كما أن إعدادات عرض CSS متوفرة فقط في النسخة الاحترافية.
يمكنك تثبيت هذه الإضافة مجانًا من WordPress.org، ولكن عليك شراء باقة مميزة للاستفادة من كامل إمكانياتها. تبدأ أسعار الباقات من ٢٩ دولارًا أمريكيًا لمدة ستة أشهر وتصل إلى ٩٩ دولارًا أمريكيًا للوصول مدى الحياة.
ملخص
تُعد سرعة تحميل الموقع الإلكتروني من أهم العوامل لجذب الجمهور وتفاعله والاحتفاظ به. لذا، يُنصح بإعطائها أولوية قصوى عند تحسين موقعك الإلكتروني لمحركات البحث، واستخدام أداة Google PageSpeed Insights لقياس أداء موقعك في هذا المجال.
يُعدّ عنصر JavaScript وCSS الذي يعيق عرض الصفحة أحد أكثر الاقتراحات شيوعًا التي قد تراها عند استخدام أداة جوجل القوية. يمكنك حل هذه المشكلة بسهولة عن طريق تثبيت أحد الإضافات الخمس التي ذكرناها في هذه المقالة. تسريع سرعة تحميل صفحاتك إلى حد كبير.
نأمل أن تجد هذا البرنامج التعليمي مفيدًا وأن تستمتع بموقع ويب سريع التحميل للحصول على أفضل النتائج الممكنة.
