 |
| كود تأخير ظهور الصور |
ستساعدك إضافة كود تأخير تحميل الصور على تحسين سرعة تحميل المدونة. تعلم كيفية تأجيل الصور خارج الشاشة في صفحاتك عن طريق التحميل البطيء للصور في مدونة بلوجر. تحقق من خطوات تثبيت jQuery lazy load كود صغير في قالب Blogger. أضف برنامجًا نصيًا للتحميل البطيء للصور في مدونة BlogSpot واجعل موقع الويب الخاص بك يتم تحميله بشكل أسرع من أي وقت مضى. يعمل كود تأخير تحميل ملفات صور على تحسين سرعة صفحتك مما يمنحك تجربة مستخدم أفضل عن طريق تحميل الصور بشكل غير متزامن. ستجعل تحميل مدونتك أسرع 4 أضعاف من ذي قبل.
تسريع تحميل مدونات بلوجر عن طريق كود تأخير ظهور الصور
في صفحات المدونة السابقة، كنت أعمل على تحسين سرعة صفحات المدون من خلال تنفيذ الاقتراحات من Pagespeed Insight، ووجدت المصطلح "تأجيل الصور خارج الشاشة "أو التحميل البطيء للصور. ثم أحاول تطبيق تقنية التحميل البطيء على مدونة بلوجر ولكني واجهت بعض المشكلات. تحسين الصور من أجل تحميل أسرع للصفحة، لقد جربت العديد من البرامج النصية ولكن كما تعلم، فإن البرنامج النصي نفسه يجعل تحميل الصفحة أبطأ. فهل من الممكن جعل تحميل المدونة أسرع مع كود تأخير تحميل الصور؟ الإجابة هي نعم، تقول الوثائق البطيئة أن الصور يتم تحميلها كسولًا بعد تحميل النص.
سأشرح اليوم كيفية التحميل البطيء لملفات الصور في المدونة وكيف تؤثر إيجابًا على درجة سرعة الصفحات.
ما هو jquery lazy load؟
كما تعلم، فإن الصور خارج الشاشة هي الصور التي تظهر أسفل الجزء المرئي من الصفحة أو تلك الصور التي لا يتم عرضها بالضبط على الشاشة التي تشاهدها أثناء تحميل الصفحة. لا يتم عرض الصور خارج الشاشة ولكنها تستغرق وقتًا طويلاً أثناء تحميل الصفحة وتؤثر على تجربة المستخدم. لذلك من الأفضل تحسين سرعة الصفحات من خلال تحميلها عندما يقوم المستخدم بتمرير الصفحة، وهو ما يسمى تأجيل التحميل أو التحميل البطيء. سيؤدي تأجيل تقنية تحميل الصور خارج الشاشة إلى تحميل الصور بعد تحميل الصفحة حتى لا يتشتت انتباه المستخدم وسيؤدي ذلك إلى تحسين تفاعل المستخدم. هنا تحتاج إلى معرفة كيفية تثبيت المكون الإضافي jQuery JavaScript lazy load في نص HTML الخاص بقالب blogger. اكتشف أفضل طريقة للتحميل البطيء لمدونات BlogSpot.
هذا الدليل سوف يساعدك لتثبيت إضافة وظيفة التحميل البطيء في مظهر(html) المدونة لتحسين سرعة تحميل الصفحة بسرعة. كما ترى، هناك العديد من المنشورات حول زيادة سرعة تحميل المدونة والعديد من الطرق لتسريع تحميل الموقع ولكن المكوّن الإضافي للتحميل البطيء للصور سيؤدي إلى تأخير تحميل الصورة وبالتالي ستزداد سرعة تحميل صفحتك.
بالنسبة إلى WordPress، هناك الكثير من المكونات الإضافية المتاحة للمساعدة في سرعة تحميل المدونة. Lazy load هو مكون إضافي لبرنامج WordPress يتسبب في اختلاف تحميل الصور ويجعل النص يتم تحميله بشكل أسرع من نشر الصور. ولكن ماذا عن مدونة بلوجر، كيف تضيف بنجاح برنامج تحميل بطيء (كود تأخير تحميل الصور) مثبت في قالب بلوجر الخاص بك؟ سأشارك برنامج jQuery البسيط للتحميل البطيء الذي سيساعدك على زيادة سرعة موقع الويب أو صفحة المدونة بشكل كبير. بمجرد تثبيت آلية التحميل البطيء في قالب موقع الويب الخاص بك، ستزيد سرعة الموقع بالتأكيد عند التحميل. بعد إضافة كود تأخير تحميل الصور، يمكنك رؤية التأثير الفوري على درجة سرعة الصفحات.
في كود blogger HTML، يمكنك مشاهدة الصورة الافتراضية src لجميع الصور، ويتبع الرابط السمة "data-original" التي لها عنوان URL الصحيح للصورة. لذا فإن السؤال الذي يطرح نفسه: كيف يعمل lazyloader في الواقع؟
تحميل الصفحة مقابل تحميل كسول
تحميل الصفحة: عند فتح أي عنوان URL، يطلب المستعرض الخاص بك البيانات من الخادم، ويقوم بتنزيل جميع الصور والنصوص والبرامج النصية، وكل ذلك يؤثر على الاستخدام الكبير للنطاق الترددي، مما يؤدي إلى بطء أداء تحميل الصفحة. تأثر تحميل صفحتك بشكل سيء وبالتالي معدل الارتداد يزيد. لذلك للتغلب على هذا، فإن تأجيل تحميل الصورة هو أفضل خيار لاعتماده.
التحميل الكسول: وهي آلية تأجيل تحميل جميع البيانات من الخادم حتى يتم طلبها بدلاً من التحميل مقدمًا. يمكن أن يؤدي ذلك إلى زيادة أداء الويب بشكل كبير عن طريق تقليل الحمل على استخدام النطاق الترددي المطلوب تقديمه وعرضه على الشاشة. التحميل البطيء للصور ليس سوى تحميل جميع ملفات الصور المعروضة على الشاشة فقط حسب الطلبات بالتسلسل.
البرنامج النصي Lazyloader: المحمل البطيء عبارة عن مكون إضافي jQuery مكون في JavaScript ويختلف في تحميل ملفات الصور أثناء تحميل صفحات الويب. لن يتم تنزيل الصور الموجودة خارج الشاشة خارج الجزء المرئي من الصفحة (منفذ العرض) حتى يقوم المستخدم بالتمرير. إذا كنت تستخدم عدة صور في منشورك، فإن التحميل البطيء سيجعل تحميل الصفحة أسرع عن طريق تحميل النص أولاً متبوعًا بالصور عند التمرير. علاوة على ذلك، فهو يساعد أيضًا في تقليل حمل الخادم.
أضف البرنامج النصي Lazy Load لتسريع تحميل الموقع / المدونة
أنت الآن تفهم أن التحميل البطيء للصور يحسن أداء الويب، دعنا نثبت برنامج lazyloader على موقع الويب الخاص بك. قبل القيام بأي شيء، قم بعمل نسخة احتياطية من HTML لمدونتك ومحتوياتها.
لجعل القالب بأكمله محملاً بطيئًا، يلزمك الانتقال إلى عرض HTML، ثم تعديل كل imgعلامة وفقًا لمتطلبات البرنامج النصي للتحميل البطيء.
اتبع الخطوات لتنفيذ برنامج نصي وآلية التحميل البطيء في أي موقع ويب بما في ذلك WordPress أو blogger:
1. قم بعمل نسخة احتياطية من القالب الخاص بك أولاً.
2. انتقل إلى لوحة معلومات بلوجر. اختر خيار " المظهر" من القائمة اليسرى وانقر على " تعديل HTML "
3. الآن في نهاية النموذج، سترى الرمز</body>. فقط فوق علامة نهاية النص هذه، قم بلصق نص التحميل البطيء التالي في القالب الخاص بك.
4. Nowonwords، أثناء كتابة صفحات المدونة، يجب عليك إضافة علامة lazyloader مع كل img علامة كما هو موضح أدناه:
استبدل الكود الحالي:
