طريقة حل مشكلة تأجيل الصور خارج الشاشة لزيادة سرعة تحميل المدونة

طريقة حل مشكلة تأجيل الصور خارج الشاشة لزيادة سرعة تحميل المدونة

ستساعدك إضافة برنامج نصي للتحميل البطيء على تحسين سرعة تحميل المدونة. تعلم طريقة تأجيل الصور خارج الشاشة في صفحاتك عن طريق التحميل البطيء للصور في مدونة بلوجر. تحقق من خطوات تثبيت jQuery lazy load صغير في قالب Blogger. أضف برنامجًا نصيًا للتحميل البطيء في مدونة بلوجر واجعل تحميل موقع الويب الخاص بك أسرع من أي وقت مضى.
تعمل ملفات التحميل البطيئ للصور على تحسين سرعة صفحتك مما يمنح المستخدم تجربة أفضل عن طريق تحميل الصور بشكل غير متزامن. فهل تعلم أنه تزيد سرعة تحميل مدونة بلوجر 4 أضعاف.

تحسين سرعة تحميل مدونة بلوجر - في صفحات المدونة السابقة، كنت أعمل على تحسين سرعة صفحات المدونة من خلال تنفيذ الاقتراحات من Pagespeed Insight، ووجدت المصطلح "تأجيل الصور خارج الشاشة" أو التحميل البطيء للصور. ثم أحاول تطبيق تقنية التحميل البطيء على مدونة بلوجر ولكني واجهت بعض المشكلات. في تحسين الصور من أجل تحميل أسرع للصفحة، ولقد جربت العديد من البرامج النصية ولكن كما تعلم، فإن النص نفسه يجعل تحميل الصفحة أبطأ.


طريقة حل مشكلة تأجيل الصور خارج الشاشة لزيادة سرعة تحميل المدونة
حل مشكلة تأجيل الصور خارج الشاشة

فهل من الممكن تسريع تحميل مدونة بلوجر مع التحميل البطيء لجميع الصور - تأجيل الصور خارج الشاشة؟

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

ما هو jquery lazy load؟

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

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

بالنسبة إلى WordPress، هناك الكثير من المكونات الإضافية المتاحة للمساعدة في سرعة تحميل المدونة. Lazy load عبارة عن مكون إضافي لبرنامج WordPress يتسبب في اختلاف تحميل الصور ويجعل تحميل النص أسرع من تحميل الصور. ولكن ماذا عن مدونة بلوجر، كيف تضيف برنامج Lazy load في قالب بلوجر الخاص بك بنجاح؟ سأشارك برنامج jQuery البسيط للتحميل البطيء الذي سيساعدك على زيادة سرعة موقع الويب أو صفحة المدونة بشكل كبير. بمجرد تثبيت آلية التحميل البطيء في قالب بلوجر الخاص بك، ستزيد سرعة الموقع بالتأكيد عند التحميل. بعد إضافة برنامج Lazy load، يمكنك رؤية التأثير الفوري على درجة سرعة الصفحات.

في كود blogger  بلوجر HTML، يمكنك مشاهدة الصورة الافتراضية src لجميع الصور، ويتبع الرابط السمة "data-original" التي لها عنوان URL الصحيح للصورة. لذا فإن السؤال الذي يطرح نفسه:

كيف يعمل lazyloader في الواقع؟

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

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

البرنامج النصي lazyloader: المحمل البطيء عبارة عن مكون إضافي jQuery مكون في JavaScript ويختلف في تحميل ملفات الصور أثناء تحميل صفحات الويب. لن يتم تنزيل الصور الموجودة خارج الشاشة خارج الجزء المرئي من الصفحة (منفذ العرض) حتى يقوم المستخدم بالتمرير. إذا كنت تستخدم عدة صور في منشورك، فإن التحميل البطيء سيجعل تحميل الصفحة أسرع عن طريق تحميل النص أولاً متبوعًا بالصور عند التمرير. علاوة على ذلك، فهو يساعد أيضًا في تقليل حمل الخادم.

طريقة إضافة برنامج "Lazy Load Script" لتسريع تحميل الموقع / المدونة

أنت تفهم الآن أن التحميل البطيء للصور يحسن أداء موقع الويب، دعنا نثبت برنامج lazyloader على موقع الويب الخاص بك. وقبل القيام بأي شيء، قم بعمل نسخة احتياطية من HTML لمدونتك ومحتوياتها.

لجعل القالب بأكمله يقوم بتحميل الصور بشكل بطيئ، يجب عليك الانتقال إلى عرض HTML، ثم تعديل كل علامة img وفقًا لمتطلبات البرنامج النصي للتحميل البطيء.

اتبع الخطوات لتنفيذ برنامج نصي وآلية تحميل Lazy load في أي موقع ويب بما في ذلك WordPress أو blogger:

1. قم بعمل نسخة احتياطية من القالب الخاص بك أولاً.

2.انتقل إلى لوحة تحكم blogger. اختر خيار "المظهر" من القائمة اليسرى وانقر على "تحرير HTML"

3. الآن في نهاية النموذج ، سترى الرمز </body>. فوق علامة نهاية النص هذه، قم بلصق نص التحميل البطيء التالي في القالب الخاص بك.


<!-- Lazy load offscreen images with lazysizes script start -->
<script async='async' data-cfasync='false' defer='defer' type='text/javascript'>
//<![CDATA[
const hasSupport = &#39;loading&#39; in HTMLImageElement.prototype;document.documentElement.className = hasSupport ? &#39;pass&#39; : &#39;fail&#39;;document.querySelector(&#39;span&#39;).textContent = hasSupport;
//]]>
</script>
<!-- Lazy load offscreen images with lazysizes script end -->


4.والآن، وأثناء كتابة منشورات المدونة، يجب عليك إضافة علامة lazyloader مع كل علامة img كما هو موضح أدناه:

استبدل رمزك الحالي:

<figure>
<img src="your-image-URL" alt="your-alt-tag" width="500" height="555" title="your-title-tag"/>
<figcaption>your-image-cation</figcaption>
</figure>

مع الكود على النحو التالي:

<figure>
<img loading="lazy" src="your-image-URL" alt="your-alt-tag" width="500" height="555" title="your-title-tag"/>
<figcaption>your-image-cation</figcaption>
</figure>

(تحتاج أيضًا إلى تحديث جميع صفحاتك المنشورة القديمة.)

5.احفظ القالب وتحقق من سرعة موقع الويب الخاص بك

لقد رأينا اليوم إضافة مكون إضافي للتحميل Lazy load إلى مدونة بلوجر blogger لتأجيل الصور خارج الشاشة لتحسين تحميل الصفحة. كما تعلم، فإن سرعة تحميل الصفحة هي عامل الترتيب كما تنص تحديثات خوارزمية Google، لذا فإن التحميل البطيء للصور سيؤدي إلى تحسين تصنيف مُحسّنات محرّكات البحث وبالتالي المواضع في نتائج محركات البحث SERPs وبالتالي يمكنك جذب المزيد من الزيارات العضوية إلى موقعك.

تعد إضافة lazyloader أكثر أهمية ليس فقط من أجل وجهة نظر تحسين محركات البحث ولكن لتحسين تجربة المستخدم وتعزيز الزيارات.

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

Mohammad Zareini

مالك ومحرر موقع وصفات طبيب

شكراً لتعليقك هنا

إرسال تعليق (0)
أحدث أقدم