لم يمض وقت طويل منذ أن أعلنت Google أن المواقع التي تستغرق أكثر من ثلاث ثوانٍ للتحميل ليست صديقة لمحركات البحث.
في عصر الإنترنت والتسويق الرقمي، لا غنى عن موقع إلكتروني سريع لتتمكن من منافسة آلاف المنافسين حول العالم بفعالية. ولا شك أن الموقع الأسرع يتمتع بفرص أفضل لجذب الزوار وزيادة تفاعلهم مع محتواه.
إن تشغيل موقع WordPress يعني تشغيل عدد كبير من البرامج النصية في نفس الوقت لجعل موقعك متاحًا.
مع ذلك، ليست كل هذه العناصر ضرورية للتحميل. إذا سبق لك فحص أداء موقعك الإلكتروني باستخدام أداة Google PageSpeed Insights ، فربما تكون قد صادفت خيار 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 يتوقف مؤقتًا لتنفيذ البرنامج النصي عند اكتمال التنزيل. من ناحية أخرى، تسمح طريقة Defer للمتصفح بتنزيل جافا سكريبت أثناء تحليل أجزاء HTML الأخرى، ولا يتم تنفيذ البرنامج النصي إلا بعد انتهاء تحليل HTML.
إزالة رموز CSS التي تعيق العرض أكثر صعوبة، إذ قد تؤخر تحميل الأكواد اللازمة لمحتوى ATF. الإجراء معقد بعض الشيء ويتطلب فهمًا جيدًا لتطوير الويب.
ومع ذلك، فإننا نخاطب المستخدمين العاديين الذين يديرون مواقعهم الإلكترونية بأنفسهم.
نعلم جميعًا أن ووردبريس نظام معياري يسمح للمستخدمين العاديين بتعديل كل شيء دون كتابة سطر واحد من التعليمات البرمجية. حل هذه المشكلة سهل أيضًا، ويمكنك حلها بسرعة بتثبيت الإضافة المناسبة.
أفضل إضافات WordPress لإصلاح عوائق العرض في JavaScript وCSS
في الفقرات التالية، سنقدم خمسة من أفضل إضافات ووردبريس أداءً والتي تساعدك على حل هذه المشكلة بشكل جذري.
تنبيه: قبل استخدام أي من الأدوات التالية، تأكد من عمل نسخة احتياطية لموقعك الإلكتروني لمنع أي فقدان محتمل للبيانات.
Autoptimize
تم تصميم إضافة Autoptimize خصيصًا لمعالجة المشاكل التي تشير إليها أدوات تحليل المواقع الإلكترونية مثل Google PageSpeed Insights. فهي تُحسّن تحميل ملفات JavaScript وCSS دون التركيز بشكل كبير على جوانب أخرى من أداء الموقع.
إذا كنت تبحث عن ميزات تحسين أساسية، فستوفر لك هذه الإضافة ما تحتاجه. ومن أهم مميزات هذه الأداة أنها تحوّل صور موقعك الإلكتروني إلى صيغة WebP المُحسّنة.
بعد تثبيت وتفعيل إضافة Autoptimize، عليك تحديد خياري "تحسين كود جافا سكريبت" و"تحسين كود CSS" الموجودين في إعدادات الإضافة. احرص على عدم تحديد الخيارات الأخرى أسفل هذين الخيارين والتي تجمع ملفات CSS وScript.
على الرغم من أن هذا المكوّن الإضافي متاح مجانًا، يمكنك أيضًا شراء حزم مميزة تساعدك في تكوين موقع الويب.
WP Rocket
يُعدّ WP Rocket اسمًا لامعًا بين أدوات تحسين مواقع ووردبريس، حيث يُساعدك في جوانب مُتعددة مثل تعديل جافا سكريبت وCSS، وإعدادات التحميل الكسول. عملية تثبيت WP Rocket بسيطة للغاية، ولكن قد تجد صعوبة في البداية لفهم كيفية استخدام واجهته.
جاهز للاستخدام فورًا بعد التثبيت، ويُطبّق الإعدادات المثلى على موقعك الإلكتروني مباشرةً. ونظرًا لاحتمالية حدوث أعطال في الموقع نتيجةً لتغييرات البرامج النصية، لا يُفعّل الملحق إعدادات JavaScript وCSS التي تُعيق عرض الصفحة افتراضيًا.
لكن يمكنك بسهولة تشغيل هذه الميزة من خلال الانتقال إلى إعدادات المكون الإضافي والبحث عن الخيارات ذات الصلة في قسمي "ملفات CSS" و "ملفات JavaScript".
تبلغ تكلفة الإضافة الرئيسية 49 دولارًا سنويًا، وتشمل سنة واحدة من الدعم الفني. بالإضافة إلى ذلك، يمكنك العثور على العديد من الإضافات المجانية للإضافة الأساسية على ووردبريس.
رابيت لودر
RabbitLoader هو إضافة متطورة لتحسين أداء ووردبريس مصممة لجعل موقع الويب يعمل بشكل أسرع وأكثر سلاسة وكفاءة.
على غرار WP Rocket الذي نال استحسانًا واسعًا، لا يقتصر دور RabbitLoader على الارتقاء بأداء موقعك إلى مستويات جديدة فحسب، بل يقدم أيضًا بعض الميزات المبتكرة التي تميزه عن غيره من اللاعبين في هذا المجال.
سحر التخزين المؤقت: يرفع RabbitLoader مستوى الأداء من خلال تقديم نظام تخزين مؤقت ديناميكي يتكيف في الوقت الفعلي مع التغييرات التي تطرأ على موقعك، مما يضمن أن يرى زوارك دائمًا أحدث المحتويات دون التضحية بالسرعة.
تحسين الصور: قد تُبطئ الصور تحميل الموقع الإلكتروني بشكل ملحوظ، لكن ميزة تحسين الصور في RabbitLoader تُحدث نقلة نوعية. فهي تضغط الصور وتُغير حجمها تلقائيًا إلى الحجم الأمثل دون المساس بجودتها، مما يضمن تحميل موقعك بسرعة دون التضحية بجاذبيته البصرية.
التحميل الكسول: يوفر كل من WP Rocket و RabbitLoader التحميل الكسول للصور والإطارات المضمنة، لكن RabbitLoader يذهب إلى أبعد من ذلك من خلال توفير تحميل جافا سكريبت المؤجل.
التوافق: صُمم RabbitLoader ليعمل بسلاسة مع مجموعة واسعة من قوالب وإضافات ووردبريس، تمامًا مثل WP Rocket. سواءً كان لديك مدونة بسيطة أو موقع تجارة إلكترونية معقد، فقد صُمم RabbitLoader لتحسين أداء موقعك دون أي تعارضات.
W3 المشاركات الكاش
W3 Total Cache هو مُحسِّن أداء قوي لا يعالج مشاكل التخزين المؤقت فحسب، بل يعالج أيضًا المشاكل التي تسببها البرامج النصية وأوراق الأنماط.
يمكنك بسهولة إزالة ملفات JavaScript و CSS التي تعيق عملية العرض عن طريق تمكين خيار Minify من إعدادات المكون الإضافي أولاً وتعيينه على الوضع اليدوي.
بعد ذلك، انقر على علامة التبويب "إزالة الموارد التي تعيق العرض" وانسخ الرابط الكامل للملفات الضرورية للبرامج النصية وأوراق الأنماط التي تعيق العرض. الآن يمكنك استخدام هذه الروابط وإدخالها في "قسم جافا سكريبت" ضمن علامة التبويب "الأداء" > "التصغير".
يحتوي W3 Total Cache على أكثر من مليون عملية تثبيت نشطة، ويمكنك تنزيله إلى موقعك مجانًا من موقع WordPress.org.
حزمة تعزيز السرعة
حزمة Speed Booster Pack أداة موثوقة لتحسين أنماط CSS، وجافا سكريبت، والتحميل الكسول، وإزالة الملفات غير الضرورية. يعمل فريق التطوير باستمرار على تحديث هذه الإضافة لمواكبة أحدث التحديثات وإجراءات الأمان.
إذا كنت تبيع المنتجات والخدمات عبر الإنترنت، WooCommerceتحسين خاص ستساعدك ميزات Speed Booster Pack كثيرًا في زيادة ظهور متجرك على الإنترنت.
يمكنك إصلاح أكواد JavaScript وCSS التي تعيق عرض موقعك على WordPress بسرعة عن طريق النقر فوق علامة التبويب "متقدم" من قائمة "حزمة معزز السرعة" في لوحة التحكم الخاصة بك.
بالنسبة لجافا سكريبت، فعّل خياري "نقل النصوص البرمجية إلى التذييل" و"تأجيل تحليل ملفات جافا سكريبت". ثم انتقل إلى قائمة "تحسين CSS" واختر من الخيارات المتاحة لتحسين أداء موقعك.
Speed Booster Pack هو حل مجاني متوفر على موقع WordPress.org.
تحسين JCH
يُعدّ JCH Optimize آخر إضافة في هذه القائمة من الإضافات المقترحة، وهو مزوّد بأدوات مفيدة لتسريع تحميل الصفحات . على سبيل المثال، يساعدك على تقليل عدد طلبات HTTP اللازمة لتحميل صفحاتك، وفي الوقت نفسه، يُقلّل من حجم تلك الصفحات.
يعد مولد الصور المتحركة ميزة أخرى مثيرة متوفرة في هذه الإضافة، حيث يقلل من عدد طلبات HTTP لتحميل صور الخلفية.
باستخدام JCH Optimize، يمكنك إزالة ملفات JavaScript وCSS التي تعيق عرض الصفحة عند الترقية إلى الخطة المميزة. كل ما عليك فعله هو تفعيل خيار "مميز" أو "أمثل" من قسم "الإعدادات التلقائية". كما أن إعدادات عرض CSS متوفرة فقط في النسخة الاحترافية.
يمكنك تثبيت هذه الإضافة مجانًا من WordPress.org، ولكن عليك شراء باقة مميزة للاستفادة من كامل إمكانياتها. تبدأ أسعار الباقات من ٢٩ دولارًا أمريكيًا لمدة ستة أشهر وتصل إلى ٩٩ دولارًا أمريكيًا للوصول مدى الحياة.
ملخص
تُعد سرعة تحميل الموقع الإلكتروني من أهم العوامل لجذب الجمهور وتفاعله والاحتفاظ به. لذا، يُنصح بإعطائها أولوية قصوى عند تحسين موقعك الإلكتروني لمحركات البحث، واستخدام أداة Google PageSpeed Insights لقياس أداء موقعك في هذا المجال.
يُعدّ عنصر JavaScript وCSS الذي يعيق عرض الصفحة أحد أكثر الاقتراحات شيوعًا التي قد تراها عند استخدام أداة جوجل القوية. يمكنك حل هذه المشكلة بسهولة عن طريق تثبيت أحد الإضافات الخمس التي ذكرناها في هذه المقالة، مما يُسرّع تحميل صفحاتك بشكل ملحوظ.
نأمل أن تجد هذا البرنامج التعليمي مفيدًا وأن تستمتع بموقع ويب سريع التحميل للحصول على أفضل النتائج الممكنة.
