كيفية تسريع شريط التمرير الخاص بك

يعد امتلاك موقع ويب سريع أمرًا بالغ الأهمية عندما تريد الاحتفاظ بزوارك. في واقع الأمر ، لا أحد يريد الانتظار أكثر من بضع ثوانٍ حتى يتم تحميل الصفحة. لهذا السبب ، يريد الجميع تحميل موقعهم بسرعة . ولكن تحميل الموقع بسرعة قد يكون أمرًا صعبًا ، بسبب استخدام الوسائط الغنية (الصور ومقاطع الفيديو). يتم تحميل كل من الصور ومقاطع الفيديو بشكل أبطأ من النصوص ، لذلك يجب تحسينها للويب.

Smart Slider 3 هو مكون إضافي لبرنامج WordPress و Joomla وهو خيار رائع لإضافة وسائط غنية إلى موقع الويب الخاص بك. يمكنك إنشاء شريط تمرير صورة أو شريط تمرير فيديو أو حتى صفحة مقصودة كاملة باستخدام هذا المكون الإضافي. سأوضح لك في هذا المقال كيفية التحقق من سرعة موقعك وكيفية تسريع أشرطة التمرير الخاصة بك .

ما الذي يمكن أن يبطئ موقع الويب؟

الجواب السريع: أي شيء. حتى النصوص يمكن أن تبطئ الصفحة إذا كانت طويلة حقًا. في معظم الحالات ، تنشأ المشكلة من الوسائط الغنية المستخدمة. أو قد تكون حقيقة أن الخادم ليس سريعًا بما يكفي لإعادة المحتوى المطلوب في الوقت المناسب.

هل ترغب في معرفة مدى سرعة موقعك؟ استخدم Google PageSpeed ​​Insights لقياس سرعة موقعك. إنه يتحقق من سرعة تحميل موقعك ، ويقدم لك نصائح حول مكان تحسينه. إن أداة Google PageSpeed ​​Insights هي أداة رائعة. لهذا السبب ، قاموا ببنائه في متصفح Chrome ، حيث أطلق عليه اسم Lighthouse.

مقاييس السرعة

لدى Lighthouse العديد من المقاييس المختلفة التي يمكن أن تصف سرعة موقعك. كلهم مهمون لفهم كيفية تحسين موقعك ، لذا سأشرحهم ببضع كلمات.

• First Contentful Paint (FCP) ، الذي يقيس الوقت الذي يعرض فيه المتصفح الجزء الأول من المحتوى. إنها أول ملاحظات يتم إرسالها إلى المستخدم يتم تحميلها بالفعل.
• يوضح مؤشر السرعة (SI) مدى سرعة تعبئة محتويات الصفحة بشكل مرئي.
• يوفر Largest Contentful Paint (LCP) تفاصيل حول أكبر رسم للصورة أو النص قبل إدخال المستخدم.
• وقت التفاعل (TTI) . إنها النقطة الزمنية التي انتهت فيها آخر مهمة طويلة.
• إجمالي وقت الحظر (TBT) : يقيس مقدار الوقت الإجمالي بين FCP و TTI
• يعد تغيير التخطيط التراكمي (CLS) مقياسًا يركز على المستخدم لقياس الاستقرار البصري

تمنحك قيم هذه المقاييس تلميحات حيث يمكنك تحسين موقع الويب الخاص بك. لسوء الحظ ، عادة ، ليس من السهل جدًا من أين نبدأ. هذا صحيح بشكل خاص إذا كنت جديدًا في تطوير الويب.

ما هي أفضل طريقة لتحسين موقع الويب الخاص بك؟

بناءً على تجربتنا ، فإن أفضل طريقة لتحسين موقع الويب الخاص بك هي اتباع قائمة التحقق هذه:

1. استخدم مزود استضافة موثوق. يمكن لخادم الويب المخنق أن يدمر جميع إنجازاتك.
   1. قم بتشغيل أحدث إصدار من برنامج الخادم
   2. استخدم PHP مع تمكين opcache
   3. استخدم Cloudflare كبرنامج وسيط وقم بإعداد سياسات التخزين المؤقت بشكل صحيح
2. استخدم دائمًا أحدث إصدار متوفر من WordPress
3. اختبر المظهر الخاص بك في تثبيت WordPress فارغ وقم بتحسينه حتى تصل إلى 100/100 على صفحة فارغة.
   1. يمكنك محاولة تحسين المكونات الإضافية لمعرفة أيها يعطي أفضل النتائج مع قالبك.
   2. قم بإعداد رأس "Link" الخاص بك لإعطاء تلميح للمتصفح حول ما يجب تحميله مسبقًا. قد يكون هذا هو style.css ، ومجموعة خطوط وكل مورد يحظر العرض.
   3. حاول التخلص من أكبر عدد ممكن من موارد حظر العرض.
   4. استخدم عائلة خطوط خارجية واحدة فقط وتأكد من أنه خط متغير مستضاف محليًا.
   5. قم بتقليل استخدام JavaScript وإسقاط jQuery إذا استطعت
4. استخدم المكونات الإضافية التي تم تحسينها لـ Lighthouse. لن تتمكن من إصلاح مكون إضافي تابع لجهة خارجية دون كسر تحديثاته.
5. جهز المحتوى الخاص بك للحصول على نتائج جيدة. على سبيل المثال ، استخدم عددًا أقل من الصور ومقاطع الفيديو في الجزء المرئي من الصفحة. تأكد أيضًا من تحسين الصور ومقاطع الفيديو الخاصة بك قدر الإمكان.

ما مدى تأثير المكونات الإضافية على أداء موقعي؟

سيؤثر كل مكون إضافي تقوم بتثبيته على موقع الويب الخاص بك في النهاية على أداء موقعك. سوف يقللون من نقاط سرعة صفحتك ، ويبطئون موقع الويب الخاص بك. الاستثناءات الوحيدة هي تحسين المكونات الإضافية ، لأن الغرض منها هو تحسين السرعة. ما يجب عليك مراعاته هو مدى تأثير كل مكون إضافي على أداء موقعك. أيضًا ، ما إذا كانت الوظيفة التي يوفرها لك البرنامج المساعد تستحق ثمن الأداء.

إذا كنت تبحث عن شراء مكون إضافي ، فاسأل المطورين كيف قاموا بتحسين المكون الإضافي الخاص بهم لـ Lighthouse. أيضًا ، اختبر موقع الويب (التجريبي) للمكوِّن الإضافي باستخدام Lighthouse بنفسك لترى مدى أدائه الجيد. إذا كان أداء الموقع التجريبي ضعيفًا ، فلا يمكنك توقع الحصول على نتائج جيدة على موقعك أيضًا . بعد كل شيء ، إذا لم يتمكن المطورون من جعل مواقعهم تعمل بشكل جيد ، فكيف يمكنك ذلك؟

في الواقع ، نحن مقتنعون بأن المحتوى الذي تنشئه باستخدام Smart Slider 3 مهم. يساعدك على منح المستخدمين تجربة مدهشة لا تنسى مع موقع الويب الخاص بك. لهذا السبب ، بذلنا قصارى جهدنا لتحسين Smart Slider 3.5 . نتيجة لذلك ، حصلت صفحتنا الرئيسية ، التي أنشأناها باستخدام أشرطة التمرير فقط (باستثناء الرأس والتذييل) على درجة 100/100. أليس هذا مذهلاً؟

لماذا يتم تحميل شريط التمرير الخاص بي ببطء؟

بادئ ذي بدء ، تأكد من أن شريط التمرير الخاص بك يتم تحميله ببطء على موقع الويب الخاص بك وليس أي شيء آخر. قد يبدو أن تحميل Smart Slider 3 بطيء ، ولكن في الواقع الموقع بأكمله بطيء. إذا لم يكن موقعك سريعًا ، فلا يمكن تحميل شريط التمرير بسرعة أيضًا.

يمكنك معرفة ما يتم تحميله على موقع الويب الخاص بك إلى متى ، إذا كنت تستخدم اختبار سرعة موقع الويب. أو يمكنك استخدام متصفحات Chrome أو Firefox. في هذه الحالة ، اضغط على F12 ← انقر فوق علامة التبويب "الشبكة" وقم بتحديث الصفحة بالتحديث الثابت. هنا سترى جميع عناصر صفحتك ، ويمكنك ترتيبها وفقًا لوقت التحميل أيضًا.

لإنشاء شريط تمرير سريع التحميل ومحسّن ، من المهم الانتباه إلى جودة الصور وحجمها . يمكن للصورة الكبيرة أن تبطئ شريط التمرير وقد تكون مزعجة للزائر. يجب الانتباه إلى أن الصورة الصغيرة يمكن أن يكون لها حجم كبير أيضًا إذا كانت جودتها جيدة جدًا. فوق مستوى معين من الجودة ، لا تستطيع عيون الأشخاص رؤية الفرق ، لذا لا تستخدم صورًا بجودة عالية جدًا.