لم يمض وقت طويل منذ أن أعلنت Google أن المواقع التي تستغرق أكثر من ثلاث ثوانٍ للتحميل ليست صديقة لمحركات البحث.
في عصر الإنترنت والتسويق الرقمي، لا بد من امتلاك أسرع موقع إلكتروني للتنافس بفعالية مع آلاف المنافسين حول العالم. لا شك أن الموقع الإلكتروني الأسرع يُحسّن فرص جذب الزوار وزيادة تفاعلهم مع محتواه.
إن تشغيل موقع WordPress يعني تشغيل عدد كبير من البرامج النصية في نفس الوقت لجعل موقعك متاحًا.
مع ذلك، ليست كل هذه العناصر ضرورية للتحميل دائمًا. إذا سبق لك التحقق من أداء موقعك الإلكتروني باستخدام جوجل البصائر PageSpeedربما صادفت خيار حظر العرض JavaScript وCSS الذي يؤثر على سرعته.
اليوم سنتحدث عن هذه الملفات غير الضرورية ونوضح لك الطرق التي يمكنك من خلالها إزالتها لتحسين موقعك.
ما هو JavaScript و CSS الذي يمنع العرض؟
باختصار، تعد JavaScript وCSS التي تمنع العرض عبارة عن سلسلة من أوراق الأنماط والبرامج النصية الضرورية للتشغيل بالكامل قبل تحميل الموقع وظهوره.
تُضيف السمات والإضافات التي تُثبّتها على موقع ووردبريس الخاص بك الكثير من هذه الملفات إلى واجهة موقعك. وكما قد تكون خمنتَ، يُبطئ بعضها وقت تحميل الصفحة ويمنع عرضها.
عندما يفتح زائر موقع الويب موقع الويب الخاص بك، يقوم متصفح الإنترنت أولاً بتحميل ملفات JavaScript وCSS الضرورية قبل HTML.
هذا إجراء عادي، لأن الصفحة التي لا تحتوي على هذه العناصر الأساسية ستكون غير صالحة للاستخدام. المشكلة هي أن متصفح الويب لا يستطيع عرض الصفحة قبل اكتمال تحميل هذه الملفات.
الحيلة هنا هي أنه يمكنك تأجيل تحميل بعض البرامج النصية دون التسبب في أي مشاكل فيما يراه الزوار عند فتح صفحة من صفحاتك.
يمكن لأصحاب المواقع إجراء تعديلات على موقعهم لمنع متصفحات الويب من تحميل أي أكواد خارج ما هو ضروري للجزء العلوي من الصفحة التي يراها المستخدم على الفور.
بمعنى آخر، تُحمّل المتصفحات الملفات الأساسية فقط لهذا القسم قبل أن ينتقل المستخدم إلى أسفل الصفحة. تُسمى هذه المنطقة من صفحات الويب ATF، وهي اختصار لعبارة "Above the Fold" (فوق الطية). أما الأجزاء الأخرى التي تتطلب من المستخدمين التمرير لأسفل لرؤيتها فهي القسم غير ATF.
لذلك، إذا قام موقعك بتحميل أكواد JavaScript و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 وملفات النصوص البرمجية.
على الرغم من أن هذا المكوّن الإضافي متاح مجانًا، يمكنك أيضًا شراء حزم مميزة تساعدك في تكوين موقع الويب.
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 الخاص بك عن طريق النقر فوق علامة التبويب "خيارات متقدمة" من قائمة Speed Booster Pack في لوحة الإدارة الخاصة بك.
بالنسبة لجافا سكريبت، فعّل خياري "نقل النصوص البرمجية إلى التذييل" و"تأجيل تحليل ملفات جافا سكريبت". بعد ذلك، انتقل إلى قائمة "تحسين CSS" واختر من الخيارات المتاحة لتحسين أداء موقعك.
Speed Booster Pack هو حل مجاني متوفر على موقع WordPress.org.
تحسين JCH
تحسين JCH هو العنصر الأخير في قائمة المكونات الإضافية المقترحة التي تأتي مزودة بأدوات مفيدة تسريع تحميل الصفحةعلى سبيل المثال، يساعدك ذلك على تقليل عدد طلبات HTTP المطلوبة لتحميل صفحاتك، وفي الوقت نفسه، تقليل حجم تلك الصفحات.
مولد العفاريت هناك ميزة أخرى مثيرة للاهتمام متوفرة في هذا البرنامج المساعد والتي تقلل من عدد طلبات HTTP لتحميل الصور الخلفية.
باستخدام JCH Optimize، يمكنك إزالة أكواد JavaScript وCSS التي تعيق العرض عند الترقية إلى باقة مميزة. كل ما عليك فعله هو تفعيل خياري "المميز" أو "الأمثل" من قسم "الإعدادات التلقائية". إعدادات عرض CSS متوفرة أيضًا في الإصدار الاحترافي فقط.
يمكنك تثبيت هذه الإضافة مجانًا من WordPress.org، ولكن عليك شراء باقة مميزة للاستفادة من كامل إمكانياتها. تبدأ أسعار الباقات من ٢٩ دولارًا أمريكيًا لمدة ستة أشهر وتصل إلى ٩٩ دولارًا أمريكيًا للوصول مدى الحياة.
ملخص
تُعد سرعة تحميل الموقع الإلكتروني من أهم العوامل لجذب الجمهور وتفاعله والاحتفاظ به. لذا، يُنصح بإعطائها أولوية قصوى عند تحسين موقعك الإلكتروني لمحركات البحث، واستخدام أداة Google PageSpeed Insights لقياس أداء موقعك في هذا المجال.
يُعدّ عنصر JavaScript وCSS الذي يمنع العرض أحد أكثر الاقتراحات شيوعًا التي قد تراها عند استخدام أداة جوجل الفعّالة. يمكنك حل هذه المشكلة بسهولة بتثبيت أحد الإضافات الخمسة التي ذكرناها في هذه المقالة. تسريع سرعة تحميل صفحاتك إلى حد كبير.
نأمل أن تجد هذا البرنامج التعليمي مفيدًا وأن تستمتع بموقع ويب سريع التحميل للحصول على أفضل النتائج الممكنة.
